MENTAやTimeTicketでZoomオンライン指導・メンタリングを行っています。
WordPressやHTMLサイトのトラブル、SEO対策のご相談、HTML・CSS・WordPressなどのレクチャーなどが可能です。


【まいまい様】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入力部分ができます。
add css plugin

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

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ファイルを読み込むようにしてもらって、その管理を任せてもらう

といった形に持っていければベストではないでしょうか。

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

おすすめコンテンツ

“【まいまい様】WordPressで記事ごとに個別のcssを追加する色々な方法” への2件の返信

  1. 回答ありがとうございました。
    クライアントの関係で、というのは「知識が疎いが自分でCSSを追加したい」という
    意味でした。ページ自体にカスタムフィールドで直書きするため全てにつけられるよう
    どうにか模索していたのですが、言葉が足りずお手数おかけいたしました。

    もう少し自分でもできないか考えてみます。

    1. >まいまい様
      コメントありがとうございます。
      なるほど、制約が無いのであれば、body_classなどの利用をおすすめします。
      現状使っていなくても、
      1.固定ページならpage.php、記事ならsingle.php のコンテンツ部分を囲うタグにbody_classを入れる
      2.親要素のクラスからCSSを記述
      という形が一番シンプルな気がします。.クラス h1{} の形になるのは仕方ないかなと思いますね・・・

      単純にタグからCSSを記述したい・・・ということなのかも知れませんが、そんなに書くCSSが多い感じでしょうか??
      数が多いなら、個別のCSSではなく専用のクラス+HTML定型文を作って使い回しできるよう設計する方が良い気もしますね。

      HTMLの定型文ならショートコードや、Add Quick Tag、Post Snippetsなどタグ管理のプラグインがありますので。
      CSSの書き方では無く、最終的に何がしたいのかで考えても良いかも知れません。
      参考にして頂ければ幸いです。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA