WordPressのCSS追加について記事ページのみに特定のスタイルを追加するカスタマイズ方法など

WordPressで記事ページにのみCSSを読み込ませたいというご質問を頂きました。

投稿ページ、固定ページなどに独自のデザイン・カスタマイズを加えたいという要望は多い事でしょう。

記事ページだけに外部CSSファイルを読み込ませる方法や、記事ページだけに適用されるCSSの書き方をまとめました。

記事ページにのみ、カスタマイズしたCSSを実行させたいです。

調べると、function.phpに条件分岐で記述しアクションフックで呼び出すと良さそうということがわかりました。ただ、初心者すぎて具体的にどのような記述をどこにすれば良いのか分かりません。。

ご存知でしたらお力添えいただけますと幸いです。

＞匿名様

コメントありがとうございます！
CSSの追加は様々な方法がありますが、CSSの追加だけであればfunctions.phpに記述を加えるまでも無いかなと思います。

特に初心者さまということですので、functions.phpはコードにエラーがあるとログインすらできなくなってしまいますので･･･

では、いくつか方法をまとめさせていただきますね。

方法としては、
・記事のページにだけ独自のCSSを読み込ませる方法
・記事ページにのみ適用となるように追記する（外観カスタマイズ or プラグイン）
となります。

現在どの程度勉強されているのかが分からないので、PHPやCSSで分からない部分があったらご連絡ください。

記事ページ・固定ページにだけCSSファイルを読み込ませる

WordPressで記事のみ、固定ページのみに何かをするというカスタマイズはCSSに限らず様々なシーンで出てくるでしょう。

このような場合に必須となるのが「条件分岐タグ」です。

WordPress Codex 条件分岐タグ

これからWordPressを始めるなら絶対に覚えておいた方がよいもので、既存のテーマでも必ず使われているのでテーマのコードを読み解いていくうえでも必要な知識です。

記事ページだけに何かをする場合は is_single()

記事ページだけに何かをする場合は is_single()。固定ページならis_page() となります。

例えばheader.phpの内にCSSファイルを読み込む場合はPHPのif分と組み合わせ、『〇〇の時は〇〇（記事ページの時にcustom.cssを読み込む）』

<?php if( is_single() ) : ?>
  <link href="http:// example.com/【インストールフォルダ名】/wp-content/themes/【テーマフォルダ名】/custom.css" rel="stylesheet">
<?php endif; ?>
<!-- headタグの閉じタグの前に記載するのが良いでしょう。 -->
</head>

のようにすれば、記事ページでだけでcustom.cssを読み込ませることができます。

上のコード通りなら、style.cssと同じ階層にcustom.cssをアップロードすれば適用されます。

is_singleがis_pageになれば、固定ページにだけ適用されるCSSになるというわけですね。

ちなみに、条件を「&&（かつ）」「||（または）」でつなぐことで複数のテンプレートに適用することも可能です。

if( is_single() || is_page() )
なら記事ページまたは固定ページ

if( is_page() || is_front_page() )
なら固定ページかつ、フロントページに適用されている場合

となります。これの使い方を覚えればCSSのみならず、記事ページに特定の文言やバナーを表示したり･･･なんてカスタマイズもできるようになります。

記事ページにだけ適用されるようにCSSを記述する方法

多くのWordPressテーマでは、header.phpのbodyタグの部分に、このような記述があります。

<body <?php body_class(); ?>>

body_class()というのは、様々な情報をclassとして出力してくれます。

テンプレートタグ body_class

ブラウザの右クリック＞要素を検証（chromeの場合）でコードを確認すると、このようになっています。

例えば
single･･･記事ページの時に出力される
postid-3135･･･記事のIDが表示される
logged-in･･･ログイン状態の時に表示される
などです。
固定ページならsingle ではなく page が出力されます。
あとはアーカイブなら archiveが出力されるわけですね。

既存のCSSにこれらのクラスを利用した記述を追加することで「記事にのみ出力されるCSS」「固定ページにのみ出力されるCSS」を記述することができます。

.single p {
color:red;
}

（singleクラスの中にあるpタグという指定になります。）
などとしてみましょう。記事ページの段落だけ赤文字になるはずです。

CSSの追加については、テーマのstyle.cssを直接編集するのはお勧めできません。前述のようにカスタム用のCSSを読み込ませるか、以下の追加CSSやプラグインの方が無難です。

外観＞カスタマイズ＞追加CSS

外観＞カスタマイズ＞追加CSS で、CSSを追加することができます。

プラグインを使う方法

他に、プラグインでCSSを読み込ませる方法もあります。

このようなプラグインはたくさんありますが、ご紹介する『Simple Custom CSS and JS』は、インライン（HTML内にCSSを記述）か外部ファイル（External）か、headerで読み込むかfooterで読み込むかなどを選べる汎用性の高いプラグインです。

まとめ　CSSの優先順位について

CSSの追加方法について、参考にしていただけたでしょうか。

これらのポイントを押さえれば、CSSのデザインカスタマイズはほとんど思った通りにすることができるはずです。