九色国产,午夜在线视频,新黄色网址,九九色综合,天天做夜夜做久久做狠狠,天天躁夜夜躁狠狠躁2021a,久久不卡一区二区三区

打開APP
userphoto
未登錄

開通VIP,暢享免費(fèi)電子書等14項(xiàng)超值服

開通VIP
WordPress 分類做導(dǎo)航欄,并高亮顯示

      幾乎每個(gè)網(wǎng)站都有一個(gè)導(dǎo)航欄,導(dǎo)航欄一般將網(wǎng)站的內(nèi)容分成幾個(gè)類目,然后在導(dǎo)航欄中顯示出來(lái),以方便讀者查閱相關(guān)內(nèi)容。WordPress博客也提供了此功能,但是不同的博客主題在導(dǎo)航欄的設(shè)置方面也不盡相同,現(xiàn)在大多數(shù)主題是以頁(yè)面(page)作為導(dǎo)航欄類目的,但是這種方式似乎達(dá)不到"導(dǎo)航"的目的,個(gè)人覺得用分類(category)和頁(yè)面(Page一起)做為導(dǎo)航欄更合適。本文將指導(dǎo)你在WordPress中,如何設(shè)計(jì)一個(gè)用分類和頁(yè)面作為菜單的導(dǎo)航欄,并高亮顯示當(dāng)前所在的欄目。

     為了讓讀者了解當(dāng)前所在的文章分類,網(wǎng)頁(yè)設(shè)計(jì)師常常用一些比較突出的方式顯示導(dǎo)航欄中的當(dāng)前欄目,抬頭看一下本文的上方,導(dǎo)航欄中的"教程指南"項(xiàng)目就被高亮顯示了。

     其實(shí)稍微懂一點(diǎn)網(wǎng)頁(yè)設(shè)計(jì)的朋友都知道,這可以通過CSS來(lái)實(shí)現(xiàn),但關(guān)鍵是如何確定該文章屬于哪個(gè)分類,WordPress已經(jīng)提供了現(xiàn)成的方法,更簡(jiǎn)單,調(diào)用幾個(gè)函數(shù)就可以實(shí)現(xiàn),而且不需要太多額外的代碼。下面我們一步一步地來(lái)實(shí)現(xiàn)我們的目的。

     WordPress主題都提供了導(dǎo)航欄,一般導(dǎo)航欄的代碼在header.php這個(gè)文件中,找到相應(yīng)的導(dǎo)航欄代碼(如果你的導(dǎo)航欄現(xiàn)在顯示的是頁(yè)面列表,你只需找到 wp_list_pages 就可以了 ),改成如下形式,修改完畢后在瀏覽器里看看效果吧!注意:本文不講解導(dǎo)航欄的樣式設(shè)計(jì),可根據(jù)需要自己定義相關(guān)的CSS和HTML。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<ul>
<li<?php if (is_home()) { echo ' class="current-cat"';} ?>><a title="Home" href="/">博客主頁(yè)</a></li>
<?php
$currentcategory = '';

// 以下這行代碼用于在導(dǎo)航欄添加分類列表,
// 如果你不想添加分類到導(dǎo)航中,
// 請(qǐng)刪除 6 - 14 行代碼
if  (is_category() || is_single()) {
    $catsy = get_the_category();
    $myCat = $catsy[0]->cat_ID;
    $currentcategory = '&current_category='.$myCat;
}
wp_list_categories('depth=1&title_li=&show_count=0&hide_empty=0&child_of=0'.$currentcategory);

// 以下這行代碼用于在導(dǎo)航欄添加頁(yè)面列表
// 如果你不想添加頁(yè)面到導(dǎo)航中,
// 請(qǐng)刪除16 - 19行代碼
wp_list_pages('depth=1&title_li=&sort_column=menu_order');

?>
</ul>

     上面那段代碼是通過無(wú)序列表的形式來(lái)顯示導(dǎo)航欄的,第一個(gè) <li> 顯示的是博客主頁(yè),如果當(dāng)前所在是主頁(yè),則高亮顯示"博客主頁(yè)",高亮顯示則是通過class="current-cat"樣式來(lái)定義的,這個(gè)可以根據(jù)自己的需要定義。上面代碼中通過調(diào)用 wp_list_categorieswp_list_pages 這兩個(gè)函數(shù)來(lái)羅列所有的分類目錄和頁(yè)面,并且程序會(huì)自動(dòng)判斷當(dāng)前文章所在的分類,也會(huì)自動(dòng)判斷當(dāng)前分類和當(dāng)前頁(yè)面,然后將其所在的 <li> 加上 class="current-cat" 的CSS類選擇器,你只需在你主題目錄下的style.css中定義一個(gè)名為 .current-catclass,來(lái)定義高亮形式即可,如:

1
2
3
li.current-cat a {
    color:red;
}

 

