wordpress面包屑导航制作(含非插件方法)

二呆 8年前 (2017-09-07) 代码 #wordpress#

引言：此文由子域名转移而来，因为细微强迫症和放弃子域名而不舍得完全丢弃，所以将会逐步第二次转移文章到主域名上来，二者主题（阿里白秀和D8）均来自大前端，追求完美的同时有一丝小懒，主题就不换了，D8主题用起来挺好。

众所周知，面包屑导航是一个可以指引用户去向、非常友好的导航，不仅能让用户浏览网页时来去自如，还对搜索引擎优化SEO非常友好，因此，wordpress网站善于利用面包屑导航会起到百利而无一害的效果。

相对wordpress面包屑导航制作的方法有三种，可以直接将面包屑导航插入到代码中、也可以利用functions.php全局定义面包屑导航然后再进行调用，为了简便省去代码的麻烦，当然还可以使用Breadcrumb NavXT插件制作wordpress面包屑导航。具体方法如下：

一、直接在相关页面添加面包屑导航代码

<div class="mbx-dh">
当前位置：<a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a> »
<?php
if( is_single() ){
$categorys = get_the_category();
$category = $categorys[0];
echo( get_category_parents($category->term_id,true,' » ') );
the_title();
} elseif ( is_page() ){
the_title();
} elseif ( is_category() ){
single_cat_title();
} elseif ( is_tag() ){
single_tag_title();
} elseif ( is_day() ){
the_time('Y年Fj日');
} elseif ( is_month() ){
the_time('Y年F');
} elseif ( is_year() ){
the_time('Y年');
} elseif ( is_search() ){
echo $s.' 的搜索结果';
}
?>
</div>

二、利用functions.php全局定义再调用面包屑导航

//面包屑导航
function mbw_breadcrumbs() {
$delimiter = '»';
$name = '您的位置：'.'<a href="'.home_url().'">首页</a>'; //text for the 'Home' link
$currentBefore = '<span>';
$currentAfter = '</span>';
if ( !is_home() && !is_front_page() || is_paged() ) {
echo '<div id="crumbs" class="breadcrumbs">';
global $post;
$home = get_bloginfo('url');
echo ” . $name . ' ' . $delimiter . ' ';
if ( is_category() ) {
global $wp_query;
$cat_obj = $wp_query->get_queried_object();
$thisCat = $cat_obj->term_id;
$thisCat = get_category($thisCat);
$parentCat = get_category($thisCat->parent);
if ($thisCat->parent != 0) echo(get_category_parents($parentCat, TRUE, ' ' . $delimiter . ' '));
echo $currentBefore . ”;
single_cat_title();
echo ” . $currentAfter;
} elseif ( is_day() ) {
echo ” . get_the_time('Y') . ' ' . $delimiter . ' ';
echo ” . get_the_time('F') . ' ' . $delimiter . ' ';
echo $currentBefore . get_the_time('d') . $currentAfter;
} elseif ( is_month() ) {
echo ” . get_the_time('Y') . ' ' . $delimiter . ' ';
echo $currentBefore . get_the_time('F') . $currentAfter;
} elseif ( is_year() ) {
echo $currentBefore . get_the_time('Y') . $currentAfter;
} elseif ( is_single() ) {
$cat = get_the_category(); $cat = $cat[0];
echo get_category_parents($cat, TRUE, ' ' . $delimiter . ' ');
echo $currentBefore;
the_title();
echo $currentAfter;
} elseif ( is_page() && !$post->post_parent ) {
echo $currentBefore;
the_title();
echo $currentAfter;
} elseif ( is_page() && $post->post_parent ) {
$parent_id = $post->post_parent;
$breadcrumbs = array();
while ($parent_id) {
$page = get_page($parent_id);
$breadcrumbs[] = ” . get_the_title($page->ID) . ”;
$parent_id = $page->post_parent;
}
$breadcrumbs = array_reverse($breadcrumbs);
foreach ($breadcrumbs as $crumb) echo $crumb . ' ' . $delimiter . ' ';
echo $currentBefore;
the_title();
echo $currentAfter;
} elseif ( is_search() ) {
echo $currentBefore . ” . get_search_query() . ” . $currentAfter;
} elseif ( is_tag() ) {
echo $currentBefore . ”;
single_tag_title();
echo ” . $currentAfter;
} elseif ( is_author() ) {
global $author;
$userdata = get_userdata($author);
echo $currentBefore . $userdata->display_name . $currentAfter;
} elseif ( is_404() ) {
echo $currentBefore . '错误 404' . $currentAfter;
}
if ( get_query_var('paged') ) {
if ( is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author() ) echo ' (';
echo __('Page') . ' ' . get_query_var('paged');
if ( is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author() ) echo ')';
}
echo '</div>';
}
}

调用方法：

<?php if (function_exists('mbw_breadcrumbs')) mbw_breadcrumbs(); ?>

如果想美化下面包屑导航，可以添加上以下css样式即可。

.mbx-dh {padding: 5px 10px;}

三、利用wordpress的Breadcrumb NavXT插件

安装好该Breadcrumb NavXT插件后，就可以用以下代码调用了：

<div class="breadcrumbs">
<?php if(function_exists('bcn_display')) { bcn_display(); } ?>
</div>

这个插件还可以设置，进入设置选项后，共有general、current item、posts&pages、categories、tags、date archives、miscellaneous等相关设置。

1.general设置（一般设置）
可以设置面包屑导航的分割符（Breadcrumb Separator）
Breadcrumb Max Title Length——设置面包屑导航标题的最大长度
Home Breadcrumb——主页的标题
Place the home breadcrumb in the trail：如果打勾的话表示在面包屑导航中显示主页，不打勾的话则不显示。
Home Title——填入主页的显示标题，默认是blog，你可以修改为你想要的标题。
Home Prefix——（主页前缀）可以在主页前面添加说明文字。
Home Suffix——（主页后缀）在主页后面添加说明文字
Home Anchor、Blog Anchor一般不需要修改，插件会自动生成链接。
2.current item设置
Link Current Item表示是否设置当前页面链接
Current Item Prefix和Current Item Suffix ：当前页的前后缀
current Item Anchor默认就可以了
Paged Breadcrumb、Paged Prefix、Paged Suffix是用来设置页面的面包屑导航，设置方法同上。
3.posts&pages设置
Post Prefix、Post Suffix、Post Anchor、Page Prefix、Page Suffix、Attachment Prefix等选项的基本上设置方法同上，但是，Post Taxonomy Display如果勾选的话表示在按照主页-分类-子分类-文章等形式显示出来，如果不勾选的话表示只分按照主页-文章显示出来。Post Taxonomy表示按照什么来进行导航，有分类目录和标签可以选择。
4.categories设置
基本上设置方法同上
5.date archives这里可以修改文章日期分类面包屑导航显示样式。
6.miscellaneous选项里提供了Author、Search、404页面的面包屑导航设置。

阅读全文c

二呆

访问

赏

向站长打赏×