WordPressでJavascriptの変数をPHP(singel.php)で使う方法が知りたいです。

Question

WordPressでJavascriptの変数をPHPに受け渡し、その値をsingle.phpで使うにはどうしたらいいのでしょうか？

【状況】

1. A(Javascriptから渡ったデータ)をsingle.phpで使う方法がわからない。

<?php
//WordPressでXMLHttpRequestでPOST通信するための記述(function.phpに記載)
		function my_ajax() {
			wp_enqueue_script( 'ajax-script', get_template_directory_uri().'/js/test.js', null, '1.0.0', false );
			wp_localize_script('ajax-script','my_ajax_date',array(
				'ajax_url' => esc_url(admin_url( 'admin-ajax.php')),
				'nonce' => wp_create_nonce( 'my-ajax-nonce' ),
				'action' => 'my-ajax-nonce',
			));
		}
		add_action( 'wp_enqueue_scripts', 'my_ajax', 1 );?>

    const data ={
      ajaxurl: my_ajax_date.ajax_url,
      action: my_ajax_date.action,
      _nonce: my_ajax_date.nonce, 
    };
     if(window.fetch){
      let params = new URLSearchParams();
      params.append("action", data.action);
      params.append("msg", "A(phpに渡したいデータ)");
      params.append("_nonce", data._nonce);
      fetch(data.ajaxurl,{ 
        method:'POST',
        credentials:"same-origin",
        body:params
      }).then(function(response){
if (response.ok) {
                response.text().then(function(text){
                    console.log(text);//A(phpに渡したいデータ)が問題なく表示される
                });
      }, function(error){
      });
    } else {
        alert('ご使用のブラウザはサポートしていません。Chrome, firefox, Edge等の最新版のブラウザをご使用下さい');
    } 

		<?php　//(function.phpに記載)
			function test() {
			if(check_ajax_referer('my-ajax-nonce', '_nonce', false)){ 
//これ以降が処理されない
     $msg = filter_input( INPUT_POST , 'msg' );
					echo($msg);//$msgをsingle.phpで使う方法を知りたい。
					die();
} 
		
		}
		add_action('wp_ajax_my-ajax-nonce', 'test');	
		add_action('wp_ajax_nopriv_my-ajax-nonce', 'test');
?>

つぎの記事を参考にしました。
filter_inputを参考　【Javascript】Ajaxを使ってサーバ（PHP）にデータを渡す方法
wp_create_nonceの使い方を参考：WordPressでAJAX通信する方法
fetchの使い方を参考：WordPress の Ajax 処理で fetch を試してみる
ajax用のアクションフックの使い方を参照　wordpressで使ってみるajaxの基本
check_ajax_referer()の使い方を参照WordPressのAjaxにNonceを追加
check_ajax_referer()の使い方を参照WordPress, セキュア処理で使うnonce関数のちがい（CSRF対策）

[2022/1/17 追記]
もし現状のやり方で不可能なら、CSSのdisplayの変更で行う予定です。

Comments

[tabuu]

出力されたHTMLは順番にスクリプトを処理していますか？
先：var ajaxurl = '...';
後：const url = ajaxurl;

params.append("nonce", "<?php echo wp_create_nonce( 'xxx' ); ?>");
このコードはHTMLとしてどのように出力されていますか？

[mumu1354]

javascript上で確認したところ
先：var ajaxurl = '...';
後：const url = ajaxurl;
の順番にスクリプト処理できていました。

<?php echo wp_create_nonce( 'xxx' ); ?>はwp_localize_scriptで出力をするよう変更いたしました。

[tabuu]

//これ以降が処理されない
$msg = filter_input( INPUT_POST , 'msg' );
echo($msg);
ではないですか？

ajaxで500エラー等でていないですか？

[mumu1354]

申し訳ありません。記入ミスです。
修正しました。ご指摘ありがとうございます。

ajaxで500エラー もなく
statusはすべて200です。

このecho($msg);
で、single.php(投稿ページ)に$msgは表示はされないものなのでしょうか？

[tabuu]

>このecho($msg);
>で、single.php(投稿ページ)に$msgは表示はされないものなのでしょうか？

>console.log(text);//A(phpに渡したいデータ)が問題なく表示される

とあるのでalert関数等で表示することは可能と思います。
single.php(投稿ページ)に$msgは表示、とはどのような挙動を想定していますか？

[mumu1354]

具体的には$msgの値によってphpの変数の値を変更したいです。

例
<?php
$friedEgg = null;
if($msg === 'soysauce'){
$friedEgg = '醤油';
}elseif($msg === 'salt'){
$friedEgg = '塩';
}else{
$friedEgg = 'なにもかけない';
}
echo $friedEgg;
?>

[tabuu]

JavaScriptはクライアントで動くのでサーバで動くPHPに影響を与えることはできません。
該当の処理をJavaScriptで実行してください。

Answer 1

JavaScriptとPHPでpostのキーが一致していない為だと思います。
「nonce」か「_nonce」どちらかに統一すれば大丈夫ではないでしょうか。

params.append("nonce", data._nonce);

check_ajax_referer('my-ajax-nonce', '_nonce'); 

Comments

[mumu1354]

_nonceに統一して403エラーは解消されました。
ありがとうございました。

Answer 2

javascriptのコードって.jsファイルに書かれてるんですかね？
jsのファイル内でphpのコードは動かないですよ。

phpのファイルをjsファイルとして読み込んでるとしても、
wpの関数が動くにはWordPressを通してファイルが読まれてないとダメです。

ajaxurlをphpから渡すようにしているように、nonceもphpから渡すようにするか、
javascriptをphpの<script>タグの中に書くとかしましょう。

Comments

[mumu1354]

ご指摘いただいた通りphpをJavaScriptファイルに記載していたため
nonceをphpから渡すように修正いたしました。
ご指摘ありがとうございました。