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

###前提・実現したいこと
WordPressで固定ページにcssを読み込ませたい

###発生している問題・エラーメッセージ

WordPressのsimplecity2を利用しています。
トップページだけ表示される画像の幅を大きくしたく外部cssを読み込ませようとしているのですが、うまい事いきません。
https://teratail.com/questions/32918
を参考にカスタムフィールドを作成し、functions.phpに必要事項を入力しましたが、
外部cssが読み込まれません。

記載する場所が違うのか、それとも作成したcssの記述方法が違うのかさっぱりわかりません。

教授いただけたら幸いです。 

もしくは初心者でも分かるサイトがあれば教えていただけると大変嬉しいです。
よろしくお願いいたします。

###該当のソースコード

###試したこと

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

ruuusaamarki

2017/10/29 05:04

外部cssが読み込まれませんというところは <link>タグが表示されていないのか、cssのパスだけ通っていないのかというところも確認していただきますと（デベロッパーツールなどで）問題の発見もしやすくなると思います。

ara12

2017/10/29 09:51

ありがとうございます。記載していただいています様に<link>タグが表示されているか確認してみました。cssはstyle.cssが適応されている様です。

行動規範の内容に同意します

回答2件

ぱっと思いついたことを書かせていただきます。

1.ソースの確認
リンク先のサンプルソースをそのまま使っていると仮定します。

php
1
2/* カスタムフィールドで外部CSSを読み込む */
3//オリジナル関数include_custom_cssを定義
4function include_custom_css(){
5//singleページ、または固定ページだったら以下を実行
6    if(is_single()||is_page()){
7//固定ページの新規追加ページにカスタムフィールドを表示して名前のところにincludeCSSを指定、値のところにcssのパスを指定します。おそらくhttp://example.com/wp-content/themes/simplicity2/kobetsu.cssみたいな感じです。
8    if($css = get_post_meta(get_the_ID(), 'includeCSS', true)){
9    echo "<link type=\"text/css\" rel=\"stylesheet\" href=\"{$css}\" />\n";
10                        }
11                    }
12                }
13add_action('wp_head','include_custom_css');
14

2.addアクションの優先順位を変えて試してみる。
ご利用のテーマfunctions.php内に複数のwp_headの指定があったため念のため変えてみる。

php
1add_action('wp_head','include_custom_css', 99);
2

投稿2017/10/29 05:04

編集2017/10/29 12:03

ruuusaamarki

総合スコア470

ara12

2017/10/29 10:21

ありがとうございます。どちらもやってみたのですが、読み込まれませんでした。読み込ませたいcssを元のstyle.cssに追記したところ反映されるのでcssの記載方法には問題がないのだと思いますが。指定の方法が間違っているのか、phpの記載の場所が違うのか。いろいろやってみている所です。

ruuusaamarki

2017/10/29 10:37

すみません、少し確認してないことがあり、回答を修正させていただきました。おそらく１のコメントのような形で管理画面から設定してただけると大丈夫なのではないでしょうか。当方のテスト環境でfunctionsの最下部に参考ページのソースをコピペしたらうまく動きました。これでうまくいかない場合は以下をテストしてみてください。プラグインをすべて停止してテスト。テーマの変更をしていればそちらを確認。（子テーマで構築していればそちらを一旦外してみる）

kei344

2017/10/29 11:44

To: ruuusaamarkiさんリンク先のコードを使うのであればCSSは絶対パスで指定する必要があるのでは？

ruuusaamarki

2017/10/29 12:01

kei344さんありがとうございます！そうですね、絶対パスのほうが確実ですね！

ara12

2017/10/29 22:46

ありがとうございます。プラグインを外し、子テーマでやっていたのでそれも外してやってみましたが、読み込んでくれませんでした。何か別の要因なのかもしれません。

ruuusaamarki

2017/10/30 04:18

