将Java脚本添加到WordPress菜单

时间：2014-07-08 作者：mcography

有没有办法将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，所以可能是我写得完全错了。

有人知道怎么做吗？我想不用插件就可以做到这一点。

4 个回复

最合适的回答,由SO网友:gdaniel 整理而成

很好，它起作用了。如果它是为客户提供的，或者如果您只是想要一个更干净的代码，那么您可以按照@TomJ Nowell的建议来做。

添加自定义菜单项，将其链接到任意位置。找出菜单项ID（每个项都有一个），然后用jQuery将该ID作为目标。

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

这样，每次用户点击menu-item 将触发上面的脚本。您可以通过函数将jquery脚本排队。php。

更新时间：

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

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

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

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

SO网友:mcography

Solution #1 (not ideal, but it works):

// 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;
}

Solution #2 (ideal):

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

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

然后，我将脚本放入我的函数中。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().

SO网友:Bart McLeod

我认为有一个“更可靠”的选择。例如，如果您将代码从开发迁移到生产，那么依赖菜单项编号并不能保证工作正常。如果你把这个数字变成一个设定值，它会变得更好，但仍然不是很好。

另一种方法是从菜单项链接到不存在的锚，如#olark。这可以使用用户界面进行设置，并且是跨环境的可靠设置。然后，您的单独脚本应该观察哈希更改（在浏览器地址栏中），并相应地执行操作。

一个简单的coffee脚本示例，可编译为javascript，用于侦听hashchange：

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”，则您可以登录该对话框。

[编辑]有趣的是，地址中的哈希does not 单击菜单项时进行更改。这是意外的，可能是由于另一个脚本阻止了默认事件。因此，我不得不添加另一行，以便在单击链接时更改窗口位置：

# 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\'

[/编辑]

SO网友:Pk Ray

您可以使用它来执行函数。php在nav菜单项中添加添加脚本

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\');

结束

小码农CODE

将Java脚本添加到WordPress菜单

相关推荐

在小部件管理表单上优雅地使用JavaScript