12017-05-04こんにちは、mimiです。前回のヘッダーの中をきれいにしように続いて、WordPressのスリム化計画その2では、CSSとJSファイルのスリム化を目指したいと思います。SCRIPT_DEBUG関数を使って、開発時とリリース時のファイルを分けたり、というお話です。CSSとJSの読み込みはfunctions.phpに一元化。デバック時は圧縮してないstyle.cssを読み込み、本番時はstyle.min.cssを読み込みます。JavaScriptはmodernirの圧縮したものをヘッダーに、自作のmain.jsはフッダーに読み込むようになっています。src='http://yoursite.com/wp-content/themes/myTemplate/js/main.js?ver=1.0.0'></script>がbodyタグ前に入ります。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を使ったり圧縮させたり、というところまで書きたかったのだけれど、長くなったのでまた次回!その2に続くこの記事を書いた人mimi主に書いている人。