WordPress で Minified 化した style.css を利用するメモ書きです。
Minified 化とは Web コンテンツ最適化の手法の一つで、CSS とか JS から動作に必要のないコメントや空白を取り除きファイルサイズを削って早くしようというものです。
これをやったから爆速になるという訳ではないですが、余分な情報を読み取る必要がなくなるのでレンダリング時および、Web サーバ (コネクション) の最適化に繋がるという感じですかね。
WordPress に新しく追加する物とかは自分で Minified 化したファイルにパスを通せばそれでいいんですけど、style.css の Minified 化はどうやるのかわからなかったのでちょっと試してみました。
思いついたのは、テーマの識別に必要なヘッダ情報だけを残して Minified 化だったのですが、どうせならフックかなんかで Minified 化したファイルをダイレクトに指定したいと思いたどり着いたのがコレ。
if ( ! is_admin() ) {
function min_style( $style_uri, $style_dir_uri ) {
$style = str_replace( trailingslashit( $style_dir_uri ), '', $style_uri );
$style = str_replace( '.css', '.min.css', $style );
if ( file_exists( trailingslashit( STYLESHEETPATH ) . $style ) ) {
$style_uri = trailingslashit( $style_dir_uri ) . $style;
}
return $style_uri;
}
add_filter( 'stylesheet_uri', 'min_style', 10, 2 );
}
これを functions.php に書くと stylesheet_uri のフックで style.css を style.min.css に置換するというもの。
style.min.css を style.css と同じ階層に置けば min.css が使われて、なければ style.css をという感じでいい感じに変更できました。
これの元コードは下記を参考にしました。
上記は開発用のスタイルシートを読み込ませるというコードですが、この Minified 化用のコードと併用する場合はこんな感じで書くとバッチリです。
if ( ! is_admin() ) {
function development_style( $style_uri, $style_dir_uri ) {
if ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) {
$style = str_replace( trailingslashit( $style_dir_uri ), '', $style_uri );
$style = str_replace( '.css', '.dev.css', $style );
if ( file_exists( trailingslashit( STYLESHEETPATH ) . $style ) ) {
$style_uri = trailingslashit( $style_dir_uri ) . $style;
}
}
return $style_uri;
}
add_filter( 'stylesheet_uri', 'development_style', 9, 2 );
}
style.css と同じ階層に style.dev.css を置いて、wp-config.php に下記一行を追加すると開発用のスタイルシートを読むようになります。
define('SCRIPT_DEBUG', true);
フック時にこっちの優先度を上げて、先に置換しちゃうって感じですね。
style.min.css を削除して style.css を読み込ませた方が早かったりもしますけどコレはコレで便利です。
他にも、スタイルシート中に下記のように書くという方法もある様子。
/*
Theme Name: mytheme
Theme URI: https://worklog.be/
Author: miura
Author URI: https://worklog.be/
Description: mytheme
Template: twentyfourteen
Version: 1.0
*/
@import url("./style.min.css");
ただこれだと 2 回 HTTP リクエストが飛ぶから何か微妙。
あと、一部の情報で WordPress は style.min.css があれば優先して読むというのがあったのですが、自分の環境では全然無視してました。これができれば一番楽だったんですが。
とりあえず、こんな感じに Minified 化させてみました。