问题描述
有没有办法把 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 脚本。
更新:
-
确保您的 olark.js 正在加载。如果要将其添加到页脚或页眉中,请检查您的页面,并确保脚本在那里。另外,请确保您没有在浏览器的控制台中收到任何错误。
-
将您的 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 辅助翻译的英文资料结果。如果您对结果不满意,可以加入我们改善翻译效果:薇晓朵技术论坛。