Help us understand the problem. What is going on with this article?

【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>
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away