整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          網站如何添加導航菜單?只需wp_list_categories就可搞定

          前面的章節中,我們介紹了基于page頁面的wordpress網站導航菜單的函數——wp_list_pages()。今天,我們再來介紹第二種導航菜單的方式——基于wordpress網站的文章分類目錄的導航菜單,這種wordpress導航菜單是通過wp_list_categories()函數來實現的,它可以將wordpress網站的分類目錄展示在wordpress網站前臺的導航菜單中。下面,我們一起來看看如何使用wp_list_categories()來創建wordpress網站導航菜單吧。

          一、wp_list_categories()函數用法。


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

          這個函數有一個參數,它的參數既可以是字符串類型的數據,也可以是一個數組類型的數據,這點跟wp_list_pages()函數類似。

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


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

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

          三、wp_list_categories()案例。

          案例1:分類目錄導航列表按層級來排列。


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

          如下圖,子分類會按層級的關系,縮進去2格;并且沒有顯示列表的標題。

          案例2:只顯示頂級分類,不顯示子分類,并顯示列表標題。


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

          這里,我們把depth參數的值設成1,就表示只顯示一級分類目錄,子分類就不會顯示;如果設成2,就會顯示2級分類,子分類就會顯示;如果設成3,就會顯示3級分類,子分類和子分類的子分類都會顯示出來;以此類推。設成0,表示所有分類都顯示,并且按層級顯示。另外,我們這里也添加了分類菜單的列表標題,這樣,如果在側邊伴,這個標題還是非常管用的;如果是頂部導航菜單,這個標題還是省略比較好。效果如下圖:

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


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

          這里,我們設置了排除3個分類,它們的ID號分別是:52(親子),81(養生),103(家居)。這樣,我們在wordpress網站的前臺頁面的導航菜單中就看不到這幾個分類目錄。如下圖,可以對比一下上圖:

          ?好了,關于wordpress網站分類目錄導航菜單函數wp_list_categories(),這里我們就只舉這幾個案例,在實際應用中,我們可以根據不同的需求,來設置不同的參數,要做到靈活多變。這些參數還是很好理解的,只需多練習,就可輕松掌握。

          家好,今天給大家介紹一款,帶圖標的垂直導航菜單的html頁面源碼(圖1)。送給大家哦,獲取方式在本文末尾。

          圖1

          點擊每個按鈕時,都有切換特效,并顯示按鈕的說明,看起來非常不錯(圖2)

          圖2

          代碼完整,需要的朋友可以下載(圖3)

          圖3

          本源碼編碼:10148,需要的朋友,點擊下面的鏈接后,搜索10148,即可獲取。

          就愛UI - 分享UI設計的點點滴滴

          • 個菜單看上去很簡單,但在做的時候,有幾個要點卻是在網頁制作中常見到的,希望和大家一起學習一下,更多的文章請關注我的頭條號-落筆承冰。

          一、這是很傳統的html菜單結構,遍布百度上的各種各樣的網頁教程。

          二、接下來,我們去掉小圓點,再讓菜單列表橫著顯示。

          三、白皙皙的菜單沒有顏色,不好看,于是我們加了個背景色。可刷新一下,顏色不出來。

          四、只有給ul加 display: inline-block;才能把它的父節點topmenu撐開,可惜了,黑漆漆的一片。

          五、我們把字變成白色,會好看很多。

          六、可是各項還是擠在一起,加個padding吧。

          七、各項分開了,但還有一些糾結的地方,就是菜單在瀏覽器中左右不到邊,頂部也有距離,好吧,這是body的原因,它自帶margin,我還是把它的margin去掉。

          八、 可是菜單還是很肥大,其實ul也自帶了margin和padding,我們也一起去掉。

          九、在右邊加白色邊框線,讓菜單各項隔開。

          十、你會發現白色的邊框居然達不到菜單的底部,因為是topmenu是被ul撐開的,被掌開的盒子多少底部或是邊緣都有這些問題,通過font-size為0可以把這種情況去掉。

          十一、鼠標經過時,菜單項變色,這樣會好看一點。

          十二、看上去好像沒有什么問題了,但你會發現,鏈接只有在點到字的時候才能生效,而點中項不中字是沒有效果的,之前我們做錯了一步,現在改過來。刪除掉li里的padding,應該在a標簽里面加。

          十三、經過這個操作,鼠標不用經過文字都有鏈接了,可是菜單卻瘦下來了,這是因為a標簽不是block不受padding控制,我們給它加個block吧。

          總結:本文內含基本知識很多,比如body自帶margin外部距離,ul自帶padding和margin,a標簽是一個inline等等這些基本知識,多多積累,慢慢就能掌握了,不用刻意去背。


          主站蜘蛛池模板: 亚洲A∨精品一区二区三区| AV无码精品一区二区三区宅噜噜| 精品一区二区三区四区在线| 精品国产AV无码一区二区三区| 在线观看日本亚洲一区| 精品一区二区三区视频| 国产激情一区二区三区| 亚洲一区二区三区自拍公司| 日本不卡一区二区视频a| 精品无码一区二区三区电影| 濑亚美莉在线视频一区| 一区二区三区免费精品视频| 无码人妻一区二区三区免费n鬼沢| 久久青草精品一区二区三区| 无码中文字幕乱码一区 | 亚洲色偷精品一区二区三区| 国模无码视频一区二区三区| 中文字幕日韩一区二区三区不| 日韩一区精品视频一区二区| 日韩精品久久一区二区三区| 国产一区二区三区高清在线观看| 精品乱码一区二区三区四区| 免费萌白酱国产一区二区| 久久精品一区二区三区四区| 人妻夜夜爽天天爽一区| 免费精品一区二区三区第35| 国产av一区最新精品| 国产亚洲福利精品一区| 国产一区二区三区小说| 国产另类TS人妖一区二区| 99国产精品欧美一区二区三区| 日韩综合无码一区二区| 成人区人妻精品一区二区三区| 亚洲综合色自拍一区| 日本精品一区二区三区在线视频| 老熟妇仑乱视频一区二区| 精品国产一区二区22| 日韩一区二区三区不卡视频| 人妻无码第一区二区三区| 国产美女视频一区| 精品无码国产AV一区二区三区|