Wordpress 中的 Tooltipster jQuery 加载问题

Question

我正在尝试将此 Tooltipster 脚本添加到我的 Wordpress 网站，但 jQuery 加载存在问题。

该网站的说明说应该将此代码添加到 head 标签中（我的网站已经修改了指向文件的链接）：

<link rel="stylesheet" type="text/css" href="http://oopsbox.me/wp-content/uploads/js/tooltipster.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="http://oopsbox.me/wp-content/uploads/js/jquery.tooltipster.min.js"></script>
<script>
    $(document).ready(function() {
        $('.tooltip').tooltipster();
    });
</script>   

然后将 .tooltip 类添加到任何元素应该在悬停时显示一个不错的工具提示等。

当我尝试在单独的页面上执行此操作时，这非常有效。例如这里是我的test page。

但是当我尝试将相同的代码添加到 Wordpress header.php 头标签以在我的主页上显示工具提示时，该网站停止工作。

我认为这是因为 jQuery 加载行导致 Wordpress 已经拥有一个并使用更新版本的 jQuery（Tooltipster 应该支持）。

我试图删除 Tooltip jQuery 加载行，只保留 Wordpress 默认拥有的那个，但是工具提示不起作用。

你能告诉我我做错了什么吗？这里有什么可能的解决方案？

非常感谢！

亚历克斯

Answer 1

看起来 - jquery 似乎处于noconflict 模式。

通过添加 jQuery 而不是 $ 来更新您的代码

<script>
    jQuery(document).ready(function() {
       jQuery('.tooltip').tooltipster();
    });
</script> 

Answer 2

使用您的开发工具（Chrome 中的 f12）查看这些脚本是否正确加载。出于几个原因，Wordpress 也不喜欢硬编码你的脚本。

jQuery 已经默认加载了 WP。删除：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>

使用 SFTP 将您的脚本上传到您的站点并将它们放在您的主题文件夹中，然后使用以下方法：

始终使用 WP wp_enqueue_script 函数

// for plugin use
wp_enqueue_script('my_script', plugins_url('my_plugin/jquery.tooltipster.min.js'));
// for theme use
wp_enqueue_script('my_script', get_bloginfo('stylesheet_directory') . '/jquery.tooltipster.min.js');