WordPressの記事個別にCSSファイルを適用する

記事を投稿していると、その記事にだけ単独で適用する外部のCSSファイルを読み込ませたくなる場合があります。外部CSSファイルのパスを記述するカスタムフィールドを設け、head要素内にlinkタグを出力する方法を解説します。

CSSを読み込むlinkタグは、head要素内に記述しなくてはならないため、記事本文にはlinkタグやstyleタグを記述することはできません。
ブラウザによっては、head要素内でなくても大丈夫なものがありますが、文法違反ですのでやってはいけません。

また、HTML要素にstyle属性としてスタイルを設定することもできますが、こちらは設定する量が少ないときには有効です。

【コンテンツ】

  1. 投稿に外部CSSファイルのパスを記述するカスタムフィールドを追加する
  2. linkタグを出力するコード
  3. linkタグ出力コードを記述する

【記事執筆時の環境】
WordPress 3.9.2

投稿に外部CSSファイルのパスを記述するカスタムフィールドを追加する

まず、適用しようとするCSSを特定しなくてはなりません。
そのために、投稿の追加・編集画面にカスタムフィールドを追加します。
そこに外部CSSの絶対パスを記述するようにします。

カスタムフィールドを追加した投稿画面

なお、上記画面ではカスタムフィールドの入力がしやすいように、プラグインを使用しています。
プラグインを使用していないデフォルトでは、カスタムフィールド部分は以下のようになりますので、[新規追加]をクリックしてカスタムフィールドを追加してください。

デフォルトのカスタムフィールド

linkタグを出力するコード

投稿ページの場合のみ、カスタムフィールド名"includecss"に設定されたパスで、linkタグを出力するコードは以下になります。
カスタムフィールドに何も設定していない場合は、linkタグを出力しません。

linkタグ出力コードを記述する

linkタグを出力するコードは、header.phpに記述するか、functions.phpに記述するかのどちらかです。

header.phpに記述する場合

他に読み込んでいるCSSとの順番が問題になるときは、header.phpに記述します。
head要素内のCSSを読み込ませたい場所で、以下のように記述します。

functions.phpに記述する場合

アクションフックを使って、wp_head()を実行するタイミングで出力することもできます。
通常wp_head()は、</head>の直前で実行するようにしますから、そこでlinkタグが出力されることになります。
この場合は、functions.phpに以下のコードを記述します。

スポンサーリンク

ページの先頭へ