WordPress PHPの変数をJavaScriptで使う

  • ---

    LINEで送る
  • -

    ブックマーク
  • -

    pocket
  • -

    rss
wordpress image
イラストACの画像をもとに加工しています。

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

WordPressでは用意されています。とてもかんたんです。

スクリプトのキュー登録をちょっとイジります。

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

キュー登録
add_action('wp_enqueue_scripts', function() {
    wp_register_script('custom-scripts', get_stylesheet_directory_uri() . '/js/custom_script.js', array('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の本
post-cta-image

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

  • WordPressの基本
  • Webサイト作成から運用まで全体的に学ぶ
  • ブログサイトの運営からサイトの収益化を学ぶ
  • サイト作成・運営 + 集客の方法を学ぶ
  • WordPressからPHPプログラミングを学ぶ
  • 最新のWordPress(バージョン5)に対応した本

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

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


WordPressの本7選

SNSでも記事を配信しています。
コメントを残す

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

top
この記事を気に入ったらぜひシェアも!!