WordPressのhome_url()をjsファイルで使う方法

WordPressの「home_url」はサイトのホームURLを返すテンプレートタグですが、これをWordPressのテンプレートファイルだけでなく、jsファイルで使えるようにすることができます。

js側でhome_urlが使えれば、js側でurlを扱うときに絶対パスで記述しなくてもいいので、サイトのホームURLが変わった場合でも手動で変更せずに済みます。

home_url()をjsで使えるようにする

home_urlをjsで使えるようにするには、functions.phpに以下のように記述します。

functions.php
$tmp_path_arr = array(
　’home_url’ => home_url(),
);
wp_enqueue_script(‘main’, get_template_directory_uri() . ‘/assets/js/script.js’, ”, ‘1.0’, true);
wp_localize_script(‘main’, ‘tmp_path’, $tmp_path_arr);

※全角スペースが含まれているため、コピペで使用する際はご注意ください。

連想配列をつくり、「wp_enqueue_script」でscript.jsを読み込ませ、「wp_localize_script」で連想配列をjsのオブジェクトとして扱えるようにしています。

js側でhome_url()を使う

functions.phpで設定した連想配列の値をjs側で使います。

script.js
var wp_home_url = tmp_path.home_url;

このように変数に入れておいて、必要に応じて使えるようにしておくと便利です。

get_template_directory_uri()も使える

以下のようにすれば、テンプレートディレクトリのURLを返すテンプレートタグ「get_template_directory_uri()」もjs側で使用が可能です。

functions.php
$tmp_path_arr = array(
‘temp_uri’ => get_template_directory_uri(),
　’home_url’ => home_url(),
);
wp_enqueue_script(‘main’, get_template_directory_uri() . ‘/assets/js/script.js’, ”, ‘1.0’, true);
wp_localize_script(‘main’, ‘tmp_path’, $tmp_path_arr);

※全角スペースが含まれているため、コピペで使用する際はご注意ください。

script.js
var wp_temp_uri = tmp_path.temp_uri;
var wp_home_url = tmp_path.home_url;

WordPressを始めるならエックスサーバーがおすすめ

WordPressでブログやアフィリエイトを始めたい、良いレンタルサーバーに乗り換えたいという方にはエックスサーバーがおすすめです。

その理由は以下の通り。

国内シェアNo.1のレンタルサーバー
サポートの品質が高い
表示速度・処理速度が速い

公式サイトはこちら

WordPressが学べるおすすめのスクール

WordPress関連の本もありますし、ネット上にはたくさんの情報がありますが、短期間でWordPressも含めたWeb制作のスキルを身につけたい方にはプログラミングスクールがおすすめです。

TechAcademy

WordPressのサイト制作の流れが理解できる
WordPressでオリジナルサイトが作れるようになる
プラグインやカスタムフィールドを学べる
オンラインで完結
講師・メンターが現役エンジニア