WordPressでのACFグループフィールドの出力方法

カスタムフィールドの設定と出力

WordPressのAdvanced Custom Fields（ACF）を使用すると、
柔軟なカスタムフィールドを簡単に作成して表示することができます。
ここでは、ACFで作成したグループフィールドを使って、
メニュー情報を表示する方法について説明します。

ACFプラグインのインストールと有効化

まず、WordPressのプラグインディレクトリからAdvanced Custom Fieldsプラグインをインストールし、有効化します。

グループフィールドの作成

ACFの管理画面で新しいフィールドグループを作成します。
以下のフィールドを含むグループを作成する例を示します：

• フィールド名：menu01
  • フィールドラベル：ttl01（タイトル）
  • フィールドラベル：number01（回数1）
  • フィールドラベル：price01（価格1）
  • フィールドラベル：number02（回数2）
  • フィールドラベル：price02（価格2）
  • フィールドラベル：number03（回数3）
  • フィールドラベル：price03（価格3）

フィールドグループを投稿に割り当てる

このフィールドグループを特定の投稿タイプ（例：投稿、ページ）に割り当てます。

テンプレートファイルに出力コードを追加

次に、テンプレートファイル（例：single.phpやpage.php）に以下のコードを追加して、
カスタムフィールドの内容を出力します。

<?php
// カスタムフィールドを取得
$menu = get_field('menu01');

if ($menu) {
    // 各フィールドの値を取得
    $ttl = $menu['ttl01'];
    $number1 = $menu['number01'];
    $price1 = $menu['price01'];
    $number2 = $menu['number02'];
    $price2 = $menu['price02'];
    $number3 = $menu['number03'];
    $price3 = $menu['price03'];

    // 出力
    echo '<dl class="menu_list mb_none">';
    echo '<dt>' . esc_html($ttl) . '</dt>';
    echo '<dd class="mbnon">';
    if ($number1 && $price1) {
        echo '<p><span class="nonba">' . esc_html($number1) . '</span><span class="price">' . esc_html($price1) . '円</span></p>';
    }
    if ($number2 && $price2) {
        echo '<p><span class="nonba">' . esc_html($number2) . '</span><span class="price">' . esc_html($price2) . '円</span></p>';
    }
    if ($number3 && $price3) {
        echo '<p><span class="nonba">' . esc_html($number3) . '</span><span class="price">' . esc_html($price3) . '円</span></p>';
    }
    echo '</dd>';
    echo '</dl>';
}
?>

カスタムCSSでスタイリング

必要に応じて、カスタムCSSを追加して、出力された情報をスタイリングします。
例えば、以下のようにスタイルを調整できます。

.menu_list {
    border: 1px solid #ccc;
    padding: 10px;
    margin: 20px 0;
}
.menu_list dt {
    font-weight: bold;
    margin-bottom: 10px;
}
.menu_list .mbnon p {
    margin: 5px 0;
}
.menu_list .nonba {
    display: inline-block;
    width: 60px;
}
.menu_list .price {
    display: inline-block;
    width: 100px;
    text-align: right;
}

この手順を踏むことで、ACFで設定したカスタムフィールドの内容を、指定のHTML形式で正しく出力することができます。スタイリングを調整することで、デザインに合った見栄えに仕上げることが可能です。

---