CSSを圧縮 (minify) する

WordPress のテーマカスタマイザーの追加CSS機能を使って追加したスタイルシートは、コメントを含めてHTMLにそのまま出力される。コメントを削除するついでに余分なスペースなども削除するようにした。

具体的には次のような関数を作った。

  1. コメント除去
  2. 改行＆タブ除去
  3. 2つ以上連続したスペース除去
  4. 記号の前後の（1文字）スペース除去

すべてのケースを網羅できていないかもしれないが、自分の書き方においては問題なく動作した。2を先にやれば1のsフラグが不要かもしれない。

function kh_minify_css( $css ) {

	$pattern = array(
		'|/\*.*?\*/|s',		// コメントを削除（複数行対応）
		'/\s/',				// [\t\n\r\f]を1個のスペースに
		'/ {2,}/',			// 2個以上のスペースを1個に
		'/ ?([:;,{}]) ?/',	// 記号前後の1文字空白を削除
	);
	$replace = array(
	    '',
	    ' ',
	    ' ',
	    '\1',
	);

	// 文字列先頭に空白が1個残るケースがあるのでtrim()している
    $css = trim( preg_replace( $pattern, $replace, $css ) );

	return $css;
}

この関数を、カスタムCSS読み込み後に呼ばれる ‘wp_get_custom_css’ フィルターにフックする。

この処理は全ページの表示時に行われるので、処理負荷が高いといわれる正規表現を使った置換を毎回行うのは気が引ける。それにCSSは更新頻度が低いので、キャッシュすることとした。

add_filter( 'wp_get_custom_css', 'kh_get_custom_css', 10, 2 );
function kh_get_custom_css( $css, $stylesheet ){
	
	if( $cache = get_transient( 'LF_CUSTOM_CSS' ) ){
		return $cache;
	}

	$css = kh_minify_css( $css );
	set_transient( 'LF_CUSTOM_CSS', $css, DAY_IN_SECONDS );
	return $css;
}

追加CSSが編集されたときにキャッシュを削除する処理も追加する。これでキャッシュも最新に保たれるはずだが、想定外を想定してキャッシュの寿命を1日にセットしておいた。

add_action( 'customize_save_after', 'kh_customize_save_after' );
function kh_customize_save_after( $manager ) {
	delete_transient( 'LF_CUSTOM_CSS' );
}

Posted by

koji

on

in category

«

»