WordPress：如何创建指向数据筛选元素的链接？

当然可以实现！这其实是个很常见的需求，通过结合URL查询参数和前端JavaScript就能搞定，下面给你一步步拆解方案：

1. 修改筛选菜单的HTML链接 #

首先把原来的href="#"改成带查询参数的格式，这样外部链接可以直接带参数指向对应筛选状态。比如：

<ul class="filter js-filter">
  <li class="active">
    <a href="?filter=all" data-filter="*">All</a>
  </li>
  <li class="">
    <a href="?filter=building" data-filter=".building">Building</a>
  </li>
  <!-- 其他菜单项同理修改，参数值和data-filter的类名对应即可 -->
</ul>

这里用all对应全局筛选的*，其他筛选项用和data-filter里的类名一致的参数值，方便后续JS识别。

2. 编写JavaScript处理逻辑 #

接下来需要一段JS完成两个核心功能：

• 页面加载时，读取URL的查询参数，自动触发对应的筛选动作
• 点击筛选菜单时，更新URL的查询参数（不刷新页面），同时保持筛选功能正常

示例代码如下：

document.addEventListener('DOMContentLoaded', function() {
  const filterMenu = document.querySelector('.js-filter');
  const filterItems = filterMenu.querySelectorAll('a');
  
  // 读取URL查询参数的工具函数
  function getUrlParam(param) {
    const urlParams = new URLSearchParams(window.location.search);
    return urlParams.get(param);
  }

  // 触发筛选动作的核心函数
  function triggerFilter(filterValue) {
    // 切换菜单项的active状态
    filterMenu.querySelectorAll('li').forEach(li => li.classList.remove('active'));
    const targetItem = filterMenu.querySelector(`a[data-filter="${filterValue}"]`);
    if (targetItem) {
      targetItem.parentElement.classList.add('active');
    }

    // 这里替换成你实际的筛选逻辑：
    // 如果用的是Isotope/MixItUp这类插件，就调用插件的filter方法
    // 示例（Isotope）：isotopeInstance.arrange({ filter: filterValue });
    // 如果是自定义筛选，就写显示/隐藏逻辑，比如：
    document.querySelectorAll('.your-post-container .post-item').forEach(item => {
      if (filterValue === '*' || item.classList.contains(filterValue.replace('.', ''))) {
        item.style.display = 'block';
      } else {
        item.style.display = 'none';
      }
    });
  }

  // 页面初始化时检查URL参数
  const initialFilter = getUrlParam('filter');
  if (initialFilter) {
    const filterValue = initialFilter === 'all' ? '*' : `.${initialFilter}`;
    triggerFilter(filterValue);
  }

  // 点击菜单时更新URL并触发筛选
  filterItems.forEach(item => {
    item.addEventListener('click', function(e) {
      e.preventDefault(); // 阻止默认跳转行为
      const filterValue = this.getAttribute('data-filter');
      const paramValue = filterValue === '*' ? 'all' : filterValue.replace('.', '');
      
      // 更新URL查询参数，不刷新页面
      const newUrl = new URL(window.location);
      newUrl.searchParams.set('filter', paramValue);
      window.history.pushState({ path: newUrl.href }, '', newUrl.href);
      
      // 执行筛选
      triggerFilter(filterValue);
    });
  });
});

3. 关键注意事项 #

• 如果你的筛选是依赖第三方插件（比如Isotope）实现的，只需要把triggerFilter函数里的自定义筛选逻辑替换成插件对应的方法即可，不用自己写显示隐藏。
• 测试时直接访问你的页面URL?filter=building，就能看到页面自动筛选出Building类的内容了。
• 若需要兼容旧浏览器，可以给URLSearchParams和history.pushState添加 polyfill，不过现在主流浏览器都已支持这些API。

这样外部链接就可以直接用带filter参数的URL，比如https://your-site.com/your-page?filter=building，用户点击后会直接进入对应筛选状态的页面。

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