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

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

WordPressの料金表は、プランごとの価格・請求周期・機能・申込先を同じ入力項目で管理すると更新しやすくなります。見た目だけを先に作ると、月額と年額や税込・税別が混ざりやすいためです。この記事ではRepeaterで最小構成を作り、1プランの表示とリンクが正しいことを確認してから増やします。

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

1プランの入力項目と、価格の表示ルールを決める

今回の入力項目はプラン名・価格・機能一覧・申込ボタンです。Repeaterの1行を1プランに対応させます。制作前に、税込／税別、月額／年額、一括支払額などの表記を決め、どのプランも同じ基準で比べられるようにしましょう。

コントロール名（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出力コードのサンプル

以下のPHPは、plansに入る各プランをforeachで出力します。最初は2プランを入力し、プラン名・価格・機能・ボタンの対応がずれていないか確認します。URLが空の行や機能が長い行も試してから、公開ページへ使ってください。

<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はその管理方法の一つです。まず無料版で機能を満たせるか確認し、ファイルを別管理する負担が大きい場合に比較しましょう。

つまずきやすいポイント

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

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

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

まとめ

公開前は、数字だけでなく価格の単位と請求周期を確認します。たとえば月500円と年5,000円を同じ条件の価格として並べると判断を誤らせます。税込・税別をそろえ、申込先URLとスマホでの折り返しを確認し、料金改定時に更新する場所と表示先も記録してください。

まず入力欄と出力の仕組みを理解したい方は、Lazy Blocksの基本設定とコントロールの使い方へ進んでください。完成済みのデザインから始めたい方には、以下の配布ブロックもあります。

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

追加のデザインを取り込む場合も、まず現在の料金表の入力値と出力結果を保存しておきます。切り替え機能を増やすほど確認する組み合わせも増えるため、月額・年額それぞれの表示とリンクを一つずつ照合してください。料金表の基本は、比較条件がそろい、正しい申込先へ進めることです。