記事内の内部リンクをすべて新しいタブで開くようにカスタマイズする方法

2023年4月16日 2023年4月16日

内部リンクだろうととにかく新しい記事で開いてほしい。だって、リンク元の記事に戻ってきてほしいもん。

という場合は、function.phpに下記のコードを追記するだけで可能。

function internal_links_new_tab() {
    // Check if it's a single post page
    if (is_single()) {
        ?>
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                const internalDomain = new RegExp(location.host);
                const contentArea = document.querySelector('article');

                if (contentArea) {
                    const links = contentArea.getElementsByTagName('a');

                    for (let i = 0; i < links.length; i++) {
                        const link = links[i];

                        if (internalDomain.test(link.hostname) && link.hostname !== '') {
                            link.setAttribute('rel', 'noopener noreferrer');
                            link.setAttribute('target', '_blank');
                        }
                    }
                }
            });
        </script>
        <?php
    }
}
add_action('wp_footer', 'internal_links_new_tab');

6行目のarticleの部分だけ自分の環境に置き換える必要がある。

const contentArea = document.querySelector('自分の環境のタグ');