WordPressでCSSを追加する方法！ページの種類や記事ごとに個別で読み込みも可能

こんにちは、メディア事業部ウェブディレクターのコネル飯塚です。

WEBサイトのスタイルを調整することのできるCSSは、1つのCSSファイルだけでもデザインを作りあげることができます。

しかし、「コーポレートサイトとブログが1つのサイトにまとまっており、管理しやすいようにCSSファイルを分けておきたい」とか、「レスポンシブデザイン用のスタイルは別のファイルに書いておきたい」とか、「共通のスタイル以外は個別のCSSを読み込みたい」など、さまざまな要望があると思います。

管理上の問題、または無駄なスタイルの記述を読み込むことで、表示スピードへの影響も考えられますので、複数のCSSファイルにうまく分けておく必要もあります。

今回はWordPressで複数のCSSを追加する方法を紹介させていただきます。そしてページの種類や記事ごとに個別のCSSファイルを読み込むことも可能なので、あなたのWEBサイトを好みの状態にカスタマイズしてみてください。

WordPressでCSSを読み込む

一般的に、CSSは<head>～</head>の中にリンク先を記述して、ファイルを読み込みます。
HTMLのソースに直接スタイルを記述したり、<body>内の<style>～</style>の中に記述することは現在あまり推奨されていませんので、CSSファイルを作成して読み込みます。

テーマの種類や作り方によって違いますが、WordPressではheader.phpに下記のようなリンクが記述され「style.css」を読み込んでいることが多いと思います。

<link rel="stylesheet" href="<?php bloginfo ('stylesheet_url'); ?>" type="text/css" />

または

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" />

このような形でスタイルシートへのパスを記述して「style.css」を読み込んでいると思います。

こちらは下記のWordPressのテンプレートタグを使っています。

bloginfo (‘stylesheet_url’)
get_stylesheet_uri()

※現在では「style.css」のURIを取得し、echoでURLを出力するための「echo get_stylesheet_uri()」が推奨されています。

それでは「style.css」以外のCSSファイルを追加して読み込む方法を説明していきたいと思います。

WordPressで複数のCSSを追加する方法

CSSファイルを複数追加する2通リの方法を説明します。

get_template_directory_uri()を使用する

基本となる「style.css」に「base.css」というCSSファイルを追加するとします。

先ほど説明した通リ、まず「style.css」は下記で読み込むものとします。

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" />

そして、この「style.css」に2つ目のCSSファイルである「base.css」を追加するためには。

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" />
 <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/base.css" type="text/css" />

こちらは「get_template_directory_uri()」というテンプレートタグを使って、テンプレートのあるディレクトリのURIを取得しています。
つまりテーマの入っているディレクトリのことです。

※こちらも以前は「bloginfo(‘template_directory’) 」や「bloginfo(‘template_url’)」のようなテンプレートタグが使われていましたが、現在は「get_template_directory_uri()」が推奨されています。

例えばさらに、「style.css」「base.css」に3つ目のCSSファイルである「smart.css」を追加するためには。

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" />
 <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/base.css" type="text/css" />
 <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/smart.css" type="text/css" />

このように3つ、4つと追加していけば良いというわけです。

「style.css」以外、分かりやすいように「css」などのディレクトリにファイルを入れておきたい場合は、スタイルシートへのパスに「/css/base.css」「/css/smart.css」などを追記してあげればよいです。

@importを使用する

どちらかと言うと、先ほどの「get_template_directory_uri()」を使う方法をオススメしますが、「@import」を使ってCSSファイルを追加する方法も簡単に説明します。

まず「style.css」は下記で読み込むものとします。

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" />

そして、この「style.css」に2つ目、3つ目のCSSファイルである「base.css」と「smart.css」を追加するためには、「style.css」の中に下記を記述します。

/*
Theme Name: whitebear original
Description: original theme
*/  
@charset "utf-8";
@import"base.css";
@import"smart.css";

「Theme Name」「Description」などがあると思いますが、こちらはそれぞれのテーマの設定で構いません。

「@import」によって「style.css」から、そこに追加した2つのファイルである「base.css」「smart.css」を読み込んでくれます。

ページの種類や記事ごとに個別でCSSファイルを読み込む

投稿記事ページやカテゴリーページだけ、特定の記事ページだけ、といったように、ページの種類や記事ごとに個別に異なるスタイルが書かれたCSSファイルを読み込むこともできます。

ページの種類ごとにCSSファイルを読み込む

例えば、基本的なCSSファイルとして「style.css」はサイト全体に読み込み、投稿記事ページだけには「article.css」を、それ以外のページには「base.css」を分けて読み込みたい場合があるとします。

//「style.css」を全体に読み込む
 <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" />
 //投稿記事ページの場合のみ「article.css」それ以外のページの場合「base.css」
 <?php if ( is_single()) : ?>
 <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/article.css" type="text/css" />
 <?php else; ?>
 <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/base.css" type="text/css" />
 <?php endif; ?>

こちらは「is_single()」という条件分岐タグを使って、「投稿記事ページの場合」と「それ以外の場合」とで条件を指定して表示内容を切り替えています。

さらにカテゴリーページや固定ページなどの条件を指定することもできます。
「is_single()」の部分を「is_category()」「is_page()」などに変更することで条件を変更することができます。

特定の記事ごとにCSSファイルを読み込む

特定の記事だけデザインを変更したい場合もあると思います。
その場合は、特定の記事だけに「article.css」を、それ以外のページには「base.css」を分けて読み込んでみます。

投稿IDが「5」の記事のみ異なるCSSファイルを読み込みたい場合。

 //「style.css」を全体に読み込む
 <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" />
 //投稿IDが「5」の記事のみ「article.css」それ以外のページ「base.css」
 <?php if ( is_single( ‘5’ )) : ?>
 <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/article.css" type="text/css" />
 <?php else; ?>
 <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/base.css" type="text/css" />
 <?php endif; ?>

さらに、投稿IDが「5」「10」「15」の記事のみ異なるCSSファイルを読み込みたい場合。
「is_single( ‘5’ )」こちらの部分を「is_single( array( 5, 10, 15 ) )」のように引数を変更してあげます。

このように自由に条件を設定してスタイルを変更することができます。

詳しい条件分岐タグと引数の使い方

スマートフォン・タブレット・PCを分けてスタイルを変更したい場合もあると思います。

スマートフォン・タブレット・PCを判別して条件分岐させる方法