今やブログはモバイル用に限られたスペースの中に、コンテンツを作成することになります。そんな時、上下や横からスライドしてくるドロワーメニューを実装したくなると思います。ここでは、Wordpressにドロワーメニューをどうやって組み込むのか、一から順番に紹介しようと思います。
つくって見る！
ドロワーメニューとは、画面の上下左右から必要に応じてスライドして表示されるメニューのことです。下記の画像は、当ブログに実装したドロワーメニューで、左を指定したドロワーメニューです。
これから、このドロワーメニューを組み込んでいきます。
多少、プログラミングの知識が必要になりますが、サンプルを利用しながら説明させてもらいますので、ゆっくりとやれば出来ると思います。
まずは、作業の流れから説明しましょう！
あなたは、Wordpressのテーマは何をお使いでしょうか？
そのテーマに既にドロワーメニューがあるかも知れません。もしあるなら出来るだけそれを使った方が良いです。少しの我慢であれは断然そちらをオススメします。
もしない場合は、これから一緒に作っていきましょう。
さて、そうは言っても、全部自前でつくることは出来ませんので、もうすでにこういった部品は市場に流通していますので、それを利用して作成していきます。今回使用するのは、Jqueryライブラリーの「drawer.js」です。まず下記のサイトをクリックして開いてください。
drawer.jsソースセットをZIPにダウンロードし解凍する
上記のサイトを開くと下記のような画面が表示されますので、ボタンをクリックしてください。
次の画面は、実際にダウンロードするサイトで、GitHubというサイトになります。これはネットワーク上にソースを保存しておく保管庫のようなもので、画面にあるようにサインアップを求められますが、ソースをダウンロードするだけなら特にサインアップやログインに必要はありませんので、無視してください。画面の②にあるClone or Downloadボタンをクリックしてください。
以下のようなポップアップウィンドウが表示されますので、赤枠で示したDownload ZIPボタンをクリックしてください。
ソースセットのサンプルを動かしてみる
私がダウンロードしたのは、バージョン3.2.2です。ディスクトップに解凍してソースセットの中には、sandboxというフォルダーがあります。このsandboxフォルダーのindex.htmlファイルが基本にファイルになり、このファイルをダブルクリックで起動すると、ブラウザが立ち上がりそのままサンプルとして実行できます。
ダウンロードしたZIPファイルのフォルダー構成は以下の通りです。ピンクで示したsandoboxの中のindex.htmlを実行してください。
起動したサンプルの左上に以下の形をしたボタンをクリックして実行します。
実際に起動したサンプル。上記のハンバーガーアイコンをクリックすると、左側にドロワーメニューが表示されました。このメニューは上から順に、
Top:上から降りてくるドロワーメニューサンプル
Left:左からスライドインするドロワーメニューサンプル
Right:右からスライドインするドロワーメニューサンプル
Navibar:上側にメニューバーを表示するサンプル
Fixed navbar:Navibarと同じだがスクロールしても固定される。
Sidebar：これも表示位置が左右になるが、スクロールアウトしない。
サンプルソース解説
それでは、上記のサンプルソースの解説をしていきます。かなり細かい図を載せてしまったので、スマートフォンでは見るのは難しいかも知れません。まぁこの手の技術解説を見る場合は当然パソコンやiPadになるとおもうのでそのまま進めます。
上記に記述したとおりsandboxフォルダにあるindex.htmlファイルの解説です。
下図に示したように、大きく6つのパートより構成されます。ある程度プログラミングが出来る方であれば、①や⑤および⑥の部分は、get_header()やget_footer()に置き換えればすぐにでもWordpress上に移植して実行できそうなことはわかると思います。
- CSSファイルを呼んでます。
後に、get_header()に置き換わります - 重要！bodyに独自クラスを付加しています
- ハンバーガーアイコン（メニュー）を作成
- li要素でメニュー項目を作成しています。特に、drawer～という独自クラスに注目してください。
- Jquery実行に必要なスクリプトファイルを呼んでいます。get_footer()に置き換え可能です。
- 案外忘れてしまいそうなスクリプト実行部分です。ここも同じくget_footer()に置き換わります。
この解説で特に重要なのは、②にあるbodyに、drawerクラスとdrawer–leftクラスを追加しているところです。このbodyに追加されるクラスによって、動作を切り替えています。左側からスライドインさせる場合は、ここにあるようにdrawer–leftクラスですが、右側からスライドインさせる場合は、drawer–rightクラスになりますし、まだ解説していませんが、ドロップダウンリストが子孫ノードのサブメニューを表示している場合は、drawer-openクラスが追加されたりします。これらの追加はすべてJavaScriptで実行されています。
必要な環境ファイル
WordPressに移植するには、どの環境ファイルが必要か確認しておく。なんと言ってもJqueryをはじめとしてJSファイルは忘れずに導入しておきたい。これらのファイルは、前述したdrawer.jsソースセットに含まれているものをそのまま使うことができます。
JSファイル
| ファイル | バージョン |
| jquery.min.js | Ver2.2.4 |
| iscroll.js | Ver5.2.0 |
| bootstrap.min.js | Ver.3.3.7 |
| drawer.min.js |
CSSファイル
| ファイル | |
| drawer.min.css | |
環境ファイルとしては、以上の5本だけです。CSSファイルは見た目をつくるファイルなので、もし修正する場合は、圧縮されたminファイルではなく、圧縮されていないdrawer.cssファイルも同梱されているので、こちらを使用します。
ちなみに、jquery.min.jsは本書では2.2系を使用していますが、実践したところ私のところの1.11.3でも動かすことができました。参考までに！
もう一点注意があります！
drawer.min.jsをロードする場合は、フッタでないと動きませんので、wp_enqueue_scriptのパラメータは以下の例題にようにしてください。
以下のコーディング例は、wordpress本体に移植する場合に既存のコードと合体させるか、function.phpに挿入してお使いください。
function my_enqueue_scripts() {
wp_deregister_script( 'jquery' );
wp_enqueue_script( 'jquery' , '//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js',array(),'1.11.3',false);
wp_enqueue_script( 'drawer_js', get_stylesheet_directory_uri() . "/drawer/js/drawer.min.js" ,array(),'1.1',true);
wp_enqueue_script( 'iscroll', '//cdnjs.cloudflare.com/ajax/libs/iScroll/5.2.0/iscroll.js',array('jquery'));
wp_enqueue_script( 'bootstrap', '//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js',array('jquery'));
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts',99 );
CSSの部分は以下のとおり。
function my_enqueue_styles() {
wp_enqueue_style('drawer_css', get_stylesheet_directory_uri() . '/drawer/css/drawer.css');
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_styles' );
bodyにクラスを付加する
まずWordpressへのDrawer.js移植の第1歩とし、bodyに以下のクラスを付加する。
- drawer
- drawer–left,drawer–right,drawer–top,drawer–sidebarなど
この作業はかなり重要なものなので、必ず以下の方法で追加してください。トラブル似合った場合、案外気づかないことが多いかも知れません。
wordpressの場合、以下の2つのコーディングがあるので好きな方で追加してください。
bodyの定義場所で直接追加する
header.php等bodyタグの定義場所で修正する方法
<body <?php body_class('drawer drawer--left'); ?>>
※左サイドからスライドインさせるドロワーメニューを例としています。
アクティブフィルターで追加する
function.php等別の場所で追加させる場合は、以下のアクティブフィルターを使うことが出来る
add_filter( 'body_class', 'my_class_names' );
function my_class_names( $classes ) {
$classes[] = 'drawer';
$classes[] = 'drawer--left';
$classes[] = 'drawer-close';
return $classes;
}
スクリプトを自動起動するコードの挿入
下記のコードをfunction.phpのどこかに挿入して、drawer.jsスクリプトを起動するようにしよう！ サンプルソースの⑥の部分ですね。
<?php
function my_footer() {
?>
<script>
$(document).ready(function() {
$('.drawer').drawer();
/* 以下はメニューをクリックした時に閉じるようにしていますが、必要なければ省いてください */
$('.drawer-nav').on('click', function() {
$('.drawer').drawer('close');
});
});
</script>
<?php
}
add_action('wp_footer','my_footer',99);
?>
独自メニュー部分を作成する
さて、ここまでは特に問題なく移植できていると思います。というかまだコーディングすることはほとんどなかったと思います。
それでは実際にメニューを作ってみましょう。
サンプルソース解説で図示した④の部分ですね。③の部分のコーディングは説明はいらないと思いますのでそのまま純粋にコピーしてお使いください。
通常メニューを作成する場合は、htmlのulタグを利用して作ります。階層メニューを作る場合も親要素のliに、ulタグを使って作ることができます。それはこれまでの作り方と全く同じです。
<nav class="drawer-nav" role="navigation">
<ul class="drawer-menu" id="nav">
<li><a href="#">MENU1</a></li>
<li class="drawer-dropdown">
<a class="drawer-menu-item" href="#">MENU2</a>
<ul class="drawer-dropdown-menu">
<li><a class="drawer-dropdown-menu-item" href="#">SUB1</a></li>
<li><a class="drawer-dropdown-menu-item" href="#">SUB2</a></li>
<li><a class="drawer-dropdown-menu-item" href="#">SUB3</a></li>
</ul>
</li>
<li><a href="#">MENU3</a></li>
<li><a href="#">MENU4</a></li>
</ul>
</navi>
このメニューのコーディング例はあとから使いますので、よく覚えておいてください。特にどんなクラスが使われているか注目。実際にイメージにすると以下のようなものです。
・MENU1
・MENU2
・SUB1
・SUB2
・SUB3
・MENU3
・MENU4
メニュー構築に使う特別なクラス
ここまで非常に簡単に説明していますが、既にドロワーメニュー構築の半分以上は出来ているかも知れません。
あとはここで使われているdrawer.jsのクラスとHTMLタグ（navi,ul,li,aそれぞれのタグ）の関連付けを勉強すれば、手動ならいつでも簡単にメニュー構築ができます。ここをちゃんと作れれば、勝手にメニューがスライドして、サブメニューが閉じたり開いたりしてドロワーかつドロップダウンのかっこいいメニューが構築できます。
bodyに追加されるクラスには、以下のものがあります
- drawer
- drawer–left
- drawer–right
- drawer–top
- drawer–sidebar
ハンバーグアイコンメニュー構築するためのクラスには、以下のものがあります
- drawer-toggle
- drawer-hamburger
メニュー構築に使われるクラスには以下のようなものがあります
-
drawer-navi
-
drawer-menu
-
drawer-menu-item
-
drawer-dropdown
-
drawer-dropdown-menu
-
drawer-dropdown-menu-item
以上のクラスの使い方を簡単にまとめてみた。
| 使用するクラス | 使用する部位 | 説明 |
| drawer | bodyクラス | drawer.jsを使う場合は必ずbodyに追加する必須のクラス |
| drawer–left | bodyクラス | 左側からスライドインするメニューの場合に付加する |
| drawer–right | bodyクラス | 右側からスライドインするメニューの場合に付加する |
| drawer–top | bodyクラス | 上部にクラシカルな固定メニューを表示する場合に付加するクラス |
| drawer–sidebar | bodyクラス | 左右サイドにメニューを固定表示する場合に付加するクラス |
| drawer-open | bodyクラス | ドロップダウンの状態により、スクリプトで自動挿入される |
| drawer-close | bodyクラス | ドロップダウンの状態により、スクリプトで自動挿入される |
| drawer-toggle | ハンバーガーアイコン | ハンバーガーアイコンボタンに必ず付加 |
| drawer-hamburger | ハンバーガーアイコン | ハンバーガーアイコンボタンに必ず付加 |
| drawer-navi | メニュー構築 | 構築するメニューは、このクラスを持ったnaviタグで挟む |
| drawer-menu | メニュー構築 | トップのuiタグに付加するクラス |
| drawer-menu-item | メニュー構築 | liタグに必ず付加するクラス |
| drawer-dropdown | メニュー構築 | サブメニューを持つliタグはまたaタグに付加する |
| drawer-dropdown-menu | メニュー構築 | サブメニューのulタグに付加するクラス。これをいれると自動的にサブメニューの開閉をしてくれる。 |
| drawer-dropdown-menu-item | メニュー構築 | 遷移させなければならないサブメニューアイテムに付加するクラス。このクラスがないとメニューは遷移しない。 |
| drawer-caret | キャレットを表示するスパンクラス | メニューの開閉を示す三角まーく”キャレット”を点ける場合に、<span class=”drawer-caret”></span>のようにして使う。 |
さらに詳しくdrawer.js用クラスやオプションについて知りたい場合は、以下が詳しく解説されています。
おさらい
さぁ、これでドロワーメニュー移植のための解説はおしまいです。ここでもう一度手順をおさらいをしてみます。
- 環境ファイルをwp_enqueue_style,wp_enqueue_scriptで追加する。
- bodyにクラスを追加する
- スクリプトを自動起動するコードの挿入
- ハンバーガーアイコンや独自メニュー（手動作成）を組み込む
wordpressで構築したカスタムメニューを使う場合は、wp-bootstrap-navwalkerというものを利用して上記の独自クラスを組み込が必要があります。こちらは別途記事としましたので下記のリンクページをご参照ください。
[/?p=11215]
番外編：ハンバーガーアイコンの色を変えたい！
読者の中には、ハンバーガーアイコンの色を変えたいと思っている方が多いと思いますが、ここをうまく解説しているサイトは見当たりませんでした。完璧ではありませんが、以下のスタイルを追加するとハンバーガーアイコンの文字の色、背景の色を変えることができます（文字の色の変更がいまいちかも？）。
/* ボタンの背景色（close) */
.drawer-hamburger {
background-color: #6c0!important; /* 閉じている時のボタンの背景色 */
}
/* ボタンの背景色（open) */
.drawer-hamburger:hover {
background-color: #f66!important; /* 開いている場合のボタンの背景色 */
}
/* ボタンの文字の色 */
.drawer-open .drawer-hamburger-icon,
.drawer-open .drawer-hamburger-icon:before ,
.drawer-open .drawer-hamburger-icon:after {
background-color: yellow!important; /* 開いている時のボタンの文字の色 */
}
.drawer-hamburger-icon,
.drawer-hamburger-icon:before,
.drawer-hamburger-icon:after {
background-color:white!Important; /* 閉じている時のボタンの文字の色 */
}
以上
