

### 目的と現状

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

[![固定ページ現状](https://i.stack.imgur.com/5GbKp.png)](https://i.stack.imgur.com/5GbKp.png)

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

### 試したこと

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

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

PHP

[code]

    <?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; ?>
    }
    
[/code]


CC BY-SA 4.0
2022-01-22T13:51:52.677
85862
2022-02-25T00:26:16.223
2022-01-24T12:08:57.133
3060
51028
question
php wordpress
WordPress で固定ページと投稿ページごとにCSSを設定したい。更に、固定ページはスラッグごとに、CSSを設定したいです。


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

テーマフォルダ内の 各ページを表示しているテーマファイルに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コードの一番下に

[code]

    }
    
[/code]

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

[code]

      <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>
    
[/code]


CC BY-SA 4.0
2022-01-25T08:04:42.503
85925
2022-01-28T07:01:39.333
2022-01-28T07:01:39.333
22793
22793
85862
answer


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

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

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

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


CC BY-SA 4.0
2022-02-25T00:26:16.223
86565
2022-02-25T00:26:16.223
51589
85862
answer