ツイート
シェア
LINEで送る
B! はてぶでブックマーク
Pocketでブックマーク
RSSフィード

WordPress, PHPの変数をJavaScriptで使う

wordpress image
イラストダウンロードサイト【イラストAC】
の画像をもとに加工しています。

PHPのurl取得関数や定数をJavaScriptで使いたいと思ったことはありませんか?

WordPressでは翻訳機能があり、PHPとJavaScriptで変数の受け渡しができるんですが、それを流用すればできます。

とてもかんたんです。スクリプトのキュー登録をちょっとイジります。

いきなりですがサンプルコードです。

キュー登録
add_action('wp_enqueue_scripts', function() {
    wp_register_script('custom-scripts', get_theme_file_uri( 'js/custom_script.js' ), [ 'jquery' ] );
    wp_localize_script('custom-scripts', 'localize', ['ajax_url' => admin_url('admin-ajax.php')]);
    wp_enqueue_script('custom-scripts');
} );

wp_localize_script()ってなんだ?と思うかもしれません。

これが、JavaScriptに変数を渡すものです。

'custom-scripts'jsファイルのハンドル名
'localize'オブジェクト変数名
[]オブジェクト変数の連想配列。
変数名 => 値

ハンドル名は変数を使うjsファイルのキュー登録のハンドル名と同じにします。

オブジェクト変数名は任意です。好きな変数名をつけてください。

オブジェクト変数の連想配列にjsファイルで使いたい変数を指定します。配列なので複数指定できます。

wp_localize_script()は、WordPressの翻訳ファイルの機能をJavaScriptでも使うために用意されました。

だから関数名が『ローカライズ』(翻訳)なんですね?

ただWordPress5.0から、JavaScriptのローカライズ機能が追加されたので、ローカライズとしての使い方はなくなっています。

JavaScriptの変数オブジェクトに追加できました。これでjsファイルで参照します。

custom_script.js
console.log(localize.ajax_url);

今回はサンプルなのでコンソールに出力しました。

前の投稿
WordPress, WP_Query not foundエラーで使えないのを直す
WordPress エディタをスッキリさせて編集作業に集中させる方法
次の投稿

WordPressの本

post-cta-image

たくさんあるなかで、WordPressの基本が学べる、目的別に学べる本を選びました。

  • WordPressの基本。
  • Webサイト作成から運用まで全体的に学ぶ。
  • かんたんなカスタマイズを学ぶ。
  • 何も分からないところから学ぶ。
  • WordPressからPHPプログラミングを学ぶ。

の5冊です。どうしてもネット上で調べて勉強するのが苦手という人におすすめです。

この内容をモノにすればほかの本は必要ありません。あとは自分の力で、書籍を使わずにインターネット上にある情報だけで学んでいけます。

コメントを残す

*