zblog面包屑导航（面包屑 导航）

今天给各位分享zblog面包屑导航的知识，其中也会对面包屑 导航进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、网站面包屑导航有哪几种类型的？
• 2、什么是面包屑导航？有什么作用
• 3、面包屑导航
• 4、面包屑导航是什么东西？
• 5、wordpress 主题怎么添加面包屑导航
• 6、面包屑导航现在网站还用吗

网站面包屑导航有哪几种类型的？

洋鑫博客分析网站面包屑导航的类型如下：

1、路径型：路径型面包屑是一个动态显示用户到达页面经过的途径;

2、位置型：位置型面包屑是固定的，显示了页面在网站结构中的位置;

3、属性型：属性型面包屑给出的当前页面的分类信息。

面包屑导航一般都在导航的下面，形式一般为 首页 一级目录名称 二级目录名称 目前位置，尽量要把面包屑导航的层次控制在四层以内，这样也有利与搜索引擎蜘蛛一层层往下爬，到了四层以下就很难爬到了。

什么是面包屑导航？有什么作用

面包屑导航顾名思义，面包屑挺巧就是琐碎的意思，一点点的形状，这就代表我们的网站导航中，那些不在主导航上，其他辅助性琐碎的导航就叫面包屑导航了。

首先我们来看看面包屑导航的作用：

1、让用户了解当前所处位置，以及当前页面在整个网站中的位置。

2、体现了网站的架构层级，能够帮助用户快速学习和了解网站内容和组织方式，从而形成很好的位置感

3、提供返回各个层级的快速入口，方便用户操作。

4、Google已经将面包屑导航整合到搜索结果里面，因此优化面包屑导航每个层级的名称，多使用关键字，都可以实现SEO优化。面包屑路径，对于提高用户体验来说，是很有帮助的。

5、方便用户，面包屑主要用于为用户提供导航一个网站的次要方法，通过为一个大型多级网站的所有页面提供面包屑路径，用户可以更容易的定位到上一次目录，引导用户通行;

6、减少返回到上一级页面的点击或操作，不用使用浏览器的“返回”按钮或网站的主要导航来返回到上一级页面;

7、不用常常占用屏幕空间，因为它们通常是水平排列以及简单的样式，面包屑路径不会占用页面太多的空间。这样的好处是，从内容过载方面来说，他们几乎没有任何负面影响;

8、降低跳出率，面包屑路径会是一个诱惑首次访问者在进入一个页面后去浏览这个网站的非常好的方法。比如说，一个用户通过谷歌搜索到一个页面，然后看到一个面包屑路径，这将会诱使用户点击上一级页面去浏览感兴趣的相关主题。这样，从而，可以降低网站的总体跳出率。

9、有利于百度蜘蛛对网站的抓取，蜘蛛直接沿着那个链走就可以了，很方便。

10、面包屑有利于网站内链的建设，用面包屑大大增加了网站的内部连接，提高用户体验。

面包屑导航

面包屑导航：面包屑是作为辅助和补充的导航方式，网页上让用户感知当前页面所在的层级位置并能方便地回到原先的地点，或者是产品的属性之间的关系的控件。最常见的面包屑的样式是：横向的文字链接，由大于号“”分开，横向排布 ，这个符号也暗示了它们的层级关系。面包屑导航不是页面中最显眼的地方，它只是一定程度上帮助用户理解网站的结构和属性的从属关系。

面包屑导航分类：

1、基于位置的面包屑导航。用于表明页面之间的层次关系和当前页所在的位置。这种页面之间的层级关系可以是没有所属和包含关系的，只要这几个页面本身存在线性跳转关系。

2、基于属性的面包屑导航。用于表明产品属性之间的所属关系和当前页所在的位置，这些属性是存在所属和包含关系的。这种面包屑导航最常出现在电商网站，对于一个产品来说，所具有的属性往往不只有一种，而通过这种面包屑导航可以给消费者一个更加直观的了解。3、基于路径的面包屑导航。用于显示用户的操作路径和历史，他们的功能基本上是和前进和后退的按钮是一样的。

