网页设计中的面包屑路径

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

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

在wordpress中添加面包屑导航的话，可以直接使用插件来实现，不过很多站长都不喜欢用插件，还是认为如果能用代码解决的话是最理想的。我最近也找了一些关于面包屑导航的资料。下文中就有详细解决怎么用代码来实现wordpress面包屑导航：

一、在wordpress博客当前主题的functionsphp文件（没有就创建一个）中添加以下代码：

//面包屑导航

functionget_breadcrumbs()

{

global$wp_query;

if(!is_home()){

//StarttheUL

echo'<ulclass="breadcrumbs">';

//AddtheHomelink

echo'<li><ahref="'get_settings('home')'">'get_bloginfo('name')'</a></li>';

if(is_category())

{

$catTitle=single_cat_title("",false);

$cat=get_cat_ID($catTitle);

echo"<li>"get_category_parents($cat,TRUE,"")"</li>";

}

elseif(is_archive()&&!is_category())

{

echo"<li>Archives</li>";

}

elseif(is_search()){

echo"<li>SearchResults</li>";

}

elseif(is_404())

{

echo"<li>404NotFound</li>";

}

elseif(is_single())

{

$category=get_the_category();

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

echo'<li>'get_category_parents($category_id,TRUE,"");

echothe_title('','',FALSE)"</li>";

}

elseif(is_page())

{

$post=$wp_query->get_queried_object();

if($post->post_parent==0){

echo"<li>"the_title('','',FALSE)"</li>";

}else{

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

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

array_push($ancestors,$post->ID);

foreach($ancestorsas$ancestor){

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

echo'<li><ahref="'get_permalink($ancestor)'">'strip_tags(apply_filters('single_post_title',get_the_title($ancestor)))'</a></li>';

}else{

echo'<li>'strip_tags(apply_filters('single_post_title',get_the_title($ancestor)))'</li>';

}

}

}

}

//EndtheUL

echo"</ul>";

}

}

二、在显示面包屑导航的位置添加以下调用代码：

<php

if(function_exists('get_breadcrumbs')){

get_breadcrumbs();

}

>

三、在主题的css样式文件中添加以下样式代码：

ulbreadcrumbs{list-style:none;font-size:12px;}

ulbreadcrumbsli{float:left;margin-right:5px;}

面包屑导航是一种常见的网站导航方式，它可以方便用户在网站中快速定位到自己需要的页面。在网站设计中，面包屑导航是一个非常重要的组成部分，它可以提高网站的用户体验，提升网站的可用性和可访问性。

什么是面包屑导航？

面包屑导航是一种基于层级结构的导航方式，它可以告诉用户当前页面的位置和上下文关系。面包屑导航通常由多个层级组成，每个层级之间使用分隔符隔开，如“首页>分类>子分类>商品详情”。

面包屑导航的优点

面包屑导航具有以下几个优点：

提高用户体验。面包屑导航可以让用户快速地了解当前页面的位置和上下文关系，避免用户迷失在网站中。

提升网站可用性。面包屑导航可以让用户快速地返回上一级页面，方便用户进行导航和浏览。

提高网站可访问性。面包屑导航可以让屏幕阅读器等辅助工具更好地理解网站的结构和内容。

如何添加面包屑导航？

添加面包屑导航需要以下几个步骤：

确定网站的层级结构。在设计网站时，需要确定网站的层级结构，以便为每个页面添加正确的面包屑导航。

添加面包屑导航代码。在网站的模板文件中添加面包屑导航代码，通常使用HTML和CSS实现。

测试面包屑导航。在添加面包屑导航后，需要测试其在不同页面和设备上的表现，确保其能够正常显示和使用。

面包屑导航的最佳实践

以下是一些面包屑导航的最佳实践：

使用清晰的分隔符。分隔符应该使用易于识别的符号，如“>”、“/”等。

使用简洁的文本。面包屑导航应该使用简洁的文本描述当前页面的位置，避免使用过长或复杂的文本。

保持一致性。在整个网站中，面包屑导航应该保持一致性，以便用户能够快速地理解其使用方式。

在我们的站点中都有很多的页面，利用面包屑路径能够极大的增强用户寻找路径的能力。从易用性上来讲，面包屑路径减少了用户回到更高级目录时所需要的操作，并且增强了网站各个单元的可寻性。面包屑路径还可以提供有效地视觉帮助来知道用户了解自己目前所处与网站中的等级，让他们能够更容易的找到他们的开始页。

什么是面包屑路径？

Breadcrumb (Breadcrumb trail)，中文成为“面包屑路径”是应用于网站或者网络程序上的，帮助用户找到自身位置的二级导航标记。他起源于Hansel and Gretel的传说，孩子们为了能够找到回家的路，将面包屑撒在路上，并顺着找到了家。和传说中一致，面包屑路径在现实中也帮助我们找到自己的起始页。

Delicious的路径。

