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

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

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

寝ログのグローバルナビ

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

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

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

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

実装したグローバルナビの動作

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

スポンサーリンク
レクタングル(大)広告

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

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

  1. functions.phpにメニューを登録するためのコードを書く
  2. テンプレートファイルにメニュー呼び出し用のコードを書く
  3. 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はなるべく簡素になっています。

動作確認

単に上記のコード編集をしただけでは、以下のように表示されて、グローバルナビは表示されません。

カスタムメニューを設定しないとグローバルメニューは表示されない

これは、テンプレートファイルでwp_nav_menu関数を利用した際に、「カスタムメニューが設定されていないとメニューを表示しない設定」になっているからです。

グローバルナビを表示させ、動作確認をするには、カスタムメニューを作成する必要があります。

WordPress管理画面の「メニュー」項目を開いて、カスタムメニューを作成してください。

Wordpress管理画面のメニュー項目でカスタムメニューを作成する

メニューを作成したら「位置の管理」タブを選択し、「ヘッダーナビ」に対して、「作成したメニュー」を選択してください。

位置の管理タブでカスタムメニューを選択

上記のように、カスタムメニューを設定すると、以下のようにグローバルメニューが表示されます。

実装したグローバルナビの動作[4]

グローバルメニューが表示され、サブメニューもリストダウン形式で表示されるようになりました。

まとめ

今回紹介した方法で、簡素なグローバルメニューを作成することが可能です。

グローバルメニューの実装で、個人的に一番面倒なのは、CSSでのリストダウンメニューの実装です。今回サンプルとして書いたCSSさえあれば、ある程度リストダウン形式のメニュー実装方法は分かるかと思います。

というか、自分が覚えられないので、備忘録として書いたみたいなもんです。このメニューCSSを1から思い出しながら書くには、かなり時間を浪費するもので。