将Javascript添加到WordPress菜单

有没有办法将javascript放在WordPress菜单项的URL部分中？我的网站上有实时聊天功能，应该将此代码放到网站上，以建立一个打开实时聊天的链接（如此处建议）。

<!-- BEGIN OLARK CHAT LINK -->
<a href="javascript:void(0);" onclick="olark('api.box.expand')">
    Click here to chat!
</a>
<!-- END OLARK CHAT LINK -->

客户端需要实用工具导航栏中的链接，该工具栏是使用WordPress仪表板中的WordPress菜单创建的。但是，当我将其复制并粘贴javascript:void(0);" onclick="olark('api.box.expand')到WordPress仪表板的URL框中时，它只是消失了，链接仍然无效。

我读到的东西说，也许我可以在有问题的链接上放一个自定义类，然后编写一个Javascript函数，当该类的链接被单击时将触发该函数。我尝试了一下，但无法正常工作。我不太了解Javascript，因此有可能我写的完全错误。

有谁知道如何做到这一点？我想不使用插件就这样做。

很好，它起作用。如果是针对客户的，或者您只想使用更简洁的代码，则可以按照@Tom J Nowell的建议进行操作。

添加一个自定义菜单项，将其链接到无处或任何地方。找出菜单项ID（每个项都有一个），然后使用jQuery定位该ID。

$("#menu-item-num").on("click", function(e){ 
      e.preventDefault();
      // olark code here
});

这样，每次用户单击menu-item该脚本都会被触发。您可以通过functions.php排队jquery脚本。

更新：

1. 确保您的olark.js正在加载。如果要将其添加到页脚或页眉中，请检查页面并确保脚本在其中。另外，请确保在浏览器的控制台中没有出现任何错误。

2. 用准备好的文档包装您的js，以便脚本在正确的时间执行：

   jQuery(document).ready(function($) {
     $("#menu-item-38872").on("click", function(e){
     e.preventDefault();
     olark('api.box.expand');
     });
   });

链接未加载的事实意味着脚本本身有问题，或者脚本根本没有加载。

解决方案1（不理想，但可以）：

// Live Chat Utility Link
add_filter( 'wp_nav_menu_items', 'live_chat_utility_link', 10, 2 );
function live_chat_utility_link ( $items, $args ) {
    if ( $args->theme_location == 'utility' ) {
        $items .= '<li><a href="javascript:void(0);" onclick="olark(\'api.box.expand\')" class="livechat">Live Chat</a></li>';
    }
    return $items;
}

解决方案2（理想）：

在以上评论的帮助下，这是为我工作的解决方案。我创建了一个名为olark.js的新文件，并将以下代码放入其中：

jQuery(document).ready(function($) {
    $("#menu-item-38872").on("click", function(e){ 
          e.preventDefault();
          // olark code here
          olark('api.box.expand');
    });
});

然后，我使用以下代码将脚本放入我的functions.php中：

function olark_script() {
    wp_register_script( 'olark', get_stylesheet_directory_uri() . '/js/olark.js', array(), '1.0.0', true );
    wp_enqueue_script( 'olark' );
}

add_action( 'wp_enqueue_scripts', 'olark_script' );

如果它不起作用，请确保正确排队了脚本。我正在使用儿童主题，因此我不得不使用get_stylesheet_directory_uri()而不是get_template_directory_uri()。

我认为有一个“更可靠”的选择。例如，如果您将代码从开发迁移到生产，则不希望依赖菜单项号来工作。如果将数字转换为设置，它会变得更好，但仍然不是很好。

一种替代方法是从菜单项链接到不存在的锚点，例如#olark。可以使用用户界面进行设置，并且在整个环境中都是可靠的。然后，您单独的脚本应遵守哈希更改（在浏览器地址栏中）并采取相应措施。

一个简单的咖啡脚本示例，可以编译为可监听hashchange的javascript：

if window.addEventListener
  window.addEventListener 'hashchange', (event) =>
  @showLogin()
else
  window.attachEvent 'onhashchange', (event) =>
  @showLogin()
#enable sharing the url
if location.hash then @showLogin()

@showLogin 是一个显示对话框的函数，如果哈希值等于“ #login”，则可以让您登录。

[edit]有趣的是，如果您单击菜单项，则地址中的哈希不会更改。这是意外的，可能是由于另一个脚本阻止了默认事件。因此，我不得不添加另一行，以响应单击链接来更改窗口位置：

# make sure the hash changes when a link in the menu is clicked (somehow, it doesn't in my case)
$('.menu-item a').click (event) =>
  window.location = $(event.currentTarget).attr 'href'

[/编辑]

您可以使用它来functions.php在导航菜单项中添加附加脚本

function add_nav_class($output) {
$output= preg_replace('/<a/', '<a id="join_club" onclick="awf_Form_.showForm(); return false;"', $output, -1);
return $output;
}
add_filter('wp_nav_menu', 'add_nav_class');