0

目的と現状

期待した出力は固定ページや投稿ページに変移するごとに、それぞれのcssを読み込み、サイトをデザインしてほしい。
完成はきれいにスタイリングされている状態です。

固定ページ現状

現状ではそれぞれのサイトのCSSが読み込まれていないです。

試したこと

様々な部分で調べました。しかし、うまくいきませんでした。
調べた内容は、if構文を使って、固定ページと投稿ページで分岐させる書き方です。
解決できなかったので、ご教授ください。

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

PHP

<?php if(is_single() ): ?>
    <!-- 投稿ページでは -->
    <link rel="stylesheet" href="<?php echo get_template_directory_uri();?>/asset/css/blog.css">

    <!-- //固定ページでは -->
    <?php elseif( is_page('contact') ) :?>
        <link rel="stylesheet" href="<?php echo get_template_directory_uri();?>/asset/css/conatct.css">
    <?php elseif(is_page() ) :?>
        <link rel="stylesheet" href="<?php echo get_template_directory_uri();?>/asset/css/blog.css">
    <?php else:?>
        <link rel="stylesheet" href="<?php echo get_template_directory_uri();?>/asset/css/style.css">
    <?php endif; ?>
}
2
  • 期待した出力結果と動作、実際の出力結果と動作、エラーが出るならエラーメッセージ、「様々な部分で調べた」ことの要約を質問を編集して追記してください
    – suzukis
    Commented 2022年1月23日 0:53
  • コメントありがとうございます。 期待した出力は固定ページや投稿ページに変移するごとに、それぞれのcssを読み込み、サイトをデザインしてほしい。 実際は、「それぞれのサイトのCSSが読み込まれていないです」 Commented 2022年1月24日 7:15

2 件の回答 2

0

何らかのテーマを修正していると思いますが

テーマフォルダ内の 各ページを表示しているテーマファイルにCSSなどを設定しないと反映されないと思います。(テーマフォルダにindex.phpしかないなら、条件分岐で指定しますが、

一例ですが、
投稿記事なら、single.php テーマファイル
投稿記事一覧なら、 archive.php テーマファイル
を追加修正します。

各テーマファイルについては以下を見てください。
https://wpdocs.osdn.jp/wiki/images/wp-template-hierarchy.jpg
https://ja.wordpress.org/support/article/using-themes/

追伸、アクテブでないテーマを誤って修正していると反映されません。

自身でデバッグしていると思いますが
一部抜粋phpコードの一番下に 

}

が有るのですが、もしかして以下の様に styleの定義の中に入れ子になっていませんか?
linkタグが styleの定義として解釈され無視されているかもしれません。
chromeの”要素の検証”などで、どの様にhtmlが出力されているか確認することを勧めます。

  <style>
   .何ちゃらclass {
       display: none;
<?php if(is_single() ): ?>
    <!-- 投稿ページでは -->
    <link rel="stylesheet" href="<?php echo get_template_directory_uri();?>/asset/css/blog.css">

    <!-- //固定ページでは -->
    <?php elseif( is_page('contact') ) :?>
        <link rel="stylesheet" href="<?php echo get_template_directory_uri();?>/asset/css/conatct.css">
    <?php elseif(is_page() ) :?>
        <link rel="stylesheet" href="<?php echo get_template_directory_uri();?>/asset/css/blog.css">
    <?php else:?>
        <link rel="stylesheet" href="<?php echo get_template_directory_uri();?>/asset/css/style.css">
    <?php endif; ?>
              }
  </style>
5
  • ご回答ありがとうございます。因みに、テーマフォルダーごとにCSSを書かないといけない理由は何ですか? Commented 2022年1月26日 15:06
  • 上記を聞いた理由は理屈がわからないと、どこを修正したらよいか、判断がつかないからです。一度テーマごとにCSSを設定しましたが、できませんでした。 上記のif文を使ったコードを書いたのは下記の記事を見たからです。 Commented 2022年1月26日 15:17
  • 基本、cssはインラインスタイル以外は、<head> 要素にcssを定義(読み込み)しないと反映されないと思います。ページ毎に個別のスタイルを読み込みたいなら、表示するテンプレートファイルに定義するのが一番素直だと思い回答しています。
    – yyz
    Commented 2022年1月27日 1:18
  • なるほどです。ご回答ありがとうございます。私のphpファイルはheaderを共通なので,header内のheadに書いていました。これで反映させるために、上記のような書き方(if構文)で書きました。文法上は正しいと思いますがいかがでしょうか。? Commented 2022年1月28日 5:46
  • もう一度、phpからの出力内容などを確認して見ることを勧めます。styleが反映されない可能性を回答に追加しました。
    – yyz
    Commented 2022年1月28日 7:03
0

is_page()ではなく$post->post_nameでスラッグは取得できますので、分岐できるはずです。
ただ、head内にlinkタグを直書きで出力するよりも、functions.phpwp_enqueue_scriptsadd_actionして、wp_enqueue_styleを使って出力するのが正しいと思います。

わけがわからないかもしれませんが、とりあえずwp_enqueue_scriptswp_enqueue_styleを調べてみるといいです。$post->post_nameもですね。

wp_enqueue_scriptsadd_actionさせる関数内で、$post->post_nameを使って分岐させればできるはずです。

ですが、もっと簡単なのは、CSSファイルの出力を分けるよりも、classidなどでページごとのセレクターを当てて分岐するのが早いです。
wordpressはbodyにページごとのclassを付与してくれています。もちろん付与することも可能ですのでぜひ試してみてください。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。