WordPressの月別アーカイブを年ごとに折りたたんでアコーディオンにする3つの方法

公開日：2016.04.13

お客様からのリクエストで、WordPressのサイドバーに表示させる月別アーカイブを年ごとまとめて折りたたむ必要がありました。

省スペース化のためにはこれまでは全部まとめてドロップダウン形式にすることがほどんどだったので、年ごとに折りたたみというのは経験がなく、いくつかの方法を検討したのでその記録を残します。

今回検討したのは以下の3通り。

プラグインCollapsing Archives
プラグインjQuery Archive List Widget
プラグインを使わないカスタマイズ

プラグインCollapsing Archives

今回の目的の通り年ごとにアーカイブを折りたたむためのプラグイン。
本記事執筆時（2016年4月12日に確認した時点）でプラグインの最終更新が8ヶ月前になっているのでこのまま更新されない状態が続くようなら今後使わないほうがよさそう。

ウィジェットから追加する方法の他に、テンプレートファイルに直接コードを書き表示させる方法があります。
ただしこの場合、管理画面上に設定画面は無く、コードの中でオプションを書いて設定する形になるので慣れてない人には使いづらいかも。
ウィジェットから追加してしまったほうが、ウィジェット上で設定できるので楽。

いろいろ設定をいじってみるとどうもうまく動かない項目がある（っぽい？）模様。
例えば設定の「Leave Current Year Expanded by Default（デフォルトで現在の年を展開させた状態にしておく）」あたりはチェックを入れてあっても初期表示情報で閉じてしまっていました。

設定画面で設定項目が多く、正直こんなに高機能じゃなくてももっとシンプルなのがいいなぁと思いつつもうひとつ見つけたプラグイン（以下）を試すことに。

プラグインjQuery Archive List Widget

本記事執筆時（2016年4月12日に確認した時点）で最終更新が2ヶ月前。WordPressの最新バージョンと互換性があるとなっており前述のCollapsing Archivesよりも新しい。

こちらもウィジェットから追加すると設定画面が出てきます。
Collapsing Archivesより高機能ではない分、設定画面が分かりやすくて良いです。
年をクリックした時、月が出現するエフェクトはスライド（アコーディオン）、フェード、エフェクト無しから選ぶことができます。

年の表示が「2016」となって「年」という文字が付かないんですが、プラグインのファイルをいじったりするのが面倒であればCSSで表示させてしまったほうが楽。
出力されるHTMLソースを見ると年を囲むaタグにはjaw_yearsというclassが付与されているので、その後ろに「年」という文字が表示されるようにします。
ただしこの場合、記事数は非表示の設定にします。

a.jaw_years:after {
    content: '年';
}

また、Trigger Symbolは三角マークかプラスマイナスマークを選択できますが、自分のデザインにしたければEmpty Space（空白）を選んで、矢印はCSSで表示させると良いです。

a.jaw_years {
    background: url(../images/arrow1.gif) no-repeat left top;
    display: block;
    padding-left: 30px;
}

出力されたHTMLソースを見ると、展開したliタグにexpandedというクラスが付く仕様になっているようなので、展開時にアイコンを別のものに変更して表示させたい場合は以下のようにします。

.expanded a.jaw_years {
    background: url(../images/arrow2.gif) no-repeat left top;
}

プラグインを使わないカスタマイズ

もうひとつ検討したのはプラグインを使わない方法。
考え方の参考例として、例えば以下で紹介されているコードのような感じで月別アーカイブのリストを年ごとに分けて表示させます。

WordPressで年別に分けて月のアーカイブリストを表示する方法

年の文字をホバーもしくはクリックした時にそれぞれの月がスライドして出てくればOKです。これに使うjQueryはよくあるシンプルなもので大丈夫ですが、例えば以下で紹介されているようなコードを少しアレンジすればいけると思います。

[WordPress][tips]カテゴリーメニューをプラグインなしでアコーディオンに。

以上です。