5.2 カスタムフィールド - Yoshikikojima/hajimete-no-wordpress GitHub Wiki

カスタムフィールドはカスタム投稿・カスタムタクソノミーと一緒によく使われる、WordPress のカスタマイズ機能です。

通常、投稿には「タイトル」「本文」しか入力欄がありませんが、この入力欄を増やすことができるのがカスタムフィールドです。

例えばカスタム投稿のレッスンでつくった「ヘアカタログ」ですが、メニューの内容や担当のスタイリスト名などを表示したい場合は、このカスタムフィールドを使うといいかもしれません。

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

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

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

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

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

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

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

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

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

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

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

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

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

例）<?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 を書き加えています）