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

html-css015

wordpress 主题怎么添加面包屑导航,第1张

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

一,纯代码实现

在functions中添加

function get_breadcrumbs()

{

global $wp_query

if ( !is_home() ){

// Start the UL

echo '<ul class="breadcrumbs">'

// Add the Home link

echo '<li><a 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种面包屑导航样式,如下图所示

插件的设置界面如下

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

今天公司开会,在谈到网站面包屑导航时,发现有几位同学都不是很了解。现在就跟大家讲一下面包屑导航的一些知识。

面包屑导航是什么?

面包屑,顾名思义,是面包的一个碎片,关于面包屑的来源还要追溯到一个有趣的童话故事,故事中,一对惨遭继母虐待的兄妹在森林里迷路后,根据出发时一路所洒下的面包屑成功的找到了回家的路,面包屑导航在网站中就具备这种指向性的作用。

为什么要在网站中添加面包屑导航?面包屑导航主要有哪些作用?

是不是所有的网站都要添加面包屑导航呢?很多人都说面包屑导航一般适用于网络内容较多,目录结构复杂的网站,  在这里,我建议:请尽可能的为网站添加面包屑导航。原因有很多,主要讲以下几点。

第一 用户体验

面包屑导航能够帮助用户了解自己正处于网站的什么位置,并能够帮助用户快速的获取信息。

第二 网站优化

吸引用户的访问,为更多的用户提供服务是网站的根本,这就要求我们建设对百度小蜘蛛友好的网站,面包屑导航能够帮助baiduspider轻松抓取网站信息,以此推荐给更多的用户。

第三 筛选信息

这一点主要针对电子商务网购类网站,特别是对于聚合页的指示作用,面包屑导航能够帮助用户清晰的筛选商品属性。

第四 面包屑导航对于内链建设和关键词的布置等都具有重要作用,这里就不一一细说。

面包屑导航该怎么做?

对于面包屑的设计,基本都大同小异,但仍需要注意以下几个方面。

第一 字体的大小比普通字体小一个级别,颜色设置偏灰色系,以免喧宾夺主,商品类聚合页对于属性的字体颜色可以设置红色等鲜艳颜色。

第二 各层次的指向符号建议使用“>”,这样便于用户识别易懂。

#crumbs ul li a:after{

    /*styles

    .

    .

    .

    */

    /*加一个zindex就可以了*/

    z-index:100

}