WordPressの始め方と使い方をわかりやすく解説!

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のみで利用する方がいいでしょう。

関連記事

FOXWP

Conoha WINGからエックスサーバーにWordPressの引越しを行う手順

Conoha WINGからエックスサーバーに引越しを行う手順 Conoha WINGからエックスサーバーに引越しを行う際の注意点 ネームサーバーがエックスサーバーのネームサーバーに設定されていないと、無料独自SSLの設定

FOXWP

wp-envで構築したWordPressのデータベースへアクセスする手順

wp-envで構築したローカル開発環境のデータベースにサクセスするには、Local WordPress EnvironmentのAccessing the MySQL Databaseに記載されている方法で行えます。 参

FOXWP

【WordPress】はじめてのブロックエディター開発

この記事では、WordPressでブロック開発をした際のメモです。 WordPressで必要最低限のブロックを開発するには、@wordpress/create-blockパッケージを作成することですぐにできます。 参考:

FOXWP

wp-envとは?使い方を解説

wp-envを利用した際のメモです。 wp-envとは? ローカルのWordPress開発環境 wp-envとは、ローカルのWordPress開発環境です。Docker Desktopと合わせて利用します。 wp-env

FOXWP

WordPressのおすすめセキュリティプラグイン6選

WordPressセキュリティプラグインを使えば、専門的知識がない方でも手軽にセキュリティ対策を行うことができます。 マルウェア・ブルーフォースアタック・ハッキングといった様々な障害からあなたを守ってくれます。 この記事

FOXWP

WordPressでおすすめの目次プラグイン8選

記事に目次を挿入すれば、読者に記事の全体像を理解してもらいやすくなります。欲しい情報があるか判断する手助けとなり、読者にとって使いやすいサイトと認識してもらえます。 この記事では、目次を挿入できるおすすめのWordPre