wordpressでのfunctions.phpからJquery(ajax)への変数渡し方法について

Question

まだ経験が浅く、初歩的なご質問かもしれませんが、恐れ入りますが、
解決方法がわかるようでしたら、ご教示頂けますと助かります

前提・実現したいこと

・wordpress、PHP、JQuery(ajax)、MYSQLを使って検索サイトを構築しています。
・URLのGETパラメータから取得した変数をJQuery(ajax)へ渡したいのですが、
渡せずにNULLとなっている状況です。
・wordpressでのfunctions.phpからJquery(ajax)への変数渡しを行いたい。

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

【処理の流れ】
①.A画面表示時にURLのGETパラメータから変数取得
変数：lastnanme、firstname
関数：functions.php（cc_get_firstname_handler、cc_get_lastname_handler）

②.取得した変数をJQuery(ajax)へを渡す。
関数：functions.php（add_files）
引き渡し先：/js/ajax_table.js

③ajax_table.jsで取得確認

上記③において、IEのコンソールログを確認した結果、
lastnm、firstnmがNULLとなっています。★箇所です。
ここに変数をセットする方法がわからなくて困っています。

疑っている点として、「functions.php（cc_get_firstname_handler、cc_get_lastname_handler）」より先に「functions.php（add_files）」が実行されることにより、変数が取得できていない可能性があると思っています。

該当のソースコード

//functions.php

//クエリ変数登録
function add_meta_query_vars( $public_query_vars ) {
    $public_query_vars[] = 'lastname';
    $public_query_vars[] = 'firstname';
    return $public_query_vars;
}
add_filter( 'query_vars', 'add_meta_query_vars' );

//lastname取得
function cc_get_lastname_handler() {
global $g_lastname;
 $g_lastname = htmlspecialchars(get_query_var( 'lastname', 'default' ));
 return $g_lastname;
}
add_shortcode("cc_get_lastname", "cc_get_lastname_handler");

//firstname取得
function cc_get_firstname_handler() {
global $g_firstname;
 $g_firstname = htmlspecialchars(get_query_var( 'firstname', 'default' ));
 return $g_firstname;
}
add_shortcode("cc_get_firstname", "cc_get_firstname_handler");

// Jquery(ajax_table.js)読み込み、g_lastname、g_firstname変数をJQuery渡し（うまく渡せてない）
function add_files() {
global $g_lastname;
global $g_firstname;

$ex_array = array(
    'lastnm' => $g_lastname,
    'firstnm'   => $g_firstname
);

//var_dump($g_lastname);
//var_dump($g_firstname);

        // WordPress本体のjquery.jsを読み込まない
        wp_deregister_script('jquery');
        wp_enqueue_style('bootstrap', 'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css',array(),false, false);
        wp_enqueue_style('bootstrap4', 'https://cdn.datatables.net/1.10.18/css/dataTables.bootstrap4.min.css',array(),false, false );

        wp_enqueue_script( 'jquery1', 'https://code.jquery.com/jquery-3.3.1.js',array(),false, true );
        wp_enqueue_script( 'jquery2', 'https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js',array('jquery1'),false, true );
        wp_enqueue_script( 'jquery3', 'https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js',array('jquery2'), false, true );
        wp_enqueue_script( 'script1', get_stylesheet_directory_uri() . '/js/ajax_table.js', array( 'jquery3' ),false, true );
         wp_localize_script( 'script1', 'my_script_vars',$ex_array);
}
        add_action( 'wp_enqueue_scripts', 'add_files',100 );

//ajaxから呼び出す関数
function get_record(){

global $wpdb;
//SQLは省略してます。
   $sql = "SELECT
                  lastname,
                  firstname
       from test";

var_dump($g_lastname);
var_dump($g_firstname);
var_dump($sql);

$result = array();
$result = $wpdb->get_results($sql,ARRAY_A);
echo json_encode(['data'=>$result],JSON_UNESCAPED_UNICODE);
var_dump($result);
die();
}

add_action( 'wp_ajax_get_record', 'get_record');
add_action( 'wp_ajax_nopriv_get_record', 'get_record');
}

console.log('コンソール出力確認');
//★ここで変数がNULLとなっていることを確認。
console.log(my_script_vars);


//画面表示に読み込まれる
$(document).ready(function() {
  $.extend( $.fn.dataTable.defaults, {
     language: {
         url: "https://cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Japanese.json"
     }
 });
      $('#testtest').dataTable ({
        lengthMenu: [ 100, 200, 300, 400, 500 ],
       // 件数のデフォルトの値を50にする
      displayLength: 200,
  dom:
     "<'row'<'col-sm-8 col-md-4'i><'col-sm-8 col-md-4'f>>" +
     "<'row'<'col-sm-12'tr>>" +
     "<'row'<'col-sm-10 col-md-6'p>>",
//  dom: '<"top"fil>rt<"bottom"p><"clear">',
      order: [ [ 1, "desc" ],[ 4, "asc" ] ],
      "ajax" : {
              "url": ajaxurl,
             "data" :{
                     "action" : 'get_record',
                      },
               "datatype": "json" //受け取りデータの種類
//              "dataSrc": ""
       },
       "columnDefs":[
         {targets:0,title:'苗字',data:'lastname'},
         {targets:1,title:'名前',data:'firstname'},
    ]

});

});

試したこと

console.logでどこまで進んでいるかを確認しましたが、★部分でつまづいています。

補足情報（FW/ツールのバージョンなど）

・WordPress 5.2
・PHP 7.2.x

Comments

[YukiYamashina]

ウェブページのソースコードの head 要素内に
/* <![CDATA[ */
var my_script_vars = {...};
/* ]]> */
は吐き出されていますでしょうか？

[teltelboy]

コメントありがとうございます。
IE（開発者ツール）のResponseから以下の通り、nullとなっていることを確認しました。

/* <![CDATA[ */
var my_script_vars = "{\"lastnm\":null,\"firstnm\":null}";
/* ]]> */

また、上記内容はheaderではなく、body要素には吐き出させている状況です。
head要素に吐き出されない時点で見直し等必要でしょうか。

Answer 1

現在のコードでは　$g_lastname / $g_firstname 変数に値を代入するタイミングが

add_shortcode("cc_get_lastname", "cc_get_lastname_handler");
add_shortcode("cc_get_firstname", "cc_get_firstname_handler");

で、その変数を $ex_array に代入するのが

add_action( 'wp_enqueue_scripts', 'add_files',100 );

になっています。

ですが、WordPress ではwp_enqueue_scripts にフックした関数の方が先に実行されます。
（wp_enqueue_scripts にフックした関数は wp_head、add_shortcode で登録した関数は do_shortcode もしくは the_content 関数実行時に呼ばれます。）

ですので、get_query_var 関数でのクエリ変数の取得を add_files で行ってみてはいかがでしょうか？

<?php
function cc_get_lastname_handler() {
    global $g_lastname;
    return $g_lastname;
}

function cc_get_firstname_handler() {
    global $g_firstname;
    return $g_firstname;
}

function add_files() {
    global $g_lastname;
    global $g_firstname;

    $g_lastname = htmlspecialchars(get_query_var( 'lastname', 'default' ));
    $g_firstname = htmlspecialchars(get_query_var( 'firstname', 'default' ));

    $ex_array = array(
        'lastnm' => $g_lastname,
        'firstnm'   => $g_firstname
    );

    // 以下省略
}

Comments

[teltelboy]

ご回答ありがとうございました。
ご回答の通り、add_filesに入れることで変数を取得することが出来ました。
また、原因となっていた実行順序も今後は意識してコードするようにしていきます。