• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

FOXWP

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

  • HOME
  • WordPressブログの始め方
  • お問い合わせ
FOXWP / WordPress / WordPressでヘッダーにstyleタグを出力する方法

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

最終更新日:2021年10月6日

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

カテゴリー:WordPress タグ:WordPress開発

WordPress初心者の方に読んで欲しい記事

  • あとで後悔しない!WordPress初期設定の基本事項
  • 安全にサイトを運営しよう!WordPressセキュリティ対策の基本マニュアル
Previous Post: « 【初心者向け】WordPressでエラーが出た際のトラブルシューティング
Next Post: WordPressで作られた他サイトのブログ記事一覧を確認する方法 »

Primary Sidebar

世界で一番利用されているWordPressテーマ

Divi WordPress Theme
レビューを見る

あなたの悩みは?

WordPress
セキュリティ
WordPress
トラブル
アクセスアップアフィリエイト
おすすめASP

最新ニュース

  • 【カラフルボックス】夏のキャンペーン実施中【2021年8月31日まで】

最近の投稿

  • WordPressでおすすめのバックアッププラグイン5選
  • WordPressのPHP設定を変更する方法(php.ini)
  • WordPressでおすすめの画像圧縮プラグイン5選
  • WordPressの投稿編集画面でその投稿を表示する方法
  • WordPressの管理画面に再利用ブロックの管理を追加する方法

カテゴリー

  • WordPress
  • お役立ち情報
  • アフィリエイト
  • ドメインレジストラ
  • レンタルサーバー
    • ColorfulBox
    • Conoha WING
    • mixhost
    • さくらのレンタルサーバー
    • エックスサーバー
    • エックスフリー
    • ロリポップ!
  • 便利ツール
WordPress学習方法
トップページへ

プライバシーポリシー|お問い合わせ
Copyright © 2023 FOXWP All rights reserved.