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

サイト内検索

最近の投稿

アイキャッチ
これは楽!iterm2パスワードマネージャー機能

さて今回はiterm2のパスワード管理についてです。そもそもこんな機能がついていること自体知らなかったのでこれ使って楽だなと思ったのでご紹介します。 iterm2の現在時点での最新バージョンは...

30 Mar 2019

アイキャッチ
JavaScriptライブラリデータベースのご紹介

さて今回はJSライブラリーのデータベースをご紹介したいと思います。知っている方が多いかと思いますがライブラリやプラグイン、フレームワークなど探す際には役立つサイトではないでしょうか。 どのJS...

28 Mar 2019

アイキャッチ
Web制作者が8年Chrome使ってきた中でおすすめの拡張機能

最近はEdgeもGoogle Chromeと同じChromiumベースでのブラウザとなりほとんどクローム(Chrome)状態ではあります。FirefoxとSafariぐらいでしょうか。Firef...

17 Mar 2019

アイキャッチ
Bootstrap4でフォーム入力の際にカレンダーから日付入力する方法

最近はメインでのコーディングはBootstrap4に移行しておりますがいろいろと3の時に使えたものが使えなかったりとしております。 DatetimePickerなどもそうですね。私個人的には4に...

18 Feb 2019

アイキャッチ
HomebrewでMySQL8をインストールした時の問題点

さて、今回はお手軽にMySQL8をインストールしたときの問題点などをご紹介します。MacOS用パッケージマネージャーHomebrewを使ってインストール、そしてphpからアクセスしたときの問題点...

13 Feb 2019

著者

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

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

フッターイメージ