WordPress 面包屑插件 Breadcrumb NavXT 安装使用教程

核心提示:Breadcrumb (面包屑)插件实现网站层级关系,起路径引导功能,有利于博客和网站的 SEO和用户浏览网站内容。本文内容为 suffusion 主题安装 Breadcrumb NavXT 插件, 其它主题的 Breadcrumb 安装方法类似。 ...

Breadcrumb (面包屑)插件实现网站层级关系,起路径引导功能,有利于博客和网站的 SEO和用户浏览网站内容。本文内容为 suffusion 主题安装 Breadcrumb NavXT 插件, 其它主题的 Breadcrumb 安装方法类似。

breadcrumb(面包屑)简介

使用breadcrumb的网站效果:

图1. 使用breadcrumb的网站的google搜索结果

图1. 使用breadcrumb的网站的google搜索结果

图2. 使用breadcrumb的Wordpress博客效果图

图2. 使用breadcrumb的Wordpress博客效果图

breadcrumb这个概念在”精通正则表达式”这本书中提过,用来解释传统正则表达式引擎的工作方式.大意是这样: 在你前面有N个分支,然后你选择第一个分支,其它分支则洒上面包屑;进入第一个分支后,可能在你前面又有N个分支,然后你再选择一个分支,如果匹配成功, 返返回匹配成功的信息,如果这个分支的所有选择的匹配都失败了,那么就返回去,进入洒有面包屑的分支继续匹配;一直到所有分支尝试完毕,如果都不匹配,则 匹配失败.

一句话,breadcrumb就是起一个路径引导的作用.

suffusion主题安装Breadcrumb NavXT插件

suffusion自带了breadcrumb功能,但是我在用google搜索时,在搜索结果中并没有层级关系,它并不是使用Schema.org这个标准.

在本文中使用的breadcrumb插件是Breadcrumb NavXT, 还有另外一款插件: Breadcrumbs, 两个插件功能类似, 后一款插件是由WordPress SEO的作者写的, 也非常不错.

首先把suffusion主题自带的breadcrumb功能不启用:

选择外观–>Suffusion Options–>Other Graphical Elements–>Breadcrumbs and Page Navigation,设置如下:

图3.不启用suffusion自带的breadcrumb功能

图3.不启用suffusion自带的breadcrumb功能

第一步是从http://wordpress.org/extend/plugins/breadcrumb-navxt/下载插件,解压

第二步将插件上传到website_root/wp-content/plugins目录,然后到wordpress后台启用插件

第三步是在设置界面设置选项,我的设置如下:

General(通用)设置界面:  将Home Title改成Home,其它未改动

图4. Breadcrumb NavXT插件General设置

图4. Breadcrumb NavXT插件General设置

Current Item(当前条目)选项: 当前条目是指最后一层,在图5中即Breadcrumb NavXT这一层

Link Current Item选项设置是否链接当前条目,一般不选择

图5. Breadcrumb NavXT插件Current Item设置

图5. Breadcrumb NavXT插件Current Item设置

Posts & Pages(日志和页面)设置:

修改了Template, 将”go to … “ 改成了”View all post in …”

图6. Breadcrumb NavXT插件Posts & Pages设置

图6. Breadcrumb NavXT插件Posts & Pages设置

Categories & Tags(分类和标签)设置:

与Posts & Pages设置修改的地方类似

图7. Breadcrumb NavXT插件Categories & Tags设置

图7. Breadcrumb NavXT插件Categories & Tags设置

杂项设置:

图8. Breadcrumb NavXT插件杂项设置

图8. Breadcrumb NavXT插件杂项设置

第四步是关键,有两种方法将breadcrumb添加到文章中

1)       按照Breadcrumb NavXT的官方安装文档将代码插入到主题的header.php文件的适当位置,如下:

插入Breadcrumb NavXT代码

实现效果如下:

图9. 插入header.php后Breadcrumb NavXT实现效果图

图9. 插入header.php后Breadcrumb NavXT实现效果图

与主题不太符,字体太小了,效果不大好

2)       第二种方法是使用小工具来实现

选择”外观–>小工具”,添加小工具”Breadcrumb NavXT”,添加位置选择” Widget Area Below Header”,其它设置如下图:

图10.Breadcrumb NavXT小工具设置

图10.Breadcrumb NavXT小工具设置

添加之后,打开”suffusion Options”, 选择”Sidebars–> Widget Area Below Header”,进行以下设置:

图11. suffusion主题添加Breadcrumb NavXT的Widget

图11. suffusion主题添加Breadcrumb NavXT的Widget

这样就完成了,效果图如下:

图12.suffusion主题添加Breadcrumb NavXT小工具效果图

图12.suffusion主题添加Breadcrumb NavXT小工具效果图

推荐使用第二种方法, 插件升级,主题升级之后都不会影响使用.

在线客服