在导航块的自定义链接中添加JavaScript代码

前端开发 2026-07-10

我想在WordPress菜单中的自定义链接上添加一个点击事件处理函数。我知道怎么在导航区块中添加自定义链接，但找不到关于 onclick 的属性。我也尝试添加一个 classname，以便可以通过 queryselector 访问它，但 classname 似乎也不是受支持的属性。

以下是我尝试的代码：

add_filter( 'block_core_navigation_render_inner_blocks', function( $inner_blocks ) {
    $inner_blocks[] = [
        'blockName'    => 'core/navigation-link',
        'attrs'        => [
            'label' => 'Login',
            'url'   => 'javascript:void(0)',
            'kind'  => 'custom',
        'onclick' => 'myfunction();'
        ],
        'innerBlocks'  => [],
        'innerHTML'    => '',
        'innerContent' => [],
    ];

    return $inner_blocks;
} );

打开我的WordPress时，href 属性是空的（似乎 javascript:void(0) 被忽略了），而 onclick 不是一个有效属性。是不是我遗漏了什么，还是有其他/更好的方式来实现同样的效果？

解决方案

core/navigation-link 在WordPress中为了安全会被净化，因此像 onclick 和 javascript: 的URL会被剥离。导航区块是用于导航的，而不是内联JS。

更好的做法

1.如果应该导航，请使用真实的URL 如果该项确实需要跳转，请使用一个正常的 url。

2.如果应该触发JS，请添加自定义属性并用JavaScript绑定 不使用内联 onclick，改为渲染一个安全的标记，例如 data-action="login"，并在前端附加事件监听器。

使用data属性

如果在这个场景下 className 看起来有点尴尬，你可以注入自定义标记，而不是依赖导航链接。

add_filter('block_core_navigation_render_inner_blocks', function ($inner_blocks) {
    $inner_blocks[] = [
        'blockName' => null,
        'innerHTML' => '<li class="wp-block-navigation-item"><a href="#" data-action="login">Login</a></li>',
        'innerContent' => ['<li class="wp-block-navigation-item"><a href="#" data-action="login">Login</a></li>'],
    ];

    return $inner_blocks;
});

JS：

document.addEventListener('click', function (e) {
  const link = e.target.closest('a[data-action="login"]');
  if (!link) return;

  e.preventDefault();
  myfunction();
});

JavaScript