SlickNavというjQueryプラグインを使ってみました。
SlickNavとは、サブメニューが折りたたまれて表示されるスマホ用メニューを、サイトに簡単に設置できるスクリプトです。
それを、Wordpressのグローバルナビに利用してみたんですけど、これが思いのほか簡単に「折り畳み式のスマホ用グローバルナビメニュー」を実装できたので、その方法を紹介します。
目次
SlickNavを利用すると
とりあえず今回の方法を行うと、どのようになるかだけ先に紹介します。
今回の実装をすると、まず以下のようにページのトップに「Menu」ボタンが表示されます。
「Menu」ボタンを押すと、アコーディオン式にサブアイテムが折りたたまれたメニューが表示します。
三角のついているメニューを選択すると、折りたたまれたサブメニューが表示するという仕様です。
SlickNavを利用すると、Wordpressにこのようなメニューを簡単に設置することができます。
主な手順
SlickNavをWordpressに設置する主な手順は以下です。
- SlickNavのダウンロード＆設置
- SlickNav動作用のコードを書く
- スタイルシートで表示の調整
テーマに合わせた設定さえ行えれば、とても手軽に設置することができます。
ダウンロード＆設置
まずは、SlickNavから動作用のファイルをダウンロードします。
ダウンロードボタンを押すと「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プラグインだと思います。
simplicityのお世話になってます。
とてもニーズにあった使い方のできるテーマでありがたいです。
ちょうど、スマホでのmenuの設定にも望んでいた形の選択ができて、
すごく有難いのですが、一つわからない事がありまして、コメントにて
確認させていただければと思っています。
丁度、simplicityの公式も同じ事になっていると思うのですが、
スマホで、menuの中から参考・技術情報のページを選ぼうと思っても、
サブメニューの表示・非表示にしか機能しなく、
参考・技術情報のページ自体を開く事が出来ません。
どのようにしたらいいのか、よきアドバイスを下さい。
宜しくお願いします。