WordPressのグローバルナビを実装する方法

WordPressサイトには、グローバルナビというメインメニューがあるものも多いです。

当サイトで言えば、以下の部分がグローバルナビ。

このグローバルナビとなるHTMLをPHPで出力するだけならば、比較的簡単です。

けれど、グローバルナビのサブメニューなどを一般的なメニュー形式で表示させるのには、ちょっとしたCSSを書くコツが必要です。

このCSSの書き方は、自分でもすぐに忘れてしまうので、今回はメモがてら「グローバルナビの実装方法」を書き記しておこうと思います。

今回実装するのは、以下のようなFlexbox形式のメニューです。

マウスカーソルを乗せると、サブメニューが表示され、一般的なリストダウンメニューライクに動作します。

グローバルナビを実装する主な手順

WordPressにグローバルナビを実装する主な手順は以下です。

functions.phpにメニューを登録するためのコードを書く
テンプレートファイルにメニュー呼び出し用のコードを書く
style.cssに表示を整えるスタイルを書く

グローバルナビ動作の詳細に拘るわけではなければ、3回のコピペで実装することができます。

functions.phpにメニューを登録するためのコードを書く

まずは、テーマに対してカスタムメニューを追加するためのコードをfunctions.phpに記入します。

// カスタムメニューの「場所」を設定
register_nav_menu( 'header-navi', 'ヘッダーナビ' );

このコードが追加されたことにより、Wordpress管理画面の「外観」→「メニュー」に「位置の管理」タブが表示され、「ヘッダーナビ」項目が追加されます。

テンプレートファイルにメニュー呼び出し用のコードを書く

次に、テンプレートファイルのグローバルナビを表示させたい部分に以下のコードを貼り付けます。

<!-- Navigation -->
<nav id="navi" class="navi" role="navigation" itemscope itemtype="http://schema.org/SiteNavigationElement">
    <div id="navi-in" class="navi-in">
    <?php wp_nav_menu(
      array (
        //カスタムメニュー名
        'theme_location' => 'header-navi',
        //コンテナを表示しない
        'container' => false,
        //カスタムメニューを設定しない際に固定ページでメニューを作成しない
        'fallback_cb' => false,
        //出力されるulに対してidやclassを表示しない
        'items_wrap' => '<ul>%3$s</ul>',
      )
    ); ?>
  </div><!-- /#navi-in -->
</nav>
<!-- /Navigation -->

大抵のテーマであれば、グローバルナビはheader.phpに記載されているケースが多いです。

カスタムメニューを設定していない場合、デフォルトだと固定ページがメニューとして表示されます。ただ今回の場合、「’fallback_cb’ => false」を設定しているので、カスタムメニューを設定していない場合は、何も表示されない仕様にしています。

style.cssに表示を整えるスタイルを書く

上記までの編集では、グローバルナビは以下のようなリスト形式で表示されます。

これに対して、style.cssでCSSを書いてリストダウンメニュー形式となるように、表示を整えます。

/************************************
** グローバルメニュー
************************************/
.navi-in{
  /*幅を整える場合はwidthを設定する*/
  /*width: 1000px;*/
}
.navi-in > ul {
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
}
.navi-in > ul li {
  display: block;
  width: 176px;
  height: 50px;
  line-height: 50px;
}
.navi-in > ul li:hover > ul {
  display: block;
}
/*サブメニュー*/
.navi-in > ul .sub-menu {
  display: none;
  position: absolute;
  margin-left: 0;
  min-width: 240px;
  list-style: none;
  padding-left: 0;
  background-color: #fafafa;
  z-index: 99;
  text-align: left;
}
.navi-in > ul .sub-menu li {
  width: auto;
}
.navi-in > ul .sub-menu a {
  padding-left: 16px;
  padding-right: 16px;
}
/*サブメニューのサブメニュー*/
.navi-in > ul .sub-menu ul {
  top: -50px;
  left: 240px;
  position: relative;
}
.navi-in a {
  color: #333;
  text-decoration: none;
  display: block;
  font-size: 16px;
}
.navi-in a:hover {
  background-color: #f3f3f3;
  transition: all 0.3s ease 0s;
}
.navi-in a:hover > ul {
  display: block;
}

グローバルメニュー幅を調節する場合は、navi-inクラスに対して幅を指定してください。

後からスタイルシートでデザインを変更しやすいように、CSSはなるべく簡素になっています。