WordPressでCSSをMinifyしてファイルに保存し、インラインCSSとして出力する

以前から作ってみたかった、CSSの自動Minify(改行や空白やコメントなどを削除してデータ量の軽量化を行う)を作れたので、内容的には目新しさもユニークさもありませんが記事の形で残したいと思います。

WrodPressのサイトに組み込む前提のコードの他に、WordPressではないけれどPHPが使えるサイトに組み込む前提のコードも記載しています。

なお、インラインではなく外部CSSとして読み込ませる形で作った記事もありますので、詳細は以下からどうぞ。

• WordPressでCSSを自動で圧縮して用いる

実現したいこと

実現したいことは以下の通りです。

• 素のCSSをアップロードしたら、自動でMinifyiさせる
• MinifyしたCSSをheadにインラインCSSとして出力する

当サイトはCSSを読み込ませずにインライン化していますので、その形にhead内への出力までを目標にしています。

なお、当初は勉強も兼ねてPHPキャッシュを使おうかと考えていましたが、断念して以下の方法で構築しました。

1. 素のCSSファイルの中身を取得してMinify
2. Minifyした中身を専用のCSSファイルに書出し保存
3. Minifyした専用CSSの中身を取得してhead内に出力

前提

今回の構造上の前提は以下の通りです。

• CSSは「CSS」という名称のディレクトリにまとめている
• Minify前の素のCSS(=普段エディタなどで更新するCSS)はstyle.origin.cssと命名している

当サイト用のサンプルコードという理由で上記の形にしているだけなので、もちろん別の構造への変更や対応も可能です。

WordPress用のコード

以下が作成したコードです。

//縮小化ライブラリの読み込み
require_once (get_template_directory() . '/inc/php-html-css-js-minifier.php');
//WP_Filesystemを使用するためにWPのコアにあるファイルを読み込み
require_once(ABSPATH . 'wp-admin/includes/file.php');

function my_mynify_css(){
 //CSSファイルの場所指定
 $dir_css          = get_template_directory() . '/css/';
 //オリジナルのcss
 $origin_file      = $dir_css . 'style.origin.css';
 //minify後のcss
 $minify_file      = $dir_css . 'style.min.css';
 //cssの中身を入れる変数
 $css              = '';
 //オリジナルファイルの日付を入れる変数
 $origin_file_date = '';
 //minifyファイルの日付を入れる変数
 $minify_file_date = '';
 //minifyしたファイルの中身を上書きするかどうかの判断に用いる
 $flag = false;

if( WP_Filesystem() ){
 //$wp_filesystemオブジェクトの呼び出し
 global $wp_filesystem;

 //minify用のファイルがなければ生成
 if ( !file_exists($minify_file) ){
  $wp_filesystem->touch($minify_file);
  $flag = true;
 }

 //オリジナルファイルの日付を取得
 $origin_file_date = filemtime($origin_file);
 //minifyファイルの日付を取得
 $minify_file_date = filemtime($minify_file);

 if( $minify_file_date < $origin_file_date){
  //オリジナルの方がminifyよりも新しい場合
  $flag = true;
 }

 if($flag){
  //オリジナルの中身を取得
  $css = $wp_filesystem->get_contents($origin_file);
  //minifyを取得し、読み込んだライブラリ(php-html-css-js-minifier.php)でminifyする
  $css = minify_css($css);
  $wp_filesystem->put_contents($minify_file, $css);
 }

 $out = $wp_filesystem->get_contents( $minify_file );
 echo '<style type="text/css" class="minify">' . $out . '</style>';
}

}

add_action( 'wp_head', 'my_mynify_css', 20 );

今回は下記の記事を参考にして、Minify用のPHPライブラリを使っています。

• PHPでCSSやJavaScriptを縮小化するWordPressカスタマイズ方法

Minify用CSSをPHPで生成する必要性があまりないのですが(初回に生成するだけのため)、これも以前からやってみたかったのもあり記載しています。

WordPressではないがPHPを使えるサイト用のコード

以下がPHPのコードです。

function my_mynify_css(){
//テンプレートを入れているディレクトリまでの絶対パスを記載する
$dir = '';
//縮小化ライブラリの読み込み
require_once ($dir . 'inc/php-html-css-js-minifier.php');

//オリジナルのcss
$origin_file = $dir . 'css/style.origin.css';
//minify後のcss
$minify_file = $dir . 'css/style.min.css';
//minifyしたファイルの中身を上書きするかどうかの判断に用いる
$flag = false;

//minify用のファイルがなければ生成
if ( !file_exists($minify_file) ){
  touch( $minify_file );
  $flag = true;
}

//オリジナルとminifyファイルの日付を取得して比較
$origin_file_date = filemtime($origin_file);
$minify_file_date = filemtime($minify_file);
if( $minify_file_date < $origin_file_date ){
	$flag = true;
}

//オリジナルの方がminifyよりも新しい場合
if( $flag ){
	//minifyを取得し、読み込んだライブラリ(php-html-css-js-minifier.php)でminifyする
  $css = minify_css(file_get_contents($origin_file));
  file_put_contents($minify_file, $css);
}
$out = file_get_contents( $minify_file );

echo '<style type="text/css" class="minify">' . $out . '</style>';

}

表示用のテンプレートファイル内の表示させたい場所には、以下のように記載して上記の関数を実行させます。

<?php my_mynify_css(); ?>

結び

以前自作したAMPプラグインのheadにも流用できるようにしたので、とりあえずある程度の目的は達成できたかなと。

ファイルの内容を取得して出力するより、キャッシュから出力したほうが早いのではと思うので、今後は当初予定していたPHPキャッシュの利用を試したいと思います。