面包屑导航作用：

1、 表明当前页面所处的位置，感知产品属性之间的所属关系

2.、方便跳转到之前的页面

3、总体上是作为主导航的补充

4、降低跳出率。当用户进入一个站点，看到一个面包屑的线索可能诱使用户点击到更高级别的页面，以查看相关的利益主题。这反过来，降低了整体的网站跳出率。

面包屑导航适用条件：

1、层级较深的网站，面包屑导航适合层级较深的网站，如果只有一级分类的话，通过主导航就可以起到快速定位的作用。例如豆瓣、36kr等扁平类网站就没有使用面包屑。

2、独立不交叉的网站结构，由于面包屑导航路径是线性结构的，因此内容必须划分的非常清晰，且不存在交叉；否则，面包屑导航的路径就不是唯一的，同一分类可能出现在不同的路径中，让用户感到困惑。

不是所有网站都需要使用面包屑导航：

1.、信息层级很扁平的。例如豆瓣、36kr等扁平类网站就没有使用面包屑，移动产品中没有使用面包屑导航也很大一部分是这个原因。

2.、不存在线性的页面关系；

3、有其他可以替代面包屑导航功能的东西。比如：进度指示条。其实进度提示条也算是面包屑导航的一个变种，通过线性表明页面处于任务步骤中的位置。

面包屑导航目前使用情况：

面包屑导航不会出现在首页，一般它会出现在二级频道页的下一个层次的页面。

1、电商类网站。在首页点击进入【家用电器】频道页，在频道页点击了大家电后，你就能看到面包屑了

2、内容类网站。在首页点击进入了【动漫】频道页，在频道页点击了《猫和老鼠》后，你就能看到面包屑了。

涨姿势！从头带你认识面包屑导航的前世今生！

在设计面包屑导航中需要注意的问题：

1、面包屑导航有线性结构，因此，如果网站不能被整齐的类别划分，将很难使用面包屑。决定是否使用面包屑，在很大程度上取决于如何设计网站层级。当较低级别的页面交叉放在在多个父目录下，面包屑路径是无效的、不准确的，会给用户造成混淆。

2、面包屑导航只是作为主导航的一个辅助，因此不能让面包屑主宰页面。面包屑导航的功能，只是作为用户访问的协助，因此，面包屑导航应该比主导航菜单小或者不能太突出，不应该抓住用户的注意力。

3、面包屑路径通常显示在页面的上半部分，在主导航菜单的下面。

面包屑导航是什么东西？

面包屑导航(BreadcrumbNavigation)这个概念来自童话故事"汉赛尔和格莱特"，当汉赛尔和格莱特穿过森林时，不小心迷路了，但是他们发现在沿途走过的地方都撒下了面包屑，让这些面包屑来帮助他们找到回家的路。所以，面包屑导航的作用是告诉访问者他们目前在网站中的位置以及如何返回。

来源

很久很久以前，在大森林的边上住着一个贫穷的樵夫，他与妻子和两个孩子相依为命。他的儿子名叫汉赛尔，女儿名叫格莱特。后来樵夫的妻子去世了，他又给孩子们娶了一个后母。后母计划把两个孩子带到森林的深处，然后趁他们睡着的时候跑掉。汉赛尔无意中知道了后母的计划，于是偷偷地把一块面包藏在了口袋里。在去森林的路上，汉赛尔悄悄地捏碎了他的面包，并不时地停下脚步，把碎面包屑撒在路上。后母顺利地趁孩子们睡着的时候溜掉了，汉赛尔和格莱特醒来已是一片漆黑。汉赛尔安慰他的妹妹说：“等太阳一出来，我们就看得见我撒在地上的面包屑了，它一定会指给我们回家的路。”但是当太阳升起来时，他们在地上却怎么也找不到一点面包屑了，原来它们都被那些在树林里、田野上飞来飞去的鸟儿一点点地啄食了。

