在WordPress主題制作中，導(dǎo)航菜單的制作算是一個(gè)重點(diǎn)，已經(jīng)寫好導(dǎo)航菜單的HTML代碼，放在WordPress主題中如何動(dòng)態(tài)調(diào)用呢？本文將給你介紹幾種編寫PHP代碼動(dòng)態(tài)實(shí)現(xiàn)導(dǎo)航的方法，本文也將只側(cè)重于動(dòng)態(tài)代碼的開發(fā)，不會(huì)教你如何編寫HTML、CSS和Javascript來(lái)實(shí)現(xiàn)華麗的導(dǎo)航菜單。
WP 3.0自定義菜單的制作
WordPress 3.0之后的版本開始支持自定義動(dòng)態(tài)菜單，所謂的動(dòng)態(tài)菜單，也就是允許用戶自行決定將哪些項(xiàng)目添加到導(dǎo)航菜單中，進(jìn)入WordPress的管理后臺(tái) – 外觀 – 菜單欄目，通過(guò)拖拉相應(yīng)的欄目，即可創(chuàng)建自己的菜單。這對(duì)于WordPress主題開發(fā)者和使用者來(lái)說(shuō)，都是皆大歡喜的事情。要想實(shí)現(xiàn)自定義菜單，需要用到的函數(shù)是wp_nav_menu()，給這個(gè)函數(shù)傳遞一些參數(shù)就可以輸出自定義菜單菜單，下面簡(jiǎn)單講講如何使用使用這個(gè)函數(shù)。
首先，在主題目錄下的functions.php的 之間，添加以下菜單注冊(cè)代碼，這樣你就可以在主題文件中使用wp_nav_menu函數(shù)了：
// This theme uses wp_nav_menu() in one location.register_nav_menus();
接著我們?cè)谥黝}的導(dǎo)航欄處調(diào)用wp_nav_menu()，即可輸出導(dǎo)航菜單HTML代碼：
<?php // 列出頂部導(dǎo)航菜單，菜單名稱為mymenu，只列出一級(jí)菜單 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="...">首頁(yè)</a></li> <li class="..." id="menu-item-2"><a href="...">分類A</a></li> ... </ul></div>
這里列出的 li 項(xiàng)為你在后臺(tái) – 外觀 – 菜單添加的欄目，如果你還沒(méi)有在后臺(tái)添加菜單，導(dǎo)航欄將列出所有頁(yè)面。另外，wp_nav_menu會(huì)為每個(gè) li 添加class，不同的class標(biāo)記這個(gè)菜單項(xiàng)的屬性，如當(dāng)前打開的是某個(gè)文章頁(yè)面，分類A 就是這篇文章所屬的分類，那么 分類A 所在的 li 將會(huì)如下代碼所示：
<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>
如果是在首頁(yè)，那么首頁(yè)的菜單項(xiàng)的 li 可能會(huì)如下所示：
<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="..">首頁(yè)</a></li>
從這些class的名稱就知道它們的作用，通過(guò)給這些class添加css屬性，可以達(dá)到如高亮當(dāng)前導(dǎo)航菜單的目的，如將當(dāng)前菜單鏈接定義成紅色：
.current-post-ancestor a, .current-menu-parent a, .current-menu-item a, .current_page_item a { color: red;}
好了，WordPress 3.0的自定義菜單的調(diào)用就是這么簡(jiǎn)單。wp_nav_menu還有很多參數(shù)，如自定義 ul 節(jié)點(diǎn)、ul 父節(jié)點(diǎn)的id和class的參數(shù)等等,詳情請(qǐng)看官方文檔。
非常規(guī)導(dǎo)航欄的制作
以上提到的兩種方式，都是使用WordPress自帶的函數(shù)來(lái)實(shí)現(xiàn)，他們輸入的HTML代碼也都是限定好的，就是使用 ul li 的形式來(lái)構(gòu)建菜單列表：如：
<ul> <li class="..">...</li> <li class="..">...</li></ul>
如果主題的前端代碼不是你寫的，而且導(dǎo)航欄的代碼寫得很龜毛，這根本不是上面的WordPress標(biāo)準(zhǔn)的 ul 導(dǎo)航欄形式，如下面的代碼：
<dl> <dt><strong>標(biāo)題</strong></dt> <dd><a target="_blank" title="#" href="#">菜單A</a></dd> <dd><a target="_blank" title="#" href="#">菜單B</a></dd></dl>
重寫前端代碼？我想誰(shuí)都不愿意這樣做，那怎么辦呢？還有，如果導(dǎo)航欄不使用分類和頁(yè)面，也不讓使用自定義菜單，那怎么辦？在實(shí)際的應(yīng)用中，我們還會(huì)遇到各種各樣且稀奇古怪的需求，請(qǐng)看下文：
一、使用get_terms()來(lái)獲取分類列表
使用get_terms()可以獲取你的文章分類、鏈接分類和自定義分類等，給get_terms()傳遞相應(yīng)的參數(shù)可以給你返回一個(gè)對(duì)象數(shù)組，這個(gè)數(shù)組就是你想要的所有分類，以下是get_terms()的函數(shù)原型：
<?php get_terms( $taxonomies, $args ) ?>
$taxonomies：
該參數(shù)是你想要獲取的分類類別，可選值包括：”category”，”link_category”，”my_taxonomy”，他們分別代表文章分類、鏈接分類以及你自定義的分類，其中my_taxonomy是你自定義的分類名稱。
$args：
該參數(shù)是分類的篩選參數(shù)，用于控制獲取你要獲取的分類，包括你想要獲取多少個(gè)分類、如何排序、父分類以及是否輸出空的分類等，具體請(qǐng)參考WordPress官方文檔：Function Reference/get terms，或者參考中文的簡(jiǎn)要翻譯：常用函數(shù)-get_terms()
下面是一個(gè)該函數(shù)的使用示例，這里將顯示一個(gè)所有文章分類的
..
形式的無(wú)序列表，當(dāng)然我們可以把它看成菜單：
<ul id="menu"> <?php // 獲取分類 $terms = get_terms('category', 'orderby=name&hide_empty=0' ); // 獲取到的分類數(shù)量 $count = count($terms); if($count > 0){ // 循環(huán)輸出所有分類信息 foreach ($terms as $term) { echo '<li><a href="'.get_term_link($term, $term->slug).'" title="'.$term->name.'">'.$term->name.'</a></li>'; } }?> </ul>
get_terms()函數(shù)返回一個(gè)對(duì)象數(shù)組$terms，我們首先判斷這個(gè)數(shù)組是否為空，為空說(shuō)明并沒(méi)有獲取到任何分類，如果不為空那么你就可以輸出分類了。$terms的每個(gè)數(shù)組項(xiàng)就是一個(gè)對(duì)象，部分對(duì)象屬性的意義如：slug：分類縮略名，name：分類名，term_id：分類id。如以上代碼所示，你可以通過(guò)$term->name來(lái)獲取對(duì)象的屬性值。
二、使用讀數(shù)據(jù)庫(kù)的方式獲取分類列表
如果你了解WordPress的數(shù)據(jù)庫(kù)，可以發(fā)現(xiàn)WordPress的分類信息都存儲(chǔ)在wp_terms和wp_term_taxonomy這兩個(gè)表中，wp_terms存儲(chǔ)基本信息（包括文章分類、文章標(biāo)簽和鏈接分類等），wp_term_taxonomy用于存儲(chǔ)進(jìn)一步描述（用于存儲(chǔ)描述、區(qū)分分類和標(biāo)簽等）。我們可以使用SQL來(lái)從這兩個(gè)表中獲取我們想要的分類列表：
<ul id="menu"> <?php $cats = $wpdb->get_results("SELECT {$wpdb->prefix}terms.term_id, name FROM {$wpdb->prefix}term_taxonomy, {$wpdb->prefix}terms WHERE {$wpdb->prefix}term_taxonomy.term_id = {$wpdb->prefix}terms.term_id AND taxonomy = 'category'"); if($cats) { foreach($cats as $cat) { echo '<li><a href="'.get_category_link($cat->term_id).'" title="'.$cat->name.'">'.$cat->name.'</a></li>'; } }?> </ul>
三、如何獲取當(dāng)前分類的id
有些時(shí)候我們需要制作一個(gè)子導(dǎo)航，如http://www.nashowgroup.com/?p=58&lang=zh左邊的人力資源導(dǎo)航，這個(gè)導(dǎo)航可以是任意項(xiàng)目，如當(dāng)前分類下的子分類或者當(dāng)前分類下的文章等。那么首要問(wèn)題就是，如何獲取當(dāng)前分類的id，這樣才可以進(jìn)行下一步的動(dòng)作。
在分類頁(yè)獲取當(dāng)前分類的id：
if ( is_category() ) { $cat_id = get_query_var('cat');}
在文章頁(yè)獲取該文章的第一個(gè)分類：
$cats = get_the_category();if($cats) $cat_id = $cats[0]->cat_ID;
四、子導(dǎo)航的制作
上面我們講解了如何獲取當(dāng)前分類的id，下面我們來(lái)講講如何制作子導(dǎo)航。首先，我們來(lái)制作一個(gè)當(dāng)前分類下子分類的子導(dǎo)航，這里用到wp_list_categories()來(lái)列出子分類，當(dāng)然你可以用我前面介紹的兩種方法來(lái)獲取分類。：
<ul><?php// 這里我們用到上面獲取到的$cat_id，獲取該分類下的所有子分類wp_list_categories('orderby=name&hide_empty=0&child_of=' . $cat_id);?> </ul>
如果你的網(wǎng)站規(guī)模比較小，一個(gè)分類下的文章也不多，那么你可以在子導(dǎo)航中列出這個(gè)分類下的所有文章：
<ul> <?php global $wp_query; $query = array ( 'cat' => $cat_id, 'orderby' => title, 'order'=> ASC ); $queryObject = new WP_Query($query); if ($queryObject->have_posts()) : while ($queryObject->have_posts()) : $queryObject->the_post(); ?> <li><a <?php if($post->ID == $wp_query->post->ID) echo 'class="chose"'; ?> href="<?php the_permalink() ?>"><?php the_title(); ?></a></li> <?php endwhile; wp_reset_postdata(); endif; ?></ul>
以上代碼中用到了WP_Query來(lái)獲取文章列表，該對(duì)象的使用方法，可以參考WordPress的官方文檔：Class Reference/WP Query和Function Reference/query posts。class=”chose”用于高亮當(dāng)前文章的菜單項(xiàng)，css規(guī)則你可以自己定義。
五、頁(yè)面page的獲取
WordPress的頁(yè)面page可以通過(guò)wp_list_pages()來(lái)列出，不過(guò)這個(gè)函數(shù)輸出的HTML都是固定的，如果你想要自定義這些HTML，可以使用get_pages()來(lái)獲取頁(yè)面列表，代碼示例如下：
<ul id="menu">$mypages = get_pages(); if(count($mypages) > 0) { foreach($mypages as $page) { echo '<li><a href="'.get_page_link($page->ID).'" title="'.$page->post_title.'">'.$page->post_title.'</a></li>'; }}else { echo '<li><a href="#">沒(méi)有頁(yè)面</a></li>';}</ul>
聯(lián)系客服
