以前から作ってみたかった、CSSの自動Minify(改行や空白やコメントなどを削除してデータ量の軽量化を行う)を作れたので、内容的には目新しさもユニークさもありませんが記事の形で残したいと思います。
WrodPressのサイトに組み込む前提のコードの他に、WordPressではないけれどPHPが使えるサイトに組み込む前提のコードも記載しています。
なお、インラインではなく外部CSSとして読み込ませる形で作った記事もありますので、詳細は以下からどうぞ。
実現したいこと
実現したいことは以下の通りです。
- 素のCSSをアップロードしたら、自動でMinifyiさせる
- MinifyしたCSSをheadにインラインCSSとして出力する
当サイトはCSSを読み込ませずにインライン化していますので、その形にhead内への出力までを目標にしています。
なお、当初は勉強も兼ねてPHPキャッシュを使おうかと考えていましたが、断念して以下の方法で構築しました。
- 素のCSSファイルの中身を取得してMinify
- Minifyした中身を専用のCSSファイルに書出し保存
- 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ライブラリを使っています。
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キャッシュの利用を試したいと思います。
2人がこの記事を評価
役に立ったよという方は上の「記事を評価する」ボタンをクリックしてもらえると嬉しいです。
連投防止のためにCookie使用。SNSへの投稿など他サービスとの連動は一切ありません。