SWELLのメインビジュアルにURLを設定したときに別タブで開くのを防ぐ方法

SWELのメインビジュアルにURLを設定するとなぜか、「rel="noopener" target="_blank"」が入り別タブで開いてしまいます。今回はこの別タブで開くのを防ぎ、同タブで開くようにする方法を紹介します。

SWELLのメインビジュアルにURLを設定したときに別タブで開くのを防ぐ方法

手順

方法は簡単で、function.phpに下記を記述するだけです。Kood・Loomではメインビジュアルを使っていませんが、他のサイトではメインビジュアルを使っており下記コードで今のところ不具合は出ていません。

function modify_main_visual_links() {
    if (is_front_page()) {
        echo '<script>
            document.addEventListener("DOMContentLoaded", function() {
                document.querySelectorAll("a.p-mainVisual__slideLink").forEach(function(link) {
                    link.removeAttribute("rel");
                    link.removeAttribute("target");
                });
            });
        </script>';
    }
}
add_action('wp_footer', 'modify_main_visual_links');

解説

技術的な解説になるので、目的を達成したいだけの方はスルーでOKです。

このコードはSWELLのメインビジュアルに含まれるクラスを指定し、フッターにJavaScriptを挿入して指定したリンクから target="_blank" と rel 属性を削除することで、別タブで開くことを防いでいます。

関数の定義 (add_custom_js_to_home)

function add_custom_js_to_home() という記述で、add_custom_js_to_home という名前の関数を定義しています。

条件判定 (is_front_page())

if (is_front_page()) の部分で、現在表示しているページがフロントページであるかどうかを判定しています。

WordPress の is_front_page() 関数は、設定に基づきホームページであるかを真偽値（true/false）で返します。

JavaScript の挿入

条件が真（フロントページの場合）のとき、echo を用いて <script> タグ内に JavaScript コードを出力します。

JavaScript コードは、ページの読み込みが完了した後(DOMContentLoaded イベント に実行しています。

document.querySelectorAll("a.p-mainVisual__slideLink") でメインビジュアルのクラスを持つアンカー<a>タグを選択し、その要素に対して forEach ループを使用して処理を行います。(メインビジュアルは一つしか無いのでループさせなくても良いのですが、念の為)

link.removeAttribute("rel"); と link.removeAttribute("target"); で、選択したリンクから rel 属性と target 属性を削除します。これにより、リンクのデフォルトの動作設定を変更しています。

アクションフック (add_action)

add_action('wp_footer', 'add_custom_js_to_home'); で、WordPress の wp_footer フックに add_custom_js_to_home 関数を追加しています。

これにより、フッターが処理される際（ページの最下部に到達した時）、この関数が呼び出され、条件に応じてJavaScriptコードがページに挿入されます。

まとめ

まとめるほどの内容もないですが、なぜメインビジュアルにURLを設定すると「rel="noopener" target="_blank"」が入ってしまうのでしょうか？

今回はfunction.phpに記述する形式で対処しましたが、カスタマイズかどこかに簡単に設定できる場所があるのでしょうか？ご存じの方がいらっしゃったら教えて下さい。