WordPressのカスタムメニューを利用したドロワーメニューをつける

WordPressにドロワーメニュー（ボタンを押すと横から出てくるメニュー）を付ける方法です。

実装方法自体はいくつも方法がありますので、とりあえずの一例として、今回はWordPressのカスタムメニューを用いる方法を。

カスタムメニューを使えば項目やリンク先は管理画面から変更できますので、納品後の柔軟な対応が可能なはずです。

PCのグローバルナビやサイドナビをそのままドロワーにするのではなく、モバイルでの閲覧時に適した内容と項目を並べることには多少の意義があるのではないでしょうか。

準備

まず以下の準備が必要です。

• カスタムメニューを有効にして設定する
• jQueryを使う
• ドロワーメニュー用のプラグインなどを使う

カスタムメニューやjQueryに関しては、他のサイトさんでも情報が色々あるため詳細な説明は省きます。

カスタムメニューの設定

今回はカスタムメニューをラッピングするdivを用いるので、以下のようにfooter.phpに設定します。もちろん場所やID名などの名称は適宜テーマや目的の完成図に合わせてご自由に。

//footer.phpに記述
<?php wp_nav_menu(
 array(
  'container' => 'div',
  'container_id' => 'slidenav',
  'menu' => 'slidenav',
  'menu_id' => 'menu--slidenav'
  ) 
); ?>

完成予想図としては概ね以下の形になります。(※設定の詳細はコーデックスの「テンプレートタグ/wp nav menu」)

<div id="slidenav">
<ul id="menu--slidenav">
<li><a href=">カスタムメニューの項目</a></li>
<li><a href=">カスタムメニューの項目</a></li>
</ul>
</div>

ドロワーメニュー用のプラグインなどを使う

今回はSimple Sidebarをドロワーメニュー実装のために用いますが、以前に簡単な説明をかいて記事にしていますのでそちらをどうぞ。

Simple Sidebar(ドロワーメニュー)の実装:メモ※当ブログ内の記事ですが別窓開きます

Simple Sidebarの設定によりますが、記述場所はたいていどこでも良く、今回はとりあえずfooter.phpに記述しています。

試していませんが、例えばSidrなど他のでも問題なく実装できると思います。今回の仕組みはかなり簡単ですから。

ちなみにSimple Sidebarを使う理由は、ドロワーメニューを右側に配置する際に基本設定で実装可能(Sidrは一手間かかる）なのと、閉じるボタンだけではなく画面を押すだけでもメニューを閉じることが可能な点です。

開くボタンの設置

headr.phpに以下の記述を追加します。

<div id="menuopen"><a id="menuopen__btn" class="btn--slidenav" href="javascript:void(0)">MENU</a></div>

具体的な設置位置は、サイトを構成する一番外側の要素の開始タグに接する場所、という認識でよいかと思います。#wrapや#continerなどサイトごとに合わせて設置して下さい。
次項のSimple Sidebarの設定次第では、bodyタグの直下でも動作はします。

もちろんクラス名や構造はご自由に。

閉じるボタンとSimple Sidebarの設定

footer.phpに以下の記述を追加します。

<script type="text/javascript">
jQuery( function($) {
$( '#menu--slidenav' ).before( '<div id="menuclose"><a id="menuclose__btn" class="btn--slidenav" href="javascript:void(0)">CLOSE</a></div>' );    
$( "#slidenav" ).simpleSidebar({
 settings: {
  opener: '#menuopen__btn',
  wrapper: '#continer'
 },
 sidebar: {
  align: 'right',
  width: 220,
  closingLinks: '#menuclose__btn'
 }
});
});
</script>

今回のちょっとした肝で、jQueryでカスタムメニューで出力されたコード内に「閉じるボタン」を設定しています。以下の部分がその箇所です。

$( '#menu--slidenav' ).before( '<div id="menuclose"><a id="menuclose__btn" class="btn--slidenav" href="javascript:void(0)">CLOSE</a></div>' );   

カスタムメニューの設定で設定した'menu_id' => 'menu–slidenav'でulにID名menu–slidenavが付きますので、beforeで要素をあとから追加しています。
Simple Sidebarはボタンがなくても開閉可能ですが、明示的に閉じるボタンがある方が良いかと思います。

cssの設定

ここまでで設定したidやclassに基づきますが、以下のようにcssを設定すれば完成です。

/* スマホ用ドロワーメニュー */
#slidenav{
    overflow: scroll;
    height: 100%;
    background-color: #333;
    -webkit-overflow-scrolling: touch;
}
#menu--slidenav{
    clear: both;
    width: 200px;
    margin-right: 10px;
    margin-left: 10px;
    border-top: 1px solid #1a1a1a;
    border-bottom: 1px solid #4d4d4d;
}
#menuopen{
    overflow: hidden;
    padding: 10px;
    background-color: #333;
}
#menuclose{
    overflow: hidden;
    padding: 10px;
}
#menu--slidenav .menu-item{
    font-size: 14px;
    line-height: 1.2;
    display: block;
    padding-top: .7em;
    padding-bottom: .7em;
    border-top: 1px solid #4d4d4d;
    border-bottom: 1px solid #1a1a1a;
}
#menu--slidenav .menu-item > a:link,
#menu--slidenav .menu-item > a:visited{
    text-decoration: none;
    color: #fff;
}
/* 開閉ボタン */
.btn--slidenav{
    font-size: 12px;
    display: block;
    box-sizing: border-box;
    padding: 5px;
    text-decoration: none;
    color: #fff;
    border: 1px solid #fff;
    border-radius: 5px;
}
#menuopen__btn{
    float: right;
    width: 4em;
}
#menuclose__btn{
    float: left;
    width: 5em;
}

