WordPressのhome_url()をjsファイルで使えるようにする

この小ネタ、自分的に目からウロコでした。
home_url()だけではなく、Wordpressのテンプレートパスや自分で設定した値等、色々js側で使うことが出来ちゃいます。

どんなときに使えるか

・js側のアクションで「ホーム画面に飛ばす」等したいとき、urlを固定の絶対パスで記載するのではなく、管理サイトの”サイトアドレス”で設定しているものを使いたい。
・画像の書き換え等をjsの処理で行うとき、相対パスや絶対パスだとURLが変わるときに手動で変更する必要があるので、テンプレートパスを使いたい。
などなど。

functions.php

やっていることとしては、
・$tmp_path_arr = array();で渡したい値の連想配列をつくる。
・wp_enqueue_script()でmain.jsを読み込ませる。
・wp_enqueue_scripts()フックに対してwp_localize_script()を実行することで、phpの連想配列をjsのオブジェクトとして扱ってくれるように。

関数リファレンスを参照すると以下のようです。
 
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );

$handlejsファイルのハンドル名。
$srcフロントエンド側で読み込ませたいjsファイルのパス。
$depsこのスクリプトが依存するスクリプトのハンドルの配列。このスクリプトより前に読み込まれる必要があるスクリプト。
$verファイルパスの最後に連結される、スクリプトのバージョン番号を指定する文字列。
$in_footer(真偽値)スクリプトは通常 HTML ドキュメントのheadに置かれるが、もしこのパラメータがtrueの場合/body終了タグの前に配置される。

  
wp_localize_script( $handle, $name, $data );

$handle値を渡すjsファイルのハンドル名。今回main.jsに渡したいので、main.jsのハンドル名である「main」を設定。
$name(任意のもの) js側で値を受け取った時に、phpの配列が入るオブジェクト名。
$data渡したいphp配列の変数名。

 

js側での処理 (main.js内)

functions.phpの設定にてmain.jsに値が渡ってきているか、tmp_pathのログを吐いてみると、こんな感じで値が渡ってきていました。↓
{temp_uri: “https://kohimoto.com/labo/wp-content/themes/rebalance”, home_url: “https://kohimoto.com/labo”}

なので、それぞれjsの変数に格納し、色々な処理に使い回すことが可能になります。
上記のソースの場合、Wordpress管理サイトで設定したホームurlがアラートされることになります。

おしまい。
 
 
参考サイト:
https://kodoku-village.com/tech/94
https://illustswitch.com/wp-localize-script/
https://memocarilog.info/wordpress/8350