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