エントリーカードにACFで作成したカスタムフィールドを表示する方法

Cocoonカスタマイズ集
この記事は約2分で読めます。
記事内に広告が含まれています。

完成イメージ

実装手順

以下の手順で実装します。

  • ラベル
    Cocoon設定

    表1に示す項目を設定します。Cocoon設定

    設定大項目項目設定値
    インデックスリスト設定カードタイプ縦型カード2列
  • ラベル
    カスタムフィールドを追加
    Advanced Custom Fields

    プラグイン「ACF」(Advanced Custom Fields)を使用して、カスタムフィールドを作成します。
    表1に、カスタムフィールド名を示します。

    カスタムフィールド
    ラベル名カスタムフィールド名
    重さweight
    価格fee
  • ラベル
    PHPを追加

    以下のコードをfunctions.phpに追加します。

    add_action('entry_card_snippet_after', function ($post_id) {
      // カスタムフィールド(ACF)を取得
      $weight = number_format(get_field('weight', $post_id));
      $fee    = number_format(get_field('fee', $post_id));
    
      ?>
      <table class="product-info">
        <tbody>
          <tr>
            <th class="product-info__label">重さ</th>
            <td class="product-info__value"> <?= $weight ?>g</td>
          </tr>
          <tr>
            <th class="product-info__label">価格</th>
            <td class="product-info__value"> <?= $fee ?>円</td>
          </tr>
        </tbody>
      </table>
      <?php
    });

さいごに

今回紹介した方法を使えば、フックを利用することで、簡単にエントリーカードにHTMLを追加できます。
また、プラグイン「ACF」を使用すれば、画面上で入力フォームを設定するだけで、ノーコードでメタボックスを作成できます。
さらに、get_field($key)を使用することで、プラグインの利用が一目で分かりやすくなります。

タイトルとURLをコピーしました