はじめての『WordPress』入門

5-2. カスタムフィールド

カスタムフィールドはカスタム投稿・カスタムタクソノミーと一緒によく使われる、WordPress のカスタマイズ機能です。 通常、投稿には「タイトル」「本文」しか入力欄がありませんが、この入力欄を増やすことができるのがカスタムフィールドです。 例えばカスタム投稿のレッスンでつくった「ヘアカタログ」ですが、メニューの内容や担当のスタイリスト名などを表示したい場合は、このカスタムフィールドを使うといいかもしれません。

  • WordPress

公開日:2020/03/16最終更新日:2020/03/16

1.プラグイン「Advanced Custom Fields」をインストールする

「カスタムフィールド」を使う場合は functions.php にプログラムを書く必要がありますが、プラグインで簡単に設定する方法もあります。

今回は「Advanced Custom Fields」というプラグインを使ってやってみましょう。

プラグイン追加で検索をしてインストール・有効化します。

メニューに「カスタムフィールド」が追加されます。

2.カスタムフィールドを追加する

メニューからカスタムフィールド > 新規追加を選択します。

入力項目 内容 
タイトル このフィールドグループが何に使うものか、管理するための項目です
フィールド 追加するフィールドを管理します
位置  どの投稿タイプにカスタムフィールドを適用するか条件を指定します
設定 その他、細かい設定ができる項目です 

フィールドを追加する

「フィールドを追加」ボタンをクリックするとフィールドの設定項目が表示されます。

入力内容 内容
フィールドラベル 管理画面に表示されるフィールドの項目名です
フィールド名 プログラムで表示する際に使われる名前です。日本語でも大丈夫ですが半角英数にするのがオススメです
フィールドタイプ テキスト・テキストエリア・ラジオボタン・チェックボックスなど入力形式が選べます
説明 管理画面に表示される説明文です
必須か? 入力内容を必須にします

例)

  • タイトルに「ヘアカタログ」と入力します
  • 「フィールドを追加」ボタンをクリックします。
  • フィールドラベル「スタイリスト」、フィールド名「stylist」、フィールドタイプ「テキスト」を入力して、フィールドを閉じます。
  • もう一度「フィールドを追加」ボタンをクリックします。
  • フィールドラベル「スタイリストのコメント」、フィールド名を「stylist_comment」、フィールドタイプ「テキストエリア」を入力して、フィールドを閉じます。
  • 位置のこのフィールドグループを表示する条件を、「投稿タイプ」「等しい」「ヘアカタログ」に設定します。
  • 「公開」ボタンをクリックします

ヘアカタログの投稿編集画面を確認してみましょう。

このように本文の下に作成したフィールドグループが表示され、編集できるようになっています。

3.カスタムフィールドを表示する

作成したカスタムフィールドは以下の WordPress 関数で取得・表示できます。

the_field() - 指定したカスタムフィールドを表示する

引数にフィールド名を指定すると、入力内容が表示できます。

例)<?php the_field('stylist'); ?>

get_field() - 指定したカスタムフィールドを取得する

引数にフィールド名を指定すると、入力内容が取得できます。

例)<?php get_field('stylist'); ?>

例)

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
  <article>
    <h1><?php the_title(); ?></h1>
    <section><?php the_content(); ?></section>
    <section>
      <table>
        <tr><th>スタイリスト</th><td><?php the_field('stylist'); ?></td></tr>
        <tr><th>スタイリストのコメント</th><td><?php the_field('stylist_comment'); ?></td></tr>
      </table>
    </section>
  </article>
<?php endwhile;else : ?>
  <p>まだ記事がありません</p>
<?php endif; ?>

このように表示されます(少し CSS を書き加えています)

理解度チェック

このレッスンの著者