質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.49%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,061

score 16

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

前提・実現したいこと

・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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • YukiYamashina

    2019/06/09 21:04 編集

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

    キャンセル

  • teltelboy

    2019/06/09 23:33

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

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

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

    キャンセル

回答 1

checkベストアンサー

+2

現在のコードでは $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_headadd_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
    );

    // 以下省略
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/06/10 10:31

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.49%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る