Learning site for website creation

p05:カスタムフィールド作成「Advanced Custom Fields」ver6以降

公開日:2022年10月24日 更新日:2022年10月24日

フィールドグループ作成

画面上部「+新規追加」をクリックします。

「新規フィールドグループを追加」の入力欄にグループ名を入力して「Save Changes」をクリックします。

フィールド作成:入力・選択項目の作成

フィールドを使って入力欄や選択項目を作成します。

General

画面上部「General」を選択して、項目の名前や識別子を指定します。

フィールドタイプ:項目の種類を選択

  • 基本
    • テキスト
    • テキストエリア
    • 番号
    • 範囲
    • メール
    • URL
    • パスワード
  • コンテンツ
    • 画像
    • ファイル
    • Wysiwyg エディタ
    • oEmbed
  • 選択肢
    • 選択
    • チェックボックス
    • ラジオボタン
    • ボタングループ
    • 真 / 偽
  • 関連
    • リンク
    • 投稿オブジェクト
    • ページリンク
    • 関係
    • タクソノミー
    • ユーザー
  • jQuery
    • Googleマップ
    • 日付選択ツール
    • 日時選択ツール
    • 時間選択ツール
    • カラーピッカー
  • レイアウト
    • メッセージ
    • アコーディオン
    • タブ
    • グループ

フィールドラベル

編集ページ表示される名前を入力します。全角文字で入力して構いません。

フィールド名

テンプレートで表示・取得する際に使用する名前を入力します。半角英数とアンダースコアを使って名前をつけます(ダッシュも使用可)。スペースは使えません。

初期値

新しくページを作成した際、最初から入力されている値を指定します。

Validation

画面上部「Validation」を選択し、項目の入力・選択ルールを指定します。

フィールドタイプによってルール画面が異なります。

フィールドタイプ「テキスト」の場合は「Required」で必須項目の選択と「文字数制限」を指定できます。

Presentetion

画面上部「Presentetion」を使いやすくするための補助項目を指定します。

フィールドタイプによって画面構成が異なります。

フィールドタイプ「テキスト」の場合は「手順」に説明文、「プレースホルダーテキスト」「先頭に追加」「追加(後に追加)」「ラッパー属性」を指定できます。

条件判定

画面上部「条件判定」を使うと項目の表示条件を指定できます。

通常は他のカスタムフィールドの値と組み合わせて条件を指定します。

今回は「条件判定」を「OFF」にします。条件判定が「ON」の場合、カスタムフィールドが表示されない可能性があるので注意!

フィールド追加:入力・選択項目の追加

項目を追加したい場合は画面右上「+ Add Field」もしくは項目編集パネル右下「+ Add Field」をクリックします。

チェックボックスを追加

作品に使用したスキル用のチェックボックスを作成します。

General

画面上部「General」を選択して、項目の名前や識別子を指定します。

Validation

画面上部「Validation」を選択し、項目の入力・選択ルールを指定します。

フィールドタイプ「チェックボックス」の場合は「Required」で必須項目の選択と「Allow Custom Values」で項目の追加許可を指定できます。

Presentetion

画面上部「Presentetion」を使いやすくするための補助項目を指定します。

フィールドタイプ「テキスト」の場合は「チェックボックス」に説明文、「レイアウト」でチェックボックスの表示等を指定できます。

条件判定

画面上部「条件判定」を使うと項目の表示条件を指定できます。

通常は他のカスタムフィールドの値と組み合わせて条件を指定します。

今回は「条件判定」を「OFF」にします。条件判定が「ON」の場合、カスタムフィールドが表示されない可能性があるので注意!

設定

カスタムフィールドを表示する条件を指定します。

以下の条件の場合は「すべての投稿編集画面」にカスタムフィールドが表示されます。

保存

画面右上「Save Changes」をクリックして設定を保存します。

カスタムフィールドの確認

「投稿」の編集画面にカスタムフィールドが表示されます。

カスタムフィールドを入力・選択して更新します。

テーマで出力

下記コードをループ内に記述してカスタムフィールド値を出力します。

<?php if(get_field('フィールド名')): ?>
  <p><?php the_field('フィールド名'); ?></p>
<?php endif; ?>

今回はループ内に以下のコードを記述して作品名を出力します。

<?php if (get_field('work_name')) : ?>
  <p><?php the_field('work_name'); ?></p>
<?php endif; ?>

チェックボックスを出力します。

<?php if (get_field('skill')) : ?>
  <p><?php the_field('skill'); ?></p>
<?php endif; ?>

配列を利用して出力する場合は以下のコードになります。

<?php
if (get_field('skill')) :
  $skill_array = get_field('skill');
?>
  <ul>
    <?php foreach ($skill_array as $value) : ?>
      <li><?php echo esc_html($value); ?></li>
    <?php endforeach; ?>
  </ul>
<?php endif; ?>