【YouTube講座】WordPress開発講座 #07：本文に入力欄を追加できるカスタムフィールドを使おうの概要

WordPress開発講座 #07：本文に入力欄を追加できるカスタムフィールドを使おう

ワードプレスのカスタム３兄弟。
カスタムフィールド、カスタムポスト、カスタムタクソノミーについて紹介していきます。
今回は、カスタムフィールドについて勉強しましょう。

ワードプレスには、新規投稿画面には、タイトルを入力する所と、本文を入力する所があります。
タイトルと本文だけだと、思ったようなレイアウトができないことがあります。
オンラインショッピングなどでは、値段の更新を入力すれば、そのたびに、レイアウトが崩れてしまうことにもなります。
値段を入力する欄を作って、そこさえ入力すれば、レイアウトが崩れないようになります。

管理画面で、カスタムフィールドを作る

投稿〜新規追加〜右上３つの点　オプション　詳細パネル〜カスタムフィールドにチェックを入れます。

カスタムフィールドの入力欄が出てきます。
特殊な入力欄で、２つの入力エリアがあります。
名前は、カスタムフィールドのキー。
キーと値のコンビで、増やすことができます。

カスタムフィールドに、次の2つのコンビを作ってみました。
価格　1500
発売日　2020/09/09

カスタムフィールドは、値を入れても、そのままでは表示されません。
テンプレートファイルを変更しなければなりません。

single.php を編集して、カスタムフィールドのキーと値を表示する

single.php を編集します。

<!-- Post Content -->
  <article>
    <div class="container">
      <div class="row">
        <div class="col-lg-8 col-md-10 mx-auto">
          <?php the_content(); ?>
        </div>
      </div>
    </div>
  </article>

この中に、データ定義リストを入れます。

<!-- Post Content -->
  <article>
    <div class="container">
      <div class="row">
        <div class="col-lg-8 col-md-10 mx-auto">
          <?php the_content(); ?>
          <dl>
           <dt>価格</dt>
           <dd>1500円</dd>
           <dt>発売日</dt>
           <dd>2020年9月9日</dd>
           </dl>
        </div>
      </div>
    </div>
  </article>

<dt>価格</dt>
<dd>1500円</dd>
<dt>発売日</dt>
<dd>2020年9月9日</dd>を反映して、
投稿画面に、価格と発売日が表示されています。

カスタムフィールドの値を変更できるようにする

single.php にｐｈｐ関数を書き込みます。

<!-- Post Content -->
  <article>
    <div class="container">
      <div class="row">
        <div class="col-lg-8 col-md-10 mx-auto">
        <?php the_content(); ?>
          <dl>
           <dt>価格</dt>
           <?php
           $price = get_post_meta(get_the_ID(), '価格', true); ?>
           <dd><?php echo $price; ?>円</dd>
           <dt>発売日</dt>
           <dd>2020年9月9日</dd>
          </dl>
        </div>
      </div>
    </div>
  </article>

関数を定義して、再読み込みして、表示させると、価格1500円と、管理画面のカスタムフィールドの値を表示できています。

<!-- Post Content -->
  <article>
    <div class="container">
      <div class="row">
        <div class="col-lg-8 col-md-10 mx-auto">
          <?php the_content(); ?>
          <dl>
           <dt>価格</dt>
           <?php
           $price = get_post_meta(get_the_ID(),'価格',true);
            ?>
           <dd><?php echo $price; ?>円</dd>
           <dt>発売日</dt>
           <dd><?php
           $published = get_post_meta(get_the_ID(),'発売日',true);
            ?></dd>
           </dl>
        </div>
      </div>
    </div>
  </article>

発売日の値が表示されていません。コードを書き間違えていました。

⬇　書き直しました。

カスタムフィールドに入れた　2020/09/09　が表示されています。

決まったフォーマッタに、データを入れたいといった場合に、使うことができます。

ワードプレスの標準のカスタムフィールドは、使いにくい所があります。
プラグインを入れてあげるとよいです。
プラグイン〜新規追加〜検索窓で、acf〜Advanced Costom Fieldを選びます。
詳しくカスタムフィールドを作り込むことができます。
このプラグインを使うと、single.phpのコードを簡単にすることができます。