プラグイン無しでWordPressのカスタムメニューをアコーディオンメニューにカスタマイズ!

  JavaScript, jQuery, WordPress 

photo credit: Kasaa via photopin cc

wordpressのサイト作成時、あんまりウィジェットとかカスタムメニューとか利用してなかったんですが、最近ようやく便利さに気づいて利用するようにしてます。

レスポンシブサイトの隆盛もあって、グローバルナビや各種ナビゲーションをテキストベースで設定できる機会も増えてきたので、こちらもお客さんもサクサク更新できるってのが非常にありがたいです。

今回はサイドメニューをサッとアコーディオンメニューにする小ネタです。

カスタムメニューに自動的に付加されるCSSクラスなどをざっとおさらい

設定にもよりますが、「global_menu」という名称でカスタムメニューを作成した場合、大体下記のようなhtmlが生成されます。

今回は2階層のナビゲーションを設定してみました。

カスタムメニュー特有のcssが設定され、IDも付与されているのでメニューごとのデザイン変更も容易です。

その中でも「menu-item-has-children」クラスに注目です。

子メニューを持つメニューにはこのクラスが付与されるので、これを利用してアコーディオンメニューを作ります。

jQueryのtoggleでサクッとアコーディオンメニュー!

あとはうまいこと要素を指定してjQueryのtoggleメソッドでGOです。

jQuery リファレンス:toggle
http://www.jquerystudy.info/reference/effects/toggle.html

このリファレンスサイト超わかりやすいですね!

では、テンプレート内の任意の場所か、読み込んでいる外部ファイルにjavascriptをcssを追加します。

■javascript

■css

ポイントはeachを使って「.menu-item-has-children」を持つ要素を個別に処理するところでしょうか。

また、slideToggle()の数値を変更すると開閉の速さを変更できます。

尚、 アコーディオンが開いている状態のメニューに特定のクラスを付与する場合はこんな感じになります。

動作サンプルはこちら

これで省スペースなカスタムメニューの完成です!

カスタムメニュー激便利なのでもう少し勉強したい。

管理画面での設定時、メニュー個別にクラスをつけたり、タイトル属性つけたりと細かな設定ができるので、さらに色んなアレンジが出来そうです。

何で今まで使ってこなかったのか・・・!!

コレ聴きながら書きました!

今年のfujirockが楽しみじゃーーい!

ブログの更新情報はこちらで配信しています。

   

follow us in feedly

ad

wpx

  • WordPressのテーマ制作やテンプレートについての概念など、実際にサイトを制作しながらWordPressを知ることができます。
    制作するだけでなく、ユーザビリティからSEO、さらにはパフォーマンス改善にも触れているという充実ぶり。
    オリジナルテーマ制作のお供にどうぞ!
  • JavaScript 第6版

    定番のO'Reilly本でJavaScriptを深く学びましょう!気になる箇所をざっと読むだけでも、とても参考になります。ざっと読みを繰り返すのがオススメ。超良書です!
  • サイトの拡張性を飛躍的に高める WordPressプラグイン開発のバイブル

    WordPressプラグインの開発から運用までカバーする、プラグイン開発のまさに「バイブル」です。

    セキュリティやマネタイズにも触れられていて参考になるところ多すぎです。
  • サンプルが大充実!定番のjQuery入門書です。
    本の内容に沿って制作を進めるだけで、即実戦投入できる程の機能ができ上がります。
    解説が丁寧且つチートシートも付いているのでjQueryについての理解がぐんと深まりますよ!
  • wordpressに慣れてくると、今度は痒いところに手が届く細やかなカスタマイズをしたいですよね。phpを利用したカスタマイズからデータベースに直接アクセスする方法がとにかく丁寧に解説されています。個人的には第5章、「プラグインの自作」が物凄く役に立ちました!
PAGE TOP ↑