他のボタンやリンクからオーバーレイを起動する方法

この記事では、WordPressサイトにカスタムコードを追加する方法について詳しく説明しており、開発者向けです。当社ではカスタム開発サービスを提供していませんが、サポートが必要な場合は、Seahawk Mediaを強くお勧めします。

カスタムコードスニペットは現状有姿で提供され、WP Simple Payの複数のバージョンで引き続き機能することが保証されているわけではありません。

ステップ 1: ボタンのURLを更新する

カスタムボタンリンク経由でStripe Checkoutまたはオーバーレイ支払いフォームを起動するには、ボタンリンクのURLを変更する必要があります。ボタンリンクのURLの調整は、コンテンツの編集方法によって異なります。URLを以下のように更新してください。

#form-176

176を起動したい支払いフォームのIDに置き換えてください。支払いフォームのIDは、フォーム編集画面で確認できます。フォームIDは、以下のSimple Payショートコードの数値部分です。

次に、WP Simple Pay支払いフォームのショートコードを通常どおりページに埋め込みます: 。これにより支払いフォームがページに出力されますが、次のステップで非表示にして、カスタムボタンリンクのみが表示されるようにします。

ステップ 2: カスタムJavaScriptを追加する

カスタムJavaScriptコードをWordPressウェブサイトに追加する方法はたくさんあります。コードスニペットの追加に関する推奨ガイドをご覧ください。無料プラグインWP Codeを使用して、JavaScriptをテーマのフッターに追加することをお勧めします。Code Snippets → Header & Footerに移動し、以下の図のようにカスタムJavaScriptをFooterセクションに追加します。

<script>
( function( $ ) {
	// Update comma separated list with payment form ID(s) to launch.
	var ids = [ '123' ];

	// Do not modify.
	ids.forEach( function( id ) { 
		$( 'a[href~="#form-' + id + '"]' ).click( function( e ) {
			e.preventDefault(); 
			$( '.simpay-form-' + id + ' .simpay-payment-btn' ).click();
			$( '#simpay-modal-control-' + id ).click(); 
		}); 
	});
})( jQuery );
</script>

4行目の123を支払いフォームのIDに置き換えてください。ページに複数のボタンを作成する場合は、起動したい支払いフォームIDのコンマ区切りリストを追加できます。

ステップ 3: カスタムCSSを追加する

カスタムCSSコードをWordPressウェブサイトに追加する方法はたくさんあります。ドキュメントでいくつかの方法を概説しました。無料プラグインWP Codeを使用して、CSSをテーマのヘッダーに追加することをお勧めします。Code Snippets → Header & Footerに移動し、以下の図のようにCSSをHeaderセクションに追加します。

<style>
body:not(.simpay-form-preview) .simpay-form-wrap {
  display: none;
} 
</style>

これにより、デフォルトのショートコード出力が非表示になり、カスタムボタンリンクのみが表示されるようになります。