一段代码实现 WordPress 古腾堡编辑器在新标签页打开超链接。

我的 WordPress 使用的是古腾堡编辑器，非常好用。

但是使用时发现一个问题：设置的超链接默认会在当前标签页打开。

因为我经常分享一些网站资源，在新的标签页打开会更好一点。但现在每次我都需要手动调整这个选项，让它在新的标签页打开。

这不是一件大的事情，但是秉承着懒人思维，我想要对它进行优化，让它默认勾选“在新窗口打开”这个选项，并且标记上nofollow。

所谓“懒人思维”并不是“懒人”的专利。它依据省时、省力、方便、舒服的“懒人心理”进行发明创造，作为一种重要的思维方法已经被人们用来指导自己的思维和实践。

如果你们也有同样的需求的话，可以参考这个修改方式。

点我跳转

这段代码会自动将 WordPress 区块编辑器（Gutenberg）中的所有外部链接设置为在新标签页中打开，并默认添加 rel=”noopener noreferrer nofollow” 标签，以提高安全性和 SEO 效果。如果您在编辑器中手动取消勾选某个链接的“nofollow”属性，脚本会尊重您的选择，不会在以后的编辑中重新添加 nofollow 标签。内部链接保持不变。

只需在主题的 functions.php 文件最后添加一段代码即可:

add_action('enqueue_block_editor_assets', function() {
wp_register_script('default-open-in-new-tab', '', [], '', true);

$js = <<<JS
wp.domReady(() => {
    const { subscribe } = wp.data;

    const isExternalLink = (url) => {
        try {
            const domain = (new URL(url)).hostname;
            return domain !== window.location.hostname;
        } catch (e) {
            return false;
        }
    };

    const updateRelAttribute = (relValue, shouldAddNoFollow) => {
        let parts = relValue ? relValue.split(' ').map(s => s.trim()).filter(Boolean) : [];
        if (!parts.includes('noopener')) parts.push('noopener');
        if (!parts.includes('noreferrer')) parts.push('noreferrer');
        // If shouldAddNoFollow is true and nofollow is not present, add it
        if (shouldAddNoFollow && !parts.includes('nofollow')) parts.push('nofollow');
        // If shouldAddNoFollow is false and nofollow is present, remove it
        if (!shouldAddNoFollow && parts.includes('nofollow')) parts = parts.filter(r => r !== 'nofollow');
        return Array.from(new Set(parts)).join(' ');
    };

    const updateLinksToOpenInNewTab = () => {
        const blocks = wp.data.select('core/block-editor').getBlocks();

        blocks.forEach((block) => {
            if (block.attributes && block.attributes.content) {
                const parser = new DOMParser();
                const doc = parser.parseFromString(block.attributes.content, 'text/html');
                const links = doc.querySelectorAll('a');

                let changed = false;
                links.forEach((link) => {
                    const href = link.getAttribute('href');
                    if (href && isExternalLink(href)) {
                        // Always open external links in new tab
                        link.setAttribute('target', '_blank');
                        let rel = link.getAttribute('rel') || '';
                        // If user removed nofollow (not present), keep it off; else default to adding it
                        const shouldAddNoFollow = rel.includes('nofollow') || !link.hasAttribute('rel');
                        link.setAttribute('rel', updateRelAttribute(rel, shouldAddNoFollow));
                        changed = true;
                    }
                });

                const updatedContent = doc.body.innerHTML;
                if (changed && updatedContent !== block.attributes.content) {
                    wp.data.dispatch('core/block-editor').updateBlockAttributes(block.clientId, {
                        content: updatedContent
                    });
                }
            }
        });
    };

    subscribe(() => {
        updateLinksToOpenInNewTab();
    });
});
JS;

wp_add_inline_script('default-open-in-new-tab', $js);
wp_enqueue_script('default-open-in-new-tab'); });

有任何问题都可以在评论区留言。