こんにちは、mimiです。

前回のヘッダーの中をきれいにしように続いて、WordPressのスリム化計画その2では、CSSとJSファイルのスリム化を目指したいと思います。

SCRIPT_DEBUG関数を使って、開発時とリリース時のファイルを分けたり、というお話です。

まず、CSSとJSの読み込みはfunctions.phpに一元化。

デバック時は圧縮してないstyle.cssを読み込み、本番時はstyle.min.cssを読み込みます。JavaScriptはmodernirの圧縮したものをヘッダーに、自作のmain.jsはフッダーに読み込むようになっています。

//css,jsの読み込み
function myTemplate_scripts() {
    //デバックでも本番でも読み込むもの
    wp_enqueue_script( 'modernizr', get_template_directory_uri() . '/js/vender/modernizr-2.8.3.min.js', array(),'2.8.3',false);

    //デバック時と本番で切り替えるもの
    if(SCRIPT_DEBUG) {
        //css
        wp_enqueue_style( 'myTemplate-style', get_stylesheet_uri(), false, filemtime( get_stylesheet_directory() . '/style.css') );
        //js
        wp_enqueue_script( 'myTemplate-script', get_template_directory_uri() . '/js/main.js', array(), '1.0.0', true);
    } else {
        //css
        wp_enqueue_style('myTemplate-style', get_stylesheet_directory_uri() . '/style.min.css' );
        //js
        wp_enqueue_script( 'myTemplate-script', get_template_directory_uri() . '/js/main.min.js', array(), '1.0.0', true);
    }
}
add_action( 'wp_enqueue_scripts', 'myTemplate_scripts' );

そして、wp-config.phpに

define( 'SCRIPT_DEBUG', true );

を書き加えておくと、

<link rel='stylesheet' id='myTemplate-style-css' href='http://yoursite.com/wp-content/themes/myTemplate/style.css?ver=1493820564' type='text/css' media='all' />
<script type='text/javascript' src='http://yoursite.com/wp-content/themes/myTemplate/js/vender/modernizr-2.8.3.min.js?ver=2.8.3'></script>

がヘッダーに

<script type='text/javascript' src='http://yoursite.com/wp-content/themes/myTemplate/js/main.js?ver=1.0.0'></script>

がbodyタグ前に入ります。

SCRIPT_DEBUGがfalse（本番環境）なら

<link rel='stylesheet' id='myTemplate-style-css'  href='http://local.test/gulped_wordpress/wp-content/themes/myTemplate/style.min.css?ver=4.7.3' type='text/css' media='all' />
<script type='text/javascript' src='http://local.test/gulped_wordpress/wp-content/themes/myTemplate/js/vender/modernizr-2.8.3.min.js?ver=2.8.3'></script>

に変わります。

プラス解説

wp_enqueue_styleとwp_enqueue_scriptが肝。
wp_enqueue_styleには5番目のパラメータでmediaタイプも選べるようになっています。

また、今回の例には書いてないですが、wp_enqueue_scriptには3番目のパラメータで依存関係のあるファイル、例えばjqueryなどを指定しておくと、jqueryを先に読み込むようになります。wp_enqueue_scriptのページにwordpressに登録されているjsライブラリがどっさり載っています。

そして、SCRIPT_DEBUG関数をtrueにしておくと、これらのライブラリの圧縮したもの（min）を読み込むか通常版を読み込むかが自動で切り替わるようになっています。

・・・でもホントに本番環境ならif文一個でも削りたい気もするので、コメントアウトとかで対応したほうが良いかもなあ・・・。まだ改良の余地あり。

・・・本当はnpm-scriptを使ってSASSを使ったり圧縮させたり、というところまで書きたかったのだけれど、長くなったのでまた次回！

その２に続く