[Gutenberg対応版]WordPressで複数のCSSをまとめてインラインCSSとして出力する

以前書いた「WordPressでCSSをMinifyしてファイルに保存し、インラインCSSとして出力する」とほぼ同じですが、ちょっと整理してGutenberg(ブロックエディタ)が出力する2つのCSSも対象にした記述を追加しました。

CSSのインライン出力は表示速度とAMP対応をメインに考えた手法でしたが、こういう単純方法では50KBの制限にかかりやすくAMPでは使えないと思われます。

実現したいこと

• テーマのstyle.cssと、Gutenbergのstyle.cssとtheme.cssの3つをまとめてインラインで出力する
• テーマのCSSはMinifyする
• テーマやGutenbergのCSSが更新されたら、自動でインラインCSSも更新される

GutenbergのCSSは以下のようなパスで出力されるものです。

• example.com/wp-includes/css/dist/block-library/style.min.css
• example.com/wp-includes/css/dist/block-library/theme.min.css

上記2つは名称からすでにMinifyされていることがわかりますから、テーマのCSSのみ別でMinifyの処理を行う必要があります。

構造

処理としては以下のような構造を意図しています。

1. 3つのファイルをまとめて統合CSSファイルをつくり、それを読み込んでインラインで出力させる
2. サイトの表示時に統合CSSファイルの日付と各CSSの日付を比較し、必要に応じて統合ファイルを再作成する

一見手間がかかっていますが、毎回ファイルの結合を行う無駄を省くためにこの形を検討しました。

その他の詳細はコード内のコメントや以下の以前の記事を参照してください。

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

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

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

サンプル

事前に以下のファイルを作ってサーバーにアップしておく必要があります。サンプルではCSSフォルダに入れていますが、パスさえ合っていれば場所はどこでも構いません。

• style.min.css(GutenbergのCSSとテーマのCSSを統合した最終的なCSSファイル)
• style-origin.min.css(テーマのCSSをMinifyしただけのCSSファイル)

上記ファイルは以下の仕組みで自動で上書きされていくので中身はなにも記述しない状態でOKです。
それでは以下がサンプルコードです。

//WP_Filesystemを使用するためにWPのコアにあるファイルを読み込み
require_once(ABSPATH . 'wp-admin/includes/file.php');

function my_minify_css(){
 //CSSファイルの場所指定
 $dir               = get_stylesheet_directory();
 //オリジナルのcss
 $theme_style_file  = $dir . '/style.css';
 //gutenbergのcss
 $guten_style_file  = ABSPATH . 'wp-includes/css/dist/block-library/style.min.css';
 //gutenbergのtheme.min.css
 $guten_theme_file  = ABSPATH . 'wp-includes/css/dist/block-library/theme.min.css';
 //オリジナルをminifyした後のcss
 $minify_style_file = $dir . '/css/style-origin.min.css';
 //オリジナルとgutebergを合わせてminifyした後のcss
 $minify_file       = $dir . '/css/style.min.css';
 //cssの中身を入れる変数
 $css = ''; //最終的にまとめたCSSの中身
 $theme_style_css  = ''; //テーマのCSSの中身
 $guten_style_css  = ''; //gutenbergのstyle.cssの中身
 $guten_theme_css  = ''; //gutenbergのtheme.cssの中身
 //オリジナルファイルの日付を入れる変数
 $theme_style_file_date = '';
 //minifyファイルの日付を入れる変数
 $minify_file_date = '';
 //minifyしたファイルの中身を上書きするかどうかの判断に用いる
 $flag1 = false;
 $flag2 = false;

 //オリジナルファイルの日付を取得
 $theme_style_file_date = filemtime($theme_style_file);
 //gutenbergのファイルの日付を取得
 $guten_style_file_date = filemtime($guten_style_file);
 //gutenbergのファイルの日付を取得
 $guten_theme_file_date = filemtime($guten_theme_file);
 //minifyファイルの日付を取得
 $minify_file_date      = filemtime($minify_file);

 if( file_exists($minify_style_file) && ($minify_file_date < $theme_style_file_date) ){
  //テーマCSSの方が、最終的なminifyファイルよりも新しい場合
  $flag1 = true;
 }
 if( file_exists($guten_style_file) && ($minify_file_date < $guten_style_file) ){
  //gutenbergのstyle.cssの方が、最終的なminifyファイルよりも新しい場合
  $flag2 = true;
 }
 if( file_exists($guten_theme_file) && ($minify_file_date < $guten_theme_file) ){
  ///gutenbergのtheme.cssの方が、最終的なminifyファイルよりも新しい場合
  $flag2 = true;
 }

 //$wp_filesystemオブジェクトの呼び出し
 global $wp_filesystem;

 if( WP_Filesystem() ){

  if( $flag1 ){
   //縮小化ライブラリの読み込み
   require_once (get_stylesheet_directory() . '/inc/php-html-css-js-minifier.php');
   //テーマCSSの中身を取得
   $theme_style_css = $wp_filesystem->get_contents($theme_style_file);
   //テーマCSSの中身を読み込んだライブラリ(php-html-css-js-minifier.php)でminifyする
   $theme_style_css = minify_css($theme_style_css);
   //minifyした状態でファイルに保存。
   $wp_filesystem->put_contents($minify_style_file, $theme_style_css);
  }

  //テーマのCSSを新たにminifyしたか、GutenbergのCSSのファイルの日付より最終的に使うminifyしたファイルよりも新しい場合に動作
  if( $flag1 || $flag2 ) {
   //テーマのstyle.cssをminifyしたstyle-orijin.min.cssの中身を取得
   $minify_style = $wp_filesystem->get_contents($minify_style_file);
   //gutenbergのstyle.cssの中身を取得
   $css_guten_style  = $wp_filesystem->get_contents($guten_style_file);
   //gutenbergのtheme.cssの中身を取得
   $css_guten_theme  = $wp_filesystem->get_contents($guten_theme_file);
   //3つの中身を結合
   $css = $minify_style . $css_guten_style . $css_guten_theme;
   //結合したCSSをファイルに出力
   $wp_filesystem->put_contents($minify_file, $css);
  }

 }
}
//ページや投稿画面が表示されるたびに実行する
//他の処理より早く実行した方が良い可能性があるため優先度は高めに設定
add_action( 'after_setup_theme', 'my_minify_css', 5 );

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

 if( WP_Filesystem() ){
  //オリジナルとgutebergを合わせてminifyした後のcss
  $minify_file       = $dir . '/css/style.min.css';
  //結合したファイルの中身を取得
  $out = $wp_filesystem->get_contents( $minify_file );
  //インラインで出力
  echo '<style type="text/css" class="minify">' . $out . '</style>';
 }
}
//ページが表示されるたびに実行する（投稿画面が表示されても実行されない)
add_action( 'wp_head', 'my_inline_css' );

結び

Gutenbergの導入でCSSファイルの数が増えてしまいます。

おそらくサーバー側で高速化の仕組みが導入されている場合は自動で対応済みとは思いますが、独自にCSSをインラインで出力しているサイトは動作を確認しておいたほうがよいかもしれません。