如何让WordPress搜索结果跳转至页面指定jQuery标签页？

这个问题太常见了，完全不用舍弃标签页的交互体验——咱们可以通过**URL哈希（hash）**来实现跳转后直接激活对应标签页，分两步走就行：

1. 让搜索结果链接带上标签页的哈希值 #

首先得确保WordPress搜索结果里的链接，指向目标内容所在的标签页ID。比如如果内容在#faqs标签里，链接要变成https://your-site.com/your-page/#faqs。

怎么在WordPress里实现？ #

如果你的内容是和特定标签页绑定的（比如用自定义字段标记了内容所属的标签ID），可以在主题的functions.php里加一段代码自动给搜索结果链接追加哈希：

add_filter('post_link', 'append_tab_hash_to_search_links', 10, 2);
function append_tab_hash_to_search_links($permalink, $post) {
    // 假设你用自定义字段`content_tab`存储了对应标签的ID（比如'faqs'、'features'）
    $target_tab = get_post_meta($post->ID, 'content_tab', true);
    if (!empty($target_tab)) {
        $permalink .= '#' . $target_tab;
    }
    return $permalink;
}

如果是手动维护的页面内容，也可以直接在编辑搜索结果模板时，给链接手动加上对应的哈希值。

2. 修改jQuery Tabs代码，读取哈希激活对应标签 #

接下来调整你的Tabs初始化代码，让页面加载时自动检测URL里的哈希，然后激活对应的标签页：

jQuery(function() {
    // 初始化Tabs组件
    const $tabs = jQuery(".tabs").tabs({
        // 额外优化：切换标签时自动更新URL哈希，方便用户分享链接
        activate: function(event, ui) {
            const activeTabId = ui.newPanel.attr("id");
            window.location.hash = activeTabId;
        }
    });

    // 页面加载时检查URL哈希
    const pageHash = window.location.hash;
    // 验证哈希是否对应某个标签页
    if (pageHash && jQuery(`.tabs [href="${pageHash}"]`).length) {
        // 获取对应标签的索引并激活
        const tabIndex = jQuery(`.tabs [href="${pageHash}"]`).parent().index();
        $tabs.tabs("option", "active", tabIndex);
    }
});

原理说明 #

当用户点击带哈希的搜索结果链接时，页面加载后会读取URL末尾的#xxx，找到对应的标签页按钮，然后通过jQuery Tabs的API激活该标签，用户就能直接看到目标内容了。而且上面的代码还加了切换标签时更新哈希的功能，用户在页面内切换标签后复制的链接，也能直接跳转到对应标签页。

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