テーマカスタマイザーの「追加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 );
		$css = str_replace( ' :', ':', $css );
		$css = str_replace( ' }', '}', $css );
		$css = str_replace( '} ', '}', $css );
	}
	return $css;
}
add_filter( 'wp_get_custom_css', 'nendebcom_wp_get_custom_css_minify' );

 
 

参考

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