【 WordPress 】記事タイトルを含めたsectionへの管理画面からの背景色の指定

ワードプレスで自作テーマを作成中です。

カスタム投稿タイプで下図のような構造でtop-areaクラスを持つsectionを作りたいと思っています。

こうすることで実装したい形は下記です。

<h1></h1>部分と<div class="row"></div>を<section class="top-area"></section>で一括りにして、同じ背景色とする。
<section class="top-area"></section>の背景色（上図では赤色部分）を投稿毎に変えたい。

htmlは下記のように吐き出します。

<section class="top-area">
  <h1>記事タイトル</h1>
  <div class="row">
    <div class="left-row">
      <p>投稿毎に異なる文章（簡単な記事の説明）</p>
    </div>
    <div class="rigtht-row">
      <img>投稿毎に異なる画像</img>
    </div>
  </div>
</section>
<section class="content">
記事の文章部分
</section>

ただし通常の投稿画面からの投稿だと

タイトル部分の親要素に投稿毎で異なるプロパティを指定できない
タイトルより下はphpファイル上でthe_content()として取得する部分になるため上記のrowクラスを持つdiv要素の設定方法が分からない

という点から、実装に困っています。

苦肉の策としてはhtmlの構造を下記のようにする。

<section class="top-area">
  <h1>記事タイトル</h1>
</section>
<section class="top-area">
  <div class="row">
    <div class="left-row">
      <p>投稿によって異なる文章（簡単な記事の説明）</p>
    </div>
    <div class="rigtht-row">
      <img>投稿によって異なる画像</img>
    </div>
  </div>
</section>
<section class="content">
記事の文章部分
</section>

2つ目のtop-areaクラスを持つsectionは、投稿毎に投稿画面に直接コードを打ち込む。
記事を下書きor公開したら割り振られる「id」を見て投稿毎に下記のようにcssファイルに追記し背景色を設定する。

.page-id-〇〇 .top-area { 
    background-color: #○○○○○○;
}

このようにすれば何とか出来そうですが、以下の点でこのような実装はあまりしたくないのが実際です。

ビジュアルでは<h1>と<div class="row">が一つでまとまっている部分なので、分離させることに違和感がある
idを見てcssを追記していくことで管理コストが上がる。

もっとスマートな方法があれば教えて頂けると幸いです。

宜しくお願いします。

kei344

2020/04/30 02:21 編集

（質問文は編集できます）「投稿によって変えたい」とありますが、どこからどこまでが「投稿」で複数あるときにどうなるのかがわかりません。また、「記事の「postid」を見て」とありますが提示箇所にはidが含まれていません。

tnk_fuku

2020/04/30 05:33

記載が分かりにくく申し訳ありません。内容を修正しましたが、わかりにくい部分があれば再度ご指摘いただければと思います。

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

回答1件

ベストアンサー

ある程度決まった値ならクラスを作ってカスタムフィールドにそのクラス名を入力するか、カラーコード（#fffとか）ならstyle属性で処理するとか考えられます。

PHP
1<section class="top-area<?php echo post_custom( 'クラス' ); ?>" style="background-color:<?php echo post_custom( 'カラーコード' ); ?>;">
2  <!-- 略 -->
3</section>

【post_custom – WordPress私的マニュアル】
https://elearn.jp/wpman/function/post_custom.html

【WordPressのカスタムフィールドとは？設定手順からプラグインまで徹底解説！ | CodeCampus】
https://blog.codecamp.jp/wordpress-custom-field-what

投稿2020/04/30 05:43

kei344

総合スコア69597

tnk_fuku

2020/04/30 07:31

ご回答有難うございます。カスタムフィールドでの実装が出来るのですね。当初のイメージのようにtop-areaを1つにする場合、投稿画面から<?php the_title(); ?>や<?php the_content(); ?>以外の部分へデータを出力するような実装は出来るのでしょうか。カスタムフィールドを使ったことが無いのでよくわからないのですが、たとえばカスタム投稿タイプのphpファイルを下記のようにするイメージです。 <section class="top-area"> <h1><?php the_title(); ?></h1> <div class="row"> <div class="left-row"> <p>カスタムフィールドに入力した文章を反映するコード</p> </div> <div class="rigtht-row"> <img>カスタムフィールドから挿入した画像を反映するコード</img> </div> </div> </section> <section class="content"> <?php the_content(); ?> </section>