サイドバーのカテゴリ一覧をアコーディオン表示に変更

こんにちは aonamiです。

Xeorybaseをテーマに使わせてもらいつつ、ブログカスタマイズを楽しんでいます。
デフォルトでのカテゴリー表示に味気無さを感じ、使いでの良いプラグインはないかなと探してみました。

今回は
jQuery Vertical Accordion Menu
というプラグインを使って、サイドバーにアニメイト表示するカテゴリー一覧を表示させてみました。

設定を完了させるまでの一連の流れを記載しております。
興味があればご覧頂ければと思います。

設定していきます

まず、
jQuery Vertical Accordion Menu をプラグイン新規追加からインストール、有効化させておきます。

サイドバーに表示させたい親子カテゴリーを先に設定

もう既に作成してあるのであれば、ここでの設定は不要です。

ダッシュボード、外観、メニューへと進み
表示させたい親子カテゴリーを作成しておいてください。

jQuery Vertical Accordion Menu 本体の設定をします

ダッシュボード、外観、ヴィジェットへと進みます。
デフォルトで入っているカテゴリーとjQuery Vertical Accordion Menuを入れ替えます(ドラッグ&ドロップ)

ボタンを押すと詳細設定の画面が開きます
上画像を参照頂きながら、説明していきます。

タイトル:web上で表示させたい任意の名前
メニューを選択:先ほど作成したメニューの名前を選択
以下はカテゴリーリストのアニメーション設定です。今回はHoverで設定。

必要に応じていろいろ変更を試してみてください。
コードを書き加えるわけではないので、元に戻すのも比較的楽かと思います。

設定は以上です。

こんな感じで表示されるようになったと思います。

あとがき

いかがでしたでしょうか。
アニメーションで子カテゴリが開いてくれるので、ちょっとブログ作成の上級者になった気分のプラグインでした。

一点だけ
このプラグイン スマホからの閲覧だと、しっかり機能してくれません。
まったく使えないという訳ではないのですが、スマホからカテゴリを使っての回遊はそれ程しないと思いますので
私はそのままにしてあります。

また時間のある時にでも、そこについて改良を加えようと思います。

コメントを残す

*