为WordPress导航区块中的自定义链接添加JavaScript onclick事件

我来帮你搞定这个问题！WordPress的核心导航链接区块会自动过滤掉它认为「不安全」的属性和URL——比如你用的javascript:void(0)和onclick属性都会被拦截，这就是为啥你之前的代码没生效。下面给你几个可行的解决方案，按推荐程度排序：

这种方法更安全，也符合现代前端的最佳实践，避免直接写内联事件或危险URL。步骤很简单：

1. 给导航链接加一个自定义标识属性，方便JS定位：

add_filter( 'block_core_navigation_render_inner_blocks', function( $inner_blocks ) {
    $inner_blocks[] = [
        'blockName' => 'core/navigation-link',
        'attrs' => [
            'label' => 'Login',
            'url' => '#', // 用#做占位，不会被WordPress过滤
            'kind' => 'custom',
            'dataTriggerLogin' => true // 渲染后会变成data-trigger-login属性
        ],
        'innerBlocks' => [],
        'innerHTML' => '',
        'innerContent' => [],
    ];
    return $inner_blocks;
} );

2. 写一段JS监听点击事件，执行你的函数：

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

你可以把这段JS加到主题的functions.php（用wp_enqueue_script），或者主题后台的「自定义JS」区域里。

如果你一定要用内联onclick，可以用block_core_navigation_link_render过滤器绕过WordPress的属性检查：

add_filter( 'block_core_navigation_link_render', function( $html, $attributes ) {
    // 确认是我们要修改的Login链接
    if ( isset($attributes['label']) && $attributes['label'] === 'Login' ) {
        // 替换生成的HTML，添加onclick和合法的href
        $html = str_replace(
            '<a ',
            '<a href="javascript:void(0)" onclick="myfunction();" ',
            $html
        );
    }
    return $html;
}, 10, 2 );

这个过滤器会在导航链接渲染完成后触发，直接修改最终的HTML代码，避开WordPress的属性过滤机制。

你之前加类名没成功，大概率是写法不对。正确的类名添加方式是用className属性：

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-link' // 这里添加类名，渲染后会生效
        ],
        'innerBlocks' => [],
        'innerHTML' => '',
        'innerContent' => [],
    ];
    return $inner_blocks;
} );

之后同样用JS绑定点击事件，把选择器换成.login-trigger-link就行，逻辑和方案1一致。

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