wordpress主题框架thematic引用javascript的方法

thematic是一个非常优秀的wordpress主题框架，利用它可以快速的制作出来我们需要的主题，但在实际的开发过程中，thematic的许多函数无法满足我们的需要，我们有更好的函数来完成工作，这个时候就需要对thematic的函数进行改造，例如近期在我们的开发项目中遇到的一个问题：thematic提供的javascript脚本过于臃肿，而我们的javascript小巧精干，所以这里就要解决两个问题，首先是在不改动thematic框架的原则下移除框架提供的javascript，然后依然是在不改动框架的原则下引入我们需要的javascript，不过这是一个思路，在实际的操作中，我们完全可以一步就达成我们的目的。

首先还是看一下thematic框架函数库，在wp-content\themes\thematic\library\extensions中找到header-extensions.php，这个文件里包含了有关整个框架的头部的函数，打开这个文件后转到309行，或找到如下代码：

 

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=\'#\'" /span>;
        $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);
    }

}

if (apply_filters('thematic_use_superfish', TRUE)) {
    add_action('wp_head','thematic_head_scripts');
}

thematic_head_scripts这个函数名称很容易可以看得出来是控制头部脚本输出的作用，在这里我们不对这个函数做更详细的解释，只讨论和这个主题有关的部分，我们精简一下这个函数的代码如下：

 

if (function_exists('childtheme_override_head_scripts'))  {
    function thematic_head_scripts() {
        childtheme_override_head_scripts();
    }
} else {
    function thematic_head_scripts() {
        ......
        print apply_filters('thematic_head_scripts', $scripts);
    }

}

看到这里，我们就完全可以很轻松的控制javascript了，首先这个函数有一个if，检查childtheme_override_head_scripts()这个函数是否存在,存在即执行这个函数，否则就执行框架默认的函数。

所以，我们可以在主题的functions.php构造一个childtheme_override_head_scripts()函数来引用我们的javascript脚本，将如下代码加入主题的functions.php这个文件最后一个?>之前：

回到wordpress前台，刷新页面后查看网页源代码

function childtheme_override_head_scripts() {?>
    <?php echo "\n\t" ?><script type="text/javascript" charset="utf-8" src="<?php bloginfo('stylesheet_directory'); ?>/script/main.js"></script><?php echo "\n" ?>
<?php }

可以发现thematic框架的javascript已经没有了，取而代之的是我们自定义的javascript脚本了。

还有一种方法可以让我们自定义引用javascript和thematic框架的javascript共存，和上一种方法一样，在主题的functions.php这个文件最后一个?>之前加入如下代码：

 

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

还有一个问题要说明一下，关于获得引用的javascript脚本路径的问题，正常情况下，我们可以通过bloginfo('template_directory')来获得当前主题的路径，但在子主题中用这个方法获取的将是上一级主题的路径，所以，我们需要通过bloginfo('stylesheet_directory')来获取子主题的路径

本文出自 “咬贝贝” 博客，转载请与作者联系！