Speaking Design

Blogブログ

WordPressのカスタムメニューで思い通りのナビゲーションを作る

WordPressのカスタムメニューで思い通りのナビゲーションを作る

WordPressのカスタムメニュー(カスタムナビゲーションメニュー)を使うと、自分の好きな構成でナビゲーションを作る事ができます。
一度セットしてしまえばカンタンなんですが、WordPressのデフォルト状態では使えない…というかこの機能が隠れているので、最初だけ下準備が必要です。

そのあたりも含め、カスタムメニュー(カスタムナビゲーションメニュー)の作り方やカスタマイズ方法を紹介します。

目次

カスタムメニュー(カスタムナビゲーションメニュー)とは

WordPressでは固定ページ、カテゴリーなど様々な形式で記事を作りますが、そのうち好きな物だけをチョイスして並べることができるのがカスタムメニューです。

固定ページを好きな順番で並べたり、

  
・Home
・固定ページ3
・固定ページ1
・固定ページ2
  

形式の異なるページを混ぜたりと、

  
・Home
・固定ページ1
・カテゴリ1
・固定ページ2
・カテゴリ2
・カテゴリ3
  

かなり自由が効きますし、後から変更することもカンタンです。

ダッシュボードにメニューを出す

カスタムメニューの作成は、 WordPressのダッシュボードにある専用メニューから行うのですが、利用するには、使用しているテーマのfunctions.php内に以下の一行を加えておく必要があります。

  
register_nav_menu('GlobalNav', 'グローバルナビ');
  

『GlobalNav』『グローバルナビ』の箇所には好きな名前をつけられます。
これらの引数は、この後の工程でまた登場します。

ダッシュボードを確認

register_nav_menu()を加えてからWordPressのダッシュボードを確認すると『外観 > メニュー』という項目が追加されているので、選択して編集画面に入ります。

WordPressのダッシュボード『外観 < メニュー』
WordPressのダッシュボードに『外観 > メニュー』が追加されている

メニューの編集を行う

編集画面の左ペインには、固定ページやカテゴリー等、これまで作成した投稿タイプや記事が表示されています。この中からメニューに並べたい項目を選択して、右側のペインにセットすることでカスタムメニューを作ります。

左ペイン『メニュー項目を追加』:表示させたいものを選ぶ

カスタムメニューに表示させたい項目をチェックして『メニューに追加』を押すと、右側のペインに追加されます。

カスタムナビゲーションメニューの左ペイン
左ペインで表示させたい項目を選ぶ

右ペイン『メニュー構造』:メニューの表示順を選ぶ

右ペインに登録されたメニューを上下にドラッグして、好きな順番に並べ変えます。
『メニュー設定』欄の『メニューの位置』に、register_nav_menu()で設定した第二引数『グローバルナビ』と同名のチェックボックスがあるはずです。チェックを入れてから『メニューを保存』ボタンで保存します。

カスタムナビゲーションメニューの右ペイン
右ペインで表示する順番を選ぶ

これでカスタムメニューのセットは完成です。

メニューを画面に表示させる

作成したメニューを画面に表示させます。
任意のテンプレートファイル(index.phpやheader.php等)内に以下のように追加すると、カスタムメニューが画面に表示されます。

  
<?php wp_nav_menu(); ?>
  

メニューが表示されたところで該当箇所のソースコードを確認すると、おおよそこのような構成になっています。

  
<div class="menu-header-nav-container">
  <ul id="menu-header-nav" class="menu">
    <li id="ID名" class="クラス名"><a href="リンク">CASE</a></li>
    <li id="ID名" class="クラス名"><a href="リンク">SERVICE</a></li>
    <li id="ID名" class="クラス名"><a href="リンク">CONTACT</a></li>
  </ul>
</div>
  

div要素のクラス名やul要素のID名は『メニュー名』(この場合は『header-nav』)の名称に依存します。

WordPressのダッシュボード『外観 < メニュー』
ID名やクラス名は、メニュー名に由来

さて、コードを眺めてみると、

・ul要素がdivでラップされている。
・ul要素にID名やクラス名が加えられている。

など、ちょっと蛇足になりそうな箇所がありますよね。
引き続きこの辺りをカスタマイズしていきます。

パラメータでカスタマイズする

wp_nav_menu()では、各種パラメータを使うことで好みのソースコードに成形する事ができます。
例えば以下に対して、

  
<?php wp_nav_menu(); ?>
  

こんな感じでパラメータを加えると、

  
<?php wp_nav_menu(
  array(
    'theme_location'=>'GlobalNav',
    'container'=>''
    'menu_id'=>'',
    'menu_class'=>'',
    'items_wrap'=>'<ul>%3$s</ul>'
  )
);
 ?>
  

以下のように吐き出されるコードが多少すっきりします。

  
<ul>
  <li id="ID名" class="クラス名"><a href="リンク">CASE</a></li>
  <li id="ID名" class="クラス名"><a href="リンク">SERVICE</a></li>
  <li id="ID名" class="クラス名"><a href="リンク">CONTACT</a></li>
</ul>
  

パラメータの一覧は公式のリファレンスにありますが、以下、私がよく使う物だけ紹介します。

theme_location

register_nav_menu() の第一引数として登録したメニュー名(今回の例では『GlobalNav』)

container

ラップしたい要素を設定できます。初期値はdiv(div要素でラップ)です。

nav要素でラップする例

  
'container'=>'nav'
  

ラップしない例

  
 'container'=>''
  

menu_id

ul要素のID名を設定できます。初期値はダッシュボード上の『メニュー名』の名称(今回は『header-nav』)に由来します。

ul要素のID名を『menuID』にする例

  
'menu_id'=>'menuID'
  

ul要素のID名をなしにする例

  
'menu_id'=>''
  

menu_class

ul要素のクラス名を設定できます。初期値は『menu』です。

ul要素のクラス名を『menuClass』にする例

  
'menu_class'=>'menuClass'
  

ul要素のクラス名をなしにする例

  
'menu_class'=>''
  

items_wrap

ul要素のフォーマットを決める事ができます。ちょっとややこしいのですが、
・『%1$s』で『menu_id』の値
・『%2$s』で『menu_class』の値
・『%3$s』でリスト項目(li要素)
を表します。

<ul id=”menu_idの値” class=”menu_classの値”>のようにする例

  
'items_wrap'=>'<ul id="%1$s" class="%2$s">%3$s</ul>'
  

<ul>のみにする例

  
'items_wrap'=>'<ul>%3$s</ul>'
  

紹介の都合で重複していますが、<ul>のみの設定にするなら『menu_id』『menu_class』パラメータを定義する必要はないですね。

まとめ

  • register_nav_menu()で、ダッシュボードにカスタムメニュー編集用のメニューを表示
  • ダッシュボードの『外観 > メニュー』でカスタムメニューを編集
  • wp_nav_menu()で、カスタムメニューを画面に表示
  • 生成されたコードが使いづらければ、パラメータを使ってチューニングする

紹介した以外にもカスタムメニューに関するパラメータはたくさんありますが、これだけでも結構しのげるのではないでしょうか。
div要素のラップや、余計なクラス名の付記など、正直ありがた迷惑なおまけが多いですよね。
紹介した内容を駆使して、制作中のコードにフィットするカスタムメニューを作ってあげてください。