如何在WordPress导航区块的自定义链接中添加onclick JavaScript函数？

你遇到的问题其实是两个核心点：一是core/navigation-link区块的属性白名单里并没有onclick，直接在attrs里添加不会被渲染；二是javascript:void(0)这类URL会被WordPress的安全过滤机制清空，导致href变成空值。下面给你几个可行的解决方案：

方法一：通过类名+JavaScript绑定事件（推荐） #

这种方式更符合WordPress的开发规范，也更灵活易维护。

步骤1：添加带类名的导航链接 #

修改你原来的过滤器代码，给链接添加一个唯一的类名（注意区块属性里用className而不是class），同时把URL换成#避免被过滤：

add_filter( 'block_core_navigation_render_inner_blocks', function( $inner_blocks ) {
    $inner_blocks[] = [
        'blockName' => 'core/navigation-link',
        'attrs' => [
            'label' => 'Login',
            'url' => '#',
            'kind' => 'custom',
            'className' => 'login-trigger' // 自定义类名，用于定位元素
        ],
        'innerBlocks' => [],
        'innerHTML' => '',
        'innerContent' => [],
    ];
    return $inner_blocks;
} );

步骤2：用JavaScript绑定点击事件 #

创建一个自定义JS文件（比如custom-nav.js放在主题的js目录下），添加事件绑定逻辑：

document.addEventListener('DOMContentLoaded', function() {
    const loginLink = document.querySelector('.login-trigger');
    if (loginLink) {
        loginLink.addEventListener('click', function(e) {
            e.preventDefault(); // 阻止默认的跳转行为
            myfunction(); // 调用你的自定义函数
        });
    }
});

最后在主题的functions.php里注册并加载这个JS文件：

add_action( 'wp_enqueue_scripts', function() {
    wp_enqueue_script( 
        'custom-navigation-scripts', 
        get_template_directory_uri() . '/js/custom-nav.js', 
        array( 'jquery' ), 
        '1.0', 
        true 
    );
} );

方法二：直接修改渲染后的HTML（快速解决） #

如果你不想额外写JS，可以用render_block过滤器直接修改导航链接的HTML输出，给<a>标签加上onclick属性：

// 先添加带类名的导航链接（同方法一的步骤1）
add_filter( 'block_core_navigation_render_inner_blocks', function( $inner_blocks ) {
    $inner_blocks[] = [
        'blockName' => 'core/navigation-link',
        'attrs' => [
            'label' => 'Login',
            'url' => '#',
            'kind' => 'custom',
            'className' => 'login-trigger'
        ],
        'innerBlocks' => [],
        'innerHTML' => '',
        'innerContent' => [],
    ];
    return $inner_blocks;
} );

// 修改渲染后的HTML，添加onclick
add_filter( 'render_block', function( $block_content, $block ) {
    // 定位到目标导航链接区块
    if ( $block['blockName'] === 'core/navigation-link' && isset( $block['attrs']['className'] ) && $block['attrs']['className'] === 'login-trigger' ) {
        // 替换<a>标签，加入onclick事件和阻止默认行为
        $block_content = str_replace( '<a ', '<a onclick="event.preventDefault(); myfunction();" ', $block_content );
    }
    return $block_content;
}, 10, 2 );

补充说明 #

• 为什么用#作为URL？因为javascript:void(0)会被WordPress的安全过滤机制自动移除，换成#后再用JS阻止默认跳转，既不会触发过滤，也不会跳转到页面顶部。
• 如果你的导航是在区块编辑器里手动创建的，也可以直接给导航链接添加自定义类名，然后用上面的JS方法绑定事件，不需要用block_core_navigation_render_inner_blocks过滤器添加链接。

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