雞西網站建設制作優化設計[SEO]
本頁定位
在線咨詢

WordPress菜單函數詳解

假裝紳士??1年前 (2018-09-02)2643A+A-


導航菜單是每一個WordPress主題必須的元素,如果你要制作一個WordPress主題,那就必須熟悉WordPress導航菜單注冊函數 register_nav_menus() 和 導航菜單調用函數wp_nav_menu() ,這兩個參數一般都是配合使用的。今天我們就一起來解釋一下這兩個函數,并舉例說明。

導航菜單注冊函數 register_nav_menus() 介紹

register_nav_menus() 是3.0以后用來注冊自定義菜單的函數,通過它可以很方便地給你的主題注冊一個或多個菜單,在主題的 functions.php 中添加:

register_nav_menus( array(
	'header_menu' => 'My Custom Header Menu',
	'footer_menu' => 'My Custom Footer Menu'
) );

上面的代碼注冊了兩個代碼,其中 ‘header_menu’? 和 ‘footer_menu’ 分別是這兩個菜單的“鍵key”,而后面的 ‘My Custom Header Menu’ 和 ‘My Custom Footer Menu’ 是對這個菜單的描述,會在 外觀 – 菜單 中顯示出來。下文將會圖例說明。

按照上面的結構,就可以注冊多個菜單。

wp_nav_menu() 是WordPress 3.0 以后添加的一個自定義導航菜單調用函數,可用來調用 register_nav_menus() 注冊的菜單。wp_nav_menu()的使用方法位于wp-includes/nav-menu-templates.php文件中。

可以通過?<?php wp_nav_menu( $args ); ?>?來調用菜單,其中參數?$args?的默認值如下:

<?php

$defaults = array(
'theme_location' => '',
'menu' => '',
'container' => 'div',
'container_class' => '',
'container_id' => '',
'menu_class' => 'menu',
'menu_id' => '',
'echo' => true,
'fallback_cb' => 'wp_page_menu',
'before' => '',
'after' => '',
'link_before' => '',
'link_after' => '',
'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',
'depth' => 0,
'walker' => ''
);

wp_nav_menu( $defaults );

?>

每個參數的詳細介紹如下:

  • $theme_locaton:(字符串)(可選)

默認值: None

用于在調用導航菜單時指定注冊過的某一個導航菜單名,如果沒有指定,則顯示第一個。

wp_nav_menu(array( 'theme_location' =>'primary')); //調用第一個菜單
  • $menu:(字符串)(可選)

默認值: None

使用導航菜單的名稱調用菜單,可以是 id, slug, name (按順序匹配的) 。

  • $container:(字符串)(可選)

默認值: div

ul 父節點(這里指導航菜單的容器)的標簽類型,只支持div 和 nav 標簽, 如果是其它值, ul 父節點的標簽將不會被顯示。也可以用false(container => false)去掉ul父節點標簽。

  • $container_class:(字符串)(可選)

默認值: menu-{menu slug}-container

ul 父節點的 class 屬性值。

  • $container_id:(字符串)(可選)

默認值: None

ul 父節點的 id 屬性值。

  • $menu_class:(字符串)(可選)

默認值: menu

ul 節點的 class 屬性值。

  • $menu_id:(字符串)(可選)

默認值: menu slug, 自增長的

ul 節點的 id 屬性值。

  • $echo:(布爾型)(可選)

默認值: true (直接顯示)

確定直接顯示導航菜單還是返回 HTML 片段,如果想將導航的代碼作為賦值使用,可設置為false。

  • $fallback_cb:(字符串)(可選)

默認值: wp_page_menu (顯示頁面列表作為菜單)

用于沒有在后臺設置導航時調的回調函數。

  • $before:(字符串)(可選)

默認值: None

顯示在每個菜單鏈接前的文本。

  • $after:(字符串)(可選)

默認值: None

顯示在每個菜單鏈接后的文本。

  • $link_before:(字符串)(可選)

默認值: None

顯示在每個菜單鏈接文本前的文本。

  • $link_after:(字符串)(可選)

默認值: None

顯示在每個菜單鏈接文本后的文本。

  • $items_wrap:(字符串)(可選)

默認值: None

使用字符串替換修改ul的class。

  • $depth:(整型)(可選)

默認值: 0

顯示菜單的深度, 當數值為 0 時顯示所有深度的菜單。

  • $walker:(對象型)(可選)

默認值:? new Walker_Nav_Menu

導航菜單注冊和調用示例

要想定義出靈活強大的菜單,需要我們熟悉上面介紹的 導航菜單注冊函數 register_nav_menus() 和 導航菜單調用函數wp_nav_menu() 。

1.首先我們先要激活 WordPress 3.0 以后的自定義菜單功能,也就是要注冊菜單。在主題的 functions.php文件中添加下面的代碼:

//添加導航
register_nav_menus(array(
'left-menu' => '左邊欄菜單',
'top-menu' => '頂部菜單',
));

這樣我們就注冊了 左邊欄菜單 和頂部菜單,你可以在 外觀-菜單 中查看到:

我們可以使用下面的函數調用 左邊欄菜單:

<?php
if(function_exists('wp_nav_menu')) {
wp_nav_menu(array( 'theme_location' => 'left-menu','container_id'=>'menu_left') );
}
?>

其中,’theme_location’ 后面的值 是 ‘left-menu’,就是調用前面注冊的那個 左邊欄菜單,而 ‘container_id’ 自定義為 ‘menu_left’,最終輸出的html結構如下:

<div id="menu_left" class="menu-xxx-container">
<ul class="menu">
<li><a href="http://www.0464528.live">首頁</a></li>
</ul>
</div>

也就是說,菜單使用?<div id=”menu_left”>……</div>?來包含了,接下來,你就可以根據這個 id 來寫css美化菜單的顯示效果了。

小結:只要靈活運用 導航菜單注冊函數 register_nav_menus() 和 導航菜單調用函數wp_nav_menu() ,加上一流的前端技術,就能設計出強大和漂亮的菜單啦!

全部評論: 0
登錄沒有賬號 切換注冊

忘記密碼 ?

注冊已有賬號 切換登錄

15选5走势图开奖