MENU
CLOSE
システム Edit : 2020.02.19 Update : 2024.11.07

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 );
$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がアラートされることになります。

おしまい。
   

KOHIMOTO LABO

東京・吉祥寺でKOHIMOTO Inc.というWebサイト制作の会社をやっているエンジニアとデザイナーが、発信を通して成長していくためのラボ🧪 IT企業出身。サイト制作を通じて微力ながら社会が良くなる手助けをしたいと思っている。