<————————————–以下內(nèi)容已過時(shí)————————————–>

 

     但是上面的那段代碼也有一定的缺陷,就是進(jìn)入文章頁(yè)面后,導(dǎo)航欄就無(wú)法高亮了,訪客就不容易知道這篇文章是屬于哪個(gè)分類的了,那怎么解決呢?解決起來(lái)也比較簡(jiǎn)單,加入以上*代碼一*后,先在瀏覽器里面瀏覽你的博客,然后"查看源文件",找到導(dǎo)航欄的代碼,我的是這樣子的:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<ul>
<li><a title="Home"  href="/">博客主頁(yè)</a></li>

<li class="cat-item cat-item-1 "><a href="/category/diaries" title="生活隨感">生活隨感</a></li>

<li class="cat-item cat-item-3 "><a href="/category/encyclopedia" title="百科全書">百科全書</a></li>

<li class="cat-item cat-item-4 "><a href="/category/material" title="素材下載">素材下載</a></li>

<li class="cat-item cat-item-5 "><a href="/category/showcase" title="櫥窗展示">櫥窗展示</a></li>

<li class="cat-item cat-item-6 current-cat"><a href="/category/tutorials" title="教程指南">教程指南</a></li>

<li class="cat-item cat-item-17 "><a href="/category/freebies" title="免費(fèi)資源">免費(fèi)資源</a></li>

<li class="page_item page-item-2 "><a href="/about" title="關(guān)于露兜">關(guān)于露兜</a></li>
</ul>

我們給上面的代碼加入動(dòng)態(tài)PHP代碼:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<ul>
<li><a title="Home" <?php if (is_home()) { echo 'class="current"';} ?> href="/">博客主頁(yè)</a></li>

<li class="cat-item cat-item-1 <?php if ( (is_category('1') || in_category('1')) && !is_page() && !is_home() ) { echo 'current-cat'; } ?>"><a href="/category/diaries" title="生活隨感">生活隨感</a></li>

<li class="cat-item cat-item-3 <?php if ( (is_category('3') || in_category('3')) && !is_page() && !is_home() ) { echo 'current-cat'; } ?>"><a href="/category/encyclopedia" title="百科全書">百科全書</a></li>

<li class="cat-item cat-item-4 <?php if ( (is_category('4') || in_category('4')) && !is_page() && !is_home() ) { echo 'current-cat'; } ?>"><a href="/category/material" title="素材下載">素材下載</a></li>

<li class="cat-item cat-item-5 <?php if ( (is_category('5') || in_category('5')) && !is_page() && !is_home() ) { echo 'current-cat'; } ?>"><a href="/category/showcase" title="櫥窗展示">櫥窗展示</a></li>

<li class="cat-item cat-item-6 <?php if ( (is_category('6') || in_category('6')) && !is_page() && !is_home() ) { echo 'current-cat'; } ?>"><a href="/category/tutorials" title="教程指南">教程指南</a></li>

<li class="cat-item cat-item-17 <?php if ( (is_category('17') || in_category('17')) && !is_page() && !is_home() ) { echo 'current-cat'; } ?>"><a href="/category/freebies" title="免費(fèi)資源">免費(fèi)資源</a></li>

<li class="page_item page-item-2 <?php if ( is_page('2') && !is_category() && !is_home() ) { echo 'current-cat'; } ?>"><a href="/about" title="關(guān)于露兜">關(guān)于露兜</a></li>
</ul>

     好了,將上面的代碼改成你的內(nèi)容,替換掉header.php中的導(dǎo)航欄代碼即可。is_category()is_page()函數(shù)的使用方法可以參閱條件標(biāo)簽,is_category()括號(hào)中的數(shù)字是根據(jù)前面的 cat-item-? 來(lái)確定的,如前面的class中是cat-item-6,則寫成is_category('6')。

     如果你有一定的網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ),相信這并不是一件難事。如果遇到什么問題,可以在此發(fā)表評(píng)論,我會(huì)樂意效勞的。

訂閱 分享 回復(fù)
24
對(duì)我有幫助
本站僅提供存儲(chǔ)服務(wù),所有內(nèi)容均由用戶發(fā)布,如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請(qǐng)點(diǎn)擊舉報(bào)
打開APP,閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
為你的wordpress創(chuàng)建面包屑導(dǎo)航(代碼方式)|零點(diǎn)網(wǎng)
WordPress主題制作導(dǎo)航的N種方法
為 WordPress 添加面包屑導(dǎo)航
WordPress模板標(biāo)簽之wp list pages
WordPress 讓主題支持Widget(側(cè)邊欄小工具)功能
如何讓W(xué)ordpress模板支持Sidebar Widgets(側(cè)邊欄插件) | Digg...
更多類似文章 >>
生活服務(wù)
熱點(diǎn)新聞
分享 收藏 導(dǎo)長(zhǎng)圖 關(guān)注 下載文章
綁定賬號(hào)成功
后續(xù)可登錄賬號(hào)暢享VIP特權(quán)!
如果VIP功能使用有故障,
可點(diǎn)擊這里聯(lián)系客服!

聯(lián)系客服