WordPressのカスタムメニューを使う

2023-02-27

カスタムメニュー（「外観」>「メニュー」）を使う方法。CSSフレームワークを使う場合に対応方法が２つ。

カスタムメニュー　方法1

カスタムメニューを使用する設定

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

メニューを表示させたい所に以下を記述

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

$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);

CSSフレームワークへ対応させる walker

Walker_Nav_Menuを上書きしてカスタマイズする。

end_el — 必要に応じて、要素の出力を終了します。
end_lvl — 要素が追加された後にリストを終了します。
start_el — 要素の出力を開始します。
start_lvl — 要素が追加される前にリストを開始します。

class Walker_hoge extends Walker_Nav_Menu {
    function start_el( &$output, $data_object, $depth = 0, $args = null, $current_object_id = 0 ) {
// Restores the more descriptive, specific name for use within this method.
		$menu_item = $data_object;

		if ( isset( $args->item_spacing ) && 'discard' === $args->item_spacing ) {
			$t = '';
			$n = '';
		} else {
			$t = "\t";
			$n = "\n";
		}
		$indent = ( $depth ) ? str_repeat( $t, $depth ) : '';

		$classes   = empty( $menu_item->classes ) ? array() : (array) $menu_item->classes;
		$classes[] = 'menu-item-' . $menu_item->ID;

		/**
		 * Filters the arguments for a single nav menu item.
		 *
		 * @since 4.4.0
		 *
		 * @param stdClass $args      An object of wp_nav_menu() arguments.
		 * @param WP_Post  $menu_item Menu item data object.
		 * @param int      $depth     Depth of menu item. Used for padding.
		 */
		$args = apply_filters( 'nav_menu_item_args', $args, $menu_item, $depth );

		/**
		 * Filters the CSS classes applied to a menu item's list item element.
		 *
		 * @since 3.0.0
		 * @since 4.1.0 The `$depth` parameter was added.
		 *
		 * @param string[] $classes   Array of the CSS classes that are applied to the menu item's `<li>` element.
		 * @param WP_Post  $menu_item The current menu item object.
		 * @param stdClass $args      An object of wp_nav_menu() arguments.
		 * @param int      $depth     Depth of menu item. Used for padding.
		 */
		$class_names = implode( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $menu_item, $args, $depth ) );
		$class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';

		/**
		 * Filters the ID attribute applied to a menu item's list item element.
		 *
		 * @since 3.0.1
		 * @since 4.1.0 The `$depth` parameter was added.
		 *
		 * @param string   $menu_item_id The ID attribute applied to the menu item's `<li>` element.
		 * @param WP_Post  $menu_item    The current menu item.
		 * @param stdClass $args         An object of wp_nav_menu() arguments.
		 * @param int      $depth        Depth of menu item. Used for padding.
		 */
		$id = apply_filters( 'nav_menu_item_id', 'menu-item-' . $menu_item->ID, $menu_item, $args, $depth );
		$id = $id ? ' id="' . esc_attr( $id ) . '"' : '';

		$output .= $indent . '<li' . $id . $class_names . '>';

		$atts           = array();
		$atts['title']  = ! empty( $menu_item->attr_title ) ? $menu_item->attr_title : '';
		$atts['target'] = ! empty( $menu_item->target ) ? $menu_item->target : '';
		if ( '_blank' === $menu_item->target && empty( $menu_item->xfn ) ) {
			$atts['rel'] = 'noopener';
		} else {
			$atts['rel'] = $menu_item->xfn;
		}
		$atts['href']         = ! empty( $menu_item->url ) ? $menu_item->url : '';
		$atts['aria-current'] = $menu_item->current ? 'page' : '';

		/**
		 * Filters the HTML attributes applied to a menu item's anchor element.
		 *
		 * @since 3.6.0
		 * @since 4.1.0 The `$depth` parameter was added.
		 *
		 * @param array $atts {
		 *     The HTML attributes applied to the menu item's `<a>` element, empty strings are ignored.
		 *
		 *     @type string $title        Title attribute.
		 *     @type string $target       Target attribute.
		 *     @type string $rel          The rel attribute.
		 *     @type string $href         The href attribute.
		 *     @type string $aria-current The aria-current attribute.
		 * }
		 * @param WP_Post  $menu_item The current menu item object.
		 * @param stdClass $args      An object of wp_nav_menu() arguments.
		 * @param int      $depth     Depth of menu item. Used for padding.
		 */
		$atts = apply_filters( 'nav_menu_link_attributes', $atts, $menu_item, $args, $depth );

