在jquery.js加载到WordPress站点后加载javascript代码 [英] Load javascript code after jquery.js has loaded in WordPress site
问题描述
我在WordPress网站的主页上有一个自定义基于jquery的滑块。我在我的主题的functions.php文件中使用下面的代码加载jQuery（jquery.js）和滑块js（jquery.advanced-slider.js）。
I have a custom jquery-based slider on homepage of a WordPress site. I'm loading jQuery (jquery.js) and the slider js (jquery.advanced-slider.js) using below code in my functions.php file of my theme.
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'）;
add_action('wp_enqueue_scripts', 'my_load_scripts');
现在我把下面的代码放在我的header.php文件中，然后是wp_head（）;
Now I put the below code in my header.php file BEFORE 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代码之后加载以上，因此我的滑块不起作用。如果我在< head> 中调用wp_head（）后滑块可以使用。
It's obvious here that my jquery.js and jquery.advanced-slider.js load after the JavaScript code above and thus my slider doesn't work. If I put it after wp_head() call in <head> the slider works.
但如果我放它之后wp_head（）不会是一个黑客？我希望我的代码干净。二十四岁的主题清楚地说明了
But if I put it after wp_head() wouldn't that be a hack? I want my code to be clean. As twentyeleven theme clearly says
/* 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.
*/
我在这里很困惑。我可能会遗漏一些非常简单的线索。但帮助我的人。在jquery.js和slider.js加载之后将JavaScript放在wp_head（）之前的最佳方法是什么？
I'm very confused here. I might be missing something very simple clue here. But help me out guys. What would be the best way to put the JavaScript before wp_head() and yet have it load after jquery.js and slider.js have loaded?
推荐答案
根据wordpress函数引用：
As per wordpress function reference:
使用wp_enqueue_script将安全性和推荐的方法添加到WordPress生成的页面（）。此函数包括脚本（如果尚未包含），并安全地处理依赖项。
The safe and recommended method of adding JavaScript to a WordPress generated page is by using wp_enqueue_script(). This function includes the script if it hasn't already been included, and safely handles dependencies.
如果要保留代码干净你可能会重新思考你的js是如何组织的。
我使用wordpress的方法是（通常）为所有初始化和小脚本保留一个scripts.js，为插件保留单独的文件。但是一切都取决于你有多大和多少文件 - 你想避免太多的http请求和难以管理的文件。
If you want to keep your "code clean" you might rethink how your js is organised. My approach with wordpress is to (usually) keep a scripts.js for all initialisation and small scripts and separate file(s) for plugins. But everything depends how big and how many files you have - you want to avoid too many http requests and files that are hard to manage.
同样，wp_enqueue_script让你放置页脚中的脚本。
http://codex.wordpress.org/Function_Reference/wp_enqueue_script
As well, wp_enqueue_script lets you place the scripts in the footer. http://codex.wordpress.org/Function_Reference/wp_enqueue_script
这篇关于在jquery.js加载到WordPress站点后加载javascript代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
