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

April 14, 2024

URLをコピーしました！

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

WordPress環境

WordPressバージョン 6.5.2
SWELLバージョン 2.10.0
PHPバージョン 8.2.9

バージョンが異なると本記事の内容が正常に動作しない可能性があります。また、プラグインの影響や、別途記述しているPHP、JavaScript、.htaccess等も影響する可能性があります。

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

手順

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

function add_custom_js_to_home() {
    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', 'add_custom_js_to_home');

解説

技術的な解説になるので、目的を達成したいだけの方はスルーで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 属性を削除します。これにより、リンクのデフォルトの動作設定を変更しています。