WordPressでヘッダーにstyleタグを出力する方法

wp_headのアクションフックでwp_kses関数を利用し、styleタグを出力します。

// ヘッダー内にstyleタグを出力するためwp_headのアクションフックを指定する
add_action( 'wp_head', 'print_styles' );

// styleタグを出力する関数
function print_styles() {

    // 出力したいCSSを記載
	$styles =
		'body {
		  color: red;
		}';

    // 圧縮し、styleタグを生成する
	$css = sprintf( '<style type="text/css" id="foxwp">%s</style>', minify_css( $styles ) );

    // wp_ksesで使用するタグを指定する
	$allowed_tags = array(
		'style' => array(
			'type' => array(),
			'id'   => array(),
		),
	);

    // styleタグの出力を行う
	echo wp_kses( $css, $allowed_tags );

}

// CSSの圧縮を行う関数
function minify_css( $css ) {
	return str_replace( '; ', ';', str_replace( ' }', '}', str_replace( '{ ', '{', str_replace( array( "\r\n", "\r", "\n", "\t", '  ', '    ', '    ' ), '', preg_replace( '!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $css ) ) ) ) );
}

この方法では、直接styleタグを出力します。CSSシートの読み込みが発生しないため、わずかに読み込み速度が速くなるメリットがあります。

ただし、CSSの管理が行いにくいです。直接styleタグを出力するのは、短いCSSのみで利用する方がいいでしょう。

よかったらシェアしてね!
  • URLをコピーしました!