WordPressテーマにサブメニューを折りたためる「ツリー式モバイルメニュー」を設置するカスタマイズ方法

SlickNavというjQueryプラグインを使ってみました。

SlickNavとは、サブメニューが折りたたまれて表示されるスマホ用メニューを、サイトに簡単に設置できるスクリプトです。

それを、Wordpressのグローバルナビに利用してみたんですけど、これが思いのほか簡単に「折り畳み式のスマホ用グローバルナビメニュー」を実装できたので、その方法を紹介します。

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

SlickNavを利用すると

とりあえず今回の方法を行うと、どのようになるかだけ先に紹介します。

今回の実装をすると、まず以下のようにページのトップに「Menu」ボタンが表示されます。

スマホ用メニューの表示

「Menu」ボタンを押すと、アコーディオン式にサバアイテムが折りたたまれたメニューが表示します。

サブアイテムが折りたたまれたアコーディオン式メニュー

三角のついているメニューを選択すると、折りたたまれたサブメニューが表示するという仕様です。

折りたたまれたサブメニューの表示

SlickNavを利用すると、Wordpressにこのようなメニューを簡単に設置することができます。

主な手順

SlickNav - Responsive Mobile Menu Plugin for jQuery

SlickNavをWordpressに設置する主な手順は以下です。

  1. SlickNavのダウンロード&設置
  2. SlickNav動作用のコードを書く
  3. スタイルシートで表示の調整

テーマに合わせた設定さえ行えれば、とても手軽に設置することができます。

ダウンロード&設置

まずは、SlickNavから動作用のファイルをダウンロードします。

SlickNav - Responsive Mobile Menu Plugin for jQuery

ダウンロードボタンを押すと「SlickNav-master.zip」というファイルがダウンロードされます。

これを解凍して、中にある以下のファイルを利用します。

  • slicknav.css
  • jquery.slicknav.min.js

これをWordpressテーマ(子テーマ)内の以下の場所にコピペします。(フォルダがない場合は作成してください。)

  • css/slicknav.css
  • js/jquery.slicknav.min.js

これでファイルの設置は完了です。

動作用のコードを書く

今回、動作用のコードは一発でコピペできるようにまとめて書きたいと思います。

動作用のコードは、以下のようになります。これを、フッター部分の</body>手前に貼り付けて、テーマに合わせて一部を修正します。

とりあえず、すべてフッターでひとまとめにして設定しています。

子テーマでカスタマイズしない場合は、get_stylesheet_directory_uri()をget_template_directory_uri()にした方が良いかもしれません。

CSSファイルの読み込み

以下の、CSSファイルの呼び出しは、ヘッダーに書いても良いです。

ただ、フッターに書いた方がまとまりも良いですし、ページ読み込み時に余分なファイルを読む時間をあとに回せるので、こちらに書きました。

動作確認しても特に問題なく動作しているようです。

JSファイルの読み込み

JSファイルは「メニューとなるHTML要素(ulリスト)」よりも後に記入しないと動作しないようです。

WordPressだと、グローバルナビ部分よりも後半に書く必要があります。ですのでフッター手前で以下のように読み込みました。

jQueryが読み込まれていないテーマの場合は、コメントを外して、jQueryを有効にしてください。

jQuery UIは、メニューの開閉を凝ったものにしたい場合に利用します。

詳しくは公式のドキュメントを参照してください。

jQueryコード

最後にSlickNavを動作するためのコードを書きます。

「jQuery(‘.menu > ul’).slicknav();」のCSSセレクタ部分は、利用しているテーマのものを指定する必要があります。

また、そのとき注意しなければいけないのは、「グローバルナビのルート(最も親)となるHTML要素のCSSセレクタを書く必要がある」ということです。ルートのulをユニーク(一意)なCSSセレクタで指定する必要があります。

イメージで説明すると、以下の赤枠部分のみが選択されるCSSセレクタを指定します。

グローバルナビのルートのみを選択する

ダメな例

例えば、「jQuery(‘.menu ul).slicknav();」のように、何個も要素が当てはまるものを指定すると、以下のように、当てはまる要素がある分だけメニューが作成されます。

メニューボタンが複数作成されてしまう

ここら辺は、使用するテーマによっても変わってくるので、適切なCSSセレクタを選択してください。

オプション

slicknav()関数には、その他にも豊富なオプションが用意されているので、詳しくは公式のドキュメントを参照してください。

様々なオプション

メニューボタンをアイコンのみにしたりもできます。

アイコンのみのメニューボタン

スタイルシートで表示の調整

最後に、グローバルナビの表示に関するスタイルを指定します。

レスポンシブ表示にする場合は、以下のように書きます。

「.menu > ul」部分はテーマのグローバルナビにあったCSSセレクタを選択してください。

これで、通常表示時は、「Menu」ボタンは表示されず、画面幅が740px以下になった時に、グローバルナビが非表示になり、「Menu」ボタンが表示されます。

動作確認

ブラウザで表示させてみると、メニューボタンが表示され、グローバルナビのサブメニューが折りたたまれて表示されています。

折りたたみ式のスマホメニュー

まとめ

上記のように、SlickNavを利用すれば、手軽に「折りたたみ式モバイルメニュー」をサイトに設置することができます。

これまで、こういうのは、jQueryでHTMLノードを解析して処理をする必要があると思っていました。けれど、テキストでちょこちょこっと記述するだけで、大変な実装をこれだけ手軽に行えるのは楽で良いです。

「スマホ用のメニューを手軽に設置したい」、「スマホではサブメニューを非表示にしていたけどサブメニューも有効に利用したい」なんて場合には、おすすめのjQueryプラグインだと思います。

『WordPressテーマにサブメニューを折りたためる「ツリー式モバイルメニュー」を設置するカスタマイズ方法』へのコメント

  1. 名前:とおる 投稿日:2015/04/13(月) 04:54:48 ID:831eb284d

    simplicityのお世話になってます。
    とてもニーズにあった使い方のできるテーマでありがたいです。

    ちょうど、スマホでのmenuの設定にも望んでいた形の選択ができて、
    すごく有難いのですが、一つわからない事がありまして、コメントにて
    確認させていただければと思っています。

    丁度、simplicityの公式も同じ事になっていると思うのですが、
    スマホで、menuの中から参考・技術情報のページを選ぼうと思っても、
    サブメニューの表示・非表示にしか機能しなく、
    参考・技術情報のページ自体を開く事が出来ません。
    どのようにしたらいいのか、よきアドバイスを下さい。

    宜しくお願いします。

  2. わいひら 名前:わいひら 投稿日:2015/04/13(月) 11:00:15 ID:765840e94

    そういえば、あまり気にしていませんでしたが、スマホとかだと開けないですねこれ。
    パソコンとかからだと、右クリックメニューから開けますが、タップしかできない場合だと開閉にしかならないですね。
    ちょっと、後で公式ページで調べてみます。

  3. わいひら 名前:わいひら 投稿日:2015/04/13(月) 16:21:43 ID:765840e94

    こんな感じにオプション指定すれば良いようです。

    ツリーの開閉は、三角の部分以降をタップすれば良いようです。

  4. わいひら 名前:わいひら 投稿日:2015/04/13(月) 16:35:42 ID:765840e94

    Simplicityの方も次のバージョンで修正しておこうと思います。

  5. 名前:とおる 投稿日:2015/04/13(月) 20:20:23 ID:831eb284d

    さっそく、確認していただいた上に、修正方法まで調べてもらって、
    本当にありがとうございます。

    Simplicityのサイトの方も直ってますね。

    今後とも、宜しく御願いいたします。