最近手上做的项目比较复杂,有关thematic框架的笔记或许从现在开始发表的更为混乱,不过大家不要担心,这混乱只不过是发表顺序的混乱,文章内容绝对值得一看。
今天说一下利用thematic框架进行child theme开发时引用自定义JS文件的方法。
thematic框架自带了jquery和一个jquery插件,不过这远远不能满足我们在实际开发中的需要,在实际开发中我们需要引入其他JS文件怎么办?
首先强调一点,千万不要去尝试修改thematic框架中的函数和内容,我们只需要在child theme中利用函数对thematic的输出进行控制就好了。
例如今天我们要在名为thematicsamplechildtheme的child theme中引入一个tab.js文件。
进入到child theme所在目录,我这里的路径为E:\www\test\wp-content\themes\thematicsamplechildtheme,然后新建一个functions.php的文件,在这个文件里输入:
- function my_scripts($scripts) {
- $child_theme_directory = get_bloginfo('stylesheet_directory');
- $scripts .= "\n" . "\t";
- $scripts .= '<script src="'.$child_theme_directory.'/script/tab.js" type="text/javascript"></script>'."\n";
- $scripts .= "\n";
- return $scripts;
- }
- add_filter('thematic_head_scripts', 'my_scripts');
在以上代码中,我们利用get_bloginfo('stylesheet_directory')来获取这个child theme的路径,因为是子主题,如果我们用get_bloginfo('template_directory')的话,那取得的将是themeatic的路径了
然后我们将tab.js放入wp-content/themes/thematicsamplechildtheme/script/即可
回到wordpress前台刷新代码后,查看一下网页源文件,是不是多了一行:
- <script src="http://127.0.0.1/test/wp-content/themes/thematicsamplechildtheme/script/tab.js" type="text/javascript"></script>
这样一来,我们在完全不修改thematic框架的情况下,开始了基于thematic的征程!