この記事は最終更新日から8か月経過しています。内容が古い可能性があります。
WordPressを使っていると、埋め込みブロックにリンクを挿入することがよくありますよね。
しかし、外部リンクと内部リンクで開くタブを分けたいと思ったことはありませんか？この記事では、その方法を簡単に解説します。
記事をざっと見る
事前準備: 子テーマ or プラグインの準備
この方法ではfunctions.phpにコードを記述する必要があります。そのため、以下のいずれかの準備が必要です。
- 子テーマを用意する: 既存のテーマに手を加えずに、新しい機能を追加するために子テーマを用意します。
- プラグインを使用する:
WP CodeやCode Snippetなどのプラグインをインストールして有効化します。
関連記事
ゆーそうとITブログ〜WordPress・X…
【改訂版】WordPressの子テーマの作り方となぜ子テーマにするのか？
２年ほど前に「子テーマの作り方」という記事を書いたのですが、その後子テーマの作り方についてのオススメの方法が多…
ゆーそうとITブログ〜WordPress・X…
プラグイン「Code Snippets」で機能を追加するとテーマを変更しても大丈夫
仕事でホームページを制作する際にphpでコードを書いてカスタマイズをすることが多いです。その場合、「子テーマの…
functions.phpにコードを追加
事前準備が完了したら、テーマのfunctions.phpファイルに以下のコードを追加します。
function add_embed_target_blank_script() {
?>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
var embedLinks = document.querySelectorAll('.wp-block-embed a');
var siteUrl = '<?php echo site_url(); ?>'; // WordPressのサイトURLを取得
embedLinks.forEach(function(link) {
var linkHref = link.getAttribute('href');
// リンクが内部リンクでない場合のみ、新しいタブで開くように設定
if (linkHref.indexOf(siteUrl) === -1) {
link.setAttribute('target', '_blank');
link.setAttribute('rel', 'noopener noreferrer');
}
});
});
</script>
<?php
}
add_action('wp_footer', 'add_embed_target_blank_script');
コードを追加または変更する際は、何か問題が発生した場合も自己責任であることを理解してください。
コードの解説
- 5行目
document.querySelectorAll('.wp-block-embed a')：埋め込みブロック内のすべてのリンクを取得します。 - 6行目
site_url(): WordPressのサイトURLを取得します。 - 13行目
link.setAttribute('target', '_blank'): 新しいタブでリンクを開くように設定します。 - 14行目
link.setAttribute('rel', 'noopener noreferrer'): セキュリティ対策として、rel属性にnoopener noreferrerを設定します。
まとめ
この記事では、WordPressの埋め込みブロックで外部リンクを別タブで開き、内部リンクを同じタブで開く方法を解説しました！
特に難しいことはなく、簡単なコードを追加するだけで実現できます。この手法を実践することで、ユーザーの利便性が向上しますよ☺️
コメント