TwentyTwelve主题如何加载CSS和JS

评论(1)

万众瞩目的WordPress 3.5版本终于发布了,期待中的 TwentyTwelve 主题也随之而来,学习掌握 WordPress 并做二次开发其默认主题一直是我的起步教材,每次有新版本发布我都会饶有兴致的研究一下默认主题,这次也是。
这次主题的升级还是老规矩,文件量又增加了不少,
相较于 TwentyEleven主题这次的TwentyTwelve主题文件量又有所增加,
但总体的代码结构也相较于之前的主题更为易懂了,
主题放弃了一些原生的主题设置,并将主题设置的一些最基本功能都融合在了functions.php文件中,
非前台类的文件代码长度有所减少,并将页面模板文件放到了专门的页面模板文件夹page-templates
好了貌似越讲越远了,还是讲讲脚本的调用吧。
半小时,大略的看了一下主题的结构,感觉主题JavaScript 和 CSS 脚本的调用较以往的主题有所不同,
TwentyTwelve主题没有在前台类页面去直接书写调用主JS、CSS脚本的代码,那它是怎么来实现的呢?
下面来讲一下:

脚本调用函数twentytwelve_scripts_styles

该函数主要是用来集中调用主题的JavaScript 和 CSS 脚本的,
没有什么可以特别拿出来讲的东西,主要是 wp_enqueue_scripts和wp_enqueue_style 两个函数的应用,
之前的文章都有讲过,在这里不再赘述。
如何来实现脚本的前台调用主要依靠下面这句来实现:

//将twentytwelve_scripts_styles函数挂载到wp_enqueue_scripts钩子上
add_action( 'wp_enqueue_scripts', 'twentytwelve_scripts_styles' );

wp_enqueue_scripts钩子

该钩子的具体定义如下:

/**
 * Wrapper for do_action('wp_enqueue_scripts')
 *
 * Allows plugins to queue scripts for the front end using wp_enqueue_script().
 * Runs first in wp_head() where all is_home(), is_page(), etc. functions are available.
 *
 * @since 2.8
 */
function wp_enqueue_scripts() {
	do_action('wp_enqueue_scripts');
}

并在default-filters.php这个总加载文件中被再次挂载到wp_head函数中,

// Actions
add_action( 'wp_head', 'wp_enqueue_scripts',1);

并在 wp_head 函数中被调用

/**
 * Fire the wp_head action
 *
 * @since 1.2.0
 * @uses do_action() Calls 'wp_head' hook.
 */
function wp_head() {
	do_action('wp_head');
}

总结

粗略的讲了讲新主题的一些调用脚本的思路,
好处,
不用多讲,把主脚本集中书写调用方便维护,
不在前台页面显示,页面代码也显得更加简洁,
至于这么调用有没有什么坏处,时间原因我没有再去研究,
这个还是留着以后写吧。





  1. 主题修改的不错