エコテキブログ

  1. TOPTOP
  2. Webサービス

WordPressで書いたブログ記事をマネタイズする（その3） ~ Twenty Seventeenのfunction.phpでPayPalのサーバーレス決済（Client-side REST）

wordpress_blog_monetize_0

WordPressで書いたブログ記事をマネタイズする（その2） ~ PayPalのサーバーレス決済（Client-side REST）をTwenty Seventeenにベタ書きする

WordPressのブログ記事にPayPalのサーバーレス決済のボタンを表示させるために、必要なJavaScriptにベタ書きしました。

ですがこの書き方ではJavaScriptのコードがテーマ本体のファイルに混ざってしまい、見通しが非常に悪くなります。そこで今回はfunctions.phpで独自関数を定義して、Client-side RESTのJavaScriptコードを読み取ってPayPalのボタンを表示・決済する方法をご紹介します。

サーバーレス決済のスクリプトコード

wordpress_blog_monetize_2_1

まずはサーバーレス決済のボタンを表示させるためのJavaScriptコードをPayPal developerの公式ドキュメントで確認しておきましょう。

このページにおいて、右半分の箇所にスクリプトコードが記載されています。ペラいちのホームページに貼り付ける場合、.htmlファイルにこの内容をコピぺするだけでボタンが表示されます。

WordPressサイトへの落とし込み

次にWordPressのブログサイトにおいて、PayPalの決済ボタンを表示させるcheckout.jsを読み込むための手順をご紹介します。

JavaScriptライブラリのコピペ

PayPalの決済画面を表示するために必要なオブジェクト・プロパティ・メソッドが定義されている、checkout.jsというライブラリがWeb上で公開されています。このライブラリをheadタグ内で読み取って、JavaScriptのコードに反映できるようにします。

<script src="https://www.paypalobjects.com/api/checkout.js"></script>

このscriptタグをWordPressの公式テーマであるTwenty Seventeenにコピペする場合、header.phpに記述されている”“の直前で21行目(新しいタブで開く)にコピペしましょう。

functions.phpに関数を記述

// PayPal Express Checkout
function paypal_scripts() {
       wp_enqueue_script( 'paypal_scripts', get_template_directory_uri().'/js/expresscheckout.js' , array(), date('U'));
}

add_action( 'wp_enqueue_scripts', 'paypal_scripts' );

WordPressで独自関数を使う場合、functions.phpのを使ってTwenty Seventeenの590行目から594行目(新しいタブで開く)にかけて定義します。今回は、paypal_scripts()という独自関数を作成します。独自関数で定義する内容は、wp_enqueue_scriptは指定したスクリプトファイルを「適切なタイミング」で実行するという意味です。

またその「適切なタイミング」とは、wp_enqueue_scriptsでpaypal_scripts関数をフックすることを指します。

divタグのコピペ

実際のスクリプトコードをコピペする直前に、”paypal-button-container”というid名を持つdivタグをコピペします

<div id="paypal-button-container"></div>

このid名のdivタグがない場合、PayPalのボタンは表示されない仕様になっています。Twenty Seventeenにコピペする場合、”/template-parts/post/content.php”の74行目(新しいタブで開く)にコピペします。

独自関数と条件分岐タグの記述

divタグの直下にcontent.phpの75行目(新しいタブで開く)にスクリプトタグを記述します。

<?php if(is_single()): ?>
		<div id="paypal-button-container"></div>
		<?php paypal_scripts(); ?>
<?php endif; ?>

またTwenty Seventeenに特有の記述として、条件分岐関数のis_single()でdivタグと独自関数を制御します。

スクリプトコードの記述

最後に定義した独自関数のpaypal_scripts()の実行内容を定義します。WordPressにおいて独自のJavaScriptファイルを読み込む場合、テーマディレクトリの中にJavaScript専用のディレクトリ（JSディレクトリ）を設けて、その中でjsファイル(新しいタブで開く)を作成します。

<script>
paypal.Button.render({
...
});
</script>

“paypal.Button.render({ });”で始まるメソッドでボタンの色や決済する金額などを決めます。このスクリプトコードをあえて日本語に訳すると、「PayPalのButtonオブジェクトを読み取ります。その中身は…」となります。その中で多数のプロパティ（プロパティとプロパティ値）が使われていますが、詳細はPayPal　developerの公式ドキュメント(新しいタブで開く)で確認することができます。

PayPalボタンの貼り付け完了

wordpress_blog_monetize_1

ここまでの作業が完了すると、WordPressの各記事ごとにPayPalのボタンが表示されるようになります。スクリプトコードではSandBoxのアクセストークンを使用しています。ご自身のWordPressの開発環境で、PayPal決済ができるかどうか確認してみましょう。