0

我正在尝试将此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 类应该在悬停时显示一个很好的工具提示等。

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

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

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

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

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

非常感谢！

亚历克斯

4

2 回答 2

0

从外观上看 - jquery 似乎处于无冲突模式。

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

<script>
    jQuery(document).ready(function() {
       jQuery('.tooltip').tooltipster();
    });
</script>
于 2013-08-13T18:37:14.397 回答
0

使用您的开发工具（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');
于 2013-08-13T19:06:44.337 回答