在存在大量的分级内容的网站上我们经常能够看到面包屑路径的使用，在一些引导性的网络应用上也能够见到，他们的作用就像一个进度条，指引着用户当前的进度。面包屑路径最简单的形式是水平排列的文字链接，之间用大于号隔开，每个链接表示与这个级别相关的页面链接。

何时使用面包屑路径？

大型网站，特别是那种页面按照层级结构组织的网站比较适合使用面包屑路径。一个最好的例子就是商务网站，拥有大量的商品分门别类的存放着。

在那种没有逻辑的层级关系或者分组的单级网站上不适合使用面包屑路径。一个决定是否使用面包屑路径的很好的办法是规划一个站点地图或者表示网站导航结构的图表，然后再来决定面包屑路径是否能够改善用户在栏目内和不同栏目间的导航体验。

面包屑路径往往是一个网站的额外的特点，他不应该取代菜单导航，而且往往应该作为菜单导航的一种辅助和补充。它是一种次级的、很舒服的特性，帮助用户确定自己的位置，并且作为菜单导航的一个有效补充。

面包屑路径的类型：

面包屑路径主要有三种形式。

基于位置的面包屑：

位置面包屑是静态的，显示了当前页面在网站中所处的等级。链接中的每一项都能够导向一个更高一级的页面，这种形势特别适合有很多级别的网站（大于2级）；

基于属性的面包屑：

属性面包屑给出了当前页面所属类别的信息，下图的面包屑更接近与一个混合形式的面包屑，路径中包含了对结果的筛选条件描述；

路径：路径形式的面包屑是动态的路径，经常用来指引用户进行某种操作，比如“注册”流程，他动态的显示用户完成注册所需要的过程；

使用面包屑路径的好处

方便用户：面包屑路径的目的就是为用户提供一种辅助的导航方式，在具有多层级的网站上浏览时，面包屑路径可以帮助用户更容易的找到想要的位置；

减少返回高级别页面的点击次数：用户不需要通过多次点击“返回”来到自己之前的位置，而只需要在面包屑路径上点击一次；

不会占用过多的空间（hog screen space）：面包屑路径多数采用普通的水平排布的文字链接，所以不会占用过多的页面空间，恰当的运用，能够带来足够的好处。

减少跳出率（bounce rates）：面包屑路径能够诱初次访问页面的用户在完成初始页的浏览后浏览其他页面。例如，通过搜索引擎来到的用户，看完文章后，很容易点击上一级页面的导航来了解更多的相关内容，这样就减少了站点整体的跳出率。

使用中的错误

在不必要的地方使用：

上图的导航就会让用户感到迷惑，太多的导航了而且排布的非常集中，有点重复；

用面包屑路径作为主导航：

面包屑路径只是一种导航的辅助手段，任何时候都不应该取代导航菜单。上图中就是一个例子，由于只使用了面包屑路径，当用户想跳转到站点的其他栏目时，很难容易的到达。

当页面含有多重栏目时，使用面包屑路径：面包屑路径具有线性的结构，如果你的页面不能够很清楚的分类，那就很难用面包屑路径来表示，这其实是在网站设计初期，要为站点制定明确的组织结构。

在设计中应该考虑的问题

使用什么符号来分隔？最常用的分隔符是大于号（>），表示“父目录>子目录”，其他的符号还包括：箭头、右引号(>>)、斜线(/)。

应该设计成多大？

面包屑路径只是一个辅助的导航工具，所以谁都不希望他占据巨大的页面空间，他应该尽量的小，但是要能够方便访问，向用户传达出这种辅助的设计意图。一个原则就是，用户浏览页面时，不能第一眼就被面包屑路径所吸引。

应该放在什么地方？面包屑路径通常放置在页面的中上部，如果是水平导航，一般放在主菜单的下边。

当客户在搜索引擎结果中打开了企业网站，客户首先会在网站首页到处浏览，然后通过导航来找到准确内容。那么网站导航的重要性就体现出来，就是方便客户更快速地找到内容。假如客户在网站里浏览了半天都没有找到想看的内容，那么就会再有耐心继续浏览。小编觉得，指向清晰明确的导航才能帮助到客户，导航要怎么建设才更有利于指向在前期就需要考虑到这个问题。网站导航都需要细心去建设，如果只关注风格排版，就会忽略导航对网站的重要性。建设导航的时候需要注意以下这些问题：

一、指向明确

那么导航指向就需要明确，例如导航的其中一个栏目是《****》，然后打开看到的只是百度地图，那么就是给客户错误的指向。就好像我们要去远的地方，都会使用手机导航来指向，这样避免自己迷路和避开拥堵。网站导航主要也是这个作用，是客户在企业网站里找到内容的最准备方法。导航的建设在于提前策划好导航里的栏目，这样客户才能通过导航在最短的时间里获取到信息。

二、面包屑导航

