支払いフォームブロックの使用方法

読む時間: 4分 | 難易度: 初級

概要

WP Simple Pay – Payment Form ブロックは、Gutenberg の投稿またはページに支払いフォームを挿入するための推奨される方法です。エディター内にフォームのライブプレビューを提供し、ブロックサイドバーに表示オプションを公開し、ショートコードをコピーする必要なしに、顧客が表示するのと同じページ上のフォームをレンダリングします。

このブロックは ショートコードと機能的に同等ですが、より見つけやすく、フォームの現在のフォームスタイル設定を反映したエディタープレビューを提供します。

前提条件

• WP Simple Pay（どのプランでも – ブロックは無料プラグインに含まれています）
• ブロックエディター（Gutenberg）を実行している WordPress サイト
• 公開済みの支払いフォームが少なくとも1つ

ステップ1：ブロックを挿入する

1. フォームを表示したい投稿またはページを編集します。
2. +ブロックインサーターをクリックします。
3. WP Simple Pay または Payment Form を検索します。
4. WP Simple Pay – Payment Form ブロックをクリックします。

フォームを選択するように促すプレースホルダーが表示されます。

ステップ 2: フォームを選択

ブロックプレースホルダーのドロップダウンを使用して、レンダリングする公開済みの支払いフォームを選択します。選択すると、ブロックはプレースホルダーをフォームのライブプレビューに置き換えます。これには、フォームの現在のフォームスタイル設定でスタイル設定されたタイトル、説明、フィールド、および送信ボタンが含まれます。

ブロックを挿入した後でフォームのフォームスタイルを変更した場合、エディターを再度読み込むときにプレビューが更新されます。

ステップ 3: 表示オプションを設定

ブロックが選択されている場合、右側のブロック設定サイドバーに 2 つのトグルが表示されます。

• タイトルを表示 – 有効（デフォルト）の場合、フィールドの上にフォームのタイトルが表示されます。タイトルを非表示にするには無効にします。周囲のページにすでにヘッダーがある場合に便利です。
• 説明を表示 – 有効（デフォルト）の場合、フィールドの上にフォームの説明テキストが表示されます。コンパクトなレイアウトの場合は無効にします。

両方を無効にした場合、タイトル/説明ラッパーは完全に抑制されるため、余分な空白は残りません。

このブロックは、標準のブロックツールバーを介して中央揃えもサポートしています。中央揃えにすると、フォーム、埋め込まれたヘッダー、および送信ボタンは、ページのコンテンツ幅内で水平方向に中央揃えされ、ヘッダー領域は最大幅 400px に制限されます。

ステップ 4: 公開とプレビュー

ページを保存または公開します。フロントエンドで表示して、レンダリングされた状態のフォームを確認します。ブロックはショートコードと同じレンダリングパイプラインを使用するため、フロントエンドでの動作は同一です。

ブロック対ショートコード

	ブロック	ショートコード
エディタープレビュー	ライブ、スタイル付き	なし — プレースホルダーのみ
表示トグル	UIチェックボックス	ショートコード属性を手動で編集
配置	ブロックツールバー	HTML/CSSでラップ
クラシックエディターで動作	いいえ	はい
ウィジェットで動作	はい（ブロックウィジェット）	はい
ページビルダーで動作	ビルダーによる	はい（ユニバーサル）

ブロックの使用時期: 最新のGutenberg投稿とページ、FSEテンプレート、ブロックベースのウィジェット。

ショートコードの使用時期: クラシックエディター、ネイティブブロックサポートのないページビルダー、do_shortcode()を直接呼び出すカスタムテーマテンプレート。

よくある質問

フォームプレビューは表示されるが、顧客が支払えないのはなぜですか？

ブロックは、エディタープレビューと訪問者に対して同じフォームをレンダリングします。プレビューにフォームが表示されても送信が失敗する場合、問題はブロック自体ではなく、フォームの設定自体（支払い方法の欠落、無効なStripeキー、必須フィールドの欠落）にあります。WP Simple Pay > 支払いフォームとフォームの一般/支払いタブを確認してください。

同じページに複数の支払いフォームブロックを使用できますか？

はい — 各ブロックは異なるフォームをレンダリングできます。プラグインのフロントエンドアセットは、競合なしに同じページで複数のフォームを処理するのに十分賢いです。

エディタープレビューがフロントエンドで表示されるものと一致しないのはなぜですか？

エディタープレビューは、エディターがロードされた時点でのフォームの保存状態を反映します。別のタブでフォームに変更を加えた場合は、エディターを保存/更新してそれらを確認してください。フロントエンドは常に最新の保存バージョンをレンダリングします。

ブロックはフルサイト編集（FSE）テンプレートで動作しますか？

はい。ブロックは、FSEテンプレート、テンプレートパーツ、再利用可能なブロック/パターンを含む、ブロック対応のコンテキストに挿入できます。

埋め込みフォームをページごとに個別にスタイル設定できますか？

フォームのスタイルはブロックごとではなく、フォームごとです。ページごとに異なるスタイルを使用するには、複数のフォームを作成し、各ページに適切なブロックを挿入してください。

WP Simple Pay ボタンブロックとこのブロックの違いは何ですか？

支払いフォームブロックは、フォーム全体をインラインで埋め込みます。ボタンブロックは、クリックするとオーバーレイ（モーダル）でフォームを開くボタンのみを表示します。これは、表示されるフォームではなく、クリーンなコールトゥアクションが必要なランディングページに便利です。支払いボタンブロックの使用方法を参照してください。

次にやること

• フォームスタイルを使用した支払いフォームのスタイル設定方法 – 埋め込みフォームの外観をカスタマイズする
• 購読管理ブロックの使用方法 – 購読者がプランを管理できるようにする
• 支払いフォームの一般設定の設定方法 – フォーム自体を設定する