原理

在童话里，面包屑是汉赛尔在进入森林的路中偷偷撒下的，这是一种“历史记录”的应用方式，目的是帮助你追溯来路，因而它应该是一种线性的导航方式。不过在网页的应用中，“追溯来路”这件事浏览器已经做得足够好了，所以“面包屑”慢慢地就变成用来表达内容归属关系的界面元素，也就是我们经常看到的“主分类一级分类二级分类三级分类……最终内容页面”这样的方式。但是一般正常的来讲目录结构由3层结构组成。分别是首页栏目页内容页。合理的构建目录结构可以让用户随时随地的找到自己所在的位置又能保证栏目分类后的各个栏目的权重不至于太分散。同时在许多关于网站用户使用体验的调查报告中也得出超过3次点击访客还没有找到需要的信息，访客就很大的可能性会离开网站。所以，3层目录结构也是浏览体验的需要。

作用

1、让用户了解当前所处位置，以及当前页面在整个网站中的位置。

2、体现了网站的架构层级，能够帮助用户快速学习和了解网站内容和组织方式，从而形成很好的位置感。

3、提供返回各个层级的快速入口，方便用户操作。

4、Google已经将面包屑导航整合到搜索结果里面，因此优化面包屑导航每个层级的名称，多使用关键字，都可以实现SEO优化。面包屑路径，对于提高用户体验来说，是很有帮助的。

5、方便用户，面包屑主要用于为用户提供导航一个网站的次要方法，通过为一个大型多级网站的所有页面提供面包屑路径，用户可以更容易的定位到上一次目录，引导用户通行；

6、减少返回到上一级页面的点击或操作，不用使用浏览器的“返回”按钮或网站的主要导航来返回到上一级页面；

7、不用常常占用屏幕空间，因为它们通常是水平排列以及简单的样式，面包屑路径不会占用页面太多的空间。这样的好处是，从内容过载方面来说，他们几乎没有任何负面影响；

8、降低跳出率，面包屑路径会是一个诱惑首次访问者在进入一个页面后去浏览这个网站的非常好的方法。比如说，一个用户通过谷歌搜索到一个页面，然后看到一个面包屑路径，这将会诱使用户点击上一级页面去浏览感兴趣的相关主题。这样，从而，可以降低网站的总体跳出率。

9、有利于百度蜘蛛对网站的抓取，蜘蛛直接沿着那个链走就可以了，很方便。

10、面包屑有利于网站内链的建设，用面包屑大大增加了网站的内部连接，提高用户体验。

适用条件

虽然眼下很多网站都流行使用面包屑导航，但是并不是所有的网站都适用。符合下面两个条件的网站才适合使用面包屑导航。1、层级较深的网站，面包屑导航适合层级较深的网站，如果只有一级分类的话，通过主导航就可以起到快速定位的作用。比如“豆瓣网”类型扁平构架的网站就没有使用面包屑导航。2、独立不交叉的网站结构，由于面包屑网站导航路径是线性结构的，因此网站内容必须划分的非常清晰，且不存在交叉；否则，面包屑导航的路径就不是唯一的，同一分类可能出现在不同的路径中，让用户感到困惑。

示范

基于位置(Location-based)的面包屑向用户显示他们在网站的哪一个级别页面

。它们一般典型的用于有多个级别（一般是多于两级）的导航方案。在下面的例子中(来自于SitePoint)，每一个页面的文本链接表示它比它右边的文本链接高一级。

A 表明当前在网站内的位置。

B 提供指向先前访问过的页面（或网站）和其他区域的捷径。

本质上，它是网站结构的线性表示。Web上的定位面包屑路径所展示的不是导航的历史，而是在整个网站中某个固定的位置。就是说，不管用户是如何到达location 页面，面包屑路径都是一样的。

