【まいまい様】WordPressで記事ごとに個別のcssを追加する色々な方法

「記事ごとに個別のcssを追加したい」

記事ごとに個別のcssを追加したい

初めてお世話になります、調べてもどうしてもできず検索しているうちにこちらにたどり着きました。

問題点：記事（または個別ページ）ごとにcssを追加したく、
カスタムフィールドを使用して追加することはできたのですが、
例えばh1 {～}、p{～}で指定した場合、もちろん記事以外の
テンプレート共通部分にも影響してしまうため、
記述したclassに対して、ページのスラッグ、または
記事を囲っているclass名が自動的に親になるようにしたい。

例：以下のような書き方をした場合、後者のようになるようにしたい。
※ページのスラッグが「page1」とした場合、もしくは
記事をかこっているエリアが「page1」の場合

●記事投稿画面（カスタムフィールド）に記述するclass
h1 { font-size:18px;}
p { color:#EEE;}
↓
●実際のページのhead内に自書きで追加されるclass
.page1 h1 { font-size:18px;}
.page1 p { color:#EEE;}

もちろん、記述時にclass名を付けられれば一番いいのですが、
クライアントの関係で、それができなさそうなのです。

不明点があれば質問下さい。
お忙しい中誠に恐れ入りますが、ご教授頂けますと幸いです。

＞まいまい様
ご相談ありがとうございます。

CSSの追加方法はカスタムフィールド以外だとプラグインやセレクタによる記述方法で区別する形がメインになると思います。

＞記述時にclass名を付けられれば一番いいのですが、
＞クライアントの関係で、それができなさそう
これができない理由がよくわかりませんね。別の方法でやるにしても、特にまいまいさんが仰るような方法でやるとしたらテーマのカスタマイズが必須になると思います。

body_class

通常、body_classで表示されるページに応じたクラスが追加されます。（もちろん、すべてのテーマに当てはまるわけではありませんが）
テンプレートタグ/body class – WordPress Codex 日本語版

投稿（single.php）のbodyタグなら「single」「記事id」などが付与されるため、
body class=”post-template-default single single-post postid-6236″

.postid-6236 .entry-content .h2 {}
のような書き方ができるわけですね。

しかし、単純な記述しかできないとなるとbody classがあっても意味ないですね。

プラグイン

WP Add Custom CSS
https://ja.wordpress.org/plugins/wp-add-custom-css/

このプラグインは、記事毎に編集画面にCSS入力部分ができます。

でも記述方法が限定されるのであれば、カスタムフィールドを利用する形と結局は変わらないでしょう。

is_singleでテンプレートに直書き

is_singleで条件分岐してPHPファイルに直接書く方法もあります。（作法的にはheader.phpのheadタグ内に書くことになるでしょう。single.phpに書いても働かないことは無いと思いますが、バリデーションは通らないでしょう）
関数リファレンス/is single – WordPress Codex 日本語版

is_single( '17' ) {
  <style type="text/css">  
    <!-- 
     IDが17の記事に行う処理
    -->  
  </style>
}

PHPが使えるのであれば、応用として記事のIDやスラッグを取得して、まいまいさんのおっしゃる「実際のページのhead内に自書きで追加されるclass」
.スラッグ .post h1 {} のような形にもできるかもしれませんが･･･
CSSの記述も限定されている状態でPHPのカスタマイズが許されることは無いかもしれませんね＾＾；

最終的にどれくらい追加するかがわかりませんが、スタイル追加の度にPHPをカスタマイズすることになって非効率ですし、ファイルも肥大化します。（パフォーマンスにも悪影響でしょう）

1.カスタマイズ方法が限定されている
2.現状だとCSS追加方法も限定される
3.そしてそれは逆にコストがかかるしデメリットも多い
といったお金の話もして、うまく普通にCSSのカスタマイズくらいはできるようにしてもらうのが一番だと思います！！

プラグインの利用は許可してもらう
style.css以外に別のCSSファイルを読み込むようにしてもらって、その管理を任せてもらう
といった形に持っていければベストではないでしょうか。

参考にして頂ければ幸いです。