WordPress主題製做導航的N種方法

在WordPress主 題製做中，導航菜單的製做算是一個重點，已經寫好導航菜單的HTML代碼，放在WordPress主題中如何動態調用呢？本文將給你介紹幾種編寫PHP代 碼動態實現導航的方法，本文也將只側重於動態代碼的開發，不會教你如何編寫HTML、CSS和Javascript來實現華麗的導航菜單。

WP 3.0自定義菜單的製做
WordPress 3.0以後的版本開始支持自定義動態菜單，所謂的動態菜單，也就是容許用戶自行決定將哪些項目添加到導航菜單中，進入WordPress的管理後臺 – 外觀 – 菜單欄目，經過拖拉相應的欄目，便可建立本身的菜單。這對於WordPress主題開發者和使用者來講，都是皆大歡喜的事情。要想實現自定義菜單，須要用 到的函數是wp_nav_menu()，給這個函數傳遞一些參數就能夠輸出自定義菜單菜單，下面簡單講講如何使用使用這個函數。

首先，在主題目錄下的functions.php的 之間，添加如下菜單註冊代碼，這樣你就能夠在主題文件中使用wp_nav_menu函數了：

// This theme uses wp_nav_menu() in one location.
register_nav_menus();

接着咱們在主題的導航欄處調用wp_nav_menu()，便可輸出導航菜單HTML代碼：

  <?php 
    // 列出頂部導航菜單，菜單名稱爲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 項爲你在後臺 – 外觀 – 菜單添加的欄目，若是你尚未在後臺添加菜單，導航欄將列出全部頁面。另外，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屬性，能夠達到如高亮當前導航菜單的目的，如將當前菜單連接定義成紅色：

.current-post-ancestor a, .current-menu-parent a, .current-menu-item a, .current_page_item a {
    color: red;
}

好了，WordPress 3.0的自定義菜單的調用就是這麼簡單。wp_nav_menu還有不少參數，如自定義 ul 節點、ul 父節點的id和class的參數等等,詳情請看官方文檔。

很是規導航欄的製做
以上提到的兩種方式，都是使用WordPress自帶的函數來實現，他們輸入的HTML代碼也都是限定好的，就是使用 ul li 的形式來構建菜單列表：如：

<ul>
    <li class="..">...</li>
    <li class="..">...</li>
</ul>

若是主題的前端代碼不是你寫的，並且導航欄的代碼寫得很龜毛，這根本不是上面的WordPress標準的 ul 導航欄形式，以下面的代碼：

<dl>
    <dt><strong>標題</strong></dt>
    <dd><a target="_blank" title="#" href="#">菜單A</a></dd>
    <dd><a target="_blank" title="#" href="#">菜單B</a></dd>
</dl>

重寫前端代碼？我想誰都不肯意這樣作，那怎麼辦呢？還有，若是導航欄不使用分類和頁面，也不讓使用自定義菜單，那怎麼辦？在實際的應用中，咱們還會遇到各類各樣且稀奇古怪的需求，請看下文：

1、使用get_terms()來獲取分類列表
使用get_terms()能夠獲取你的文章分類、連接分類和自定義分類等，給get_terms()傳遞相應的參數能夠給你返回一個對象數組，這個數組就是你想要的全部分類，如下是get_terms()的函數原型：

<?php get_terms( $taxonomies, $args ) ?>

$taxonomies：
該參數是你想要獲取的分類類別，可選值包括：」category」，」link_category」，」my_taxonomy」，他們分別表明文章分類、連接分類以及你自定義的分類，其中my_taxonomy是你自定義的分類名稱。

$args：
該參數是分類的篩選參數，用於控制獲取你要獲取的分類，包括你想要獲取多少個分類、如何排序、父分類以及是否輸出空的分類等，具體請參考 WordPress官方文檔：Function Reference/get terms，或者參考中文的簡要翻譯：經常使用函數-get_terms()

下面是一個該函數的使用示例，這裏將顯示一個全部文章分類的

• ..

..

形式的無序列表，固然咱們能夠把它當作菜單：

<ul id="menu">      
<?php
    // 獲取分類
    $terms = get_terms('category', 'orderby=name&hide_empty=0' );
 
    // 獲取到的分類數量
    $count = count($terms);
    if($count > 0){
        // 循環輸出全部分類信息
        foreach ($terms as $term) {
            echo '<li><a href="'.get_term_link($term, $term->slug).'" title="'.$term->name.'">'.$term->name.'</a></li>';
        }
    }
?>      
</ul>

get_terms()函數返回一個對象數組$terms，咱們首先判斷這個數組是否爲空，爲空說明並無獲取到任何分類，若是不爲空那麼你就能夠輸出分 類了。$terms的每一個數組項就是一個對象，部分對象屬性的意義如：slug：分類縮略名，name：分類名，term_id：分類id。如以上代碼所 示，你能夠經過$term->name來獲取對象的屬性值。

2、使用讀數據庫的方式獲取分類列表
若是你瞭解WordPress的數據庫，能夠發現WordPress的分類信息都存儲在wp_terms和wp_term_taxonomy這兩個表 中，wp_terms存儲基本信息（包括文章分類、文章標籤和連接分類等），wp_term_taxonomy用於存儲進一步描述（用於存儲描述、區分分 類和標籤等）。咱們可使用SQL來從這兩個表中獲取咱們想要的分類列表：

<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>

3、如何獲取當前分類的id
有些時候咱們須要製做一個子導航，如http://www.nashowgroup.com/?p=58&lang=zh左邊的人力資源導航，這 個導航能夠是任意項目，如當前分類下的子分類或者當前分類下的文章等。那麼首要問題就是，如何獲取當前分類的id，這樣才能夠進行下一步的動做。

在分類頁獲取當前分類的id：

if ( is_category() ) {
    $cat_id = get_query_var('cat');
}

在文章頁獲取該文章的第一個分類：

$cats = get_the_category();
if($cats)
    $cat_id = $cats[0]->cat_ID;

4、子導航的製做
上面咱們講解了如何獲取當前分類的id，下面咱們來說講如何製做子導航。首先，咱們來製做一個當前分類下子分類的子導航，這裏用到wp_list_categories()來列出子分類，固然你能夠用我前面介紹的兩種方法來獲取分類。：

<ul>
<?php
// 這裏咱們用到上面獲取到的$cat_id，獲取該分類下的全部子分類
wp_list_categories('orderby=name&hide_empty=0&child_of=' . $cat_id);
?> 
</ul>

若是你的網站規模比較小，一個分類下的文章也很少，那麼你能夠在子導航中列出這個分類下的全部文章：

<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來獲取文章列表，該對象的使用方法，能夠參考WordPress的官方文檔：Class Reference/WP Query和Function Reference/query posts。class=」chose」用於高亮當前文章的菜單項，css規則你能夠本身定義。
5、頁面page的獲取
WordPress的頁面page能夠經過wp_list_pages()來列出，不過這個函數輸出的HTML都是固定的，若是你想要自定義這些HTML，可使用get_pages()來獲取頁面列表，代碼示例以下：

<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="#">沒有頁面</a></li>';
}
</ul>