🎉

wp_nav_menuじゃ出来ないときに見る用メモ

2024/01/09に公開

WordPress

tech

wp_nav_menuは簡単にナビメニューを出せるけど、
「余計なクラスは付けたくない」
「ナビアイテムをn個ずつdivで囲みたい」
「色々カスタマイズしたい」
など柔軟な作りが出来ない

そんな時はwp_get_nav_menu_objectを使用する

header.php

<?php
//get menu data
//arg: please insert nav menu name
$header = wp_get_nav_menu_object('header');
//get menu items
$header_items = wp_get_nav_menu_items($header->term_id);
?>
<header class="header">
  <nav class="header__nav js-drawer-menu">
    <ul class="header__items">
    <?php 
    foreach($header_items as $index => $header_item) {
    //ナビゲーションラベル（日本語メニュー名）
    $label = $header_item->title;
    //URL
    $url = $header_item->url;
    //説明欄（英語メニュー名）
    $desc = $header_item->description;
    //CSS class (オプション)
    $classes = $header_item->classes;
    $classOp = implode(" ", $classes);

    if(is_front_page() || is_home()) { //フロントページ
      if(strstr($classOp, 'is-hoge') === false) { //is-hogeクラスがない場合
        echo '<li class="header__item ' . $classOp . ' js-drawer-link"><a class="header__link" href="' . $url . '"><span class="header__desc">' . $desc . '</span>' . $label . '</a></li>';
      } else { //is-hogeクラスがある場合
        echo '<li class="header__item ' . $classOp . ' js-drawer-link"><a class="header__link" href="' . $url . '" target="_blank" rel="noopener noreferrer"><span class="header__desc">' . $desc . '</span>' . $label . '</a></li>';
      }
    } else { //フロントページ以外
      if(strstr($classOp, 'is-hoge') === false) { //is-hogeクラスがない場合
        echo '<li class="header__item ' . $classOp . ' js-drawer-link"><a class="header__link" href="' . home_url('/') . $url . '"><span class="header__desc">' . $desc . '</span>' . $label . '</a></li>';
       } else { //is-hogeクラスがある場合
        echo '<li class="header__item ' . $classOp . ' js-drawer-link"><a class="header__link" href="' . home_url('/') . $url . '" target="_blank" rel="noopener noreferrer"><span class="header__desc">' . $desc . '</span>' . $label . '</a></li>';
        }
      }
    }
    ?>
    </ul>
  </nav>
</header>

ただしこの方法はメニュー名から取得しているので、メニュー名位が変更されると機能しなくなります
そのため、ロケーション名から取るのが良いかと思います

functions.php

function my_menu_init() {
  register_nav_menus(
    array(
      'header'  => 'ヘッダーメニュー',
    )
  );
}
add_action( 'init', 'my_menu_init' );

header.php

<?php
//$header = wp_get_nav_menu_object('header');
//$header_items = wp_get_nav_menu_items($header->term_id);

$location_name = 'header'; //insert location name
$locations = get_nav_menu_locations(); //get location of all navigation menus
$header_id = $locations[$location_name]; //get menu id
$header_object = wp_get_nav_menu_object($header_id); //get menu object
$header_items = wp_get_nav_menu_items($header_object->term_id); //get menu items
$header_item_length = count($header_items);
?>

参考
https://www.imamura.biz/blog/24087

Discussion