WordPressでPHPの値をJavaScriptファイルへ渡す方法

WordPressでPHPの値をJavaScriptファイルへ渡す方法

  • 2018-11-22  最終更新日:2018-11-22

今回はワードプレスの値をJavaScriptに渡す方法です。ワードプレスからじゃなくてPHPからJavaScriptへ値を渡す方法もご紹介します。

PHPの値をJavaScriptで処理を行う場合などに有効ですね。最近はJavaScript処理多くなったのでこのようなパターンもあるかと思います。

単純にPHPの値をJavaScriptに渡すだけなのですがワードプレスの場合だと関数を使わないとうまく処理できない場合がありますので一応区別しておきます。


wp_localize_scriptの使い方

ワードプレス

wp_localize_script($handle, $name, $data)

  • パラメータ内容
  • $handle:(文字列)(必須)登録済みのスクリプトハンドル名。初期値: なし
  • $name:(文字列)(必須)データを格納する変数の名前。(任意のもの)初期値: なし
  • $data(配列)(必須)データ変数。初期値: なし

使い方の例を見ていきましょう。ワードプレスのfunctions.phpに以下を記載します。

<?php
function sample_scripts(){
    // sample-pageというページの場合のみ
    if(is_page(['sample-page'])){
        // phpの値を受け取るjavascriptを読み込みます。
        wp_enqueue_script('some_handle', 'path/to/myscript.js', array( 'jquery' ), false, true);
        // phpの配列を$data_array変数に格納します
        $data_array = array('some_string' => 'texttext', 'a_value' => '10');
        // javascript変数で処理します。
        wp_localize_script('some_handle', 'object_name', $data_array);
    }
}
add_action( 'wp_enqueue_scripts', 'sample_scripts' );

上記のsome_handleのスクリプトに$data_arrayの配列をobject_nameというjavaScriptの変数にて扱いますということになります。

以下は上記が実行されたら以下のように表示されます。

特定のページだけに使うことが多いと思いますのでif文で条件分岐をしております。全部のページに出てもよろしくないので。

<script type='text/javascript'>
/* <![CDATA[ */
var object_name = {"some_string":"texttext","a_value":"10"};
/* ]]> */
</script>
<script type='text/javascript' src='path/to/myscript.js'></script>

myscript.jsのファイルでobject_nameというJavaScript変数が使えるようになります。上記に例でいえばobject_name.some_stringにtexttextという値があってobject_name.a_valueに10という値が入っていることになります。

PHPからJavaScriptへ値を渡す場合

特定のPHPファイルの一番上に記載します。

//JSON形式に変換する関数を定義
function json_safe_encode($data){
    return json_encode($data, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT);
}
$data_array = array('some_string' => 'texttext', 'a_value' => '10');

head要素内か閉じbodyタグ上の方でJavaScriptに値を渡すファイル名でidとdata-paramというカスタムデータ属性をつけてそこから値を取り出す方法です。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script id='setparam' data-param='<?php echo json_safe_encode($data_array);?>' src='path/to/myscript.js'></script>
// myscript.js内に記載
var set = $('#setparam');
var data = JSON.parse(set.attr('data-param'));
console.log(data);

因みに上記の方法でワードプレスではうまくいきませんでした。関数で渡した方がセキュアということでしょうか。

参考になれば幸いです。


∞Tadashi Suyama∞

wordpress wp javascript php wp_localize_script
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

サイト内検索

最近の投稿

アイキャッチ
そろそろvuejs始める

最近はjQueryよりvueで書いた方が楽ではないかと思い学習中です。 そもそもVuejsはドキュメントが日本語対応なので試しやすいし情報も豊富なので学習しやすいです。 3大フレームワークと呼...

02 May 2021

アイキャッチ
追い風CSS(tailwindcss)が結局楽かも

最初にtailwindcssのv1が出た頃はまだbootstrapで良いかな。 htmlに入れるクラスタグが多過ぎと思っていました。あまり良い印象はなかったです。 時は過ぎいろいろと触っていると...

29 Apr 2021

アイキャッチ
エラー処理について

COJPドメンを取得する際に「登記年月日」という項目があります。 その項目通り登記した年月日を入れる訳ですが、なぜかエラーが出ました。 半角英数字にして下さいというよくあるエラーです。当然半角英...

24 Jan 2021

アイキャッチ
javascriptのundefinedの判定

jqueryで高さの数値をとって足し算をしていたらエラーも出ずに動かないということになったので調べてみました。 ワードプレスで管理画面のアドミンバーが一度ログインするとフロント画面でも表示される...

17 Jan 2021

アイキャッチ
Webpack5にアップデートしてエラーの対処方法2つ

webpack4(4.41.5)から webpack5(5.12.1)にあげました。 特に難しい設定は行っておらず主にscssと共通モジュールの設定だけで使っているのですがそれでもエラーが出たの...

09 Jan 2021

著者

ウェブエンジニアの須山のブログです。

WEBに関することや個人的に関心のあることについて書きます。主に技術系ブログです。

フッターイメージ