【Wordpress】カスタムメニューを表示する2つの方法

カスタムメニュー（「外観」>「メニュー」）を使うとWordpress管理画面上でメニューの内容を編集したり自動追加したりできます。

カスタムメニューを使うための設定

functions.php

function menu_setup() {
  register_nav_menus( array(
    'header_menu' => 'ヘッダメニュー',
    'footer' => 'フッターメニュー',
  ) );
}
add_action( 'after_setup_theme', 'menu_setup' );

1. 基本的な表示方法

メニューを表示したい箇所にwp_nav_menu関数を使います。

header.php

<?php 
wp_nav_menu(array(
　'theme_location' => 'メニュー名'
));
?>

パラメータを追加する場合は以下のようなものがあります。

header.php

$args = array(
    'menu'            => '',
    'menu_class'      => 'menu', // メニューを構成するul要素につけるCSSクラス名
    'menu_id'         => '{メニューのスラッグ}-{連番}', // メニュを構成するul要素につけるCSSI ID名
    'container'       => 'div', // ulを囲う要素を指定。div or nav。なしの場合には false
    'container_class' => 'menu-{メニューのスラッグ}-container', // コンテナに適用するCSSクラス名
    'container_id'    => '', // コンテナに適用するCSS ID名
    'fallback_cb'     => 'wp_page_menu', // メニューが存在しない場合にコールバック関数を呼び出す
    'before'          => '', // メニューアイテムのリンクの前に挿入するテキスト
    'after'           => '', // メニューアイテムのリンクの後に挿入するテキスト
    'link_before'     => '', // リンク内の前に挿入するテキスト
    'link_after'      => '', // リンク内の後に挿入するテキスト
    'echo'            => true, // メニューをHTML出力する（true）かPHPの値で返す（false）か
    'depth'           => 0, // 何階層まで表示するか。0は全階層、1は親メニューまで、2は子メニューまで
    'walker'          => '', // カスタムウォーカーを使用する場合
    'theme_location'  => '', // メニュー位置を指定
    'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>', // メニューアイテムのラップの仕方。%1$sには'menu_id'のパラメータ展開、%2$sには'menu_class'のパラメータ展開、%3$sはリストの項目が値として展開
);
wp_nav_menu($args);

各パラメータの詳細

2. メニューにカスタムフィールドなどの値を表示したい場合

wp_get_nav_menu_itemsを使用して回します。

以下の例では、
カスタムメニューアイテムに設置したカスタムフィールド（画像）の値を
$menu => 'カスタムフィールド名'で取得しています。

header.php

<ul>
<?php
$main_menu = wp_get_nav_menu_items('メニュー名', array());
  foreach($main_menu as $menu){
    $icon = wp_get_attachment_image_src($menu->icon, 'full');
    $alt = get_post_meta($menu->icon, '_wp_attachment_image_alt', true);
    echo '<li><a href="'.$menu->url.'"><img src="'.$icon[0].'" alt="'.$alt.'">'.$menu->title.'</a></li>';
}
?>
</ul>

サブメニュー（副項目）がある場合

$menu->ID（各メニューのID）と$menu->menu_item_parent（親メニューのID）が一致するかどうかで出し分けます。

header.php

<ul>
<?php
$main_menu = wp_get_nav_menu_items('メニュー名', array());
$count = 0;
$submenu = false;

foreach($main_menu as $menu){
  if(!$menu->menu_item_parent){
    $parent_id = $menu->ID;
    echo '<li><a href="'.$menu->url.'">'.$menu->title.'</a>';
  }
  if($parent_id == $menu->menu_item_parent){
    if(!$submenu){
      $submenu = true;
      echo '<ul class="footer_lower-menu">';
    }
    echo '<li><a href="'.$menu->url.'">'.$menu->title.'</a></li>';
    if($main_menu[$count + 1]->menu_item_parent != $parent_id && $submenu){
      echo '</ul>';
      $submenu = false;
    }
  }
  if($main_menu[$count + 1]->menu_item_parent != $parent_id){
    echo '</li>';
    $submenu = false;
  }
  $count++;
}
?>
</ul>