• WordPress折腾记-精简CSS及JS在插件中的调用

    爱折腾WP是我的一个习惯,不折腾就会手痒,哈哈~~此文仅作为一个精简CSS及JS在插件中调用的范例,其他插件的精简可以按照此文的方法来做。

    众所周知,减少HTTP请求次数的一个途径是将CSS JS文件合并在一块,减少HTTP请求次数可以在一定程度上加快网页访问速度。为了速度,我就更加爱折腾了,呵呵。废话不多,下面是我今天的记录。

    先提醒一下,在修改前一定做好备份,这是个绝对无害处的好习惯,下文不再提醒。

    1、修改PageNavi的CSS调用,将其合并在主题目录中的style.css中(PageNavi是个WP分页插件,使用的人数还是不少的)。

    首先打开wp-pagenavi.php,找到下面的代码

    ### Function: Enqueue PageNavi Stylesheets
    add_action(‘wp_print_styles’, ‘pagenavi_stylesheets’);
    function pagenavi_stylesheets() {
    if(@file_exists(TEMPLATEPATH.’/pagenavi-css.css’)) {
    wp_enqueue_style(‘wp-pagenavi’, get_stylesheet_directory_uri().’/pagenavi-css.css’, false, ‘2.50’, ‘all’);
    } else {
    wp_enqueue_style(‘wp-pagenavi’, plugins_url(‘wp-pagenavi/pagenavi-css.css’), false, ‘2.50’, ‘all’);
    }
    }

    删除之(这些就是加载pagenavi-css.css的代码)

    然后将pagenavi-css.css 中的内容,全部复制到你的主题目录中的style.css 中,保存即可。另外将其复制到style.css的时候,最好做好备份和注释

    2、修改wp-easyarchives的CSS及JS调用。 搜索下面代码

    // — head START

    将head START 和 head END中的代码都删除掉,即删除下面的代码

    function easyarchives_head() {
    $options = get_option(‘wp_easyarchives_options’);

    $script_html = ”;
    if($options[‘js_type’] == ‘normal’) {
    $script_html = ‘<script type=”text/javascript” src=”‘ . get_bloginfo(‘wpurl’) . ‘/wp-content/plugins/wp-easyarchives/js/wp-easyarchives.js”></script>’;
    } else if($options[‘js_type’] == ‘custom_jquery’) {
    if($options[‘jquery_url’] == ”) {
    $script_html = ”;
    } else {
    $script_html = ‘<script type=”text/javascript” src=”‘ . $options[‘jquery_url’] . ‘”></script>’;
    }
    $script_html .= ‘<script type=”text/javascript” src=”‘ . get_bloginfo(‘wpurl’) . ‘/wp-content/plugins/wp-easyarchives/js/wp-easyarchives-jquery.js”></script>’;
    } else {
    $script_html = ‘<script type=”text/javascript” src=”‘ . get_bloginfo(‘wpurl’) . ‘/wp-content/plugins/wp-easyarchives/js/wp-easyarchives-jquery.js”></script>’;
    }

    echo “\n” . ‘<!– START of script generated by WP-EasyArchives –>’;
    echo “\n” . ‘<!– END of script generated by WP-EasyArchives –>’ . “\n”;
    }
    add_action(‘wp_head’, ‘easyarchives_head’);

    现在wp-easyarchives的CSS和JS调用都没有了,但是我们还需要啊,下面我们可以将wp-easyarchives的CSS文件及JS文件都嵌入到别的CSS和JS文件中。比如我的主题是iNove的,对于CSS文件我将wp-easyarchives.css中的内容全部复制到了sytle.css中,对于JS文件,由于wp-easyarchives 插件提供了不止一个JS,我们可以选择一个,将其复制到inove/js/base.js 中。

    现在经过我们这样做之后,其实wp-easyarchives.php的下面这部分代码已经没有作用了(我们在wp-easyarchives的后台设置中虽然可以看到设置,但是设置已经没有作用了,因为前面我们已经删过别的代码了),可以将其删除。

    <form action=”#” method=”post” enctype=”multipart/form-data” name=”wp_easyarchives_form”>
    <div>
    <h2><?php _e(‘WP-EasyArchives Options’, ‘wp-easyarchives’); ?></h2>

    <table>
    <tbody>
    <tr valign=”top”>
    <th scope=”row”><?php _e(‘JavaScript Library’, ‘wp-easyarchives’); ?></th>
    <td>
    <label style=”margin-right:20px;”>
    <input name=”js_type” type=”radio” value=”normal” <?php if($options[‘js_type’] != ‘custom_jquery’ && $options[‘js_type’] != ‘wp_jquery’) echo “checked=’checked'”; ?> />
    <?php _e(‘Use normal JavaScript library that is supported by this plugin.’, ‘wp-easyarchives’); ?>
    </label>
    <br />
    <label>
    <input name=”js_type” type=”radio” value=”wp_jquery” <?php if($options[‘js_type’] == ‘wp_jquery’) echo “checked=’checked'”; ?> />
    <?php _e(‘Use jQuery library that is supported by WordPress.’, ‘wp-easyarchives’); ?>
    </label>
    <br />
    <label>
    <input name=”js_type” type=”radio” value=”custom_jquery” <?php if($options[‘js_type’] == ‘custom_jquery’) echo “checked=’checked'”; ?> />
    <?php _e(‘Custom jQuery.’, ‘wp-easyarchives’); ?>
    </label>
    <label>
    <?php _e(‘Please input the URL of jQuery:’, ‘wp-easyarchives’); ?>
    <input type=”text” name=”jquery_url” size=”40″ value=”<?php echo($options[‘jquery_url’]); ?>” />
    </label>
    </td>
    </tr>
    </tbody>
    </table>

    <p>
    <input type=”submit” name=”wp_easyarchives_save” value=”<?php _e(‘Save Changes’, ‘wp-easyarchives’); ?>” />
    </p>
    </div>
    </form>

    OK,折腾到此结束。其实很多插件如果涉及到了在前台的显示,都会增加一些CSS和JS文件,我们的方法都是找到其调用的代码,然后删除之,接着将被调用到的那些代码添加到我们主题里面的CSS和JS文件中。