【WordPress】リダイレクト時に別タブで開く方法

実現したいこと

301リダイレクトを行う際に、リンクを別タブで開くように設定したい。リダイレクトには「Redirection」というプラグインを使用する。

理由

リダイレクト時に同じタブ内で画面が切り替わると、ユーザーが混乱する可能性がある。「いつの間にかサイトが変わった」と感じさせる仕様は、ユーザー体験を損ない、離脱の原因にもなっていた。

困ったこと

• Redirectionのデフォルト機能をいろいろいじったが、今回の問題は解決できなかった。
• 外部リンクを管理してくれる「External Links」のプラグインを使用したが、今回の問題は解決できなかった。

解決策

1. データベースからリダイレクトURLを取得するPHP関数を作成
2. 取得したデータをJavaScriptに渡す
3. JavaScriptでリンクを別タブで開くように設定

以下を【外観>テーマファイルエディター>functions.php】に記述。

functions.php

/*
 * リダイレクトのリンクを取得
 */
function get_redirection_urls() {
    global $wpdb;
    // データベースからリダイレクトURLを取得するクエリ
    $results = $wpdb->get_results("SELECT url FROM wp_redirection_items", ARRAY_A);
    $urls = array_map(function($result) {
        return $result['url'];
    }, $results);
    return $urls;
}

/*
 * リダイレクトのリンクを別タブで開く設定
 */
function add_custom_js_for_redirection_urls() {
    $redirection_urls = get_redirection_urls();
    ?>
    <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', function() {
            var urls = <?php echo json_encode($redirection_urls); ?>;
            urls.forEach(function(url) {
                var links = document.querySelectorAll('a[href*="' + url + '"]');
                links.forEach(function(link) {
                    link.setAttribute('target', '_blank');
                });
            });
        });
    </script>
    <?php
}
add_action('wp_footer', 'add_custom_js_for_redirection_urls');