MENU
CLOSE
システム Edit : 2020.02.19 Update : 2024.11.07
WordPressのhome_url()をjsファイルで使えるようにする

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

WebプロダウションKOHIMOTO Inc.が発信を通して成長していくためのラボ🧪 IT企業出身。世界中の人へ発信できるWebサイトを通じて、社会がより良い方向へアップデートしていく為に日々学び、技術を生かしていきます。