日韩黑丝制服一区视频播放|日韩欧美人妻丝袜视频在线观看|九九影院一级蜜桃|亚洲中文在线导航|青草草视频在线观看|婷婷五月色伊人网站|日本一区二区在线|国产AV一二三四区毛片|正在播放久草视频|亚洲色图精品一区

分享

WordPress主題制作導(dǎo)航的N種方法

 溫柔一哮 2011-10-30
WordPress主題制作導(dǎo)航的N種方法 

在WordPress主 題制作中,導(dǎo)航菜單的制作算是一個重點(diǎn),已經(jīng)寫好導(dǎo)航菜單的HTML代碼,放在WordPress主題中如何動態(tài)調(diào)用呢?本文將給你介紹幾種編寫PHP代 碼動態(tài)實現(xiàn)導(dǎo)航的方法,本文也將只側(cè)重于動態(tài)代碼的開發(fā),不會教你如何編寫HTML、CSS和Javascript來實現(xiàn)華麗的導(dǎo)航菜單。

WP 3.0自定義菜單的制作
WordPress 3.0之后的版本開始支持自定義動態(tài)菜單,所謂的動態(tài)菜單,也就是允許用戶自行決定將哪些項目添加到導(dǎo)航菜單中,進(jìn)入WordPress的管理后臺 – 外觀 – 菜單欄目,通過拖拉相應(yīng)的欄目,即可創(chuàng)建自己的菜單。這對于WordPress主題開發(fā)者和使用者來說,都是皆大歡喜的事情。要想實現(xiàn)自定義菜單,需要用 到的函數(shù)是wp_nav_menu(),給這個函數(shù)傳遞一些參數(shù)就可以輸出自定義菜單菜單,下面簡單講講如何使用使用這個函數(shù)。

首先,在主題目錄下的functions.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標(biāo)記這個菜單項的屬性,如當(dāng)前打開的是某個文章頁面,分類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á)到如高亮當(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)用就是這么簡單。wp_nav_menu還有很多參數(shù),如自定義 ul 節(jié)點(diǎn)、ul 父節(jié)點(diǎn)的id和class的參數(shù)等等,詳情請看官方文檔。

非常規(guī)導(dǎo)航欄的制作
以上提到的兩種方式,都是使用WordPress自帶的函數(shù)來實現(xiàn),他們輸入的HTML代碼也都是限定好的,就是使用 ul li 的形式來構(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>

重寫前端代碼?我想誰都不愿意這樣做,那怎么辦呢?還有,如果導(dǎo)航欄不使用分類和頁面,也不讓使用自定義菜單,那怎么辦?在實際的應(yīng)用中,我們還會遇到各種各樣且稀奇古怪的需求,請看下文:

一、使用get_terms()來獲取分類列表
使用get_terms()可以獲取你的文章分類、鏈接分類和自定義分類等,給get_terms()傳遞相應(yīng)的參數(shù)可以給你返回一個對象數(shù)組,這個數(shù)組就是你想要的所有分類,以下是get_terms()的函數(shù)原型:

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

$taxonomies:
該參數(shù)是你想要獲取的分類類別,可選值包括:”category”,”link_category”,”my_taxonomy”,他們分別代表文章分類、鏈接分類以及你自定義的分類,其中my_taxonomy是你自定義的分類名稱。

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

下面是一個該函數(shù)的使用示例,這里將顯示一個所有文章分類的

  • ..
  • ..

形式的無序列表,當(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ù)返回一個對象數(shù)組$terms,我們首先判斷這個數(shù)組是否為空,為空說明并沒有獲取到任何分類,如果不為空那么你就可以輸出分 類了。$terms的每個數(shù)組項就是一個對象,部分對象屬性的意義如:slug:分類縮略名,name:分類名,term_id:分類id。如以上代碼所 示,你可以通過$term->name來獲取對象的屬性值。

二、使用讀數(shù)據(jù)庫的方式獲取分類列表
如果你了解WordPress的數(shù)據(jù)庫,可以發(fā)現(xiàn)WordPress的分類信息都存儲在wp_terms和wp_term_taxonomy這兩個表 中,wp_terms存儲基本信息(包括文章分類、文章標(biāo)簽和鏈接分類等),wp_term_taxonomy用于存儲進(jìn)一步描述(用于存儲描述、區(qū)分分 類和標(biāo)簽等)。我們可以使用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>

三、如何獲取當(dāng)前分類的id
有些時候我們需要制作一個子導(dǎo)航,如http://www./?p=58&lang=zh左邊的人力資源導(dǎo)航,這 個導(dǎo)航可以是任意項目,如當(dāng)前分類下的子分類或者當(dāng)前分類下的文章等。那么首要問題就是,如何獲取當(dāng)前分類的id,這樣才可以進(jìn)行下一步的動作。

在分類頁獲取當(dāng)前分類的id:

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

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

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

四、子導(dǎo)航的制作
上面我們講解了如何獲取當(dāng)前分類的id,下面我們來講講如何制作子導(dǎo)航。首先,我們來制作一個當(dāng)前分類下子分類的子導(dǎo)航,這里用到wp_list_categories()來列出子分類,當(dāng)然你可以用我前面介紹的兩種方法來獲取分類。:

<ul>
<?php
// 這里我們用到上面獲取到的$cat_id,獲取該分類下的所有子分類
wp_list_categories('orderby=name&hide_empty=0&child_of=' . $cat_id);
?> 
</ul>

如果你的網(wǎng)站規(guī)模比較小,一個分類下的文章也不多,那么你可以在子導(dǎo)航中列出這個分類下的所有文章:

<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”用于高亮當(dāng)前文章的菜單項,css規(guī)則你可以自己定義。
五、頁面page的獲取
WordPress的頁面page可以通過wp_list_pages()來列出,不過這個函數(shù)輸出的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>

    本站是提供個人知識管理的網(wǎng)絡(luò)存儲空間,所有內(nèi)容均由用戶發(fā)布,不代表本站觀點(diǎn)。請注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息,謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請點(diǎn)擊一鍵舉報。
    轉(zhuǎn)藏 分享 獻(xiàn)花(0

    0條評論

    發(fā)表

    請遵守用戶 評論公約

    類似文章 更多