テーマカスタマイザーの「追加CSS」をminify(縮小化)する


テーマのデザインを若干修正する場合、「追加CSS」を使っていますでしょうか。

「追加CSS」は 管理画面の外観 → カスタマイズ → 追加CSS で簡単にCSSを追加できます。

【カスタマイザー 追加CSS 画面】
カスタマイザー 追加CSS 画面

追加したCSSは公開画面 HTMLファイルのheadタグ内に出力されます。

【公開ページ HTMLソース】
公開ページ HTMLソース
さて「追加CSS」に記述したコードはコメントも含めて そのまま出力しますので minify(縮小化) されていません。これではカッコワルイので「追加CSS」に記述する時に何かのツールでminify(縮小化)して貼り付けてもいいのですが、後で再調整する時に困りますよね。

 

そこで「追加CSS」出力時に自動で 簡易minify(縮小化) するTips を紹介します。
これで コメントや コードフォーマット、minify(縮小化) 等を 意識せずに 普通に書き込めますので便利です。

【公開ページ HTMLソース minify後】
公開ページ HTMLソース minify後

 
 

「追加CSS」をminify(縮小化)する

以下のコードを my-plugin.php に張り付けてみてください。
このコードだけで「追加CSS」出力時に自動で 簡易minify(縮小化) します。

/**
 * Custom CSS minify Filter.
 *
 * @since 4.7.0
 * $css = apply_filters( 'wp_get_custom_css', $css, $stylesheet );
 * @param string $css        CSS pulled in from the Custom CSS CPT.
 * @param string $stylesheet The theme stylesheet name.
 * License: GPLv2 or later
 */
function nendebcom_wp_get_custom_css_minify( $css ) {
	if( $css != '' ){
		// Delete comment.
		$css = preg_replace( '!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $css );

		// Remove tabs, line breaks.
		$css = str_replace( array("\r\n", "\r", "\n", "\t" ), '', $css );

		// Remove spaces.
		$css = str_replace( array( '  ', '    ', '    '), '', $css );

		// Remove other spaces.
		$css = str_replace( ': ', ':', $css );
	}
	return $css;
}
add_filter( 'wp_get_custom_css', 'nendebcom_wp_get_custom_css_minify' );

 
次に、もう少し手のこんだ別の方法を紹介します。
 

CSSファイル と 「追加CSS」をminify(縮小化)する

「追加CSS」は便利なのですが、たまに保存に失敗したり CSSの行数が多くなった場合等 メンテナンス性が悪い場合がありますよね。
そこで、デザインCSSが完成した時点で style.cssファイルに置き換えておくのはどうでしょうか。
普通にwp_enqueue_scriptsフィルターを使う方法でもいいのですが、こちらの方でしたらminifyしてheadタグ内に出力できます。

ここでは 「追加CSS」に書いたコードを my-style.cssファイルに転記したものを「追加CSS」といっしょに出力する方法を紹介します。

【手順】
①「追加CSS」に書き込んだコードを my-style.cssファイルを作成してコピーしてください。
②「追加CSS」の内容は空にしてください。
③my-style.cssファイルを FTPでmy-pluginフォルダへアップロードしてください。
 ※my-pluginインストール前でしたら my-plugin.zip 内の my-pluginフォルダに入れて my-plugin をインストールしてください。
④以下のコードを my-plugin.php に張り付けてみてください。

/**
 * my-style File and Custom CSS minify Filter.
 *
 * @since 4.7.0
 * @param string $css        CSS pulled in from the Custom CSS CPT.
 * @param string $stylesheet The theme stylesheet name.
 * License: GPLv2 or later
 */
function nendebcom_wp_get_custom_css_minify2( $css ) {

	// Load original style.css.
	$css_file = '';
	require_once( ABSPATH . 'wp-admin/includes/file.php' );
	$path_name = dirname(__FILE__)  . '/my-style.css';
	if( WP_Filesystem() ){
		global $wp_filesystem;
		$css_file = $wp_filesystem->get_contents( $path_name );
	}

	// Attach my-style.css and custom_css.
	$css = $css_file . $css;

	// CSS Simple minify.
	if( $css != '' ){
		// Delete character code
		$css = str_replace( '@charset "utf-8";', '', $css );
		$css = str_replace( '@charset"utf-8";', '', $css );

		// Delete comment.
		$css = preg_replace( '!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $css );

		// Remove tabs and line breaks.
		$css = str_replace( array("\r\n", "\r", "\n", "\t" ), '', $css );

		// Remove spaces.
		$css = str_replace( array( '  ', '    ', '    '), '', $css );

		// Remove other spaces.
		$css = str_replace( ': ', ':', $css );
	}
	return $css;
}
add_filter( 'wp_get_custom_css', 'nendebcom_wp_get_custom_css_minify2' );

これで、my-style.css の内容と「追加CSS」の内容をくっつけて minify(縮小化)してheadタグ内に出力されます。後でちょっとした追加変更があれば「追加CSS」に入力したらいいですね。

 
 

my-style.cssを管理画面で編集

後で my-style.css を編集したい場合は プラグイン→プラグイン編集で「編集するプラグインを選択」で my-plugin にして「選択」ボタンを押してください。
次に プラグインファイルを my-style.css に選択すれば 編集できるようになります。
my-style.cssを編

 
 

参考

wp_get_custom_css | Hook | WordPress Developer Resources
https://developer.wordpress.org/reference/hooks/wp_get_custom_css/

ファイルシステムAPI – WordPress Codex 日本語版
https://wpdocs.osdn.jp/%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0API