WordPress Twenty Twenty Three主题导航菜单项自定义类添加方法求助

TT3是WordPress的块主题，导航菜单使用核心导航块渲染，而非传统主题中硬编码的wp_nav_menu()函数，因此原来针对wp_nav_menu的nav_menu_css_class和nav_menu_link_attributes过滤器不再触发。以下是两种可行的解决方法：

方法一：用代码批量添加自定义类 #

通过render_block过滤器拦截导航块的渲染输出，直接为<li>和<a>标签添加自定义类，将以下代码添加到主题的functions.php文件或自定义插件中：

add_filter( 'render_block', function( $block_content, $block ) {
    // 为导航菜单项（<li>标签）添加自定义类
    if ( 'core/navigation-item' === $block['blockName'] ) {
        // 避免重复添加类，先检查是否已存在
        if ( strpos( $block_content, 'custom-nav-item' ) === false ) {
            $block_content = preg_replace( '/<li([^>]*)>/', '<li$1 class="custom-nav-item">', $block_content );
        }
    }

    // 为导航链接（<a>标签）添加自定义类
    if ( 'core/navigation-link' === $block['blockName'] ) {
        if ( strpos( $block_content, 'custom-nav-link' ) === false ) {
            $block_content = preg_replace( '/<a([^>]*)>/', '<a$1 class="custom-nav-link">', $block_content );
        }
    }

    return $block_content;
}, 10, 2 );

方法二：在站点编辑器中手动加类（适合单个/少量菜单项） #

如果不需要批量操作，可直接在编辑器中为指定菜单项添加类：

1. 进入WordPress后台，点击外观 > 编辑器打开站点编辑器
2. 找到页面中的导航块，点击要修改的菜单项
3. 在右侧侧边栏的高级选项中，找到附加CSS类输入框，输入自定义类名（如custom-nav-item），多个类用空格分隔
4. 点击右上角的保存按钮生效

内容的提问来源于stack exchange，提问作者Vadim H