WordPress

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

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

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

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

  • 「メニューの位置」を選択できるようにする
  • テーマヘッダー(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');

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

テーマヘッダー(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="#">メニュー1</a></li>
      <li><a href="#">メニュー2</a></li>
      <li><a href="#">メニュー3</a></li>
    </ul>
  </div>
</nav>

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

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

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

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

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

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

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

See the Pen
nav-menus
by kenichi (@ken81)
on CodePen.

HTML

<nav>
  <div class="menu-container">
    <ul>
      <li><a href="#">メニュー1</a>
        <ul>     
          <li><a href="#">サブ1</a></li>
        </ul>
      <li>
      <li><a href="#">メニュー2</a>
        <ul>
          <li><a href="#">サブ2</a></li>
        </ul>
      <li>
      <li><a href="#">メニュー3</a>
        <ul>
          <li><a href="#">サブ3</a></li>
        </ul>
      <li>
      <li><a href="#">メニュー4</a>
        <ul>
          <li><a href="#">サブ4</a></li>
        </ul>
      <li>
      <li><a href="#">メニュー5</a>
        <ul>
          <li><a href="#">サブ5</a></li>
        </ul>
      <li>
      <li><a href="#">メニュー6</a>
        <ul>
          <li><a href="#">サブ6</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;
}

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

最近の記事

  1. CSS

    要素の配置が簡単に決まるFlexboxの使い方
  2. CSS

    CSS|中央寄せが効かないときは・・・
  3. WordPress

    WordPressの立ち上げからサイト構築までの初期手順
  4. CSS

    レスポンシブウェブデザインの基本|メディアクリエリの設定
  5. CSS

    擬似クラス「:first-child」「:last-child」はどうして効かな…
PAGE TOP