如何在WordPress中结合barba.js实现搜索功能？

Barba.js通过AJAX接管页面切换后，WordPress原生搜索表单的默认提交逻辑会失效，需要手动拦截提交事件并适配Barba的跳转机制，以下是具体实现方案：

核心解决逻辑 #

• 拦截搜索表单的默认提交行为，改用Barba的barba.go()触发AJAX跳转
• 在页面初始加载和每次Barba切换完成后，重新绑定搜索表单的事件，避免DOM替换导致事件失效
• 保留你原有的head标签替换逻辑，确保页面元数据正确更新

修改后的完整代码 #

// 原有替换head标签的逻辑保持不变
const replaceHead = function(data){
    const head = document.head;
    const newPageRawHead = data.next.html.match(/<head[^>]*>([\s\S.]*)<\/head>/i)[0];
    const newPageHead = document.createElement('head');
    newPageHead.innerHTML = newPageRawHead;

    const removeHeadTags = [ 
        "meta[name='keywords']",
        "meta[name='description']",
        "meta[property^='og']",
        "meta[name^='twitter']",
        "meta[itemprop]",
        "link[itemprop]",
        "link[rel='prev']",
        "link[rel='next']",
        "link[rel='canonical']"
    ].join(',');
    
    const headTags = head.querySelectorAll(removeHeadTags)

    for (let i = 0; i < headTags.length; i++) {
        head.removeChild(headTags[i]);
    }
    
    const newHeadTags = newPageHead.querySelectorAll(removeHeadTags)

    for (let i = 0; i < newHeadTags.length; i++) {
        head.appendChild(newHeadTags[i]);
    }
}

// 初始化搜索表单事件绑定
function initSearchForm() {
    const searchForms = document.querySelectorAll('.search-form');
    
    searchForms.forEach(form => {
        // 先移除旧绑定，避免重复触发
        form.removeEventListener('submit', handleSearchSubmit);
        form.addEventListener('submit', handleSearchSubmit);
    });
}

// 处理搜索表单提交逻辑
function handleSearchSubmit(e) {
    e.preventDefault();
    const form = e.target;
    const searchQuery = form.querySelector('input[name="s"]').value.trim();
    
    if (searchQuery) {
        // 构建WordPress标准搜索URL
        const searchUrl = `${window.location.origin}/?s=${encodeURIComponent(searchQuery)}`;
        // 通过Barba触发AJAX页面跳转
        barba.go(searchUrl);
    }
}

// Barba钩子配置
barba.hooks.beforeEnter((data) => {
    replaceHead(data);
    // 页面切换后重新初始化搜索表单
    initSearchForm();
})

// 页面首次加载时初始化搜索表单
document.addEventListener('DOMContentLoaded', initSearchForm);

barba.init({
    transitions: [{}]
});

扩展说明 #

如果你的搜索表单包含自定义筛选字段（如分类、标签筛选），只需在构建搜索URL时追加对应参数即可，示例：

// 假设存在分类筛选下拉框name="category"
const category = form.querySelector('select[name="category"]').value;
const searchUrl = `${window.location.origin}/?s=${encodeURIComponent(searchQuery)}&category=${encodeURIComponent(category)}`;

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