条件分岐でページごとに読み込ませるＣＳＳを変えたい

Question

前提・実現したいこと

以下のように外部ＣＳＳを読み込ませたいのですが思うようにいかず、頭がごっちゃになってしまいよく分からなくなってしまいました...。
どのように記述したら思うように読み込みできるのかご教授願います！

■希望
トップページ（front-page.php） → base.css
カスタム投稿ページ（アーカイブ・個別ページ共に）→ bace.css、example.css
上記２ページ以外の固定ページ → bace.css、page.css

発生している問題・エラーメッセージ

現在下記のように記述していますが、カスタム投稿ページにもpage.cssが読み込まれてしまいます。

<link href="<?php echo esc_url( home_url( '/' ) ); ?>css/base.css" rel="stylesheet">
<!-- カテゴリ別CSS -->
<?php if ( !is_home() && !is_front_page() ) : ?>
<link href="<?php echo esc_url( home_url( '/' ) ); ?>css/page.css" rel="stylesheet">
<?php endif; ?>
<?php if (is_singular( 'カスタム投稿名' )): ?>
<link href="<?php echo esc_url( home_url( '/' ) ); ?>css/example.css" rel="stylesheet">
<?php elseif ( is_page() ) : ?>
<link href="<?php echo esc_url( home_url( '/' ) ); ?>css/page.css" rel="stylesheet">
<?php endif; ?>

Comments

[kei344]

（勘違いだったため削除）

Answer 1

とりあえず提示のコードを入れ替えました。

<?php if ( !is_home() && !is_front_page() ) : ?>
<?php     if (is_singular( 'カスタム投稿名' )): ?>
<link href="<?php echo esc_url( home_url( '/' ) ); ?>css/example.css" rel="stylesheet">
<?php     elseif ( is_page() ) : ?>
<link href="<?php echo esc_url( home_url( '/' ) ); ?>css/page.css" rel="stylesheet">
<?php     endif; ?>
<?php endif; ?>

Comments

[mamamamamama]

希望が実現できました。今後は自身の頭で考えて記述できるように勉強していきたいと思います。ありがとうございました！

Answer 2

まず、トップページの定義があってるか確認してください
条件の判定
WordPressページ

その上で整理します。
①base.cssは絶対使う
②example.cssはカスタム投稿ページの時だけ使う
③page.cssはトップページとカスタム投稿ページ以外で使う

とした場合、現在は
α. if ( !is_home() && !is_front_page() ) : でデフォルトホームページ以外の場合、page.cssを使う
β. if (is_singular( 'カスタム投稿名' )): でカスタム投稿ページの場合、example.cssを使う
カスタム投稿ページ以外で
γ. elseif ( is_page() ) でページの場合page.cssを使う

となっています。

つまり、base.cssは必ず使われ、
トップページでない場合はpage.cssが使われます。

カスタム投稿ページの場合、example.cssと(トップページでは無いので)page.cssが使われます。
固定ページの場合page.cssと(トップページでは無い場合)page.cssが使われます。(二重に使われる)
というふうに現状なっています。

わかりやすいよう書き換えて直します。

<?php 
$esc = esc_url( home_url( '/' ));
$csslinks = array(); //使いたいcssファイルを列挙する配列
$csslinks[] = 'base.css';
if (is_front_page() && is_home()) {
// デフォルトホームページでは必ず何も使わない
} elseif(is_singular()) { //個別の投稿を表示中で
  if(is_singular( 'カスタム投稿名' )){
    //指定したカスタム投稿ページなら
    $csslinks[] = 'example.css';
  } elseif(is_page()) {
    //固定ページなら
    $csslinks[] = 'page.css';
  } else {
    //指定してないカスタム投稿ページと固定ページ以外(添付ページなど)
  }
} else {
  //上記以外
}
?>

<?php foreach($csslinks as $cssname): ?>
<link href="<?= $esc ?>css/<?= $cssname ?>" rel="stylesheet">
<?php endforeach; ?>

となります。

Comments

[mamamamamama]

知らなかった記述法など提示くださいまして勉強になりました、ありがとうございました！

Answer 3

とりあえずHTMLの中にPHPタグを記述するのを止めて
PHPの中でHTMLを出力するようにしましょう。

また,各関数(esc_url,home_url,is_home,is_front_page,is_singular,is_page)が何をしてくれるのか,何を返す関数なのか分からないためプログラムが正しいかどうかは判断しかねます。
それぞれの関数はバグ無く意図通りに動いていますか？

適当にPHPベースの記法にしてみましたので見直してみて下さい。
(再現出来てなかったらゴメンナサイ)

<?php
// それぞれの関数の戻り値を一旦出力,どれも正しく動いているか?
echo '<pre>' .
	json_encode(
		[
			'home_url'      => $homeUrl = home_url('/'),
			'esc_url'       => esc_url($homeUrl),
			'is_home'       => is_home(),
			'is_front_page' => is_front_page(),
			'is_singular'   => is_singular('カスタム投稿名'),
			'is_page'       => is_page(),
		], JSON_PRETTY_PRINT) .
	'</pre>';

$escUrl = esc_url(home_url('/'));

echo "<link href = \"{$escUrl}css/base.css\" rel = \"stylesheet\">";

// カテゴリ別CSS

if (!is_home() && !is_front_page()) {
	echo "<link href = \"{$escUrl}css/page.css\" rel = \"stylesheet\">";
}

if (is_singular('カスタム投稿名')) {
	echo "<link href = \"{$escUrl}css/example.css\" rel = \"stylesheet\">";
} elseif (is_page()) {
	echo "<link href = \"{$escUrl}css/page.css\" rel = \"stylesheet\">";
}

Comments

[mamamamamama]

勉強になりました、ありがとうございます！