WordPressでstyle.cssをインラインにする

通常、WordPressではstyle.cssは次のように入れることが多かったです。

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

2019年ごろになると、改行なし、必要最小限のスペース、コメントなしでインラインで書き込んだ方が高速化になるため、style.cssをインラインにすることが増えてきました。

WP_FileSystemを使う
cssをインライン化

WP_FileSystemを使う

設定方法はこちらの記事をご覧ください。

ただし、下に記載したコードに含まれているので、見なくても大丈夫かも。

WordPressでWP_FileSystemを使うとき

WordPressを高速化するにあたり、style.cssをインラインで入れ込むために、WP_FileSystemを使うことにしました。phpならfile_get_contentsが使えるけど、WordPressでは使わない方が良いファイル...

cssをインライン化

コードが長いです。

縮小化ライブラリphp-html-css-js-minifier.phpを使って、縮小しています。

php-html-css-js-minifier.phpはgitからダウンロードできます。

オリジナル　https://gist.github.com/tovic/d7b310dea3b33e4732c0

フォークもあるので、上手く動作しないときは、フォークのものを使うといいかもしれません。

// 縮小化ライブラリの読み込み(ライブラリへのパスは各サイトの状態に合わせる)
require_once( get_stylesheet_directory() . '/php-html-css-js-minifier.php' );
// WP_FileSystem呼び出し
require_once( ABSPATH . 'wp-admin/includes/file.php' );

// CSSをインラインで追加
function output_inline_style() {
 // CSSスタイルファイルをキューに追加
 wp_register_style( 'style', false );
 wp_enqueue_style( 'style' );

 // CSSファイルの場所
 $css_files = get_stylesheet_directory() . '/style.css';
 
 // WP_Filesystemを使ってインライン化
 if ( WP_Filesystem() ) {
   global $wp_filesystem;
   $css = $wp_filesystem->get_contents( $css_files );

   // 文字コード削除 style.cssの冒頭部分にある文字、スペースと合わせてください
   $css = str_replace( '@charset"utf-8";', '', $css );

   // 縮小化
   $css = minify_css( $css );

   // cssをインライン化するWordPressの関数
   wp_add_inline_style( 'style', $css );
  }
 }
 add_action( 'wp_enqueue_scripts', 'output_inline_style' );