久々に自作のコード紹介になります、網干です。

今回はほぼコピペで完成してしまうようなスマホ専用メニューの作成方法をご紹介致します。
メニューの項目はアコーディオン形式で表示しますので、項目が多くなっても対応できます！
本記事を読む事で下記のようなメニューを作成することができます。

※本記事では「大項目」は見出しのみリンクなし、「中項目」はリンクありの想定でメニューを作成します。

では早速、横から割り込むようなスマホ専用メニューを作っていきましょう。

WordPressのメニューでスマホで表示するメニューを作成する

まずはじめに、WordPressのメニューから新規メニューの作成を行います。

今回は「大項目」「中項目」でメニューを作成しました。
メニューの作成が完了したら「メニューを保存」ボタンを押して確定します。

以上で、メニューの準備は完了になります。

bodyタグの下にスマホ用メニューのコード（htmlタグ、Javascript、jQuery）を貼り付ける

bodyタグの次の行に下記コードを追記します。
※基本的にはheader.phpのコードに追記することになると思います。

<!-- メニュー開閉ボタン設置 -->
<a id="menu-button" onclick="dispSpMenu();">めにゅー</a>
<!-- メニュー表示エリア設置 -->
<div id="sp-menu">
<?php
  // メニュー取得
  wp_nav_menu( array('menu' => 'てすとめにゅー', 'container' => ''));
?>
</div>

<script>
  /* スマホメニューにクラス付与 */
  // 要素取得
  var elmsMenuItem = document.querySelectorAll('#sp-menu .menu > li > a');
  
  // 要素がある？
  if(elmsMenuItem.length > 0) {
    for(var iCnt = 0; elmsMenuItem.length > iCnt; iCnt++ ) {
      // 要素にクラス付与
      elmsMenuItem[iCnt].classList.add('sp-menu-toggle');
    }
  }
  
  /* スマホ用メニューの表示切替 */
  function dispSpMenu() {
    // 要素取得
    var elmSpMenu = document.getElementById('sp-menu');
    // スマホメニュー表示中？
    if( elmSpMenu.style.left == '0px' ){
      elmSpMenu.style.left = '-300px';
    } else {
      elmSpMenu.style.left = '0px';
    }
  }
  
  /* アコーディオンメニュー開閉ギミック追加 */
  function AccordionMenu() {
    jQuery(this).next().slideToggle( 300 );
  }
  
  jQuery(".sp-menu-toggle").click( AccordionMenu );
</script>

7行目の”wp_nav_menu”の’てすとめにゅー’の箇所を作成したメニューの名前に変更することで、自作したメニューの内容でスマホ専用メニューを作成することができます。

コードの見栄えやファイル管理を考えると、script部分はまとめて別ファイルにして読み込ませる方が良さそうですね。
ですが、今回は後先のことを考えずに「コピペでできる！」という部分を追求して作成します！

コードの貼り付けは以上です。
続けて、CSSの設定を行いましょう。

スマホ専用メニューのCSSを設定する

下記CSSを設定します。
※基本的にはstyle.cssのコードに追記することになると思います。

#menu-button {
    width: 100px;
    padding: 10px 0;
    margin-left: 5px;
    margin-top: 5px;
    color: #FFF;
    text-align: center;
    text-decoration: none;
    text-shadow: 0px 0px 3px rgba(0,0,0,0.5);
    background: -moz-linear-gradient(top,#BFD9E5, #3D95B7 50%,#0080B3 50%,#0099CC);
    background: -webkit-gradient(linear, left top, left bottom, from(#BFD9E5), color-stop(0.5,#3D95B7), color-stop(0.5,#0080B3), to(#0099CC));
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border: 1px solid #0099CC;
    -moz-box-shadow: 1px 1px 1px rgba(000,000,000,0.3),inset 0px 0px 3px rgba(255,255,255,0.5);
    -webkit-box-shadow: 1px 1px 1px rgba(000,000,000,0.3),inset 0px 0px 3px rgba(255,255,255,0.5);
    cursor: pointer;
    position: fixed;
    z-index: 10;
    transition: all 0.5s linear;
    display: none;
}

#sp-menu {
    left: -300px;
    width: 275px;
    height: 100%;
    background-color: rgba(255, 55, 55, 0.95);
    position: fixed;
    overflow: auto;
    z-index: 9;
    display: block;
    transition: all 0.5s ease-out;
}

#sp-menu .menu {
    padding-left: 30px;
    margin-top: 55px;
    line-height: 25px;
}

#sp-menu .menu .sub-menu {
    display: none;
}

@media screen and (max-width: 1000px) {
    #menu-button {
        display: block;
    }
}

ボタンスタイルは下記のサイト様を参考にさせて頂きました。
参考：5つの効果で作る、よく使うCSS3ボタンデザインサンプル集

47行目の”@media screen and (max-width: 1000px)”の指定で、画面の横幅が1000px以下になったらメニューボタンが表示されるように設定しています。
もし1000pxではなく、もっと小さな横幅の時にメニューを表示したい場合は1000の値をもっと小さくしてください。

CSSの設定は以上です。

以上で、スマホ専用メニューが表示されるようになります！
細かいスタイルの修正は、CSSでなんとかごまかしましょう！

WordPressの関数を使うことで楽にメニューの作成が完了してしまいます！

いかがでしたか？

WordPressの関数を使用することで楽にメニューの項目が引き抜けてしまいます。
メニュー項目の設定自体はそこまで深い知識を必要としないので、お客様にお出しする際にも「この部分を変えればスマホ専用のメニューを変えることができます」と紹介できるのが良いですね。

ではまた！

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。