您现在的位置是：首页 > WordPress教程WordPress教程

WordPress面包屑导航设置

WP集市 2025-09-10 【WordPress教程】 631人已围观

先得唠唠面包屑是啥玩意儿。你瞅瞅童话里汉塞尔撒面包屑找路回家，搁网站里也是一个理——就是告诉用户"现在搁哪儿呢，咋回去"。WordPress本身没自带这功能，但整起来也不费劲，咱今天就用Yoast SEO这插件整一个最省事的，再手写代码搞个自定义的，保准教你整明白。
先说插件法子，适合不想碰代码的。装个Yoast SEO，激活后到后台【SEO】→【搜索外观】→【面包屑】里开启功能。记得把分隔符改成"›"或者" / "，瞅着更顺眼。然后到主题的header.php里找标签，往上头塞这串：

<?php
if ( function_exists('yoast_breadcrumb') ) {
  yoast_breadcrumb( '<div class="4643-e750-879a-f520 breadcrumb">','</div>' );
}
?>

保存刷新，你就能在页面头部看见类似"首页 › 分类 › 文章标题"的导航链了。Yoast会自动抓取WordPress的层级关系，连自定义文章类型都支持。

要是你想自己捣鼓代码，就得理解WordPress的层级逻辑。先判断是不是首页，再逐级判断分类、页面、文章。下面这段塞functions.php里，能处理大部分场景：

function custom_breadcrumb() {
  echo '<nav class="879a-f520-353e-a061 breadcrumb"><a href="'.home_url().'">首页</a>';

  if (is_category() || is_single()) {
    $categories = get_the_category();
    if ($categories) {
      foreach ($categories as $category) {
        echo ' › <a href="'.get_category_link($category->term_id).'">'.$category->name.'</a>';
      }
    }
    if (is_single()) {
      echo ' › <span>'.get_the_title().'</span>';
    }
  } elseif (is_page()) {
    echo ' › <span>'.get_the_title().'</span>';
  }

  echo '</nav>';
}

然后在需要显示的地方调用<?php custom_breadcrumb(); ?>就行。这段代码先输出首页链接，遇到分类页就输出分类名，文章页则追加标题，页面就直接显示页面标题。

有时候你得处理更复杂的结构，比如自定义文章类型归档页。比如有个"产品"类型，需要加个产品归档页的链接。这时候得用is_post_type_archive()判断：

if (is_post_type_archive('product')) {
  echo ' › <span>产品列表</span>';
} elseif (is_singular('product')) {
  echo ' › <a href="'.get_post_type_archive_link('product').'">产品列表</a>';
  echo ' › <span>'.get_the_title().'</span>';
}

记得把'product'换成你的实际自定义类型名称，这样就能形成"首页 › 产品列表 › 具体产品"的链条。

样式也得捯饬捯饬。给breadcrumb类加点儿CSS，整个看起来就像那么回事了：

.breadcrumb {
  padding: 12px 0;
  font-size: 14px;
  color: #666;
}
.breadcrumb a {
  color: #0073aa;
  text-decoration: none;
}
.breadcrumb a:hover {
  color: #005177;
}

分隔符用伪元素加也行，比如.breadcrumb ::before { content: "›"; padding: 0 5px; }，这样链接之间自动带分隔符。