		$attributes = '';
		foreach ( $atts as $attr => $value ) {
			if ( is_scalar( $value ) && '' !== $value && false !== $value ) {
				$value       = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
				$attributes .= ' ' . $attr . '="' . $value . '"';
			}
		}

		/** This filter is documented in wp-includes/post-template.php */
		$title = apply_filters( 'the_title', $menu_item->title, $menu_item->ID );

		/**
		 * Filters a menu item's title.
		 *
		 * @since 4.4.0
		 *
		 * @param string   $title     The menu item's title.
		 * @param WP_Post  $menu_item The current menu item object.
		 * @param stdClass $args      An object of wp_nav_menu() arguments.
		 * @param int      $depth     Depth of menu item. Used for padding.
		 */
		$title = apply_filters( 'nav_menu_item_title', $title, $menu_item, $args, $depth );

		$item_output  = $args->before;
		$item_output .= '<a' . $attributes . '>';
		$item_output .= $args->link_before . $title . $args->link_after;
		$item_output .= '</a>';
		$item_output .= $args->after;

		/**
		 * Filters a menu item's starting output.
		 *
		 * The menu item's starting output only includes `$args->before`, the opening `<a>`,
		 * the menu item's title, the closing `</a>`, and `$args->after`. Currently, there is
		 * no filter for modifying the opening and closing `<li>` for a menu item.
		 *
		 * @since 3.0.0
		 *
		 * @param string   $item_output The menu item's starting HTML output.
		 * @param WP_Post  $menu_item   Menu item data object.
		 * @param int      $depth       Depth of menu item. Used for padding.
		 * @param stdClass $args        An object of wp_nav_menu() arguments.
		 */
		$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $menu_item, $depth, $args );
	}


	public function end_el( &$output, $data_object, $depth = 0, $args = null ) {
		if ( isset( $args->item_spacing ) && 'discard' === $args->item_spacing ) {
			$t = '';
			$n = '';
		} else {
			$t = "\t";
			$n = "\n";
		}
		$output .= "</li>{$n}";
	}

}

WordPress Developer Resources

Walker_Nav_Menu – Class | Developer.WordPress.org Core class used to implement an HTML list of nav menu items.

カスタムメニュー　方法2

wp_get_nav_menu_items を使って取得して表示させる方法。メニューを表示させたいところに書く。
こっちの方が単純かもしれません。

<ul>
	<?php
	$main_menu = wp_get_nav_menu_items('top-menu', array());
	$count = 0;
　// メニューの展開の状態を数値で判断する
  // 0:親なし 1:親展開 2:親閉じる
	$submenuStatus = 0;

	foreach($main_menu as $menu){
		if(!$menu->menu_item_parent){
		  //　親 li has-child を付加し $parent_id に親のIDを代入
		  $parent_id = $menu->ID;
		  echo '<li class="has-child"><a href="'.$menu->url.'">'.$menu->title.'</a>';
		}

		if($parent_id == $menu->menu_item_parent){
      // 親のIDと同じ場合
		  if($submenuStatus==0){
　　　　// ul を付加してステータスを1
		    $submenuStatus = 1;
		    echo '<ul>';
		  }
		  echo '<li><a href="'.$menu->url.'">'.$menu->title.'</a></li>';
		}

		if (isset($main_menu[$count + 1])){
      // 次の要素がある場合かつ、次の要素の親IDが異なり ul 付加している場合
		  if($main_menu[$count + 1]->menu_item_parent != $parent_id && $submenuStatus==1){
		    echo '</ul>';
　　　　// ulを閉じたステータスへ変更
		    $submenuStatus = 2;
		  }
		}else{
		  if ($submenuStatus==1) {
		    echo '</ul>';
		    $submenuStatus = 2;
		  }
		}

		if (isset($main_menu[$count + 1])){
		  if($submenuStatus == 2){
　　　　// ulを閉じていたら 親 li を閉じる
		    echo '</li>';
		    $submenuStatus = 0;
		  }
		}
		$count++;
	}
	?>
</ul>

よかったらシェアしてね！