プラグイン無しでWordPressのカスタムメニューをアコーディオンメニューにカスタマイズ!wordpressやjQuery、macについてのtipsを中心に綴ります。wordpressのサイト作成時、あんまりウィジェットとかカスタムメニューとか利用してなかったんですが、最近ようやく便利さに気づいて利用するようにしてます。レスポンシブサイトの隆盛もあって、グローバルナビや各種ナビゲーションをテキストベースで設定できる機会も増えてきたので、こちらもお客さんもサクサク更新できるってのが非常にありがたいです。今回はサイドメニューをサッとアコーディオンメニューにする小ネタです。人気講師が教える本格Webサイトの作り方カスタムメニューに自動的に付加されるCSSクラスなどをざっとおさらい設定にもよりますが、「global_menu」という名称でカスタムメニューを作成した場合、大体下記のようなhtmlが生成されます。</li></ul>今回は2階層のナビゲーションを設定してみました。カスタムメニュー特有のcssが設定され、IDも付与されているのでメニューごとのデザイン変更も容易です。その中でも「menu-item-has-children」クラスに注目です。子メニューを持つメニューにはこのクラスが付与されるので、これを利用してアコーディオンメニューを作ります。jQueryのtoggleでサクッとアコーディオンメニュー!あとはうまいこと要素を指定してjQueryのtoggleメソッドでGOです。http://www.jquerystudy.info/reference/effects/toggle.htmlこのリファレンスサイト超わかりやすいですね!では、テンプレート内の任意の場所か、読み込んでいる外部ファイルにjavascriptをcssを追加します。}ポイントはeachを使って「.menu-item-has-children」を持つ要素を個別に処理するところでしょうか。slideToggle()の数値を変更すると開閉の速さを変更できます。アコーディオンが開いている状態のメニューに特定のクラスを付与する場合はこんな感じになります。});})(jQuery);動作サンプルはこちらこれで省スペースなカスタムメニューの完成です!カスタムメニュー激便利なのでもう少し勉強したい。管理画面での設定時、メニュー個別にクラスをつけたり、タイトル属性つけたりと細かな設定ができるので、さらに色んなアレンジが出来そうです。ブログの更新情報はこちらで配信しています。記事を読むTwitterウィジェットをレスポンシブ対応させる最後の手段(かもしれない。optimizerを使用時、imagemagick関連のエラーを解決する。CSSの:beforeに&nbsp;を設定するadwpxWordPressのテーマ制作やテンプレートについての概念など、実際にサイトを制作しながらWordPressを知ることができます。制作するだけでなく、ユーザビリティからSEO、さらにはパフォーマンス改善にも触れているという充実ぶり。オリジナルテーマ制作のお供にどうぞ!定番のO'Reilly本でJavaScriptを深く学びましょう!気になる箇所をざっと読むだけでも、とても参考になります。読みを繰り返すのがオススメ。超良書です!WordPressプラグインの開発から運用までカバーする、プラグイン開発のまさに「バイブル」です。セキュリティやマネタイズにも触れられていて参考になるところ多すぎです。サンプルが大充実!定番のjQuery入門書です。本の内容に沿って制作を進めるだけで、即実戦投入できる程の機能ができ上がります。解説が丁寧且つチートシートも付いているのでjQueryについての理解がぐんと深まりますよ!wordpressに慣れてくると、今度は痒いところに手が届く細やかなカスタマイズをしたいですよね。phpを利用したカスタマイズからデータベースに直接アクセスする方法がとにかく丁寧に解説されています。5.7系で多言語サイト設定の基本をおさらい〜基本設定編〜【地味】window.open()で開いたポップアップ内から指定のリンクを親ウインドウの別タブで開くふと気づくとMarkerClustererのアイコン画像が404エラー・・・!対処法です。APIにSandboxなるステータスが追加されていた。bxSliderを使用時、任意のスライドで止めるVagrantの動作が遅かったので共有フォルダ設定とVirtualBox環境のメモリ設定を見直してみました。wordpressやjQuery、macについてのtipsを中心に綴ります。