问题描述

有没有办法把 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()

参考文献

注:本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意,可以加入我们改善翻译效果:薇晓朵技术论坛。