-webkit-overflow-scrolling: touch;に関しては、前述しましたSimple Sidebarの記事をご覧下さい。

なお、下記の部分に関しては、単にボタンに用いる文字数が4文字と5文字であったからこの設定にしています。

#menuopen__btn{
    float: right;
    width: 4em;//「MENU」で4文字なので4文字分の幅を設定
}
#menuclose__btn{
    float: left;
    width: 5em;//「CLOSE」で5文字なので4文字分の幅を設定
}

画像を用いたりアイコンフォントを用いる場合、デザイン自体が違う場合は当然それに沿った設定にしてください。

モバイルにだけ表示するには？

モバイルにだけ表示するには、wp_is_mobile()関数を使って記載した場所の表示を分岐させるだけです。

cssのメディアクエリを用いて切り替えるのもよいでしょう。

まとめてフッターに呼び出す

下記の方法を使えばheader.phpやfooter.phpを触らずに、functions.phpと専用のjsファイル作成だけで実装可能です。

まず、Simple Sidebarの設定やボタンの追加をjsファイルにまとめます。今回は仮にutility.jsという名前でつくります。

jQuery( function($) {
//開くボタンを#headerの前に追加。サイトごとに適宜変更。
$('#header').before('<div id="menuopen"><a id="menuopen__btn" class="btn--slidenav" href="javascript:void(0)">MENU</a></div>');
//閉めるボタンを#menu--slidenavの前に追加。適宜変更。   
$( '#menu--slidenav' ).before( '<div id="menuclose"><a id="menuclose__btn" class="btn--slidenav" href="javascript:void(0)">CLOSE</a></div>' );
//スライダー用プラグインの設定。
 $( "#slidenav" ).simpleSidebar({
 settings: {
  opener: '#menuopen__btn',
  wrapper: '#continer'
 },
 sidebar: {
  align: 'right',
  width: 220,
  closingLinks: '#menuclose__btn'
 }
});
});

続いてfunctions.phpに以下のように記載します。今回はフッターに読み込みます。

//カスタムメニューを設定
add_action('wp_footer','add_slidenav_func');
function add_slidenav_func(){
 $slidenav = wp_nav_menu(
  array(
   'container' => 'div',
   'container_id' => 'slidenav',
   'menu' => 'slidenav',
   'menu_id' => 'menu--slidenav'
  )
 );
 return $slidenav;
}

//jsファイルをフッターに追加
add_action('wp_enqueue_scripts', 'slide_js_func');
function slide_js_func() {
 $dir = get_stylesheet_directory_uri();
 wp_enqueue_script('simplesidebar', $dir.'/jquery.simplesidebar.min.js','1.1.0',true);
 wp_enqueue_script('utility', $dir.'/utility.js','1.0.0',true);
 //パスなどはサイトにあわせて変更
}

サーバー内のjsファイルの位置とパスが合っていれば、これで表示自体はできるはずです。
あとはデザインなどを要調整。

jQueryで追加するのは手間要らずで楽ですし、ひとまとめにしておいた方が管理も用意になるメリットはあるのですが…。
テーマに書いた方が無駄に表示速度を落とさずに済む（どの程度のロスなのかは微妙なところですが）とも考えられますし、積極的にお勧めとはいえない心境です。

結び

冒頭に述べたとおり仕組み的には簡単で、カスタムメニューで出力されるコードの形に合わせたドロワーの設定をしているだけです。
そのため、設定を変えればウィジェットにも転用可能です。

もちろん各サイトごとに調整は必要になりますが。

なお、注意点としてましてはSimple Sidebar（他のプラグインでも同じかもしれませんが）で開閉すると、開くボタンを押した際にpositionで設定している要素がある場合、その場所と設定内容によっては横にズレます。

閉じるボタンを押すともとに戻るので実質問題はないのですが、気になる方は別のプラグインで試してみることをお勧めします。

一応、この記事にだけ上記のナビを実装してみました。
開くボタンは真ん中に寄せていますがそれ以外は上記のコードのままですので、様子は確認いただけるかと思います。
前述の要素がズレる様もご覧頂けます（直す時間がないのでそのままにしているだけですが…）。