テストありがとうございます。確認させていただきたいのですが 1.トップページの設定を管理画面からされていますでしょうか。 ------------------------------------------------------- 管理画面左メニューの【設定】→【表示設定】→ フロントページの表示という項目から固定ページで該当のページを選ぶ ------------------------------------------------------- 2.simplicity2のheada.phpの38行目にwp_head()があると思いますがこの場所に<link>タグは出ていますでしょうか。一つテストとして（すでにやられていたらすみません） cssのパスの確認を確かめてみてください。画像やその他のファイルに絶対パスでアクセスできるかどうか。この辺りはapacheなどサーバの設定でインストールディレクトリが環境によって異なるため、回答で提示したパスと変わってくる場合があります。 --------------------------------------------------------------------------------- http://example.com/wp-content/themes/simplicity2/kobetsu.css http://example.com/example/wp-content/themes/simplicity2/kobetsu.css https://example.com/wp-content/themes/simplicity2/kobetsu.css

ara12

2017/10/30 19:42

丁寧にありがとうございます。 1は再度設定してみました。２なのですが、heada.phpの38行目のwp_head()には ------------------------------------------------------------------------- <?php wp_head(); ?> </head> ------------------------------------------------------------------------- と記載されていて<link>が見当たりませんでしたので、再度simplecity2のheada.phpを新しいものにしてみました。が、変化はありません。要素を検証では、指定したcssの箇所にERR_ABORTEDと赤字で示されていて、エラーが出ているみたいです。

ara12

2017/10/31 00:56

uuusaamarkiさん。丁寧にありがとうございます。 ay03さんに教えていただいた方法で解決しました。どうもキャッシュが原因だったようです。何度か削除していたつもりだったのですが・・・何度も、見ていただいてありがとうございます。

ruuusaamarki

2017/10/31 04:56

解決されて何よりです！お疲れさまでしたm(_)m ちなみにwp_head()という関数で<link>タグが呼び出されるということなので（add_action('wp_head'の部分で指定した関数を実行している） phpファイルを見ても<link>タグはないと思いますがブラウザからみてhtmlとして吐き出されたソースには<link>タグが出ているかどうかという確認でした。言葉足らずでしたが解決したようでよかったです！

ara12

2017/10/31 11:56

ありがとうございました。

行動規範の内容に同意します

ベストアンサー

特定のテンプレートのみにCSSを追加する
http://wpcj.net/1587

カスタムフィールドなど使わなくてもCSSファイルを指定して以下のような記述をfunctions.phpに追記し、テーマディレクトリの中にCSSファイルを設置して読み込ませれば良いだけです。

function add_page_style() {
	if ( is_front_page() ) {
		wp_enqueue_style( 'page-style', get_template_directory_uri() . '/CSSファイル名.css' );
	}
}
add_action( 'wp_enqueue_scripts', 'add_page_style' );

投稿2017/10/29 03:09

編集2017/10/29 10:54

退会済みユーザー

総合スコア0

ara12

2017/10/29 22:44

記載いただきました記述をfunctions.phpに読み込ませたところ、エラーがでていました。 functions.phpと同じディレクトリ内にcssファイルをおいています。確認したところ存在しないフォルダを探しにいっている様子です。 get_template_directory_uri() .で吐き出したURLが違っているということになるのでしょうか。ファイル指定をしてみます。ありがとうございます。

退会済みユーザー

2017/10/30 00:12

子テーマですか？でしたら get_template_directory_uri を get_stylesheet_directory_uri に変えてください。

ara12

2017/10/30 19:58

すみません。子テーマでした。 get_stylesheet_directory_uriに変更したところ、エラーは無くなりましたが変化なしです。

退会済みユーザー

2017/10/31 00:04

キャッシュが効いている可能性は無いですか？また、ブラウザでファイルが読み込まれているかソースを確認して確認してみてください。

ara12

2017/10/31 11:58

ありがとうございます。キャッシュを削除したら、成功しました。お手数おかけしました。朝、コメントしたつもりだったのですが、コメントがきえてしまっていました。ありがとうございました。