WordPressで複数のCSSを適用させる方法

WordPressでサイトを公開するにあたって、「固定ページと通常記事で適用するCSSファイルを分けたい。」、「ユーザーエージェントごとにCSSを分けて管理したい。」など、複数のCSSを利用したい場合があるかと思います。

ここではWordPressで複数のCSSを適用させる方法を2通りご紹介します。

今回は公式テーマ「twentythirteen」に「sample.css」を追加し適用させる方法を説明します。

get_template_directory_uri()を使用する

テンプレートタグ「get_template_directory_uri()」を使って複数のCSSを適用させる方法です。

追加と適用のやりかた

新規に作成した「sample.css」ファイルをFTPソフトで「/themes/twentythirteen/」内にアップロードします。

WordPress管理画面の左メニューから「外観」→「テーマの編集」をクリックします。右サイド下部に先ほどアップロードした「sample.css」が追加されていますね。

01

右サイドから「テーマヘッダー(header.php)」を探し出し、クリックでheader.phpを編集できます。

02

「header.php」の<head></head>の中に下記を記述してください。

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

03

記述できたら下部の「ファイルを更新」をクリックして完了です。

さらに複数のCSSを適用するには

追加で複数のCSS(例:sample1.css、sample2.css)を適用させたい場合は、先ほど同様に「header.php」の<head></head>の中へ以下のように足していけばOKです。

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

@importを使用する方法

追加と適用のやりかた

新規に作成した「sample.css」ファイルをFTPソフトで「/themes/twentythirteen/」内にアップロードします。

WordPress管理画面の左メニューから「外観」→「テーマの編集」をクリックします。ここまでは前述の方法を使用する場合と同じです。

テーマの編集画面が表示されたら右サイドから「スタイルシート(style.css)」を探し出し、クリックしてください。これでstyle.cssを編集できます。

04

「style.css」に以下を記述し「ファイルを更新」をクリックします。

@import url("sample.css");

05

次に右サイドから「テーマヘッダー(header.php)」をクリックしてください。

02

header.php内の<head></head>の中に下記を記述します。

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

06

記述できたら下部の「ファイルを更新」をクリックして完了です。

さらに複数のCSSを適用するには

追加で複数のCSS(例:sample1.css、sample2.css)を適用させたい場合は、「style.css」に以下のように足していきます。

@import url("sample.css");
@import url("sample1.css");
@import url("sample2.css");

まとめ

目的ごとにCSSを使い分けて管理できるようになれば便利ですよね。さらに無駄な部分を読み込ませないことで表示スピードもあがれば、まさに一石二鳥です。ぜひ活用してみてください。

追記後にテーマの更新をした場合、初期化されてしまいますのでその点だけはご注意ください。


イベント

2017/12/05(火)
Design Thinking Square