我在 WordPress 网站的主页上有一个基于 jquery 的自定义滑块。我正在主题的functions.php 文件中使用以下代码加载 jQuery (jquery.js) 和滑块 js (jquery.advanced-slider.js)。
function my_load_scripts() {
if (!is_admin()) {
wp_enqueue_script("jquery");
if (is_home()) {
wp_enqueue_script('theme-advanced-slider', get_template_directory_uri().'/js/jquery.advanced-slider.js', array('jquery'));
wp_enqueue_script('theme-innerfade', get_template_directory_uri().'/js/innerfade.js', array('jquery'));
}
}
}
add_action('wp_enqueue_scripts', 'my_load_scripts');
现在我将以下代码放入 header.php 文件中，然后再 wp_head();
<script type="text/javascript">
var $j = jQuery.noConflict();
$j(document).ready(function () {
//Slider init JS
$j(".advanced-slider").advancedSlider({
width: 614,
height: 297,
delay: 1000,
pauseRollOver: true
});
});
</script>
很明显，我的 jquery.js 和 jquery.advanced-slider.js 在上面的 JavaScript 代码之后加载，因此我的滑块不起作用。如果我把它放在 wp_head() 调用之后
<head>但是如果我把它放在 wp_head() 之后，那不是黑客吗？我希望我的代码是干净的。正如二十一主题明确所说的那样
/* Always have wp_head() just before the closing </head>
* tag of your theme, or you will break many plugins, which
* generally use this hook to add elements to <head> such
* as styles, scripts, and meta tags.
*/
我在这里很困惑。我可能在这里遗漏了一些非常简单的线索。但请帮帮我吧伙计们。将 JavaScript 放在 wp_head() 之前并在 jquery.js 和 slider.js 加载后加载它的最佳方法是什么？
将脚本块添加到 HTML 页面的底部，就在
</body>无论如何，在浏览器中解析完整的 DOM 之前，您的滑块初始化 JS 代码不会被执行，因此这没有任何缺点。
事实上，像 Steve Souders 这样的 Web 性能专家建议应该在 HTML 页面末尾添加脚本块，因为脚本块会阻止渲染，这样页面加载速度会更快。
根据 WordPress 函数参考：
将 JavaScript 添加到 WordPress 生成的页面的安全且推荐的方法是使用 wp_enqueue_script()。如果尚未包含该脚本，则此函数会包含该脚本，并安全地处理依赖项。
如果你想保持“代码干净”，你可能会重新考虑你的 js 是如何组织的。 我使用 WordPress 的方法是（通常）为所有初始化和小脚本保留一个 script.js，并为插件保留单独的文件。但一切都取决于您拥有的文件大小和数量 - 您希望避免过多的 http 请求和难以管理的文件。
此外，wp_enqueue_script 允许您将脚本放置在页脚中。 http://codex.wordpress.org/Function_Reference/wp_enqueue_script
等待使用
window.onloadjQuerywindow.onload<script type="text/javascript">
window.onload = function(){
var $j = jQuery.noConflict();
$j(".advanced-slider").advancedSlider({
width:614,
height:297,
delay:1000,
pauseRollOver:true
});
}
</script>
一个更简单（但可能不太好）的技巧是简单地添加 1 毫秒的超时
setTimeout(function () {
jQuery('#text-6').insertBefore('#header');
}, 1);
您要添加到页面底部的代码应该外部化到它自己的文件中，并使用
wp_enqueue_script();请注意在每次调用 wp_enqueue_script 的末尾使用“true”指令。这告诉 WordPress，您希望它们包含在
wp_footer();wp_head();</body>function my_load_scripts() {
if (is_home()) {
wp_enqueue_script('theme-advanced-slider', get_template_directory_uri().'/js/jquery.advanced-slider.js', array('jquery'), true);
wp_enqueue_script('theme-innerfade', get_template_directory_uri().'/js/innerfade.js', array('jquery'), true);
wp_enqueue_script('your-custom-script', get_template_directory_uri().'/js/yourcustomscript.js', array('jquery'), true);
}
}
add_action('wp_enqueue_scripts', 'my_load_scripts');
我已经删除了您包含的 jQuery 排队行，因为您不需要注册 jQuery 脚本，因为它已经由 WP 核心注册，并且由于您已将其定义为依赖项之一，因此将为您包含它。
由于您已将其全部包装在
is_home()get_template_directory_uri()get_stylesheet_directory_uri()