如何强制jQuery作为前端Header中的第一个脚本加载?

时间:2013-07-17 作者:Derfder

如何强制jquery作为头中的第一个脚本加载?

现在是最后一次了;(如:

<link type="text/css" rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" />
<link type="text/css" rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/jquery.selectboxit/3.6.0/jquery.selectBoxIt.css" />
<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css" />

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.selectboxit/3.6.0/jquery.selectBoxIt.min.js"></script>




<script type=\'text/javascript\' src=\'http://localhost/wp-includes/js/jquery/jquery.js?ver=1.8.3\'></script>
我希望他们的顺序是:

<script type=\'text/javascript\' src=\'http://localhost/wp-includes/js/jquery/jquery.js?ver=1.8.3\'></script>




<link type="text/css" rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" />
<link type="text/css" rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/jquery.selectboxit/3.6.0/jquery.selectBoxIt.css" />
<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css" />

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.selectboxit/3.6.0/jquery.selectBoxIt.min.js"></script>
我的头是这样的:

<head>
<meta charset="<?php bloginfo( \'charset\' ); ?>" />
<meta name="viewport" content="width=device-width" />
<title><?php wp_title( \'|\', true, \'right\' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />

<link rel="pingback" href="<?php bloginfo( \'pingback_url\' ); ?>" />
<?php // Loads HTML5 JavaScript file to add support for HTML5 elements in older IE versions. ?>
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->

<?php wp_enqueue_script("jquery"); ?>

<link type="text/css" rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" />
<link type="text/css" rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/jquery.selectboxit/3.6.0/jquery.selectBoxIt.css" />
<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css" />


<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.selectboxit/3.6.0/jquery.selectBoxIt.min.js"></script>

<?php wp_head(); ?>

</head>

2 个回复
最合适的回答,由SO网友:Johannes Pille 整理而成

所有JS都是properly enqueued 将分别添加到您或主题设计师所在的标题处wp_head().

理想情况下,您还应该以相同的方式将自定义脚本排队,并使它们依赖于jQuery,之后WP将自然加载它们。

如果您想(我假设您现在正在这样做)手动在标题中包含JS,那么只需在wp_head(), 如果JS依赖于jQuery。

SO网友:JPollock

您需要设置的dependencies变量wp_enqueue_script() 包括jQuery、jQuery UI核心以及您需要的jQuery UI的其他部分。您不应该通过外部CDN添加它们。为了可靠性和兼容性,如果可能,请使用WordPress的内置库。如果库不是内置的,请将其添加到主题目录中。

此外,您不应该向标题添加任何脚本或样式。php。使用连接到wp_enqueue_scripts 函数中的操作。php这样做。

您可以在以下位置查看内置到WordPress中并由WordPress自动注册的库的列表及其句柄:

http://codex.wordpress.org/Function_Reference/wp_enqueue_script#Default_Scripts_Included_and_Registered_by_WordPress

编辑:我不能推荐this article 了解如何以正确的方式将脚本添加到主题的更多信息。

结束

相关推荐

使用HTTPS加载style.css和jQuery

我们有几个环境,我们刚刚开始使用wordpress(开发、QA、预生产、生产等)。我们在较低的环境中没有启用https,一切都很顺利。在我们的prod环境中,站点将所有流量重定向到https。第一个问题似乎只与chrome有关。Chrome拒绝在页面上加载任何非https的内容。我不确定如何让WordPress加载jquery或样式。css(来自我的主题)通过https(更多信息见下文)。HTTPS的第二个问题是,我们无法在使用HTTPS的环境中登录wordpress。当登录屏幕加载(sitename.c