WordPress 固定ページごとにCSSを読み込ませる方法

Question

掲題通りなのですが、固定ページごとにCSSを読み込ませたいのですが分かりません。
調べてはいるのですが解決できず質問させていただきました。

分かる方ご教授いただけたら幸いです。
もしくは初心者でも分かるサイトがあれば教えていただけると大変嬉しいです。

よろしくお願いいたします。

Comments

[kei344]

各ページごととは、記事ページのことでしょうか固定ページのことでしょうかカテゴリやタグのことでしょうか。具体的に質問文に追記ください。

[js_donzoko3]

ご指摘ありがとうございます。
記事ページではなく固定ページです。
よろしくお願いいたします。

Answer 1

こんにちは。

投稿や固定ページなど、ベージごとに異なった CSS を適用させたい場合は、各ページに用意されているカスタムフィールドを使います。

デフォルトでない CSS を適用させたいページの編集画面にカスタムフィールドが表示されていない場合は、ページ左上の「表示オプション」を開いて「カスタムフィールド」にチェックをいれてください。

１）カスタムフィールドを使用する準備として、functions.php に必要事項を追記する
functions.php の任意の場所に

/* カスタムフィールドで外部CSSを読み込む */
function include_custom_css(){
	if(is_single()||is_page()){
	if($css = get_post_meta(get_the_ID(), 'includeCSS', true)){
	echo "<link type=\"text/css\" rel=\"stylesheet\" href=\"{$css}\" />\n";
						}
					}
				}
add_action('wp_head','include_custom_css');

を記述してください。

２）個別のページの編集画面でカスタムフィールドを追加する
編集画面の下方にあるカスタムフィールドで、「名前」に「includeCSS」を、「値」に適用したい CSS の絶対パス（例 http://example.jp/wp-content/themes/mytheme/css/new-style.css）を入力し、「カスタムフィールドを追加」をクリックした後、ページの更新を行ってください。

※ new-style.css（ファイル仮名）でスタイルを記述する際の注意
たとえば、元のテーマの style.css で「h2」が

.entry-content h2 {
	color: black;
}

と記述されていた場合、new-style.css で「h2」に「red」を指定したい際には

.entry-content h2 {
	color: red;
}

と上書きするかたちで記述しなければなりません。個別ページで適用したいスタイルに変化がない場合は、元のテーマの style.css にどのような id や class が指定されているかを確認してください。

以上、ご参考いただければ幸いです。

Comments

[js_donzoko3]

無事設定できました。
ありがとうございました。

[退会済みユーザー]

js_donzoko3さん、コメント（返信）をいただきありがとうございます。
僕の回答がお役にたてたようで、とてもうれしいです。

Answer 2

いろいろ方法はありますが、このあたりですかね。

【WordPressで記事ごとに個別のCSSを設定する方法3選】
http://naifix.com/article-css/

【WordPressで記事個別や固定ページ単体にCSS・JavaScriptを追加する（プラグインなし） | 賢威カスタマイズ研究所】
http://www.keni-customize.net/css-javascript-noplugin-536/

---

WordPress はユーザーが多いので、うまくキーワードを指定すれば解決方法が見つかると思います。試してみてください。

WordPress 固定ページ css プラグイン - Google 検索

Comments

[js_donzoko3]

無事設定できました。
前回も回答いただきましてありがとうございました。