質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.36%

  • PHP

    22365questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • WordPress

    8182questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

  • CSS

    6679questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

トップページだけ別のCSSファイルを読み込ませたい(WordPress)

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,189
退会済みユーザー

退会済みユーザー

■やりたいこと

トップページだけ別のCSSファイルを読み込ませたいです。
具体的には、「top.php」というページで「top.css」を読み込ませて、それ以外のページでは「style.php」を読み込ませたいです。

■いまの状況

いまは、「header.php」の<?php wp_head(); ?>直前に下記コードを書いています。
なのに、「style.css」しか読み込んでくれないんです。

<?php if ( is_page('top') ) : ?>
    <link type="text/css" rel="stylesheet" href="/top.css">
<?php else: ?>
    <link type="text/css" rel="stylesheet" href="/style.css">
<?php endif; ?>

<?php wp_head(); ?>

尚、上記コードはこちらのサイトを参考にしました。
・条件分岐の方法
https://bge.jp/wordpress_if/#_is_page
・CSSファイルへのリンクの仕方
http://memorandums.3ki3ki.com/wp_read/

■確認したこと

【1】
固定ページのテンプレート選択項目ではちゃんと「top.php」を選択しています。↓
イメージ説明
そしてこの選択は有効に機能しているハズです。
(問い合わせページでは選択したとおりのテンプレート「contact.php」を読み込んでくれているため。)

【2】
「top.php」の中身は、通常の固定ページテンプレート「page.php」と同じものです。
なので、いずれも「header.php」を読み込むようになっているはずです。

【3】
「top.php」「style.php」は、いずれも「header.php」と同じフォルダ階層にあります。

---補足ココカラ---
【4】
出力されたHTMLでは、トップぺージとそれ以外のページでこのように違っていました。
すなわち、トップページの出力はこう↓で、
イメージ説明
それ以外のページはこう↓でした。
イメージ説明
このように違っているのに、なぜ「top.css」は無視されてしまうのでしょうか。

このような出力の違いは、「cssの読み込みはこっちだよ」という意味ではないのでしょうか??

開発ツールから見ても、「top.css」に書いたclassへの指示は何もなくて、「style.css」の指示しかありませんでした。
---/補足ココマデ---

以上です。どうぞよろしくお願いいたします。m(__)m

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • Powerweb

    2016/11/17 02:16 編集

    /* 書く場所まちがえましたので、ここに書いたものは回答に移しました */

    キャンセル

  • 退会済みユーザー

    退会済みユーザー

    2016/11/17 02:24

    ご回答ありがとうございます。なるほど。そのような記述もあるのですね。今回は残念ながらそれだと解決できませんでした(>_<)が、みなさまのお知恵に感謝しつつ、今夜のところはとりあえず寝、、たい、けど!イブ飲んでもうひと踏ん張りします!!

    キャンセル

  • 退会済みユーザー

    退会済みユーザー

    2016/11/17 02:26

    あ、すみません。入れ違いでこちらの枠に返信してしまいました。あらためてご回答枠にて('◇')ゞ

    キャンセル

  • Powerweb

    2016/11/17 02:28

    いえいえ横入りで失礼しました、お体お大事に〜

    キャンセル

回答 2

checkベストアンサー

