WordPressでAJAXのためのnonceをJSに出力したいです

Question

前提・実現したいこと

WordPressでAJAXできるように取り組んでいます。
nonceを発行しそれをJSに出力したいのですが、wp_headから出力するにはどうしたらいいでしょうか。

発生している問題・エラーメッセージ

以下のソースコードで、「var MY_NONCE」がJSに出力できません。
出力できないことは、ページ読み込み後、「console.log(MY_NONCE);」を実行するという方法で確認しました。

エラーメッセージはありません。

該当のソースコード

functions.php

define( "HIS_ID", get_current_user_id() );

add_action( 'wp_head', 'MY_NONCE_ajax' );
function MY_NONCE_ajax() {
	if( HIS_ID != 0 ) {
		$action_arr = [ 
			 'ajax_post'
			,'ajax_visit'
		];
	}
	else{
		$action_arr = [ 'ajax_password', 'ajax_login' ];
	}
	foreach ($action_arr as $action) {
		$keyword = $action . 'xxx';
		$nonce  = wp_create_nonce( $keyword );
		$MY_NONCE[$action] = $nonce;
	}	
	echo '<script>var MY_NONCE = '.$MY_NONCE.'</script>';
}

試したこと

出力のフックが悪いのかといろいろ試しまして、上記wp_headを下記のようにwp_enqueue_scriptsとlogin_enqueue_scriptsにし、echoでなくwp_localize_scriptを使ったところ出力できました。

functions.php

define( "HIS_ID", get_current_user_id() );

// add_action( 'wp_head', 'MY_NONCE_ajax' ); ← これをやめた
add_action( 'wp_enqueue_scripts', 'MY_NONCE_ajax' ); // ← これを追加
add_action( 'login_enqueue_scripts', 'MY_NONCE_ajax' ); // ← これを追加
function MY_NONCE_ajax() {
	if( HIS_ID != 0 ) {
		$action_arr = [ 
			 'ajax_post'
			,'ajax_visit'
		];
	}
	else{
		$action_arr = [ 'ajax_password', 'ajax_login' ];
	}
	foreach ($action_arr as $action) {
		$keyword = $action . 'xxx';
		$nonce  = wp_create_nonce( $keyword );
		$MY_NONCE[$action] = $nonce;
	}
	// echo '<script>var MY_NONCE = '.$MY_NONCE.'</script>'; // ← これをやめた
	wp_localize_script( 'init.js', 'MY_NONCE', $MY_NONCE ); // ← これを追加

}

しかしwp_localize_scriptのように出力先を指定せず、最初のソースコードのようにwp_headからechoし、どのファイルでもMY_NONCEを使えるようにできればいいと考えているのですが、wp_headの方向で実装する方法はございますか？

Answer 1

配列である$MY_NONCEをそのまま文字列として
連結しようとしたらそりゃうまくいかないでしょうね

やるならjson_encodeでPHPの配列をjsonに

 echo '<script>var MY_NONCE = '.json_encode($MY_NONCE).'</script>';

Comments

[nekomurasan]

早速のご回答どうもありがとうございます。なるほどそれで出力できますね。
一つ難点があるのですが、現状では下記のようにしてMY_NONCEを使っておりまして…

const ajax_action = 'ajax_post';
$.ajax({
url: 'http://example.com/wp-admin/admin-ajax.php',
type: 'POST',
data: {
action: ajax_action,
nonce: MY_NONCE[ajax_action],
post_data: post_data
}
})

しかしご回答のようにしますと毎回JSON.parseかけないといけなくなるところが少しもやもやします。

MY_NONCE[ajax_action]
↓このように
JSON.parse(MY_NONCE)[ajax_action]

これはそもそも私のnonce出力の流れがおかしかったのでしょうか。
KazuhiroHatano様でしたらnonceはどのように出力しますでしょうか？

[KazuhiroHatano]

JSON.parseなんてする必要ないです
MY_NONCEにはオブジェクトが渡っているはずです

>nonceはどのように出力しますでしょうか？

自分はajaxの場合は操作対象になるべきDOMの
datasetにnonceを持たせたりしてます

できる限りグローバルに変数をおかず
関連するデータをひとまとめにしておきたいからです

[nekomurasan]

失礼いたしました。json_encodeはjsonで出力するものですから、仰るよ織parseなんてする必要なかったですね。たしかにグローバルもやめた方がよかったかもしれません。勉強になりました。どうもありがとうございます。