網(wǎng)站如何添加導(dǎo)航菜單？只需wp_list_categories就可搞定

前面的章節(jié)中，我們介紹了基于page頁面的wordpress網(wǎng)站導(dǎo)航菜單的函數(shù)——wp_list_pages()。今天，我們?cè)賮斫榻B第二種導(dǎo)航菜單的方式——基于wordpress網(wǎng)站的文章分類目錄的導(dǎo)航菜單，這種wordpress導(dǎo)航菜單是通過wp_list_categories()函數(shù)來實(shí)現(xiàn)的，它可以將wordpress網(wǎng)站的分類目錄展示在wordpress網(wǎng)站前臺(tái)的導(dǎo)航菜單中。下面，我們一起來看看如何使用wp_list_categories()來創(chuàng)建wordpress網(wǎng)站導(dǎo)航菜單吧。

一、wp_list_categories()函數(shù)用法。

wp_list_categories( string|array $args = '' );

這個(gè)函數(shù)有一個(gè)參數(shù)，它的參數(shù)既可以是字符串類型的數(shù)據(jù)，也可以是一個(gè)數(shù)組類型的數(shù)據(jù)，這點(diǎn)跟wp_list_pages()函數(shù)類似。

二、wp_list_categories()函數(shù)的參數(shù)詳解。

$args = array('show_option_all' => '',//是否列出分類鏈接；'orderby' => 'name',//按名稱排列；'order' => 'ASC',//分類目錄的排序。升、降序；'style' => 'list',//是否用列表（ul>li）標(biāo)簽；'show_count' => 0,//是否顯示文章數(shù)量；'hide_empty' => 1,//是否顯示沒有文章的分類；'use_desc_for_title' => 1,//是否顯示分類描述；'child_of' => 0,//是否限制子分類；'exclude' => '',//排除分類的ID，多個(gè)用',（英文逗號(hào)）'分隔；'exclude_tree' => '',//排除分類樹，即父分類及其下的子分類；'include' => '',//包括哪些分類的ID；'title_li' => 'Categories',//導(dǎo)航菜單的列表標(biāo)題名稱；'show_option_none' =>'No categories',//網(wǎng)站沒有分類時(shí)顯示的標(biāo)題；'number' => null,//顯示分類的數(shù)量；'echo' => 1,//是否打印到前臺(tái)頁面顯示，1顯示，0不顯示而是返回字符串；'hierarchical' => true,//是否將子、父分類分級(jí)；'depth' => 0,//層級(jí)限制；'current_category' => 0,//指定分類ID，在前臺(tái)頁面鏈接添加current-cat的CSS類，方便修改樣式；'pad_counts' => 0,//計(jì)算包括子分類的鏈接或文章數(shù)；'taxonomy' => 'category',//使用的文章分類類型；'walker' => null//生成列表 Walker 類；);

以上，我們列舉了wp_list_categories()函數(shù)的主要的參數(shù)，以及它們都代表什么。其實(shí)，在我們的實(shí)際使用中，并不是每一個(gè)參數(shù)都會(huì)用到，一般情況下，我們只會(huì)使用其中的某幾個(gè)。我們會(huì)在下面的案例中具體解說。

三、wp_list_categories()案例。

案例1：分類目錄導(dǎo)航列表按層級(jí)來排列。

$menu = array( 'depth' =>0, 'title_li'=>'', 'echo'=>1,);wp_list_categories($menu);

如下圖，子分類會(huì)按層級(jí)的關(guān)系，縮進(jìn)去2格；并且沒有顯示列表的標(biāo)題。

案例2：只顯示頂級(jí)分類，不顯示子分類，并顯示列表標(biāo)題。

$menu = array( 'depth' =>1, 'title_li'=>'這是分類列表的標(biāo)題', 'echo'=>1,);wp_list_categories($menu);

這里，我們把depth參數(shù)的值設(shè)成1，就表示只顯示一級(jí)分類目錄，子分類就不會(huì)顯示；如果設(shè)成2，就會(huì)顯示2級(jí)分類，子分類就會(huì)顯示；如果設(shè)成3，就會(huì)顯示3級(jí)分類，子分類和子分類的子分類都會(huì)顯示出來；以此類推。設(shè)成0，表示所有分類都顯示，并且按層級(jí)顯示。另外，我們這里也添加了分類菜單的列表標(biāo)題，這樣，如果在側(cè)邊伴，這個(gè)標(biāo)題還是非常管用的；如果是頂部導(dǎo)航菜單，這個(gè)標(biāo)題還是省略比較好。效果如下圖：

案例3：排除某些分類。也就是不讓某些分類顯示出來。代碼如下：

$menu = array( 'depth' =>1, 'title_li'=>'', 'echo'=>1, 'exclude' => '52,81,103',);wp_list_categories($menu);

這里，我們?cè)O(shè)置了排除3個(gè)分類，它們的ID號(hào)分別是：52（親子）,81（養(yǎng)生）,103（家居）。這樣，我們?cè)趙ordpress網(wǎng)站的前臺(tái)頁面的導(dǎo)航菜單中就看不到這幾個(gè)分類目錄。如下圖，可以對(duì)比一下上圖：

?好了，關(guān)于wordpress網(wǎng)站分類目錄導(dǎo)航菜單函數(shù)wp_list_categories()，這里我們就只舉這幾個(gè)案例，在實(shí)際應(yīng)用中，我們可以根據(jù)不同的需求，來設(shè)置不同的參數(shù)，要做到靈活多變。這些參數(shù)還是很好理解的，只需多練習(xí)，就可輕松掌握。

