我一直在尝试在我的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>


感谢您的帮助!

评论

需要注意的是:您不需要排队jquery,因为它已经被列为jquery-ui-core的依赖项。

#1 楼

尽管WordPress确实包含jQuery UI库,但它不包含UI / Effects库。该库是独立的。您需要包括effects.core.js文件的副本,并将其单独排队。

请注意,在排队时,应将其命名为jquery-effects-core,以确保命名的一致性。

您可以像这样包含它:

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


编辑:此答案是在WordPress 3.3之前编写的,现在它包含了各种效果库,如下所示:核心的一部分。您只需将现在需要使用的效果库片段放入队列。

这些文件的段列表可以在wp-includes / script-loader.php中找到,但核心段是jquery-effects-core。

wp_enqueue_script("jquery-effects-core");


评论


请注意,对于实际效果(盲,反弹,淡入淡出,..),您必须明确地使该效果入队。就像'fade'一样:wp_enqueue_script('jquery-effects-fade');

– SunnyRed
17年2月10日在17:45

用户应将自己的Javascript放入单独的文件中,然后使该文件入队并列出所需的依赖项。这样,WordPress(和性能插件)就会知道加载这些脚本所需的顺序,并将它们按正确的顺序放在页面上。

–戴夫·希尔迪奇(Dave Hilditch)
17年4月27日在7:26

#2 楼

您也可以直接从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会自动为您完成此操作。

评论


您甚至可以从Google CDN而不是您自己的站点加载所有jQuery库。

– Jan Fabry
2011年1月21日,11:16

我极力劝阻不要从国外加载脚本。我做了很长时间,然后(很少)发生了主机关闭的情况,因此多个客户一次都遇到了页面问题。

–朱利安·F·韦纳特(Julian F. Weinert)
2014年5月24日22:32

@ JulianF.Weinert这是一把双刃剑,具有良好的cdn意味着较低的延迟,但如果失败则无法控制。就是说,如果Google CDN掉线了一半,互联网将失败,因此您的将不是唯一的一个。虽然它关闭的可能性很小,并且不会缓存在用户浏览器中。在大多数情况下,使用CDN是有好处的。

– Alex
16年7月10日在19:54

真正。我并不是在说一个完整的CDN,当然,这在这里绝对没问题,因为它是专门为这种用法而设计的。我认为从任何john-doe.com加载脚本都有些冒险

–朱利安·F·韦纳特(Julian F. Weinert)
16年7月10日在21:22

#3 楼

@dabito,

您没有正确加载脚本...不要在主题模板文件中调用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

评论


不完全正确。只要他在wp_head()调用之前调用它们,就可以正常工作。他们不必被钩住,也不应该被钩住来初始化。如果您要将它们挂在某处,请将它们挂在'wp_enqueue_scripts'操作钩上。那就是它的目的。

–奥托
2011年1月19日,下午1:47

@Otto您所说的听起来合乎逻辑。但是,您是否有一个解释,为什么在法典中为什么写有@EAMann编写的内容-“使用init动作来调用此函数”?他的示例是从那里获取的... codex.wordpress.org/Function_Reference/wp_enqueue_script

– Lea Cohen
2011-2-14在6:49

食典在地方是随意的。为此,最好的操作是在前端使用“ wp_enqueue_scripts”,在后端使用“ admin_enqueue_scripts”。挂接init可以,但是会不必要地将脚本排入整个站点。

–奥托
2011-2-14在20:54



我已经相应地更新了代码段。最初是基于Codex参考的快速,直觉的反应...使用wp_enqueue_scripts绝对是更好的方法,并且避免了额外的is_admin()检查。

–EAMann
2011-2-14在21:45

这也是错误的方式-性能插件需要了解依赖关系。作者应编写自己的.js文件,并使其入队并命名依赖项-WordPress将处理其余部分。

–戴夫·希尔迪奇(Dave Hilditch)
17年4月27日在7:27

#4 楼

该jQuery库似乎没有默认加载(此处为完整列表),因此您可能需要在入队前注册脚本。

评论


我以为您可能是对的(有时WP注册脚本所使用的名称与所使用的标准名称不同),但是在这种情况下,注册“ jquery-ui-core”应该有效。它列在core.trac.wordpress.org/browser/branches/3.0/wp-includes/…中

– Goldenapples
2011年1月19日,0:05

好点子!我以为他只想加载那个jQuery库,在这种情况下,加载其余的内容会有点麻烦。

–编辑
2011年1月19日,0:18

#5 楼

只是一些技巧。当您将脚本排入队列时,它会排入整个站点,包括管理面板。如果您不希望在管理面板中使用该脚本,则只能将它们包含在前端站点中。

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

add_action( 'wp_enqueue_scripts', 'my_add_frontend_scripts');


评论


您不应该使用init钩子来排队。仅将wp_enqueue_scripts钩子用于前端,将admin_enqueue_scripts钩子用于后端。

–奥托
11年8月24日在16:48

不知道wp_enqueue_scripts操作仅适用于前端。谢谢 :)

– Tareq
11年8月24日在18:31

#6 楼

这里所有的答案,尽管它们起作用,但在技术上都是错误的。

包含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/

评论


你说对了。在自己的wp_enqueue_script调用中使用依赖关系是包含jquery / jquery-ui / etc的正确方法。无需将它们分别排队。

–麦凯(Michae Pavlos Michael)
17年5月8日在11:58



而且,如果您在脚本依赖它们时分别将它们排入队列,则脚本可能/将在优化性能的网站上中断-例如是否将脚本合并为一个脚本以加快加载速度,或者是否将它们推迟或最小化(取决于最小化,但是顺序可以更改)。如果您没有告诉WordPress您的脚本依赖于其他脚本,则无法保证它们的加载顺序。

–戴夫·希尔迪奇(Dave Hilditch)
17年5月10日在11:19