WordPress│CSSのコードを結合してインライン化して読み込む方法│Code Snippets

2023.06.062026.10.04

CSSを記述する時は追加CSSに書いたり、子テーマのStyle.cssに書いたり、はたまた自分でファイルを用意して読み込んだりと様々な方法があると思います。

個人的にはfunctions.phpに読み込む条件をつけて（例えばトップページのみ読み込む等）パーツごとにCSSの記述を分けたいということから

Code Snippetsを使って記述を分けて読み込ませたりすることがあります。

複数の小さなCSSを条件別に管理する例です。

インライン化するとHTMLは増えるため、まとめれば必ず速くなるわけではありません。

ということで記述方法を少し工夫してCSSをインライン化+結合して読み込ませてみました。

Code Snippetsで記述ごとにスタイルが読み込まれる状態か、工夫後の読み込み例を示す様子。

その備忘録です。

WordPressでCSSのコードを結合してインライン化して読み込む方法

変更前のfunctions.phpまたは既存スニペットを保存し、どちらか一方へ以下の3つを一組で追加します。

旧motoki_custom_stylesとcss_minifyのコードは、保存したうえで今回のコードへ置き換えます。

CSSは管理者が書いた固定文字列に限り、利用者の入力を連結しないでください。

CSSの記述

いくつかCSSを書いてみます。

ヘッダー用CSS

add_filter( 'waza_inline_css_parts', function ( $parts ) {
    $parts[] = '#header { background-color: #0ef300; }
@media (max-width: 768px) { #header { background-color: #fff; } }';
    return $parts;
} );

トップページ用CSS

add_filter( 'waza_inline_css_parts', function ( $parts ) {
    if ( is_front_page() ) {
        $parts[] = '#content { background-color: #f00; }
@media (max-width: 768px) { #content { background-color: #fff; } }';
    }
    return $parts;
}, 20 );

※トップページ用には出力の条件を付けています。

CSSのコードを結合してインライン化して読み込む

最後に文字列を改変せず連結し、WordPressのインラインCSS APIへ渡します。

正規表現によるコメント・空白削除は、文字列やURLを壊す可能性があるため行いません。

add_action( 'wp_enqueue_scripts', function () {
    $parts = apply_filters( 'waza_inline_css_parts', array() );
    $parts = array_filter( $parts, 'is_string' );
    if ( ! $parts ) return;
    wp_register_style( 'waza-inline-parts', false, array(), null );
    wp_enqueue_style( 'waza-inline-parts' );
    wp_add_inline_style( 'waza-inline-parts', implode( "\n", $parts ) );
}, 20 );

次の画像は旧実装の出力記録です。

現行コードを適用した結果は、後の「画面幅とページを切り替えて確認する」の検証画像を参照してください。

画面幅とページを切り替えて確認する

スクロールできます

条件	ヘッダーの背景	本文領域の背景
フロントページ・幅769px以上	緑（#0ef300）	赤（#f00）
フロントページ・幅768px以下	白（#fff）	白（#fff）
通常記事・幅769px以上	緑（共通の例）	フロントページ用の赤は追加されない
追加した3つの処理を停止	この例の緑は追加されない	この例の赤・白は追加されない