CSS

#goTopBtn, #goBottom, #shangy, #xiay, #menuPage, #lPage, #fPage{
width: 18px;
line-height: 1.2;
padding: 5px 0;
font-size: 12px;
text-align: center;
position: fixed;
right: 10px;
cursor: pointer;
filter: Alpha(opacity=30);
opacity=.3;
font-weight:bold;
}
#goTopBtn, #goBottom, #menuPage, #lPage, #fPage{
background-color:#999;
color:#000;
}
#shangy, #xiay, #lPage, #fPage{
background-color: #bbb;
color: #000;
}
#fPage{
bottom: 236px;
height:42px;
white-space:nowrap;
overflow:hidden;
//writing-mode:tb-rl;
}
#menuPage{
bottom: 198px;
height:27px;
white-space:nowrap;
overflow:hidden;
}
#lPage{
bottom: 145px;
height:42px;
white-space:nowrap;
overflow:hidden;
}
#goTopBtn{
bottom: 105px;
}
#goBottom {
bottom: 30px;
}
#shangy {
bottom: 80px;
}
#xiay {
bottom: 55px;
}
#goTopBtn:hover, #goBottom:hover, #shangy:hover, #xiay:hover, #menuPage:hover, #lPage:hover, #fPage:hover{
background-color:#ccc;
border:#ccc 0px solid;
}
#goTopBtn a:link, #goBottom a:link, #xiay a:link, #shangy a:link, #menuPage a:link, #menuPage a:visited, #lPage a:link, #fPage a:link, #lPage a:visited, #fPage a:visited {
text-decoration: none;
color:white;
}

2 HTML

<div id="fPage"><a id="fPagea" href="javascript：void(null)" target="_self">上<br />一<br />頁</a></div>
<div id="menuPage"><a href="index.html" target="_self">目<br />錄</a></div>
<div id="lPage"><a id="LPagea" href="javascript：void(null)" target="_self">下<br />一<br />頁</a></div>
<div style="display:none" id="goTopBtn"><a target="_self" style="color:#fff;">&and;</a></div>
<div style="display:none" id="shangy">
<a onclick="shangy()" target="_self" style="color:#fff;">↑</a></div>
<div id="xiay">
<a onclick="xiay()" target="_self" style="color:#fff;">↓</a></div>
<div id="goBottom">
<a onclick="downn()" target="_self" style="color:#fff;">&or;</a></div>

3 JS

<script type=text/javascript>
goTopEx();
function xiay(){
window.scrollBy(0,window.innerHeight-10);
}
function shangy(){
window.scrollBy(0,-window.innerHeight+10);
}
var obj3=document.getElementById("xiay");
var obj4=document.getElementById("goBottom");
function getHeight(){
if(browser4=="ch"){
//谷歌瀏覽器
return document.body.clientHeight;
}else{
//IE、firefox等瀏覽器
return document.documentElement.clientHeight;
}
}
getHeight()<window.innerHeight+50?obj3.style.display="none":obj3.style.display="";
getHeight()<window.innerHeight+50?obj4.style.display="none":obj4.style.display="";
if(browser4!="ch"){//firefox需要嘗一下才顯示向下圖標(biāo)
xiay();
shangy();
}
//上一頁、下一頁按鈕，需要文件名是數(shù)字
var strUrl=window.location.href;
var arrUrl=strUrl.split("/");
var thispage=arrUrl[arrUrl.length-1];
var thispage2=thispage.split(".");
var thispage3=thispage2[thispage2.length-2];
if(thispage3 == 1){
var obj5=document.getElementById("fPage");
obj5.style.display="none"
}else{
var fpage = thispage3 - 1;
fpage = fpage +".html"
document.getElementById("fPagea").href=fpage;
}
if(thispage3 == 100){
var obj6=document.getElementById("lPage");
obj6.style.display="none"
}else{
var fpage = thispage3 - 1;
fpage = fpage +".html"
document.getElementById("fPagea").href=fpage;
}
</script>

當(dāng)將鼠標(biāo)停留在“上一面”按鈕處時(shí)，網(wǎng)頁效果如下：

-End-

var topBtn = document.getElementById('top');
// 獲取視窗高度
var winHeight = document.documentElement.clientHeight;
window.onscroll = function () {
    // 獲取頁面向上滾動(dòng)距離，chrome瀏覽器識(shí)別document.body.scrollTop，而火狐識(shí)別document.documentElement.scrollTop，這里做了兼容處理
    var toTop = document.documentElement.scrollTop || document.body.scrollTop;
    // 如果滾動(dòng)超過一屏，返回頂部按鈕出現(xiàn)，反之隱藏
    if(toTop>=winHeight){
        topBtn.style.display = 'block';
    }else {
        topBtn.style.display = 'none';
    }
}
topBtn.onclick=function () {
    var timer = setInterval(function () {
        var toTop = document.documentElement.scrollTop || document.body.scrollTop;
        // 判斷是否到達(dá)頂部，到達(dá)頂部停止?jié)L動(dòng)，沒到達(dá)頂部繼續(xù)滾動(dòng)
        if(toTop == 0){
            clearInterval(timer);
        }else {
            // 設(shè)置滾動(dòng)速度
            var speed = Math.ceil(toTop/5);
            // 頁面向上滾動(dòng)
            document.documentElement.scrollTop=document.body.scrollTop=toTop-speed;
        }
    },50);
}

在線咨詢

上一篇：HTML頭部 <head>
下一篇：辦公小技巧：全部亮相讓Excel單元格完全顯示文本

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商