WordPressの「投げ銭プラグイン」を作ってみよう（その2）~プラグイン管理画面の表示と設定

その2の続きです。引き続きユーザーが管理画面で選択したPayPalボタンの色を、送信できるようにコーディングを進めていきましょう。

inputタグの追加

<input type="hidden" id="btncolor" value="">

express_admin.php(新しいタブで開く)の13行目にtype属性を”hidden”、id属性を”btncolor”としたinputタグを記述します。

inputタグの属性値を読み込むための関数を作成

// クリックした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' );

次にクリックしたPayPalボタンの色の属性値を読み込むために、btncolor_scripts関数を、管理画面の設定と表示をするexpress_admin.php内で作成します。

ボタン要素を取得するためのjQueryコード

jQuery(document).ready(function() {
    'use strict';
    jQuery('#btncolor').on('click', function() {
      if (jQuery('#btncolor').val() === '') {
        alert('Choose One!');
      } else {
        console.log(jQuery('form').submit());
      }
    });
});

btncolor_scripts関数ではbuttoncheckout.js(新しいタブで開く)を読み込むことになっています。そのbuttoncheckout.jsを作成して、上述したinputタグのid属性を読み込んで、色の文字列をフォームに送信します。

wp_localize_script関数の記述

フォームに送信した文字列は、最終的にexpresscheckout.jsのcolorプロパティに管理画面で選択した色を入力する必要があります。ただし、buttoncheckout.jsで送信した文字列をexpresscheckout.js(新しいタブで開く)のcolorプロパティに直接入力しません。

wp_localize_script( 'paypal-expresscheckout', 'paypal_expresscheckout_param', array(
	'color' => '', // gold, blue, silver, black
) );

buttoncheckout.jsで送信した文字列は、JavaScriptの変数のデータと登録スクリプトをローカライズするためのwp_localize_script関数の第四引数で使われている連想配列の要素として、一旦入力します。上記のwp_localize_script関数の記述をexpress.phpのpaypal_scripts関数に追加します。

選択した要素を変数としてJSファイルに渡す

style: {
   // color: blue,
   color: paypal_expresscheckout_param.color,
   size: 'small'
},

第四引数で入力された連想配列の要素は、第二引数のpaypal_expresscheckout_paramとして認識されます。wp_localize_script関数は、JavaScriptの変数（管理画面で選択したgold, blue, silver, blackのいずれか）を登録スクリプトであるexpresscheckout.js内のpaypal_expresscheckout_param.colorに代入します。

なお今回の記事で紹介したコードはGitHub(新しいタブで開く)にて公開しています。