+2

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 21:23

    ご回答ありがとうございます!

    ふむむ、、
    <?php if ( is_front_page('top') ) : ?>
    にしてみましたが、やっぱり「style.css」しか読み込んでくれない様子でした。(/o\)

    でも、ご提示いただいた情報は知りませんでしたので勉強になりました!

    キャンセル

  • 2016/11/16 21:28

    is_home() か is_front_page() が効かないとすれば、そもそも別の問題があるのではないでしょうか。

    キャンセル

  • 2016/11/16 21:34

    こちらのCSSファイルへリンクさせるための記述
    <link type="text/css" rel="stylesheet" href="/top.css">
    は、間違っていませんよね?

    あっているなら、うーん、きっと他のところに問題があるのですね。困っちゃいますね(;'∀')笑

    キャンセル

  • 2016/11/16 21:37

    こちらの記事(https://smileworks.biz/wp/1350)によりますと、CSSファイルへリンクさせるための記述が、こうなっていまして…

    <link href="<?php bloginfo('template_url')?>/css/wordpress.css" rel="stylesheet" type="text/css" media="all" />

    いろいろな記述方法があるのでしょうか。。

    もう、疲れちゃいました。笑

    キャンセル

  • 2016/11/16 21:41

    疲れたのであれば、コメントも控えます。

    キャンセル

  • 2016/11/16 21:48

    そ…そんな汗
    ファイルパスですか、初耳です。ありがとうございます。ちょっと調べてみます。

    キャンセル

  • 2016/11/16 22:20

    ひょっとして、、子テーマの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' );
    }

    キャンセル

  • 2016/11/16 23:26

    トップページのソースを見たときに「top.css」とちゃんとなってて「style.css」がないのに「style.css」が効いていると?
    1回スーパーリロードしてみてはどうでしょう?

    「top.css」は「style.css」と同じところに存在してるんですよね?

    キャンセル

  • 2016/11/16 23:42

    ginさん!こんばんは★
    贅沢なご回答者さん布陣になってまいりました(*ノωノ)

    >トップページのソースを見たときに「top.css」とちゃんとなってて
    YES!
    ただし「ちゃんと」かどうか分かりませんが、とりあえず質問【4】に書いたような状態になっています。

    >「top.css」は「style.css」と同じところに存在してる
    YES!

    >「style.css」がないのに「style.css」が効いていると?
    NO!
    「style.css」と「top.css」はいずれも同じフォルダにあるままです。
    それを読み分けるために、質問にあるようなコードを書いてみました。でも、読み分けてくれないのです。
    ちなみに読み分けるというのは、『「top.php」のときは「top.css」を読みこんで』そして『「それ以外.php」のときは「style.css」を読みこむ』ということでございます。

    キャンセル

  • 2016/11/16 23:48

    少々違います。
    >「style.css」がないのに「style.css」が効いていると?
    はトップページのコード上にtop.cssしかなくstyle.cssを読み込んでいないのにって意味です。

    キャンセル

  • 2016/11/16 23:52

    すみません、早とちりしてしまいました。仰るとおりです。

    その【4】の表示があれば、『「top.php」のときは「top.css」を読みこんで』という指示は、本来であれば正しく機能しているハズなのですよね?
    困ってしまいますね。。

    これからスーパーリロードとやらを試してみたいと思います!

    キャンセル

  • 2016/11/17 00:03

    スーパーリロードしたり、ブラウザを変えたりしてみたのですが、やはり変わらずでした。。
    また何か「これじゃない?」などヒントがありましたら思いついたときにお願いいたします。m(__)m

    キャンセル

  • 2016/11/17 00:13

    とりあえず開発ツールでtop.cssの中身がちゃんと入ってるか見てみましょう
    あと絶対パス「http://example.com/top.css」みたいな感じで中身が見れるかもチェックしてみてください。

    キャンセル

  • 2016/11/17 00:19

    そうなんです。開発ツールで見ますと、top.cssで指定した内容はさっぱり入っておらず、しかしsrtyle.cssの内容はちゃっかり入っているのです。top.phpを見ているのに。絶対パスですか。なるほど。やってみます!夜分に誠にありがとうございます!!

    キャンセル

  • 2016/11/17 00:35

    まいりましたね。

    ---

    ●条件分岐させるコードはあっているハズ。
    →なぜなら、「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さん、お手伝い頂き誠にありがとうございます。

    キャンセル

  • 2016/11/17 00:44

    ん?
    生成されたのが<link type="text/css" rel="stylesheet" href="/top.css">なら「https://example.com/top.css」にcssがいないと表示されないですよ?
    style.cssはhttps://example.com/style.cssにいるはず。

    キャンセル

  • 2016/11/17 00:55

    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' ) );
    }
    }

    キャンセル

  • 2016/11/17 01:33

    To: ginさん
    すみません。kei344さんのご指摘通り、パスのお話しを理解しておりませんでした。
    仰るように「https://example.com/top.css」にアクセスしてみたところ、「ページが見つかりません」と404が出てしまいました。
    でも、生成されたHTMLは確かに<link type="text/css" rel="stylesheet" href="/top.css">なのですが、、ナゾすぎますね。

    おっと!なんと!ここでkei344御大が解決策を示してくださいました!!

    キャンセル

  • 2016/11/17 01:43

    To: kei344さん
    パソコン見すぎてあまたがズキズキしていたのが、ふきとびました!
    いままでで一番うれしい解決かも。だって、ほんとにつらかったんです。泣きそうww

    >と書けばtop.cssが読み込まれませんか?
    ばっちりです!(①)

    >そういう記述です。
    そうだったのですね。どおりで、ダメなわけですね。

    >下記のようなことをしたいのでしょう。
    仰るとおりです。(②)

    >top.cssでstyle.cssを上書きするような記述に
    なるほど。①のようにheader.phpに書いたり、また➁のようにfunctions.phpに書いたりするよりも、上書きするこちらの記述がベターなのですね。
    よろしければのためにお心を聞かせて頂けませんでしょうか??

    あ、でも。
    実は他の固定ページでもいくつかCSSを分岐させようかな、と思っております。
    その場合ですと、最初の①(header.phpで分岐させる方法)か、それとも➁(functions.phpで上書きじゃなく分岐させる方法)か、どちらの記述がベターでしょうか?

    キャンセル

  • 2016/11/17 01:49

    納期に迫られてるとかじゃなければ休んだほうがいいですよw
    ”あまた”も冴えると思いますw

    キャンセル

  • 2016/11/17 01:51

    To: matsuzakaq
    >top.cssでstyle.cssを上書きするような記述に
    style.cssを読み込んだ上でtop.cssを読み込むということです。CSSは同じ記述をした場合あとの記述で上書きされます。子テーマを使うということは元テーマのアップデートにも対応するというつもりではないのでしょうか。

    >CSSを分岐
    上述。

    WordPressはテンプレートに直接CSSのリンクを書く方法を推奨していません。

    キャンセル

  • 2016/11/17 02:01

    To: ginさん
    この人は一体何を言っているんだろう??…と思ったら、私の発言でしたか!爆笑
    ナチュラルハイでめっちゃツボってますwww

    To: kei344さん
    そうなのですね。たびたびありがとうございます。
    蛇足ですけれど、「あまた」以外にも誤字がありましたね。
    「よろしければのために」ではなく、「よろしければ後学のために」でしたw

    それでは、お二方、夜分遅くまで、誠に、ほんとうに、、ううう泣…ありがとうございます!!!!(´;ω;`)

    キャンセル

  • 2016/11/17 03:12

    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' ) );
    }
    }

    キャンセル

+1

if ( is_page('top') ) → if( is_page_template('top.php') ) 
に治すだけですよ。

おそらく「トップページ」という言葉に引きずられて、「最上位に表示しているページ」と認識されていると思いますが、
やりたいことに書いてある内容だと「固定ページ_top」という名前をつけたページテンプレートを使用しているだけに見えます。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/11/17 02:27

    if( is_page_template('top.php' ))ですね。
    ふむふむ。
    header.phpにその記述を試してみたですが、ダメな様子でした。
    どうやら、functions.phppから上書きする方法が良いみたいなので、今回はその方法を採用いたします♪
    でも、新しい視点をありがとうございます。

    キャンセル

  • 2016/11/17 02:45 編集

    確認ありがとうございます。お手間おかけしました〜

    キャンセル

同じタグがついた質問を見る

  • PHP

    22365questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • WordPress

    8182questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

  • CSS

    6679questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。