2012年05月29日(火)

「jQuery Archive List Widget」ワードプレスの月別アーカイブを折りたたんで表示してくれるプラグイン

ワードプレスのウィジェット(サイドメニュー)部分にアーカイブを表示させている方、結構多いと思いますがワードプレスのデフォルトのアーカイブはお世辞にも見た目が良いとはいえません。

ドロップダウンにするとこんな感じ。
ちょっと見た目が・・・
アーカイブをドロップダウンで表示

月別表示だとこんな感じ。
これだとブログを長く続けているとすごく縦長になってしまいます。
アーカイブを月別で表示

両方ともCSSやPHPいじったりすれば解決はできなくもないんですが、とても面倒ですしワードプレス本体や使っているテーマのバージョンが変わった場合は再度変更する必要がある事も。

ここはプラグインで解決したいと思い、以下の事が実現できるプラグインを探してみました。

  • 通常は年別に折りたたみ表示しされいて、クリックすると月別が表示される
  • jQueryでアコーディオンかフェードでキレイに動作する

そして見つけたのがこちら「jQuery Archive List Widget
ワードプレス管理画面のプラグイン検索からだと似たような名前のプラグインがあるのでご注意を。
「jQuery Archive List Widget」で検索、作者は「iguel Useche」です。

jQuery Archive List Widgetの設定と使い方
上記しましたがダウンロードはこちら「jQuery Archive List Widget」か管理画面からインストールしてください。

プラグインのインストールと有効化の方法がわからない場合はこちらのページでご確認下さい。

インストールしたら管理画面左メニューの「外観」から「ウィジェット」に進み「jQuery Archive List」を表示したい部分にドラッグし表示設定します。
jQuery Archive List Widgetの設定
各項目の説明です。

Trigger Symbol
年項目の左側に表示されるシンボルを選べます。
Effect
項目をクリックしたときの動作を選べます。
Month Format
「月」の表示方法を選べます。
Extra options
「Show number of posts」は月表示の部分に記事の数を表示する / しない。
「Show posts under months」は月表示の下に記事のタイトルを表示する / しない
「Intially expand current year」現在の年の部分をあらかじめ開いた状態で表示する / しない

上の画像のように設定するとこのような表示になりました。
jQuery Archive List Widget
年部分をクリックすると開閉します。

こちらのサイトニコ生ガイドに導入したので実際の動作を確認できます。

このプラグインを探しているときに一緒に見つけたんですが、こちらのプラグイン「Collapsing Archives」もオススメです。
より細かい設定が可能です。

追記:
当サイト、試行錯誤でも使うことにしました。
jQuery Archive List Widget
CSSを調整してこんな感じになりました。

このエントリーをはてなブックマークに追加
はてなブックマーク - 「jQuery Archive List Widget」ワードプレスの月別アーカイブを折りたたんで表示してくれるプラグイン
[`yahoo` not found]
[`yahoo_users` not found]
[`evernote` not found]

コメントを残す

*」は入力必須項目


  • © 2010-2018 試行錯誤 All Rights Reserved.