Blocksy主题：点击Logo跳转外部站并显示提示、新标签打开的实现咨询

1. 让Logo链接在新标签页打开 #

你之前的代码只修改了跳转URL，要实现新标签页打开，需要通过blocksy:header:logo:attributes过滤器添加链接属性。把这段代码和你原有的URL修改代码一起放到子主题的functions.php（推荐用子主题，避免主题更新丢失代码）里：

// 修改Logo跳转URL
add_filter('blocksy:header:logo:url', function ($home_page) {
    return 'https://mywebsite'; // 替换成你的目标外部链接
});

// 添加新标签页打开属性
add_filter('blocksy:header:logo:attributes', function ($attrs) {
    $attrs['target'] = '_blank';
    $attrs['rel'] = 'noopener noreferrer'; // 安全属性，防止潜在漏洞
    return $attrs;
});

2. 添加跳转提示信息 #

方式一：简单弹窗提示（原生JS） #

在Blocksy主题后台的「自定义izer」→「自定义代码」→「自定义JS」中添加以下代码，点击Logo时先弹出提示再跳转：

document.addEventListener('DOMContentLoaded', function() {
    const logoLink = document.querySelector('.ct-logo a');
    if (!logoLink) return;

    logoLink.addEventListener('click', function(e) {
        e.preventDefault(); // 先阻止默认跳转
        const targetUrl = this.href;
        alert('正在跳转到www.website.com！'); // 替换成你的提示文本
        window.open(targetUrl, '_blank'); // 提示后打开新标签页
    });
});

方式二：自定义样式弹窗（更美观） #

如果觉得原生alert太生硬，可以做个自定义弹窗：

1. 先加CSS（自定义izer→自定义代码→自定义CSS）：

.custom-jump-alert {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    z-index: 9999;
    display: none;
}
.custom-jump-alert.show {
    display: block;
}
.jump-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 9998;
    display: none;
}
.jump-overlay.show {
    display: block;
}

2. 再添加JS代码：

document.addEventListener('DOMContentLoaded', function() {
    // 创建弹窗元素
    const overlay = document.createElement('div');
    overlay.className = 'jump-overlay';
    const alertBox = document.createElement('div');
    alertBox.className = 'custom-jump-alert';
    alertBox.innerHTML = '<p>正在跳转到www.website.com！</p><button id="confirm-jump">确认跳转</button>';
    document.body.appendChild(overlay);
    document.body.appendChild(alertBox);

    const logoLink = document.querySelector('.ct-logo a');
    const confirmBtn = document.getElementById('confirm-jump');
    let targetUrl = '';

    if (logoLink) {
        logoLink.addEventListener('click', function(e) {
            e.preventDefault();
            targetUrl = this.href;
            overlay.classList.add('show');
            alertBox.classList.add('show');
        });
    }

    // 确认跳转
    confirmBtn.addEventListener('click', function() {
        overlay.classList.remove('show');
        alertBox.classList.remove('show');
        window.open(targetUrl, '_blank');
    });

    // 点击遮罩关闭弹窗
    overlay.addEventListener('click', function() {
        overlay.classList.remove('show');
        alertBox.classList.remove('show');
    });
});

3. 点击Logo显示Elementor模板再跳转 #

如果要展示你用Elementor做的模板，按以下步骤操作：

1. 获取Elementor模板短代码：打开Elementor模板编辑器，点击右上角「发布」旁的下拉菜单，选择「复制短代码」（格式类似[elementor-template id="123"]，123是你的模板ID）。

2. 添加模板弹窗结构：在子主题的footer.php文件末尾添加以下代码（替换短代码为你自己的）：

<div class="elementor-overlay"></div>
<div class="elementor-modal">
    <div class="modal-inner">
        <?php echo do_shortcode('[elementor-template id="123"]'); // 替换为你的模板短代码 ?>
        <div class="modal-buttons">
            <button id="close-modal">取消</button>
            <button id="go-to-site">前往目标网站</button>
        </div>
    </div>
</div>

3. 添加弹窗样式：在自定义CSS中加入：

.elementor-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    z-index: 9999;
    display: none;
}
.elementor-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    width: 85%;
    max-width: 900px;
    max-height: 85vh;
    overflow-y: auto;
    border-radius: 8px;
    z-index: 10000;
    display: none;
}
.elementor-overlay.show, .elementor-modal.show {
    display: block;
}
.modal-inner {
    padding: 1.5rem;
}
.modal-buttons {
    margin-top: 2rem;
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
}

4. 添加交互JS：在自定义JS中加入：

document.addEventListener('DOMContentLoaded', function() {
    const logoLink = document.querySelector('.ct-logo a');
    const overlay = document.querySelector('.elementor-overlay');
    const modal = document.querySelector('.elementor-modal');
    const closeBtn = document.getElementById('close-modal');
    const goBtn = document.getElementById('go-to-site');
    let targetUrl = '';

    if (logoLink) {
        logoLink.addEventListener('click', function(e) {
            e.preventDefault();
            targetUrl = this.href;
            overlay.classList.add('show');
            modal.classList.add('show');
        });
    }

    closeBtn.addEventListener('click', function() {
        overlay.classList.remove('show');
        modal.classList.remove('show');
    });

    goBtn.addEventListener('click', function() {
        overlay.classList.remove('show');
        modal.classList.remove('show');
        window.open(targetUrl, '_blank');
    });

    overlay.addEventListener('click', function() {
        overlay.classList.remove('show');
        modal.classList.remove('show');
    });
});

内容的提问来源于stack exchange，提问作者mh1web