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

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

ただいまの
回答率

90.35%

  • PHP

    25506questions

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

  • WordPress

    9594questions

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

  • CSS

    8380questions

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

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

解決済

回答 2

投稿 編集

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

退会済みユーザー

■やりたいこと

トップページだけ別の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/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 編集

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

    キャンセル

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

  • ただいまの回答率 90.35%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

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

  • PHP

    25506questions

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

  • WordPress

    9594questions

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

  • CSS

    8380questions

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