無作為
不僅僅是一種態度!

红运快三走势图:WordPress添加面包屑導航的三種方法

红运快三高手计划 www.syvwfz.com.cn 如何給網站添加面包屑導航呢?這幾天我一直想給無作為加個面包屑導航,不僅僅方便大家觀看,而且還有利于網站的優化!

什么是面包屑導航

面包屑通常出現在頁面頂部,一般會位于標題或頁頭的下方。它提供給用戶返回之前任何一個頁面的鏈接(這些鏈接也是能到達當前頁面的路徑),在層級架構中通常是這個頁面的父級頁面。

也可以這樣理解,面包屑提供給用戶回溯到網站首頁或入口頁面的一條快速路徑,它們絕大部分看起來就像這樣:首頁→分類頁→次級分類頁。如下圖所示:

添加面包屑導航的方法
方法一:直接在相關頁面添加代碼

把以下代碼直接添加到你想出現面包屑導航的位置,比如 header.php 里面,也可以放在 single.php 頁面的導航標題上面,你有可能需要添加的頁面可能有:archive.php、archives.php、links.php、page.php。

<div class="mbx-dh">
當前位置:<a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a> &raquo;
<?php
if( is_single() ){
$categorys = get_the_category();
$category = $categorys[0];
echo( get_category_parents($category->term_id,true,' &raquo; ') );
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 調用

首先把以下代碼添加到主題的 functions.php 文件中

function dimox_breadcrumbs() {
 
 $delimiter = '&raquo;';
 $name = 'Home'; //text for the 'Home' link
 $currentBefore = '<span>';
 $currentAfter = '</span>';
 
 if ( !is_home() && !is_front_page() || is_paged() ) {
 
 echo '<div id="crumbs">';
 
 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 . 'Archive by category &#39;';
 single_cat_title();
 echo '&#39;' . $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 . 'Search results for &#39;' . get_search_query() . '&#39;' . $currentAfter;
 
 } elseif ( is_tag() ) {
 echo $currentBefore . 'Posts tagged &#39;';
 single_tag_title();
 echo '&#39;' . $currentAfter;
 
 } elseif ( is_author() ) {
 global $author;
 $userdata = get_userdata($author);
 echo $currentBefore . 'Articles posted by ' . $userdata->display_name . $currentAfter;
 
 } elseif ( is_404() ) {
 echo $currentBefore . 'Error 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>';
 
 }
}

最后在適當的地方(如方法一中提到的幾個文件)添加以下代碼調用

<div class="mbx-dh">
<?php if (function_exists('dimox_breadcrumbs')) dimox_breadcrumbs(); ?> 
</div>

如果想要美化下顯示方式,直接通過添加 css 即可。

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

方法三:使用Breadcrumb NavXT插件

在后臺,添加新插件,搜索“Breadcrumb NavXT” 安裝、激活。然后在header.php中合適的地方增加代碼:

<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頁面的面包屑導航設置。

以上三種方法是關于WordPress添加面包屑導航的幾種常規方法,希望能幫助到大家!
本站用的事第二種,喜歡的就添加吧!


教程更新

補充一個更加美觀的面包屑導航的代碼方法:

一、修改functions.php
首先在自己的主題文件中找到functions.php,并在文件中添加下面代碼。DUX主題修改functions-theme.php文件。

//面包屑導航生成函數
function qgg_breadcrumbs(){
if( !is_single() ) return false;

$categorys = get_the_category();
$category = $categorys[0]; 
return '當前位置:<a href="'.get_bloginfo('url').'">'.get_bloginfo('name').'</a> <small>></small> '.get_category_parents($category->term_id, true, ' <small>></small> ').get_the_title();
}

二、修改single.php
這里是把面包屑導航顯示到文章頁面,所以我們第二步是修改主題single.php文件,把下面代碼加到自己想顯示的位置即可。

<!-- 面包屑導航前端顯示代碼 -->
<div class="breadcrumbs">
 <div class="container"><?php echo qgg_breadcrumbs() ?></div>
</div>

如果是想顯示到文章內容頁面的導航欄下,請把上面代碼添加到“<?php get_header(); ?>”下即可。

三、添加樣式代碼
完成上面兩個步驟后,清理下瀏覽器緩存,我們就可以看到正常顯示面包屑導航了,但是不美觀。所以我們還需進行添加顯示樣式代碼步驟。一般得人主題是把下面這段代碼添加到style.css文件,DUX主題是添加到main.css文件。

完成上面兩個步驟后,清理下瀏覽器緩存,我們就可以看到正常顯示面包屑導航了,但是不美觀。所以我們還需進行添加顯示樣式代碼步驟。一般得人主題是把下面這段代碼添加到style.css文件,DUX主題是添加到main.css文件。

.breadcrumbs{padding: 15px 0;font-size: 12px;line-height: 1;text-align: left;background-color: #fff;margin-bottom: 15px;margin-top: -15px;border-bottom: 1px solid #EBEBEB; box-shadow: 0 1px 3px rgba(0,0,0,.04);color: #999;}
.breadcrumbs small{font-size: 12px;font-family: serif;color: #bbb;margin: 0 2px;font-weight: bold;}
.breadcrumbs a{color: #999;}
.breadcrumbs a:hover{color: #666;}
@media (max-width:640px){
.breadcrumbs{margin-top: 1px;margin-bottom: 0;padding: 10px 15px;border-bottom: none;margin-bottom: 1px;}
}
歷史上的今天:
贊(14) 打賞
所有免費資源、福利、電影、破解軟件未經允許不得轉載:红运快三高手计划 www.syvwfz.com.cn红运快三高手计划 » WordPress添加面包屑導航的三種方法

留下評論 搶沙發

無作為-不僅僅是一種態度

登錄/注冊廣告合作

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

微信掃一掃打賞