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に以下のコードを記述します。

スポンサーリンク

特集記事

  • WordPress Image

    WordPress の基礎から応用まで
    Webサイト制作ツールとして圧倒的な人気を誇るWordPress。利用するにあたって必要な知識を体系的にまとめた記事です。
  • jQuery Mobile Image

    jQuery Mobile を基本から覚える
    スマホサイト制作に最適なフレームワークの利用方法を解説。DEMOページ・サンプルコードで動作を確認できます。

オンライン講座

Webの基礎マスター講座ページへのリンク


連載講座:WordPressで作る簡単Webサイトページへのリンク

提供しているサービス

WordPressサイト制作出張講座ページへのリンク

WordPress を利用した Webサイト制作の方法を、
あなたのオフィスにうかがいご説明いたします。
料金:¥49,500

サービス詳細ページ >>

申し込みフォーム >>


Webサイト1日公開サービスページへのリンク

一刻も早く Webサイトが必要な方のために、
一緒に作業し1日で公開までもっていきます。
料金:¥49,500

サービス詳細ページ >>

申し込みフォーム >>

スポンサーリンク

ページの先頭へ