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>手前に貼り付けて、テーマに合わせて一部を修正します。

<!-- SlickNav用のスタイル -->
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/css/slicknav.css">
<!-- テーマでjQueryが呼ばれてない場合 -->
<!-- <script src="//code.jquery.com/jquery-1.11.2.min.js"></script> -->
<!-- メニューの開閉を凝ったものにしたい場合(オプション機能利用時のみ) -->
<!-- <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script> -->
<!-- SlickNavのスクリプトファイル -->
<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/jquery.slicknav.min.js"></script>
<script>
//グローバルナビのCSSセレクタを指定する
jQuery(function(){
  jQuery('.menu > ul').slicknav();
});
</script>

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

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

CSSファイルの読み込み

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

<!-- SlickNav用のスタイル -->
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/css/slicknav.css">

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

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

JSファイルの読み込み

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

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

<!-- SlickNav用のスタイル -->
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/css/slicknav.css">
<!-- テーマでjQueryが呼ばれてない場合 -->
<!-- <script src="//code.jquery.com/jquery-1.11.2.min.js"></script> -->
<!-- メニューの開閉を凝ったものにしたい場合(オプション機能利用時のみ) -->
<!-- <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script> -->
<!-- SlickNavのスクリプトファイル -->
<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/jquery.slicknav.min.js"></script>

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

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

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

jQueryコード

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

<script>
//グローバルナビのCSSセレクタを指定する
jQuery(function(){
  jQuery('.menu > ul').slicknav();
});
</script>

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

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

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

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

ダメな例

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

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

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

オプション

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

様々なオプション

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

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

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

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

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

.slicknav_menu {
  display:none;
}

@media screen and (max-width: 740px) {
  /* グローバルナビのCSSセレクタを指定する */
  .menu > ul {
    display:none;
  }

  .slicknav_menu {
    display:block;
  }
}

「.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

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

    //グローバルナビのCSSセレクタを指定する
    jQuery(function(){
      jQuery('.menu > ul').slicknav({
        allowParentLinks: true,
      });
    });
    

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

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

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

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

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

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

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

  6. 名前:そら豆 投稿日:2017/03/02(木) 23:59:50 ID:eacb47d81

    フォーラムでも以前同じような質問させていただいたのですが、実践したいことが書いてあるこの記事を見つけましたので質問させてください。

    この方法をsimplicity2の子テーマで実行しようとしているのですが、いまいち反映されません。

    申し訳ないのですが、simplicity2の子テーマの場合はどこにコードを書けば反映されるでしょうか?
    とりあえず一旦カスタマイズを行なったファイルは削除して0の状態です。
    無知な私にも教えていただけると嬉しいです。

    【行ったこと】

    子テーマにはcss,jsファイルがなかったので以下のように新たに作り、DLしたコードをコピーしました。

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

    footer.phpを親テーマからコピーして子テーマに作成し、動作用コードを手前にコピー。
    同じくJSコード、jQueryコードをfooter.php内の前にコピー。

    子テーマstyle.cssにスタイルシートをコピー。

    となります。

    わかりづらいと思いますが、アドバイスをいただけると嬉しいです。

  7. アバター画像 名前:わいひら 投稿日:2017/03/03(金) 07:56:22 ID:ba807cb09

    Simplicityでは、既にこの機能はついていて、テーマカスタマイザーからモバイルメニューを選択できます。
    なので、わざわざ子テーマで機能を実装する意図は何でしょうか。

    いずれにせよ、申し訳ないですが、当サイトでは、カスタマイズがうまくいかない原因を探ることまではできません。
    というのも、書き込んだ内容からでは、全ての状態を把握することはできませんし、サイトがわからないので見ることはできませんし、見れたとしてもPHP部分のコードを確認することはできないからです。
    また、プラグインの兼ね合いとかもあるので、全ての原因を調べるということはできません。
    もし、どうしても子テーマでカスタマイズしたい場合は、クラウドソーシングサービスなどに、カスタマイズを行ってくれるワーカーさんもおられますので、依頼いただければと思います。

  8. 名前:そら豆 投稿日:2017/03/03(金) 18:02:53 ID:fa6146b22

    ありがとうございます。
    カスタマイズから簡単に変更ができました。

    そしてお恥ずかしい質問をしてしまい、失礼いたしました。

  9. アバター画像 名前:わいひら 投稿日:2017/03/05(日) 12:48:27 ID:527283fcc

    いえいえ、何か機能を付加するために自前でカスタマイズするのかと思ったもので。
    機能で、問題が解決できたようでよかったです。