【WordPress】ナビゲーションメニュー をBootstrap5対応する（１階層）

ベース

・はじめに · Bootstrap v5.0
・テンプレートタグ/wp nav menu – WordPress Codex 日本語版

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

参考：
・Walker | Class | WordPress Developer Resources

実装（ソースコード）

walker

<?php
// =========================================================
// nav-menu-simple.php
// =========================================================
class Link_list_ex extends Walker
{

    public static $link_color = 'p-2 link-secondary';
    public static $active = 'active';


    public function walk( $elements, $max_depth, ...$args )
    {
        $link_color = self::$link_color;


        $list = array ();

        foreach ($elements as $item ){
            if($item->current){
                $list[] = "<a class=\"{$link_color}\" href=\"$item->url\">$item->title</a>";
            }else{
                $list[] = "<a class=\"{$link_color}\" href=\"$item->url\">$item->title</a>";
            }
        }

        return join("\n",$list );
    }
}

functions.php

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

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

ナビメニューの表示

<?php

$justify_content = "justify-content-around";

$opt = array(
    'echo'            => false,
    'walker'         => new Link_list_ex,
    'container'       => 'div',
    'container_class' => 'nav-scroller py-1 mb-2',
    'theme_location'  => 'site-nav',
    'items_wrap'      => '<nav id="%1$s" class="%2$s nav d-flex '.$justify_content.'">%3$s</nav>',
);

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

制限事項など

1階層しか想定してません