その2の続きです。引き続きユーザーが管理画面で選択したPayPalボタンの色を、送信できるようにコーディングを進めていきましょう。
inputタグの追加
[php]
<input type="hidden" id="btncolor" value="">
[/php]
express_admin.phpの13行目にtype属性を”hidden”、id属性を”btncolor”としたinputタグを記述します。
inputタグの属性値を読み込むための関数を作成
[php]
// クリックしたPayPalボタンの色の属性値を読み込む
function btncolor_scripts() {
wp_enqueue_script( ‘btncolor-script’, plugin_dir_url( __FILE__ ) . ‘/js/buttoncheckout.js’, array( ‘jquery’ ));
}
add_action( ‘wp_enqueue_scripts’, ‘btncolor_scripts’ );
[/php]
次にクリックしたPayPalボタンの色の属性値を読み込むために、btncolor_scripts関数を、管理画面の設定と表示をするexpress_admin.php内で作成します。
ボタン要素を取得するためのjQueryコード
[php]
jQuery(document).ready(function() {
‘use strict’;
jQuery(‘#btncolor’).on(‘click’, function() {
if (jQuery(‘#btncolor’).val() === ”) {
alert(‘Choose One!’);
} else {
console.log(jQuery(‘form’).submit());
}
});
});
[/php]
btncolor_scripts関数ではbuttoncheckout.jsを読み込むことになっています。そのbuttoncheckout.jsを作成して、上述したinputタグのid属性を読み込んで、色の文字列をフォームに送信します。
wp_localize_script関数の記述
フォームに送信した文字列は、最終的にexpresscheckout.jsのcolorプロパティに管理画面で選択した色を入力する必要があります。ただし、buttoncheckout.jsで送信した文字列をexpresscheckout.jsのcolorプロパティに直接入力しません。
[php]
wp_localize_script( ‘paypal-expresscheckout’, ‘paypal_expresscheckout_param’, array(
‘color’ => ”, // gold, blue, silver, black
) );
[/php]
buttoncheckout.jsで送信した文字列は、JavaScriptの変数のデータと登録スクリプトをローカライズするためのwp_localize_script関数の第四引数で使われている連想配列の要素として、一旦入力します。上記のwp_localize_script関数の記述をexpress.phpのpaypal_scripts関数に追加します。
選択した要素を変数としてJSファイルに渡す
[php]
style: {
// color: blue,
color: paypal_expresscheckout_param.color,
size: ‘small’
},
[/php]
第四引数で入力された連想配列の要素は、第二引数のpaypal_expresscheckout_paramとして認識されます。wp_localize_script関数は、JavaScriptの変数（管理画面で選択したgold, blue, silver, blackのいずれか）を登録スクリプトであるexpresscheckout.js内のpaypal_expresscheckout_param.colorに代入します。
なお今回の記事で紹介したコードはGitHubにて公開しています。