テーマのデザインを若干修正する場合、「追加CSS」を使っていますでしょうか。
「追加CSS」は 管理画面の外観 → カスタマイズ → 追加CSS で簡単にCSSを追加できます。
【カスタマイザー 追加CSS 画面】
追加したCSSは公開画面 HTMLファイルのheadタグ内に出力されます。
【公開ページ HTMLソース】
さて「追加CSS」に記述したコードはコメントも含めて そのまま出力しますので minify(縮小化) されていません。これではカッコワルイので「追加CSS」に記述する時に何かのツールでminify(縮小化)して貼り付けてもいいのですが、後で再調整する時に困りますよね。
そこで「追加CSS」出力時に自動で 簡易minify(縮小化) するTips を紹介します。
これで コメントや コードフォーマット、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/