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

以前に書いた「WordPressでCSSをMinifyしてファイルに保存し、インラインCSSとして出力する」という記事とほぼ同じですが、今回は単に外部ファイルとして利用する方法です。

多くのサイトはインラインで出力していないと思いますので、こちらの方がまだ汎用的かもしれません。

実現したいこと

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

• オリジナルのCSSをアップロードしたら、自動で圧縮する
• 圧縮するのは、オリジナルの方が圧縮したファイルよりも新しい時のみ

前提

前提は以下の通りです。

• 圧縮用のライブラリ設置して事前に読み込ませる(※後述)
• style.cssはテーマの1階層目のフォルダに設置
• 圧縮したstyle.min.cssはCSSフォルダに出力(事前にCSSフォルダを用意する必要あり)
• wp_enqueue_scriptsにフックして、functions.phpにてCSSを読み込むlinkタグをheadに出力する

上記のライブラリとは、インラインの時と同様に以下の記事で紹介されているライブラリを使用します。

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

動作

動作としては以下のような流れです。

1. サイトにアクセスする
2. 圧縮後のCSSファイルの有無をチェック(なければCSSフォルダに新規作成)
3. オリジナルと圧縮後のファイルの日付を比較
4. オリジナルの方が新しければ圧縮し、圧縮後ファイルに上書きして出力
5. 圧縮後の方が新しければそのまま出力

3の時点でファイルの日付を判断しているため、オリジナルファイルに変更が加えられれば新規に圧縮後ファイルが作成される、という仕組みです。

コード

以下がfunctions.phpに記載するコードです。

//縮小化ライブラリの読み込み(ライブラリへのパスは各サイトの状態に合わせる)
require_once (get_stylesheet_directory() . '/inc/php-html-css-js-minifier.php');
//WP_Filesystemを使用するためにWPのコアにあるファイルを読み込み
require_once(ABSPATH . 'wp-admin/includes/file.php');

function my_mynify_css(){
  //オリジナルのcss(絶対パス)
  $origin_file      = get_stylesheet_directory() . '/style.css';
  //minify後のcss(絶対パス)
  $minify_file      = get_stylesheet_directory() . '/css/style.min.css';
  //オリジナルのcssファイル(URI)
  $origin_file_uri  = get_stylesheet_directory_uri() . '/style.css';
  //minify後のcssファイル(URI)
  $minify_file_uri  = get_stylesheet_directory_uri() . '/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);
  }

  if( file_exists($minify_file) ){
    //圧縮したファイルがあれば圧縮ファイルのURLを代入
    $file = $minify_file_uri;
  } else {
    //圧縮したファイルがなければオリジナルのファイルのURLを代入
    $file = $origin_file_uri;
  }
}

//外部CSSファイル読み込み用のlinkタグでCSSを出力
wp_enqueue_style( 'my-minify-style', $file );

}

上記を記載の上、wp_enqueue_scriptsにフックさせている関数に以下のように記載します。

//以下の関数名やadd_actionの記述は各サイトが現在使用中のものがあれば不要で、既存の関数の中に前述のコードの関数名を記載すれば動作します
function my_scripts() {
 my_mynify_css();
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );

別コード(header.phpに直書きしている場合)

header.phpにlinkタグを直書きしている場合は、以下のように後半を書換える必要があります。

//縮小化ライブラリの読み込み(ライブラリへのパスは各サイトの状態に合わせる)
require_once (get_stylesheet_directory() . '/inc/php-html-css-js-minifier.php');
//WP_Filesystemを使用するためにWPのコアにあるファイルを読み込み
require_once(ABSPATH . 'wp-admin/includes/file.php');

function my_mynify_css(){
  //オリジナルのcss(絶対パス)
  $origin_file      = get_stylesheet_directory() . '/style.css';
  //minify後のcss(絶対パス)
  $minify_file      = get_stylesheet_directory() . '/css/style.min.css';
  //オリジナルのcssファイル(URI)
  $origin_file_uri  = get_stylesheet_directory_uri() . '/style.css';
  //minify後のcssファイル(URI)
  $minify_file_uri  = get_stylesheet_directory_uri() . '/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);
  }
}

}
add_action( 'get_header', 'my_mynify_css' );

header.phpには以下にように書けば表示されます。

<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/css/style.min.css" type="text/css">

関数の実行にはget_headerのフックを利用していますが、それほど強い必然性はなく、wp_enqueue_scriptsの直前付近で動作するからという程度です。

結び

CSSやJSの圧縮は、この記事のようにわざわざコードを作らなくても、サーバーの設定(mod_pagespeedなど)やプラグインの導入で簡単に実現できるでしょう。

とはいえ一長一短な部分が存在する場合もあり、サーバーやサイトにあわせて考えた方がよいように思います。