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

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

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

寝ログのグローバルナビ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

テーマにカスタムメニューが追加された状態

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

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

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

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

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

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

スタイルを適用していないグローバルメニュー

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

グローバルメニュー幅を調節する場合は、navi-inクラスに対して幅を指定してください。
後からスタイルシートでデザインを変更しやすいように、CSSはなるべく簡素になっています。

動作確認

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

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

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

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

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

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

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

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

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

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

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

まとめ

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

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

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