thematic 子主题引用JS的方法

在wordpress主题框架的世界里,基于主题框架开发的主题被称之为childtheme，翻译成中文为“子主题”，这个说法很别扭，但是没有更好的中文称呼了。

利用thematic进行wordpress的主题开发的确很便捷，例如我们要引用一个JS脚本。

首先我们看一下thematic框架是如何引用JS脚本文件的，打开header-extensions.php，这个文件位于wp-content\themes\thematic\library\extensions\目录下,打开这个文件后找到如下代码

if (function_exists('childtheme_override_head_scripts'))  {
    function thematic_head_scripts() {
    	childtheme_override_head_scripts();
    }
} else {
    function thematic_head_scripts() {
	    $scriptdir_start = "\t";
	    $scriptdir_start .= '<script type="text/javascript" src="';
	    $scriptdir_start .= get_bloginfo('template_directory');
	    $scriptdir_start .= '/library/scripts/';
	    
	    $scriptdir_end = '"></script>';
	    
	    $scripts = "\n";
	    $scripts .= $scriptdir_start . 'hoverIntent.js' . $scriptdir_end . "\n";
	    $scripts .= $scriptdir_start . 'superfish.js' . $scriptdir_end . "\n";
	    $scripts .= $scriptdir_start . 'supersubs.js' . $scriptdir_end . "\n";
	    $dropdown_options = $scriptdir_start . 'thematic-dropdowns.js' . $scriptdir_end . "\n";
	    
	    $scripts = $scripts . apply_filters('thematic_dropdown_options', $dropdown_options);
	
	    	$scripts .= "\n";
	    	$scripts .= "\t";
	    	$scripts .= '<script type="text/javascript">' . "\n";
	    	$scripts .= "\t\t" . '/*<![CDATA[*/' . "\n";
	    	$scripts .= "\t\t" . 'jQuery.noConflict();' . "\n";
	    	$scripts .= "\t\t" . '/*]]>*/' . "\n";
	    	$scripts .= "\t";
	    	$scripts .= '</script>' . "\n";
	
	    // Print filtered scripts
	    print apply_filters('thematic_head_scripts', $scripts);
	}

}

 

看到这里我们就可以领略到thematic的便捷之处了,在这里先是用IF语句判断childtheme_override_head_scripts()这个函数是否存在,如果存在即实行这个函数,否则将运行thematic默认的函数:thematic_head_scripts(),既然我们是要引用框架外的JS脚本,那么我们在子主题目录中的functions.php中创建一个childtheme_override_head_scripts()即可,具体的实现代码如下:

function childtheme_override_head_scripts(){
		$scriptdir_start = "\t";
	    $scriptdir_start .= '<script type="text/javascript" src="';
	    $scriptdir_start .= get_bloginfo('stylesheet_directory');//如果用bloginfo('template_directory')这个参数来获取路径,那么取得的将是thematic框架所在目录的路径,用get_bloginfo('stylesheet_directory')得到的是我们子主题的路径,我们强烈推荐这种做法!
	    $scriptdir_start .= '/';
	    
	    $scriptdir_end = '"></script>';
	    
	    $scripts = "\n";
	    $scripts .= $scriptdir_start . 'main.js' . $scriptdir_end . "\n";
	    
	    $scripts = $scripts . apply_filters('thematic_dropdown_options', $dropdown_options);
	

	
	    // Print filtered scripts
	    print apply_filters('thematic_head_scripts', $scripts);
}

在thematic官方论坛上还给出了另一种引用JS脚本的方法：

<?php function childtheme_scripts() {?>
	<?php echo "\n\t" ?><script type="text/javascript" charset="utf-8" src="<?php bloginfo('template_directory'); ?>/js/coda-slider.js"></script><?php echo "\n" ?>
<?php }
add_action('wp_head', 'childtheme_scripts'); ?>

第一种方法会导致thematic框架默认引入JS脚本的函数失效，如果不希望thematic默认的引入JS脚本的函数失效，请用第二种方法引入自定义JS脚本。

 

无论使用以上两种方法中的哪一种，都要注意定义脚本存放的路径。