当ブログのコンテンツ・情報について、できる限り正確な情報を提供するように努めておりますが、正確性や安全性を保証するものではありません。
当サイトに掲載された内容によって生じた損害等の一切の責任を負いかねますので、予めご了承ください。
SWELLの関連記事でURLを設定したときに別タブで開くのを防ぐ方法
SWELの関連記事にURLを設定すると強制的に、「target="_blank" rel="noopener noreferrer"」が入り別タブで開いてします。今回はこの別タブで開くのを防ぎ、同タブで開くようにする方法を紹介します。
- WordPressバージョン 6.5.2
- SWELLバージョン 2.10.0
- PHPバージョン 8.2.9
バージョンが異なると本記事の内容が正常に動作しない可能性があります。また、プラグインの影響や、function.phpや.htaccess等への記述、JavaScript等の影響も受ける可能性があります。
SWELLの関連記事でURLを設定したときに別タブで開くのを防ぐ方法
手順
方法は簡単で、function.phpに下記を記述するだけです。当サイトでは使用していませんが、他のサイトではこのコードを使っており、今のところ不具合はありません。
function remove_target_blank_rel_from_specific_class_links($content) {
// コンテンツが空の場合はそのまま返す
if (empty($content)) {
return $content;
}
// ブログ記事コンテンツ内のリンクを検索
$dom = new DOMDocument();
libxml_use_internal_errors(true);
$dom->loadHTML(mb_convert_encoding($content, 'HTML-ENTITIES', 'UTF-8'));
// p-blogCard__title クラスを持つリンクを取得
$links = $dom->getElementsByTagName('a');
foreach ($links as $link) {
if ($link->getAttribute('class') === 'p-blogCard__title') {
// target="_blank" rel="noopener noreferrer" を削除
$link->removeAttribute('target');
$link->removeAttribute('rel');
}
}
// 更新後のコンテンツを返す
return $dom->saveHTML();
}
// 投稿コンテンツにフィルターを適用
add_filter('the_content', 'remove_target_blank_rel_from_specific_class_links');
解説
技術的な解説になるので、目的を達成したいだけの方はスルーでOKです。
このコードは、WordPressのコンテンツフィルターを使用して特定のHTMLクラス(関連記事のクラス)を持つリンクから target="_blank"
と rel
属性を削除し、別タブで開くことを防いでいます。
関数の定義と引数
remove_target_blank_rel_from_specific_class_links
という関数を定義しており、引数として $content
(HTMLコンテンツの文字列)を受け取っています。
内容のチェック
if (empty($content))
を使用して、渡された内容が空かどうかを確認しています。空の場合は、その内容をそのまま返します。
DOMDocumentの初期化
PHPの DOMDocument
クラスを使ってHTMLのDOMを操作しています。このクラスを使うことで、HTMLコンテンツを解析し、その構造を変更できます。
libxml_use_internal_errors(true)
は、HTMLの読み込み中に発生する可能性のあるXMLエラーを内部的に処理し、警告を表示させないようにするために使っています。mb_convert_encoding($content, 'HTML-ENTITIES', 'UTF-8')
は、文字列のエンコーディングをUTF-8のHTMLエンティティに変換します。これにより、HTMLとして正しく解釈されやすくなるようにしています。
リンクの選択と属性の削除
$dom->getElementsByTagName('a')
で、すべての<a>
タグ(リンク)を取得しています。- それぞれのリンクに対してループ処理を行い、
$link->getAttribute('class') === 'p-blogCard__title'
をチェックしています。このクラス属性を持つリンクからtarget
とrel
属性を削除します。
変更したHTMLの保存と返却
$dom->saveHTML()
でDOMの内容をHTMLとして保存し、それを返します。
WordPressフックへの追加
add_filter('the_content', 'remove_target_blank_rel_from_specific_class_links')
は、WordPressの the_content
フィルターフックに上記の関数を追加します。これにより、WordPressがページの内容を出力する際に自動的にこの関数が呼び出され、指定されたクラスのリンクから target
と rel
属性が削除されます。
まとめ
SWELLでは関連記事にURLを設定すると強制的に別タブで表示してしまいます。
しかし、スマホなどからのアクセスが多い場合、別タブで開くことは推奨されないケースもあると思います。そんなときにお使いください。