jQuery PowerTip Trouble W/ Wordpress

jQuery PowerTip Trouble W/ Wordpress

本文关键字：Wordpress Trouble PowerTip jQuery      更新时间：2023-09-26

我在让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">

我已将以下功能添加到我的主文件中.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

1）您必须在WordPress主题中正确排队Javascript，以便在主jQuery库之后正确加载它，并在无冲突模式下加载它。请参阅函数参考/wp 排队脚本 « 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' );

该函数进入主题的函数.php;脚本初始化$（'.productImage'）.powerTip...进入标题.php

2）学习在Firefox上使用Firebug，或使用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' );
相关文章：