WordPressで固定ページごとに個別のCSSを読み込ませたい。

WordPressで固定ページごとに個別のCSSを読み込ませるために、header.phpに以下を記載しましたが反映されません。原因を教えて頂けますでしょうか？また、その他おすすめの方法がありましたら教えて頂けると幸いです。全てのcssファイルは同階層にあります。

  <?php if(is_front_page() || is_home() ) { ?>
    <link rel="stylesheet" href="<?php home_url('templete_url'); ?>/./style.css">
     <?php } else if (is_page('profile')) { ?>
      <link rel="stylesheet" href="<?php bloginfo('templete_url'); ?>/./style-profile.css">
       <?php } else if (is_page('service')) { ?>
        <link rel="stylesheet" href="<?php bloginfo('templete_url'); ?>/./style-service.css">
         <?php } else if (is_page('works')) { ?>
          <link rel="stylesheet" href="<?php bloginfo('templete_url'); ?>/./style-works.css">
           <?php } else { ?>
            <link rel="stylesheet" href="<?php home_url('templete_url'); ?>/./style.css">
             <?php } ?>

行動規範の内容に同意します

回答2件

既に解決済みとなっているようですがheader.phpでいくなら
if文のネストは可読性・メンテナンス性を損なうので
switch case使って、私ならこう書きます。

php
1<?php
2switch (true) : ?>
3    <?php case is_front_page(): ?>
4    <?php case is_home(): ?>
5        <link rel="stylesheet" href="<?php echo home_url('templete_url'); ?>/style.css">
6        <?php break; ?>
7    <?php case is_page('profile'): ?>
8        <link rel="stylesheet" href="<?php echo bloginfo('templete_url'); ?>/style-profile.css">
9        <?php break; ?>
10    <?php case is_page('service'): ?>
11        <link rel="stylesheet" href="<?php echo bloginfo('templete_url'); ?>/style-service.css">
12        <?php break; ?>
13    <?php case is_page('works'): ?>
14        <link rel="stylesheet" href="<?php echo bloginfo('templete_url'); ?>/style-works.css">
15        <?php break; ?>
16    <?php default: ?>
17        <link rel="stylesheet" href="<?php echo home_url('templete_url'); ?>/style.css">
18        <?php break; ?>
19<?php endswitch; ?>

後は、HiraKazu1124様がご指摘なさっているように./は今いる場所という相対アドレスなので、たぶん上記のコードになるか、../css/ファイル名といった記述になるのではないかと思います。

投稿2022/01/31 23:47

nekora

総合スコア501

nekora

2022/01/31 23:54

役に立った回答には回答の下のサムズアップをクリックして評価を上げて回答の左の数字を増やしてあげてください。また、解決に至った回答はベストアンサーに指定できます。これらは、個別に指定でき、同時に指定することも可能です。あと、解決したと言う事でベストアンサーが選ばれてますがそのアンサーにコメントをつけるか、質問文は編集・追記ができますので、コメントか質問文にいかにして解決に至ったかを記載してください。ここは、教えて掲示板ではなく、技術者同士の情報交換の場です、あとから同様な問題を抱えた方が見たときにこうやって解決したんだという、解決法を記載しておくようにしてください。

行動規範の内容に同意します

ベストアンサー

まずはデバッグして原因を突き止めるのがいいでしょうね！

原因っぽいところ（推測）

パスにある「.」ですが、これは現在のファイルの場所を示すために使うものです。
「./a/b/c」だと、現在の場所から->a->b->c
というようにファイルを探します。これを相対パスといいます。

「/a/b/c」だと、ルートディレクトリ->a->b->c
というようにファイルを探します。これを絶対パスといいます。

基本的にWordPressでは基準となるパスを返す関数が豊富なので、なるべく絶対パスで書くようにした方がよいと思います。絶対パスで「.」は基本的に使いません。

あと、bloginfo関数は今回のような例ではあまり使わないかな？
bloginfo('template_url')もなんだか非推奨関数のようですよ？
https://whitebear-seo.co.jp/wordpress-bloginfo-deprecation/

それに、
<?php bloginfo('template_url'); ?>
と書いていますが、これはtemplate_urlを取得しただけで、phpの処理からhtml側に出力できていないのでは？
<?php echo bloginfo('template_url'); ?>
<?= bloginfo('template_url'); ?>
みたいにしないとHTML側に結果が出力されないのではないでしょうか？

本当にheader.phpが適切に読み込まれているのか？

header.phpにコメントでもつけて、HTMLのソースをブラウザで確認。GoogleChromeのデベロッパーツール（初めから入っています）で確認するのがおすすめです。header.phpのコメントが表示されるならひとまずheader.phpが読み込まれていることは確認できるでしょう。

変数を使おう！

「なんだか同じような文を繰り返し書いているな～」と頭に少しでもよぎったら、書き方を工夫する癖をつけましょう。これはプログラミング全般において言えることです。

PHP
1<?php
2$style_path = null; //スタイルシートへのパス
3if (条件1) {
4    $path = "A";
5} else if(条件2) {
6    $path = "B";
7} else if(条件3) {
8    $path = "C";
9} else {
10    $path = "S";
11}
12// print($path); <-このようにすればどんなパスが指定されているかデバッグで確認できる。
13?>
14<link rel="sylesheet" href=<?= $path?>/>