就好像一栋高楼，在每个楼梯口都有楼层数的标识，这就是让我们明白现在正在哪一层楼。面包屑导航是形成网站整体框架结构的重要设计，面包屑导航可以让客户明白目前处于网站中的位置，也可以通过面包屑导航回到上一级或者网站首页，是网站导航建设中非常实用的设计。面包屑的设计主要以文字体现，面包屑导航可以帮助客户更好地浏览并且向客户展示重要内容，从而提高客户体验。

三、导航要有文字

有的企业希望网站整体更好看，就会选择设计式导航，用来装饰纯文字带来的枯燥感。提高网站外观，这个做好是不错的。会让客户有所疑虑，考虑半点才可能选择点击访问。当内容并不是客户想看的时候，就会关闭网页。所以最好要在里附带文字，单纯靠并不能让所有客户都理解，只有加上文字才能更准确地表达。一张，估计只有企业自己或者网站建设公司才明白导航指向的内容。

四、导航层级控制三层以下

把导航控制在三层以下，对很多企业来说容易超过这个标准。因为有的企业分类太多，产品几十种，文章好几类。网站并不像电脑，即使文件再多也不可能舍弃电脑。但网站不同，如果要让客户一层又一层地点击，估计就会离开网站了。就好比电脑文件夹，打开一个又有一个，如果数量多了就会不耐烦，感觉点击半天都没找到重要内容。实际上，只要将网站内容规划分类好，控制在三层以下是可以的。

在制作网站关于导航栏的处理困扰着不少人，导航栏对网站有着很重要的作用，它给客户引导方向，指引用户快速到达想要浏览的栏目，让客户在短时间内，找到自己所需要的内容，但导航栏并不是将网站内容进行全面展示，只要进行合理的处理，让用户有一个很好的体验，那么对于导航这部分在制作时怎样处理呢？

不止是导航，还有代码优化、面包屑导航、文章内链、相关文章、tag标签等等或站内搜索等方面都要合理的进行处理。网站的布局与导航要注意根据网站各项元素进行完善，将最符合访问者需要的目录往前放。网站主要导航栏目要用有吸引力的元素予以表现出来，以求吸引访问者点击。

关于网站的内页导航有栏目导航，和面包屑导航，而现在制作网站大部分都会选用面包屑导航，由于它对搜索引擎的网络爬虫友好，并且对于客户的体验也相当的好，他能显示用户的位置，不会让客户在网站里找不到方向，不知道该怎么浏览，而栏目导航就是通过这个导航去别的栏目，浏览别的栏目的内容，提升网站的权重。

面包屑导航各个网页间联系的一个纽带。把首页、栏目、内容页给连接起来，便于客户阅览与浏览，让网站显得更有层次。导航则是建立页面时的第一步，也是网站的方向、指引用户立即找到想要的信息。像这样的效果并非全部导航栏目都会有，唯有合理设置导航栏才行。一些人会认为内容可以使用或flash技术，因为这很炫酷。实则这样做并不好，加载速度变慢会减少用户体验度与搜索引擎的收录都有一定的影响。因而对于网站的导航来说，最好是使用文字的形式进行处理。提升加载速度的同时，还能提升客户的体验。

具体的说，网站整体架构主要在于站内导航、对搜索引擎有一定影响。网站的内链学问很多，举个例子来说，调整的链接都要指向到哪儿，链接网址是什么，全部的网页都要有这个页面的链接，把首页、栏目页、内容页连接起来，方面客户来回阅览浏览，使建设网站的有层次感。导航的数量、导航字体的处理其实都有一定的学问，怎样让用户使用尤其顺手，是评估一个导航是不是成功的关键因素。

面包屑导航是每个网站都需要运用上的，通过面包屑不仅可以让客户知道现在浏览的内容所处的位置，还能找到更多相关的内容。关于搜索引擎而言通过面包屑导航能够推断出该栏目主要内容是哪些，搜索引擎官方也给予相应的说明在进行网页解析时会着重查看面包屑导航内容，通过面包屑导航可以使框架复杂的大中型网站变的清晰明了，并勉励大家在网站上使用面包屑导航。

能常网站包含主导航、底部导航、面包屑导航三个部分，在网站导航的设置上一般我们会尽量的选用用重点关键词的长尾词来命名，尽量的避免出现栏目间关键词交叉现象，尽量表现在重要的位置，根据客户的F型浏览习惯进行处理，建议使用双导航站内布局模式，必要时加上底部导航，合理进行网站地图的设置，建议网站选用div+css的布局模式，避免出现大量冗余的代码，没有实际意义而不得不存在的栏目可以选用robots文件将其禁用。

导航是为客户访问提供方便的，不至于用户访问页面时迷失方向，便于客户快速的浏览。像首页-栏目-内容页这就是导航的一种常规形式，通过对于导航的这种处理方式，使制作的网站不但有利于提高网站的用户体验，也有利于提高网站子栏目页的权重，网站排名提高。