この小ネタ、自分的に目からウロコでした。
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 );

$handle	jsファイルのハンドル名。
$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がアラートされることになります。

おしまい。