【WordPress】ナビゲーションメニューをBootstrap5のドロップダウンにする

2022年7月29日

その他

code

ベース

・Dropdowns (ドロップダウン) · Bootstrap v5.0
・テンプレートタグ/wp nav menu – WordPress Codex 日本語版

オプションのwalkerを指定することで、実現します。

参考：
・Walker_Nav_Menu | Class | WordPress Developer Resources

実装（ソースコード）

walker

<?php
// =========================================================
// nav-menu.php
// =========================================================
class Walker_nav_menu_ex extends Walker_Nav_Menu {
  function start_lvl( &$output, $depth = 0, $args = null ) {
    $output .= "";
  }
  function end_lvl( &$output, $depth = 0, $args = null ) {
    $output .= "";
  }
  function start_el( &$output, $item, $depth = 0, $args = Array(), $id = 0 ) {
	  $active="";
      $d_lg_none="";

	  if($item->current){$active=" active ";}

	  $title = $item->title;

      if (in_array('menu-item-has-children', $item->classes)) {
        // 親の場合
        $output .= "\n"."<li class=\"nav-item dropdown{$d_lg_none}\">";
        
		$sub ="";
        if($depth == 1){$sub=" sub";}

		$output .="\n<a class=\"nav-link dropdown-toggle$active$sub\" href=\"$item->url\" id=\"navbarDropdown\" role=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">$title</a>";

        $output .= "\n" . $indent . '<ul class="dropdown-menu" aria-labelledby="navbarDropdown">'."\n";

      }
      else {
        // 子の場合
		if($depth == 0){
	        $output .= '<li class="nav-item">';
    	    $output .= "<a class=\"nav-link$active\" href=\"$item->url\">$title</a>";
		}
		if($depth == 1){
	        $output .= '<li>';
    	    $output .= "<a class=\"dropdown-item\" href=\"$item->url\">$title</a>";
		}
      }
  }
  function end_el( &$output, $item, $depth = 0, $args = null ) {
      if (in_array('menu-item-has-children', $item->classes)) {
        // 親の場合
        $output .= "\n".'</ul></li>';
      }
      else {
        // 子の場合        
        $output .= "\n".'</li>';
      }
  }
}

functions.php

require_once get_theme_file_path('/nav-menu.php' );

テーマのfunctions.phpで、nav-menu.phpを読み込んでください。

ナビメニューの表示

<?php
$opt = array(
    'echo'            => false,
    'walker'         => new Walker_nav_menu_ex,
    'container'       => '',
    'container_class' => '',
    'theme_location'  => 'header-nav',
    'items_wrap'      => '<ul id="%1$s" class="%2$s navbar-nav me-auto mb-2 mb-lg-0">%3$s</ul>',
);

if ( has_nav_menu( 'header-nav' ) ) {
    $wp_nav_menu_ex =wp_nav_menu( $opt );
    echo $wp_nav_menu_ex;
}
?>

ナビメニューを表示したいところで、上記のように呼び出します。