Q&A
/* 書く場所まちがえましたので、ここに書いたものは回答に移しました */
###■やりたいこと
トップページだけ別のCSSファイルを読み込ませたいです。
具体的には、「top.php」というページで「top.css」を読み込ませて、それ以外のページでは「style.php」を読み込ませたいです。
###■いまの状況
いまは、「header.php」の<?php wp_head(); ?>直前に下記コードを書いています。
なのに、「style.css」しか読み込んでくれないんです。
php
1<?php if ( is_page('top') ) : ?> 2 <link type="text/css" rel="stylesheet" href="/top.css"> 3<?php else: ?> 4 <link type="text/css" rel="stylesheet" href="/style.css"> 5<?php endif; ?> 6 7<?php wp_head(); ?>
尚、上記コードはこちらのサイトを参考にしました。
・条件分岐の方法
https://bge.jp/wordpress_if/#_is_page
・CSSファイルへのリンクの仕方
http://memorandums.3ki3ki.com/wp_read/
###■確認したこと
【１】
固定ページのテンプレート選択項目ではちゃんと「top.php」を選択しています。↓
そしてこの選択は有効に機能しているハズです。
(問い合わせページでは選択したとおりのテンプレート「contact.php」を読み込んでくれているため。)
【２】
「top.php」の中身は、通常の固定ページテンプレート「page.php」と同じものです。
なので、いずれも「header.php」を読み込むようになっているはずです。
【３】
「top.php」「style.php」は、いずれも「header.php」と同じフォルダ階層にあります。
---補足ｺｺｶﾗ---
【４】
出力されたHTMLでは、トップぺージとそれ以外のページでこのように違っていました。
すなわち、トップページの出力はこう↓で、
それ以外のページはこう↓でした。
このように違っているのに、なぜ「top.css」は無視されてしまうのでしょうか。
このような出力の違いは、「cssの読み込みはこっちだよ」という意味ではないのでしょうか？？
開発ツールから見ても、「top.css」に書いたclassへの指示は何もなくて、「style.css」の指示しかありませんでした。
---/補足ｺｺﾏﾃﾞ---
以上です。どうぞよろしくお願いいたします。m(__)m
ご回答ありがとうございます。なるほど。そのような記述もあるのですね。今回は残念ながらそれだと解決できませんでした(>_<)が、みなさまのお知恵に感謝しつつ、今夜のところはとりあえず寝、、たい、けど！イブ飲んでもうひと踏ん張りします！！
あ、すみません。入れ違いでこちらの枠に返信してしまいました。あらためてご回答枠にて('◇')ゞ
いえいえ横入りで失礼しました、お体お大事に〜
回答2件
0
ベストアンサー
is_front_page() では？
【WordPressのis_home() と is_front_page() の違い | フリーフードファイター兼SE社長活動日記|株式会社ジーティーアイ】
https://blog.gti.jp/post-3059/
【フロントページの表示あれこれ – 100arttoe】
http://www.arttoe.net/21
追記：
フルパスを設定してみては？
【get_template_directory_uriとget_stylesheet_directory_uriの違い】
http://www.youngflavor.net/2015/02/2981/
【WordPressでpathやURLを取得するためのタグと出力例まとめ | OXY NOTES】
http://oxynotes.com/?p=8590
投稿2016/11/16 12:14
編集2016/11/16 12:39
総合スコア69400
ご回答ありがとうございます！
ふむむ、、
<?php if ( is_front_page('top') ) : ?>
にしてみましたが、やっぱり「style.css」しか読み込んでくれない様子でした。(/o＼)
でも、ご提示いただいた情報は知りませんでしたので勉強になりました！
is_home() か is_front_page() が効かないとすれば、そもそも別の問題があるのではないでしょうか。
こちらのCSSファイルへリンクさせるための記述
<link type="text/css" rel="stylesheet" href="/top.css">
は、間違っていませんよね？
あっているなら、うーん、きっと他のところに問題があるのですね。困っちゃいますね(;'∀')笑
こちらの記事(https://smileworks.biz/wp/1350)によりますと、CSSファイルへリンクさせるための記述が、こうなっていまして…
<link href="<?php bloginfo('template_url')?>/css/wordpress.css" rel="stylesheet" type="text/css" media="all" />
いろいろな記述方法があるのでしょうか。。
もう、疲れちゃいました。笑
疲れたのであれば、コメントも控えます。
そ…そんな汗
ファイルパスですか、初耳です。ありがとうございます。ちょっと調べてみます。
ひょっとして、、子テーマのfunctions.phpで下記を書いているのですが、ダメな原因ってコイツにありますでしょうか？これが書かれていると、何がなんでもstyle.phpを読み込んでしまうとか？そんなことはないですよね？
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
トップページのソースを見たときに「top.css」とちゃんとなってて「style.css」がないのに「style.css」が効いていると？
1回スーパーリロードしてみてはどうでしょう？
「top.css」は「style.css」と同じところに存在してるんですよね？
ginさん！こんばんは★
贅沢なご回答者さん布陣になってまいりました(*ﾉωﾉ)
>トップページのソースを見たときに「top.css」とちゃんとなってて
YES！
ただし「ちゃんと」かどうか分かりませんが、とりあえず質問【４】に書いたような状態になっています。
>「top.css」は「style.css」と同じところに存在してる
YES！
>「style.css」がないのに「style.css」が効いていると？
NO！
「style.css」と「top.css」はいずれも同じフォルダにあるままです。
それを読み分けるために、質問にあるようなコードを書いてみました。でも、読み分けてくれないのです。
ちなみに読み分けるというのは、『「top.php」のときは「top.css」を読みこんで』そして『「それ以外.php」のときは「style.css」を読みこむ』ということでございます。
少々違います。
>「style.css」がないのに「style.css」が効いていると？
はトップページのコード上にtop.cssしかなくstyle.cssを読み込んでいないのにって意味です。
すみません、早とちりしてしまいました。仰るとおりです。
その【４】の表示があれば、『「top.php」のときは「top.css」を読みこんで』という指示は、本来であれば正しく機能しているハズなのですよね？
困ってしまいますね。。
これからスーパーリロードとやらを試してみたいと思います！
スーパーリロードしたり、ブラウザを変えたりしてみたのですが、やはり変わらずでした。。
また何か「これじゃない？」などヒントがありましたら思いついたときにお願いいたします。m(__)m
とりあえず開発ツールでtop.cssの中身がちゃんと入ってるか見てみましょう
あと絶対パス「http://example.com/top.css」みたいな感じで中身が見れるかもチェックしてみてください。
そうなんです。開発ツールで見ますと、top.cssで指定した内容はさっぱり入っておらず、しかしsrtyle.cssの内容はちゃっかり入っているのです。top.phpを見ているのに。絶対パスですか。なるほど。やってみます！夜分に誠にありがとうございます！！
まいりましたね。
---
●条件分岐させるコードはあっているハズ。
→なぜなら、「top.php」の表示で出力されるHTMLには「<link type="text/css" rel="stylesheet" href="/top.css">」と書いてあるから。
→さらに、「他のページ.php」の表示で出力されたHTMLには「<link type="text/css" rel="stylesheet" href="/style.css">」と書いてあるから。
●「top.css」のファイルは入っているハズ。
→なぜなら、親テーマのフォルダの中身「https://example.com/wp-content/themes/pingraphy/top.css」や、子テーマのフォルダの中身「https://example.com/wp-content/themes/pingraphy-chan/top.css」に、ダイレクトにアクセスすると、ちゃんと「top.css」の内容が表示されるから。
●なのに「top.php」を表示すると、「top.css」は適用されず、「style.css」が適用されている。
→なぜなら、開発ツールで見ると、「style.css」の内容しか表示されないから。
---
こんなことってあるのでしょうか。
素人ゆえ、恐ろしく初歩的なミスをしているかもしれません。
じっくりはじめから見直してみます。
kei344さん、ginさん、お手伝い頂き誠にありがとうございます。
ん？
生成されたのが<link type="text/css" rel="stylesheet" href="/top.css">なら「https://example.com/top.css」にcssがいないと表示されないですよ？
style.cssはhttps://example.com/style.cssにいるはず。
To: matsuzakaq
パスの話をいまいち理解されていないのでは。
<link href="<?php echo get_stylesheet_directory_uri(); ?>/top.css" rel="stylesheet" type="text/css" media="all" />
と書けばtop.cssが読み込まれませんか？
> これが書かれていると、何がなんでもstyle.phpを読み込んでしまうとか？そんなことはないですよね？
そういう記述です。
下記のようなことをしたいのでしょう。
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
if ( is_front_page() ) {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/top.css' );
} else {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
}
ですが、top.cssでstyle.cssを上書きするような記述にされたほうが良いと思います。
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
if ( is_front_page() ) {
wp_enqueue_style( 'top-parent-style', get_template_directory_uri() . '/top.css', array( 'parent-style' ) );
}
}
To: ginさん
すみません。kei344さんのご指摘通り、パスのお話しを理解しておりませんでした。
仰るように「https://example.com/top.css」にアクセスしてみたところ、「ページが見つかりません」と404が出てしまいました。
でも、生成されたHTMLは確かに<link type="text/css" rel="stylesheet" href="/top.css">なのですが、、ナゾすぎますね。
おっと！なんと！ここでkei344御大が解決策を示してくださいました！！
To: kei344さん
パソコン見すぎてあまたがズキズキしていたのが、ふきとびました！
いままでで一番うれしい解決かも。だって、ほんとにつらかったんです。泣きそうww
>と書けばtop.cssが読み込まれませんか？
ばっちりです！(①)
>そういう記述です。
そうだったのですね。どおりで、ダメなわけですね。
>下記のようなことをしたいのでしょう。
仰るとおりです。(②)
>top.cssでstyle.cssを上書きするような記述に
なるほど。①のようにheader.phpに書いたり、また➁のようにfunctions.phpに書いたりするよりも、上書きするこちらの記述がベターなのですね。
よろしければのためにお心を聞かせて頂けませんでしょうか？？
あ、でも。
実は他の固定ページでもいくつかCSSを分岐させようかな、と思っております。
その場合ですと、最初の①(header.phpで分岐させる方法)か、それとも➁(functions.phpで上書きじゃなく分岐させる方法)か、どちらの記述がベターでしょうか？
納期に迫られてるとかじゃなければ休んだほうがいいですよｗ
”あまた”も冴えると思いますｗ
To: matsuzakaq
>top.cssでstyle.cssを上書きするような記述に
style.cssを読み込んだ上でtop.cssを読み込むということです。CSSは同じ記述をした場合あとの記述で上書きされます。子テーマを使うということは元テーマのアップデートにも対応するというつもりではないのでしょうか。
>CSSを分岐
上述。
WordPressはテンプレートに直接CSSのリンクを書く方法を推奨していません。
To: ginさん
この人は一体何を言っているんだろう？？…と思ったら、私の発言でしたか！爆笑
ナチュラルハイでめっちゃツボってますwww
To: kei344さん
そうなのですね。たびたびありがとうございます。
蛇足ですけれど、「あまた」以外にも誤字がありましたね。
「よろしければのために」ではなく、「よろしければ後学のために」でしたw
それでは、お二方、夜分遅くまで、誠に、ほんとうに、、ううう泣…ありがとうございます！！！！(´;ω;｀)
To: kei344さん
非常にナマイキな発言なのですが笑、仰るように子テーマを使っておりますので、親テーマのフォルダにtop.cssを入れるより、子テーマフォルダに入れた方がいいですよね。
そしてそうであれば、
get_template_directory_uri()よりも
get_stylesheet_directory_uri()にした方が
良いのではないでしょうか？★
すなわち、こうでしょうか。
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
if ( is_front_page() ) {
wp_enqueue_style( 'top-parent-style', get_stylesheet_directory_uri() . '/top.css', array( 'parent-style' ) );
}
}
0
if ( is_page('top') ) → if( is_page_template('top.php') )
に治すだけですよ。
おそらく「トップページ」という言葉に引きずられて、「最上位に表示しているページ」と認識されていると思いますが、
やりたいことに書いてある内容だと「固定ページ_top」という名前をつけたページテンプレートを使用しているだけに見えます。
投稿2016/11/16 17:19
編集2016/11/16 17:56総合スコア16
if( is_page_template('top.php' ))ですね。
ふむふむ。
header.phpにその記述を試してみたですが、ダメな様子でした。
どうやら、functions.phppから上書きする方法が良いみたいなので、今回はその方法を採用いたします♪
でも、新しい視点をありがとうございます。
確認ありがとうございます。お手間おかけしました〜
あなたの回答
tips
プレビュー
