当ブログのコンテンツ・情報について、できる限り正確な情報を提供するように努めておりますが、正確性や安全性を保証するものではありません。
当サイトに掲載された内容によって生じた損害等の一切の責任を負いかねますので、予めご了承ください。
SWELLのメインビジュアルにURLを設定したときに別タブで開くのを防ぐ方法
SWELのメインビジュアルにURLを設定するとなぜか、「rel="noopener" target="_blank"」が入り別タブで開いてしまいます。今回はこの別タブで開くのを防ぎ、同タブで開くようにする方法を紹介します。
- WordPressバージョン 6.5.2
- SWELLバージョン 2.10.0
- PHPバージョン 8.2.9
バージョンが異なると本記事の内容が正常に動作しない可能性があります。また、プラグインの影響や、別途記述しているPHP、JavaScript、.htaccess等も影響する可能性があります。
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に記述する形式で対処しましたが、カスタマイズかどこかに簡単に設定できる場所があるのでしょうか?ご存じの方がいらっしゃったら教えて下さい。
コメント