如何在WordPress上正确包含jQuery-UI效果

时间：2011-01-18 作者：dabito

我一直试图在我的wordpress主题中包含jquery ui效果（更具体地说是抖动效果）。到目前为止，我只能包含jQuery脚本，但我真的不知道在哪里放置ui脚本以及如何将它们排队。

这是我的密码。这显然行不通：

    <?php wp_enqueue_script("jquery"); ?>
<?php wp_enqueue_script("jquery-ui-core"); ?>
<?php wp_head(); ?>
<link rel="stylesheet" type="text/css" href="<?php bloginfo(\'stylesheet_url\'); ?>" />
<script type="text/javascript">
    var $j = jQuery.noConflict();
    $j(document).ready(function() {
        $j("#manita-imagen").mouseover(function(){
            //$j(this).animate({ opacity: "hide" })
            // alert(\'asd\');
            $j(this).effect("shake", { times:3 }, 300);
        });
    });

 </script>

谢谢你的帮助！

6 个回复

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

虽然WordPress包含jQuery UI库，但它不包含UI/Effects库。该库是独立的。您需要包含效果的副本。果心js文件并将其单独排队。

请注意，为了命名一致性，在排队时应将其命名为jquery effects core。

您可以这样包括它：

wp_enqueue_script("jquery-effects-core",\'http://example.com/whatever/effects.core.js\', array(\'jquery\'), \'1.8.8\');

Edit: 这个答案是在WordPress 3.3之前写的，现在WordPress 3.3包含了各种特效库，作为core的一部分。您只需将现在需要使用的效果库的各个部分排队即可。

这些文件的slug列表可以在wp includes/script loader中找到。php，但核心的slug是jquery effects核心。

wp_enqueue_script("jquery-effects-core");

SO网友:Rodrigo Sieiro

您还可以直接从Google将整个jQuery UI排队。我就是这样做的：

wp_enqueue_script(\'jquery-ui\', \'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js\', array(\'jquery\'), \'1.8.6\');

而且，由于jQuery是作为jQuery UI的依赖项列出的，所以不需要手动将其排队。WordPress会自动为您完成。

SO网友:EAMann

@达比托，

您没有正确加载脚本。。。不要打电话wp_enqueue_script() 在主题模板文件中（看起来header.php). 您需要从单独的挂钩调用此函数。

在您的主题中functions.php 文件中，放置以下代码：

function my_add_frontend_scripts() {
        wp_enqueue_script(\'jquery\');
        wp_enqueue_script(\'jquery-ui-core\');
}
add_action(\'wp_enqueue_scripts\', \'my_add_frontend_scripts\');

如果两个脚本都已正确注册，则应该可以加载它们（通过添加适当的<script /> 标题中的标记。那么您的其他JavaScript代码应该可以工作了。

如果要将脚本添加到管理端，请将操作添加到admin_enqueue_scripts 相反

SO网友:Tareq

只是一些小提示。当您将脚本排队时，它将为整个站点排队，包括管理面板。如果您不想在“管理”面板中使用该脚本，则只能将其包含在前端的站点中。

function my_add_frontend_scripts() {
    wp_enqueue_script(\'jquery\');
    wp_enqueue_script(\'jquery-ui-core\');
}

add_action( \'wp_enqueue_scripts\', \'my_add_frontend_scripts\');

SO网友:editor

此jQuery库似乎没有默认加载（完整列表here) 所以你可能不得不register 将脚本放入队列之前。

SO网友:Dave Hilditch

这里的所有答案，虽然有效，但在技术上都是错误的。

包含jquery ui和其他库的正确方法是将它们作为您自己脚本的依赖项包含。

这一点很重要，因为性能工具可能会检查这些依赖关系，以改变脚本的加载顺序，从而优化站点。

因此，如果您想使用jquery和jquery ui，请创建自己的。js脚本文件，并按如下方式将其排队，列出依赖项-无需为您使用的每个库使用单独的排队命令：

wp_enqueue_script(\'your-script-handle\', 
 plugins_url(\'your-script-file.js\', __FILE__), 
 array(\'jquery\', \'jquery-effects-core\', \'jquery-ui-core\')
);

您可以在此处找到要作为依赖项添加的所有可用脚本的列表：https://developer.wordpress.org/reference/functions/wp_enqueue_script/

结束

小码农CODE

如何在WordPress上正确包含jQuery-UI效果

相关推荐

$未在WordPress中使用jQuery定义