折り畳み式アーカイブウィジェットを作成するWordPressカスタマイズ方法。プラグイン不要コピペのみ。

今回は、Wordpressアーカイブウィジェットのリスト表示を、プラグインを必要とせず、コピペのみでスッキリと表示できるコードを書いてみたので、そのカスタマイズ方法の紹介です。

スポンサーリンク
レクタングル(大)広告

アーカイブのリスト表示は更新するほど長くなる

WordPressのアーカイブウィジェットのリスト表示は、更新を長く続ければ続けるほど邪魔な存在になってきます。

というのも、更新をすればするほど、以下のように長いアーカイブリストになるからです。

Wordpressアーカイブウィジェットのデフォルト表示

僕なんか、たかだか2年ちょっとの更新期間なので、これぐらいで済んでいます。けれど、もっと長くブログを続けている場合、長さはこんなものでは済まみません。

流石に、これでは長すぎるので、更新年ごとに折りたためるようにすれば、かなりすっきりするかと思います。

というわけで、いろいろ試行錯誤してコードを書いてみた結果、以下のように表示できるようになりました。

折りたたみ式Wordpressアーカイブウィジェット

以下では、プラグインを使用せず、コピペのみで、このようにできるカスタマイズ方法を紹介します。

カスタマイズの主な手順

今回のカスタマイズに必要な主な手順は以下です。

  1. style.cssにCSSをコピペ
  2. jQueryコードをコピペ
  3. アーカイブウィジェットの確認

基本的に、2回コピペするだけと非常に簡単です。テンプレートファイルでPHPすら編集しないので、カスタマイズを誤っても致命的なエラーになることもないと思います。

style.cssにCSSをコピペ

まずは、折り畳みアーカイブウィジェットで使用するスタイル記入します。

style.cssに以下のコードをコピペしてください。

テーマによってデザインが変わるので、テーマごとにスタイルシートを調節する必要はあるかもしれません。

jQueryコードをコピペ

次に、jQueryコードを記入します。

テーマに、JavaScriptコードを記載するためのファイルがあれば、そこに以下のようにコピペします。

テーマや子テーマに、JavaScriptコード記述用のファイルがない場合は、フッターの</body>手前に以下のように記述してください。

上記のコードは、Simplicityフォーラムhidekichiさんが書き込まれた、以下のコードを参考に書かせていただきました。ありがとうございます。

参考 Simplicity フッターアーカイブのデザイン案 | codepen

hidekichiさんの案の方が、デザイン的には格好いいと思います。

今回書き加えた部分としては、フッター以外で、投稿数を表示していなくても使用でき、また複数アーカイブウィジェットを使用しても全てが折り畳みアーカイブとなるようにしてみました。

アーカイブウィジェットの確認

あとは、Wordpress管理画面の「外観→ウィジェット」にあるアーカイブウィジェット確認します。

ウィジェットの設置

まず、アーカイブウィジェットが設置されていない場合はドラッグ&ドロップで設置してださい。

2016-02-16_11h21_25

アーカイブウィジェット設定の確認

アーカイブウィジェットの設定を確認します。

利用できるケース

折りたたみ式アーカイブが利用できる設定は、通常リストに投稿数を表示させている時と

アーカイブで投稿数を表示している時

デフォルト状態のアーカイブ設定の時のみです。

通常のアーカイブリスト

利用できないケース

以下のように「ドロップダウン表示」にチェックが入っていると、利用できない仕様になっています。

「トップダウン表示」にチェックが入っていると折り畳みされない

タイトル部分の設定は、今回の折り畳み式アーカイブには影響しません。

動作確認

以上のカスタマイズを終えると、以下のような「折り畳み式アーカイブウィジェット」を利用できるようになります。

折りたたみ式Wordpressアーカイブウィジェット[3]

投稿数を表示しない場合はこんな感じ。

 

折りたたみ式アーカイブウィジェット(投稿数を表示してないバージョン)

もちろん、フッターのウィジェットエリアなどでも利用できます。

折りたたみ式アーカイブはフッターでも利用可能

当サイトのサイドバーでも動作を確認できます。

折り畳み表示がされていない場合は、ブラウザをリロードするか、ブラウザキャッシュを削除してみてください。

まとめ

今回のカスタマイズでファイル編集することといえば、コピペでコードを貼り付けるくらいなので、誰にでも簡単にできるのではないかと思います。

というわけで、「ブログの更新を長く続けていると、アーカイブウィジェットが長くなりすぎて使いづらい」なんて場合や、「アーカイブを年ごとにまとめたい」なんて場合は、今回紹介したカスタマイズは、手軽にできておすすめです。

この機能は、Simplicity2.0.9にて実装されています。Simplicityを利用している場合は、コードが重複するのでカスタマイズは不要です。