wordpress制作自定義菜單的方法
要想實現(xiàn)自定義菜單,需要用到的函數(shù)是wp_nav_menu(),給這個函數(shù)傳遞一些參數(shù)就可以輸出自定義菜單菜單,下面簡單講講如何使用使用這個函數(shù)。
首先,在主題目錄下的functions.php的 <?php ….. ?> 之間,添加以下菜單注冊代碼,這樣你就可以在主題文件中使用wp_nav_menu函數(shù)了:
// This theme uses wp_nav_menu() in one location.
register_nav_menus();
接著我們在主題的導(dǎo)航欄處調(diào)用wp_nav_menu(),即可輸出導(dǎo)航菜單HTML代碼:
<?php
// 列出頂部導(dǎo)航菜單,菜單名稱為mymenu,只列出一級菜單
wp_nav_menu( array( 'menu' => 'mymenu', 'depth' => 1) );
?>
以上代碼輸出的HTML代碼形式如下:
<div class="menu-menu-container">
<ul class="menu" id="menu-menu">
<li class="..." id="menu-item-1"><a href="...">首頁</a></li>
<li class="..." id="menu-item-2"><a href="...">分類A</a></li>
...
</ul>
</div>
這里列出的 li 項為你在后臺 – 外觀 – 菜單添加的欄目,如果你還沒有在后臺添加菜單,導(dǎo)航欄將列出所有頁面。另外,wp_nav_menu會為每個 li 添加class,不同的class標記這個菜單項的屬性,如當前打開的是某個文章頁面,分類A 就是這篇文章所屬的分類,那么 分類A 所在的 li 將會如下代碼所示:
<li class="menu-item menu-item-type-taxonomy current-post-ancestor current-menu-parent current-post-parent menu-item-5" id="menu-item-2"><a href="...">分類A</a></li>
如果是在首頁,那么首頁的菜單項的 li 可能會如下所示:
<li class="menu-item menu-item-type-custom current-menu-item current_page_item menu-item-home menu-item-4" id="menu-item-1"><a href="..">首頁</a></li>
從這些class的名稱就知道它們的作用,通過給這些class添加css屬性,可以達到如高亮當前導(dǎo)航菜單的目的,如將當前菜單鏈接定義成紅色:
.current-post-ancestor a, .current-menu-parent a, .current-menu-item a, .current_page_item a {
color: red;
}
好了,WordPress 3.0的自定義菜單的調(diào)用就是這么簡單。wp_nav_menu還有很多參數(shù),如自定義 ul 節(jié)點、ul 父節(jié)點的id和class的參數(shù)等等,詳情可以參考文檔:官方文檔 | 中文文檔
使用分類和頁面作為導(dǎo)航欄
在 WordPress 3.0 之前,大部分WordPress主題都是拿頁面作為導(dǎo)航欄的,導(dǎo)航中只能添加頁面,顯得不夠自由。我剛用WordPress 2.7的時候,就為此問題煩惱,最后翻了文檔,查了一些資料,實現(xiàn)了在導(dǎo)航中添加分類,詳情請看我之前寫的文章:WordPress 分類做導(dǎo)航欄,并高亮顯示
非常規(guī)導(dǎo)航欄的制作
以上提到的兩種方式,都是使用WordPress自帶的函數(shù)來實現(xiàn),他們輸入的HTML代碼也都是限定好的,就是使用 ul li 的形式來構(gòu)建菜單列表:如:
<ul>
<li class="..">...</li>
<li class="..">...</li>
</ul>
如果主題的前端代碼不是你寫的,而且導(dǎo)航欄的代碼寫得很龜毛,這根本不是上面的WordPress標準的 ul 導(dǎo)航欄形式,如下面的代碼:
<dl>
<dt><strong>標題</strong></dt>
<dd><a target="_blank" title="#" href="#">菜單A</a></dd>
<dd><a target="_blank" title="#" href="#">菜單B</a></dd>
</dl>
上一篇:WordPress偽靜態(tài)和中文標簽支持配置方法
欄 目:WordPress
下一篇:wordpress導(dǎo)航如何設(shè)置具體該怎么操作
本文標題:wordpress制作自定義菜單的方法
本文地址:http://mengdiqiu.com.cn/a1/WordPress/12801.html
您可能感興趣的文章
- 05-31wordpress修改后臺登錄地址教程
- 05-31WordPress自定義用戶頭像實現(xiàn)代碼
- 01-11修改wordpress上傳臨時目錄解決wordpress無法安裝插件包的方法
- 01-11WordPress增加文章排序方式
- 01-11自己做wordpress評論插件修改評論樣式(兩步美化評論內(nèi)容)
- 01-11wordpress get
- 01-11wordpress獲取文章評論數(shù)過濾掉作者代碼分享
- 01-11在wordpress文章末尾添加內(nèi)容的簡單方法
- 01-11不用wordpress插件顯示文章瀏覽統(tǒng)計功能代碼修改(原理分析)
- 01-11wordpress dynamic


閱讀排行
本欄相關(guān)
- 05-31wordpress修改后臺登錄地址教程
- 05-31WordPress自定義用戶頭像實現(xiàn)代碼
- 01-11WordPress增加文章排序方式
- 01-11修改wordpress上傳臨時目錄解決wordpre
- 01-11wordpress get
- 01-11自己做wordpress評論插件修改評論樣式
- 01-11在wordpress文章末尾添加內(nèi)容的簡單方
- 01-11wordpress獲取文章評論數(shù)過濾掉作者代
- 01-11wordpress dynamic
- 01-11不用wordpress插件顯示文章瀏覽統(tǒng)計功
隨機閱讀
- 01-10delphi制作wav文件的方法
- 01-10C#中split用法實例總結(jié)
- 08-05dedecms(織夢)副欄目數(shù)量限制代碼修改
- 04-02jquery與jsp,用jquery
- 01-11Mac OSX 打開原生自帶讀寫NTFS功能(圖文
- 01-11ajax實現(xiàn)頁面的局部加載
- 08-05織夢dedecms什么時候用欄目交叉功能?
- 01-10SublimeText編譯C開發(fā)環(huán)境設(shè)置
- 01-10使用C語言求解撲克牌的順子及n個骰子
- 08-05DEDE織夢data目錄下的sessions文件夾有什