主题怎么添加面包屑导航 wordpress (主题怎么添加时间)

本文目录导航：

• wordpress 主题怎么添加面包屑导航
• 谷歌优化的 3 种核心类型的面包屑导航
• web前端自动生成动态面包屑导航的方法，以vue为例
• 方法1：嵌套路由
• 方法2：缓存和计算新面包屑
• 处理面包屑的代码示例
• 方法3：递归处理路由表

wordpress 主题怎么添加面包屑导航

wordpress主题添加面包屑导航一般有两种方法，一种是通过使用插件来实现，另一种是不使用插件，纯代码实现，下面我来介绍一下这两种方法。

一，纯代码实现

谷歌优化的 3 种核心类型的面包屑导航

面包屑导航是一种帮助用户在网站中导航和理解位置的工具，它允许用户追踪从主页到当前页面的路径。

这种导航方式在优化网站体验和搜索引擎优化（SEO）方面起着重要作用。

以下是三种核心类型的面包屑导航，它们对提高用户体验和SEO效果至关重要。

1. **位置面包屑导航**

位置面包屑导航是最常见的类型，它显示用户在网站结构中的位置，通常以主页为起点。例如，对于暖通空调承包公司或零售店的网站，位置面包屑导航会显示如下路径：

这种导航方式对用户和爬虫都非常有用。

2. **路径面包屑导航**

随着动态、数据库驱动站点的兴起，路径面包屑导航越来越常见。

这类导航显示用户到达当前页面的实际路径，而非相对于主页的层次结构。

以亚马逊为例，它会展示用户在寻找行车记录仪时所采取的路径。

用户可能通过多种方式访问页面，产生大量不同的路径。

这需要导航系统能够适应各种可能的访问路径。

3. **属性或关键字面包屑导航**

这种导航类型使用描述页面的关键字和属性，而不使用页面标题或其他标识符。

它适用于电子商务网站，如Orvis在其产品页面上所采用的面包屑导航，显示产品在整体商店结构中的位置。

例如，在Orvis网站中，用户通过搜索“狗”找到特定产品时，面包屑导航显示该产品属于“狗”类别的一部分，即“狗床”区域。

需要注意的是，使用路径和属性面包屑导航可能会导致重复的导航路径，这在搜索引擎眼中可能被认为是内容“单薄”。

为了优化SEO，应优先考虑基于位置的面包屑导航。

web前端自动生成动态面包屑导航的方法，以vue为例

面包屑导航是网页设计中常见的功能，它用于指示用户所在网站位置及提供向上导航的路径。

常用前端组件库如 Element UI 和 Ant Design Vue 提供了面包屑组件。

手动编写面包屑存在大量重复劳动，特别是当路由结构调整时，所有页面的面包屑都需要更新，这非常繁琐。

自动生成面包屑导航可以显著减少重复工作，并方便代码维护。

以下以 Vue3、TypeScript、Ant Design Vue 和 Vue Router 为例，展示两种生成动态面包屑导航的方法：

方法1：嵌套路由

嵌套路由天然地带有层级结构，适合自动生成面包屑导航。

Vue Router 提供了详细的文档来实现嵌套路由。

这种方法的优点在于能较好地实现面包屑功能，但需要引入额外工具如 vite-plugin-pages 来优化。

为了解决这个问题，我们尝试了其他方法。

方法2：缓存和计算新面包屑

此方法利用LocalStorage 存储已有的面包屑信息。

当用户跳转到新页面时，对原有面包屑进行计算，更新展示的面包屑。

LocalStorage 缓存结构包括面包屑列表、用于处理跳转的参数（如当前页面路径和需要删除的面包屑数量），以及通用的LocalStorage处理函数。

每次路由跳转前，通过特定包装的路由实现缓存处理。

然而，使用参数或meta等方法无法实现动态传参，因此我们选择在路由上简单包装一层，以此达到预期效果。

处理面包屑的代码示例

页头components包含处理面包屑的核心函数，用于在页面加载时初始化或更新面包屑列表。

此函数考虑了面包屑显示逻辑、缓存处理和刷新场景，确保面包屑与用户的操作路径保持一致。

展示不同页面使用示例，如首页和普通页面，以及面包屑展示结果。

此方法适用于树形或网状的路由结构，确保面包屑能准确反映用户操作路径。

对于树形结构的路由，若需要显示网状面包屑，可通过设置多个路由项来实现，但可能导致路由表管理混乱，不推荐此做法。

方法3：递归处理路由表

对于自定义路由表且支持树形结构的场景，可以使用递归处理路由表的方法，为每个页面独立计算生成面包屑。

这种方法能够满足特定需求，但可能需要更多代码维护和路由表管理。

选择适合当前项目需求的方法，以实现高效、灵活的面包屑导航功能。