srcmini我在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’);
现在, 在wp_head();之前, 将以下代码放入header.php文件中。
<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代码之后加载, 因此我的滑块不起作用。如果我将它放在<head>中的wp_head()调用之后, 则滑块会起作用。
但是, 如果我把它放在wp_head()之后, 那不是hack吗？我希望我的代码干净。正如二十一个主题明确地说的
/* 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加载之后又将其加载的最佳方法是什么？
#1
在</ body>之前, 将你的脚本块添加到HTML页面的底部。
无论如何, 直到在浏览器中解析了完整的DOM后, 你的滑块初始化JS代码才会执行, 因此这样做没有任何缺点。
实际上, 像Steve Souders这样的网络性能专家建议, 应在HTML页面的末尾添加脚本块, 因为脚本块会阻止呈现, 并且此页面似乎可以更快地加载。
#2
根据wordpress功能参考：
将JavaScript添加到WordPress生成的页面的安全且推荐的方法是使用wp_enqueue_script()。如果尚未包含此脚本, 则此函数将包含该脚本, 并安全地处理依赖关系。
如果你想保持”代码整洁”, 则可以重新考虑js的组织方式。我使用wordpress的方法是(通常)为所有初始化和小脚本保留一个scripts.js, 并为插件保留单独的文件。但是, 一切都取决于你拥有的文件大小和数量-你要避免太多的HTTP请求和难以管理的文件。
同样, wp_enqueue_script允许你将脚本放在页脚中。 http://codex.wordpress.org/Function_Reference/wp_enqueue_script
#3
等待使用window.onload函数加载jQuery, 一旦jQuery文件和其他js /内容加载完毕, 就会启动window.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>
#4
你要添加到页面底部的代码应外部化为其自己的文件, 并使用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()条件语句中, 因此所有这3个文件(加上jQuery)都将仅包含在首页中。
#5
更简单(但可能不是很好)的黑客方法是简单地添加1毫秒的超时时间
setTimeout(function () {
jQuery('#text-6').insertBefore('#header');
}, 1);
评论前必须登录！
注册