分类

一、基于位置的面包屑导航

这种类型是最常见的。这种类型的面包屑导航可以很好的指出当前页面与整个站点的层次结构。这种面包屑导航可以显示当前页面的前一个页面或者目录的链接。可以使访客了解自己的位置，以及可以更快的找到自己想要到达的页面。可以很好的提高用户的友好体验。

二、基于属性的面包屑导航

这种面包屑导航最常出现在电子商务站点。这种面包屑导航可以很好的指出当前页面内产品的其他属性或者类别。对于一个产品来说，所具有的属性往往不只有一种，而通过这种面包屑导航可以给消费者一个更加直观的了解。

三、基于路径的面包屑导航

这种面包屑导航是最不常见到的。这种面包屑导航和上文所说的童话故事类型很像。他们可以显示访客在到达页面前所访问过的网页的链接。这种面包屑导航不是很受欢迎，因为他们的功能基本上是和前进和后退的按钮是一样的。

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

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

一，纯代码实现

在functions中添加

function get_breadcrumbs()

{

global $wp_query;

if ( !is_home() ){

// Start the UL

echo 'ul class="breadcrumbs"';

// Add the Home link

echo 'lia href="'. get_settings('home') .'"网站首页/a/li';

if ( is_category() )

{

$catTitle = single_cat_title( "", false );

$cat = get_cat_ID( $catTitle );

echo "li raquo; ". get_category_parents( $cat, TRUE, " raquo; " ) ."/li";

}

elseif ( is_archive()  !is_category() )

{

echo "li raquo; Archives/li";

}

elseif ( is_search() ) {

echo "li raquo; Search Results/li";

}

elseif ( is_404() )

{

echo "li raquo; 404 Not Found/li";

}

elseif ( is_single() )

{

$category = get_the_category();

$category_id = get_cat_ID( $category[0]-cat_name );

echo 'li raquo; '. get_category_parents( $category_id, TRUE, " raquo; " );

echo the_title('','', FALSE) ."/li";

}

elseif ( is_page() )

{

$post = $wp_query-get_queried_object();

if ( $post-post_parent == 0 ){

echo "li raquo; ".the_title('','', FALSE)."/li";

} else {

$title = the_title('','', FALSE);

$ancestors = array_reverse( get_post_ancestors( $post-ID ) );

array_push($ancestors, $post-ID);

foreach ( $ancestors as $ancestor ){

if( $ancestor != end($ancestors) ){

echo 'li raquo; a href="'. get_permalink($ancestor) .'"'. strip_tags( apply_filters( 'single_post_title', get_the_title( $ancestor ) ) ) .'/a/li';

} else {

echo 'li raquo; '. strip_tags( apply_filters( 'single_post_title', get_the_title( $ancestor ) ) ) .'/li';

}

}

}

}

// End the UL

echo "/ul";

}

}

在有需要添加面包屑插件的页面适当位置添加

php get_breadcrumbs();

打开主题所在的style.css，添加

ul.breadcrumbs {

list-style: none;

padding: 0;

margin: 0;

font-size:12px;

}

ul.breadcrumbs li {

float: left;

margin: 0 5px 0 0;

padding: 0;

}

通过上述三步就可以实现无插件面包屑效果，稍微的样式和布局可以修改。

二，用插件实现

这里我推荐的插件是Breadcrumb NavXT，它提供5种面包屑导航样式，如下图所示

插件的设置界面如下

看不懂英文的用翻译工具翻译一下也能大概知道意思了，其它具体的使用您可以自己去安装一下这款插件体验一下，如果有不懂再问吧。

面包屑导航现在网站还用吗

面包屑导航还在使用。

面包屑导航有两个好处：

1、搜索引擎更容易抓取；

2、用户使用时更方便。

zblog面包屑导航的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于面包屑 导航、zblog面包屑导航的信息别忘了在本站进行查找喔。