♨️

[PHP] PHPからJavaScriptに値を渡してパスを指定する

に公開
JavaScript
PHP
WordPress
プログラミング
tech

ある日のWordPress開発で

あるイベント（Contact Form 7でのメッセージ送信）を検知してページを遷移する、というシンプルな処理をJavaScriptで実装しようとした。

document.addEventListener('wpcf7mailsent', function (event) {
    window.location.href = '/diary/thanks/';
}, false);

このように書いたら、遷移先のURLが正しく取得できなかった。

この書き方（ドメイン名を含まず、スラッシュ/から書き始めるルート相対パス）であれば、ドメインが何であれ、ドメイン直下の /diary/thanks/ へ遷移する。

しかし、ローカル環境（XAMPP）ではWordPressがドメイン直下にインストールされておらず、サブディレクトリにインストールされている。したがって、この書き方では正しいURLが取得できない。

サブディレクトリまで含めたパスをベタ書きしてもよいのだが、ローカル環境とテスト環境で条件が異なる（テスト環境はドメイン直下にWordPressがインストールされている）ので、いちいち書き換えるのが面倒である。

別解1: JavaScriptで現在のホスト名を取得する

ブラウザが表示している現在のURLからベース部分を生成する方法。

document.addEventListener('wpcfmailsent', function (event) {
    // 現在のプロトコルとホスト名を取得
    const homeUrl = window.location.origin;
    window.location.href = homeUrl + '/diary/thanks';
}, false);

これはこれでうまくいく。ただし、気分として、もっとWordPressらしい書き方がしたい。

別解2: PHPからJavaScriptへURLを渡す

WordPressには、PHPの値をJavaScriptの変数として安全に受け渡す wp_localize_script という関数がある。

WordPressにはトップページのサイトアドレスを取得するPHP関数home_urlがある。この関数の返り値をJavaScriptに渡せばよい。

1. functions.phpに追記

JavaScriptファイルを読み込んでいる箇所をwp_enqueue_scriptとし、その直後に記述する。

function my_enqueue_scripts() {
    // ハンドル名を 'main-js' とすると
    wp_enqueue_script('main-js', get_theme_file_uri('/js/main.js'), array(), '1.0', true);
    // PHPの値をJS変数（wpVars）として渡す
    wp_localize_script('main-js', 'wpVars', array(
        'homeUrl' => home_url('/'),
    ));
}
add_action('wp_enqueue_scripts', 'my_enqueue_scripts');

2. JavaScript側のコード

document.addEventListener('wpcf7mailsent', function (event) {
    window.location.href = wpVars.homeUrl + 'diary/thanks';
}, false);

まとめ

ローカル環境と本番環境でドメイン直下の構造が同じなら、ルート相対パスを使うのがもっとも手軽である。

しかし、今回のように、サブディレクトリ設置など、環境によってパスが変わる場合は、別解が必要になる。

Discussion