javascript - jQuery PowerTip W/Wordpress 问题

Question

我在让 PowerTip 插件在新的 WP 网站上运行时遇到了很多麻烦。该网站已关闭开发，但我会尽量具体。希望我错过了一些简单的东西，因为这看起来是一个很棒的插件。

脚本 jquery.powertip.js 已上传到我的主题的 JS 目录。css 文件 jquery.powertip.css 已上传到我的主题的 css 目录。

我在正上方的标题中调用脚本:

<link rel="stylesheet" href="css/jquery.powertip.css">
<script src="js/jquery.powertip.js"></script>
</head> 

我也尝试过直接 http 链接或相对链接，但这并没有什么区别。这是我正在测试插件的 img 片段的示例。

<img class="productImage" src="/wp-content/uploads/2015/03/cow.png" title="This is a test">

我已将以下函数添加到我的 main.js 文件中，如下所示:

$('.productImage').powerTip({
    placement: 'ne' // north-east tooltip position
});

我还按照插件文档的建议将其添加到我的主 css 文件中:

#powerTip {
    position: absolute !important;
    display: none !important;
    z-index:2147483647 !important;
}

如果有人能帮助我，我将非常感激。这是 github 插件的链接:jQuery PowerTip: GitHub

Answer 1

1) 您必须在 WordPress 主题中正确排列 Javascript，以便在主 jQuery 库之后正确加载它并以无冲突模式加载它。请参阅Function Reference/wp enqueue script « WordPress Codex有关如何使用 wp_enqueue_script 的详细信息并查看示例，即 jquery.powertip.js:

function theme_load_scripts() {
    wp_enqueue_script( 'jquery.powertip.js', get_template_directory_uri() . '/jquery.powertip.js', array(), '1.0.0', true );
}

add_action( 'wp_enqueue_scripts', 'theme_load_scripts' );

该函数位于主题的functions.php中；脚本 init $('.productImage').powerTip... 位于 header.php

2) 学习使用Firebug使用 Firefox，或使用 Chrome 中的开发人员工具或Safari或IE查看您的网站上正在加载哪些 JavaScript 以及任何错误。控制台将向您显示加载工具提示脚本是否仍然存在 JavaScript 错误或其他冲突。

3) CSS可以添加到主样式表中；或者，使用 http://codex.wordpress.org/Function_Reference/wp_enqueue_style按照与上面相同的理论，将自定义 CSS 保存在单独的样式表中。

 function theme_load_style() {
        wp_enqueue_style( 'style-name', get_stylesheet_uri() );
    }

    add_action( 'wp_enqueue_scripts', 'theme_load_style' );