WordPressで料金表ブロックを自作する方法｜Lazy Blocks×Repeaterで実装

この記事は、当サイトの運営者が実際にLazy Blocks（Pro版含む）を導入・検証した上で執筆しています。掲載しているPHPコードは実機で動作確認済みです。

料金表を設置したいとき、多くの人はテーマの機能や専用プラグインに頼りがちです。しかしLazy Blocksを使えば、自分のサイト専用の料金表ブロックを、無料版の範囲だけで自作できます。この記事では、実際にRepeater（繰り返しフィールド）を使って料金表ブロックをゼロから作る手順を解説します。

Lazy Blocksの基本操作（インストール・コントロールの種類）を先に確認したい場合は、Lazy Blocks使い方完全ガイドもあわせてご覧ください。 同じ考え方は年表(タイムライン)ブロックの自作にも応用できます。

作る料金表の設計

今回作るのは、プラン名・価格・機能一覧・申し込みボタンを持つ、シンプルな料金表ブロックです。プランの数は運用中に増減できるよう、Repeaterコントロールで管理します。

コントロール名（slug）	種類	配置	役割
plans	Repeater	Inspector	プランを1件ずつ格納する親コントロール
plan_name	Text	Content（plansの子）	プラン名
price	Text	Content（plansの子）	価格表示（例：¥2,200/月）
features	Textarea	Content（plansの子）	機能一覧（改行区切り）
button_text	Text	Content（plansの子）	ボタンの文言
button_url	URL	Inspector（plansの子）	ボタンのリンク先

注意点：Repeaterの子コントロールにURL型を追加する場合、配置は必ず「Inspector」にしてください。Content配置のRepeater内にURLコントロールを追加する操作は、Lazy Blocksの仕様上ブロックされています（Textコントロール扱いにフォールバックします）。

作成手順

PHP出力コードのサンプル

「Code」タブのPHP出力欄に、以下のコードを貼り付けます。Repeaterコントロール（plans）は、PHP側では連想配列の配列として渡されるため、foreachでループ処理します。

<div class="my-pricing-table">
<?php foreach ( $attributes['plans'] as $plan ) : ?>
    <div class="my-pricing-card">
        <h3 class="my-pricing-name"><?php echo esc_html( $plan['plan_name'] ); ?></h3>
        <p class="my-pricing-price"><?php echo esc_html( $plan['price'] ); ?></p>
        <div class="my-pricing-features"><?php echo nl2br( esc_html( $plan['features'] ) ); ?></div>
        <?php if ( ! empty( $plan['button_url'] ) ) : ?>
            <a href="<?php echo esc_url( $plan['button_url'] ); ?>" class="my-pricing-btn">
                <?php echo esc_html( $plan['button_text'] ); ?>
            </a>
        <?php endif; ?>
    </div>
<?php endforeach; ?>
</div>

ポイントは次の3つです。

• esc_html()・esc_url()で必ずエスケープする（他のコントロールと同様、出力前のエスケープは必須）
• nl2br()で機能一覧の改行をそのまま反映する
• Lazy BlocksのPHP出力コードはeval()で実行される仕様のため、名前付き関数（function my_func(){}）は書けません。ループや条件分岐は今回のように直接記述してください。

最低限のCSSを当てる

無料版にはブロックごとにCSSを持ち歩く「Styles & Scripts」機能がないため、テーマの追加CSS（外観→カスタマイズ→追加CSS）か、子テーマのスタイルシートにルールを追加します。最低限、以下のようなCSSでカード状に整えられます。

.my-pricing-table {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}
.my-pricing-card {
    flex: 1;
    min-width: 200px;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 24px;
    text-align: center;
}
.my-pricing-price {
    font-size: 28px;
    font-weight: bold;
}
.my-pricing-btn {
    display: inline-block;
    margin-top: 16px;
    padding: 10px 24px;
    border-radius: 6px;
    background: #1a1a2e;
    color: #fff;
    text-decoration: none;
}

ブロック単位でCSSを完結させたい場合（案件をまたいで使い回したい場合など）は、Pro版の「Styles & Scripts」機能を使うと、エクスポートした1つのJSONファイルにCSS/JSも含められます。

つまずきやすいポイント

• 「重大なエラーが発生しました」と表示される場合、PHPコードの構文エラーが原因であることがほとんどです。WP_DEBUGを有効化し、debug.logで該当行を確認してください。
• Repeaterの子コントロールのslug名（plan_name等）と、PHPコード内で参照している配列キーが一致しているか確認してください。ここが一致していないと値が表示されません。

月額・年額の切り替えなど、さらに凝った料金表を作りたい場合

今回作ったのは最小構成の料金表ですが、月額・年額の切り替えタブやおすすめバッジ、割引表示などを持つ本格的な料金表を毎回自作するのは手間がかかります。当サイトで実際に使っている料金表ブロックは、Lazy Blocks Pro（f-pricing-table-pro）で作成したものです。

まとめ

Lazy BlocksのRepeaterとPHP出力機能を組み合わせれば、無料版だけでも実務に使える料金表ブロックを自作できます。まずはシンプルな構成で作ってみて、必要な装飾を少しずつ足していくのがおすすめです。

とはいえ、ゼロから組む時間が惜しいこともあります。

当サイトでは完成済みの料金表ブロックを配っていて、月額と年額の切り替えに対応した版もあります。

そちらはPro版が必要ですが、当サイトのリンク経由で購入された方にはPro版で動くブロック36種をまとめた限定ページをお渡ししています。
新しく作ったものも同じ場所に足していくので、料金表ひとつのために買うというより、作り置きを丸ごと受け取る感覚に近いです。