WordPressテーマの作成｜外観のメニューをヘッダーメニューに反映させる方法

最近、管理することになったWordPressのサイトに設置されていたヘッダーメニューがテーマに直書きされたメニューだったので、「外観」＞「メニュー」で設定して反映できるようにしたいと思ってやった方法を共有します。

コンテンツ [hide]

外観のメニューをヘッダーメニューに反映させる方法

まず、外観のメニューで設定されたものがヘッダーメニューに反映されるためには、下記の条件を満たす必要があります。

「メニューの位置」を選択できるようにする
テーマヘッダー(header.php)にメニューを出力するコードを記入
「外観」＞「メニュー」の設定

それでは、順番に見てみましょう。

「メニューの位置」を選択できるようにする

まずは、「外観」＞「メニュー」のところで「メニューの位置」の選択ができるようにします。方法は、下記のコードをテーマのための関数 (functions.php)に追記します。

PHP

// カスタムメニューを追加
function add_custom_menu(){
  register_nav_menus(array(
    'header-navi' => 'ヘッダーナビ',
    'footer-navi' => 'フッターナビ',
  ));
}
add_action('after_setup_theme','add_custom_menu');

ここでは、ヘッダーナビとフッターナビの２つを選択できるようにしてみました。

テーマヘッダー(header.php)にメニューを出力するコードを記入

次に、メニューを出力するコードをヘッダーに記入します。テーマヘッダー(header.php)に下記のコードを追記します。

PHP

<nav>
<?php
wp_nav_menu(array( 
  'theme_location' => 'header-navi',
  'container_class' => 'クラス名',
  'container_id' => 'ID名',
  'items_wrap' => '<ul>%3$s</ul>'
)); 
?>
</nav>

上の「クラス名」「ID名」はそれぞれul要素をラップするdiv要素に付けられる属性です。class名のところを削除すると、ごちゃごちゃしたクラス名が入ってしまうので適当なものを入れておいた方が良いと思います。このような設定で実際にHTMLとして出力されるのは、下記のようなコードです。

HTML

<nav>
  <div id="ID名" class="クラス名">
    <ul>
      <li><a href="#">メニュー１</a></li>
      <li><a href="#">メニュー２</a></li>
      <li><a href="#">メニュー３</a></li>
    </ul>
  </div>
</nav>

ちなみに、サブメニューを設定するとこんな感じになります。

<nav>
  <div id="ID名" class="クラス名">
    <ul class="clearfix">
      <li><a href="#">メニュー１</a>
        <ul>     
          <li><a href="#">サブメニュー１</a></li>
        </ul>
      <li>
      <li><a href="#">メニュー２</a>
        <ul>
          <li><a href="#">サブメニュー２</a></li>
        </ul>
      <li>
      <li><a href="#">メニュー３</a>
        <ul>
          <li><a href="#">サブメニュー３</a></li>
        </ul>
      <li>
    </ul>
  </div>
</nav>

本来は、classやid属性がごちゃごちゃしているのですが、基本的な構造だけを抽出するとこんな感じになります。

「外観」＞「メニュー」の設定

これは言うまでもないかもしれませんが、メニューを新規作成して、「メニューの位置」でヘッダーナビにチェックを入れます。

以上の方法で「外観」＞「メニュー」で設定したものが表のページに反映されるようになります。

参考までに、出力したグローバルメニューのコーディング例をサンプルでご紹介します。

HTML

<nav>
  <div class="menu-container">
    <ul>
      <li><a href="#">メニュー１</a>
        <ul>     
          <li><a href="#">サブ１</a></li>
        </ul>
      <li>
      <li><a href="#">メニュー２</a>
        <ul>
          <li><a href="#">サブ２</a></li>
        </ul>
      <li>
      <li><a href="#">メニュー３</a>
        <ul>
          <li><a href="#">サブ３</a></li>
        </ul>
      <li>
      <li><a href="#">メニュー４</a>
        <ul>
          <li><a href="#">サブ４</a></li>
        </ul>
      <li>
      <li><a href="#">メニュー５</a>
        <ul>
          <li><a href="#">サブ５</a></li>
        </ul>
      <li>
      <li><a href="#">メニュー６</a>
        <ul>
          <li><a href="#">サブ６</a></li>
        </ul>
      <li>
    </ul>
  </div>
</nav>

CSS

nav {
  background: #148eaa;
}
nav .menu-container ul {
  list-style: none;
}
nav .menu-container > ul {
  margin-left: auto;
  margin-right: auto;
  width: 600px;
  padding: 0;
}
nav > .menu-container > ul > li {
  float: left;
  width: calc(100% / 6);
  position: relative;
  text-align: center;
  box-sizing: border-box;
}
nav > .menu-container > ul > li > a{
  border-right: 1px solid #ade8f5;
}
nav .menu-container > ul > li:first-child > a{
  border-left: 1px solid #ade8f5;
}
nav .menu-container ul li a{
  display: block;
  line-height: 3em;
  color: #fff;
  text-decoration: none;
}
nav > .menu-container > ul:after {
  content: ".";
  display: block;
  visibility: hidden;
  line-height: 0;
  clear: both;
}
nav > .menu-container > ul li ul {
  list-style: none;
  position: absolute;
  z-index: 9999;
  top: 3em;
  left: 0;
  margin: 0;
  padding: 0;
  width: 100%;
}
nav .menu-container > ul li ul li {
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: all 0.2s ease;
  box-sizing: border-box;
}
nav ul li:hover ul li {
  overflow: visible;
  height: 3em;
  box-sizing: border-box;
  background: #00A7BA;
}

以上が、外観のメニューをヘッダーメニューに反映させる方法でした。

WordPressとデザインが学べるWebメディア