WordPress主題制作導(dǎo)航的N種方法
在WordPress主 題制作中,導(dǎo)航菜單的制作算是一個(gè)重點(diǎn),已經(jīng)寫(xiě)好導(dǎo)航菜單的HTML代碼,放在WordPress主題中如何動(dòng)態(tài)調(diào)用呢?本文將給你介紹幾種編寫(xiě)PHP代 碼動(dòng)態(tài)實(shí)現(xiàn)導(dǎo)航的方法,本文也將只側(cè)重于動(dòng)態(tài)代碼的開(kāi)發(fā),不會(huì)教你如何編寫(xiě)HTML、CSS和Javascript來(lái)實(shí)現(xiàn)華麗的導(dǎo)航菜單。 WP 3.0自定義菜單的制作 首先,在主題目錄下的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)航菜單,菜單名稱(chēng)為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="...">分類(lèi)A</a></li> ... </ul> </div> 這里列出的 li 項(xiàng)為你在后臺(tái) – 外觀(guān) – 菜單添加的欄目,如果你還沒(méi)有在后臺(tái)添加菜單,導(dǎo)航欄將列出所有頁(yè)面。另外,wp_nav_menu會(huì)為每個(gè) li 添加class,不同的class標(biāo)記這個(gè)菜單項(xiàng)的屬性,如當(dāng)前打開(kāi)的是某個(gè)文章頁(yè)面,分類(lèi)A 就是這篇文章所屬的分類(lèi),那么 分類(lèi)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="...">分類(lèi)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的名稱(chēng)就知道它們的作用,通過(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)航欄的制作 <ul> <li class="..">...</li> <li class="..">...</li> </ul> 如果主題的前端代碼不是你寫(xiě)的,而且導(dǎo)航欄的代碼寫(xiě)得很龜毛,這根本不是上面的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> 重寫(xiě)前端代碼?我想誰(shuí)都不愿意這樣做,那怎么辦呢?還有,如果導(dǎo)航欄不使用分類(lèi)和頁(yè)面,也不讓使用自定義菜單,那怎么辦?在實(shí)際的應(yīng)用中,我們還會(huì)遇到各種各樣且稀奇古怪的需求,請(qǐng)看下文: 一、使用get_terms()來(lái)獲取分類(lèi)列表 <?php get_terms( $taxonomies, $args ) ?> $taxonomies: $args: 下面是一個(gè)該函數(shù)的使用示例,這里將顯示一個(gè)所有文章分類(lèi)的
.. 形式的無(wú)序列表,當(dāng)然我們可以把它看成菜單: <ul id="menu"> <?php // 獲取分類(lèi) $terms = get_terms('category', 'orderby=name&hide_empty=0' ); // 獲取到的分類(lèi)數(shù)量 $count = count($terms); if($count > 0){ // 循環(huán)輸出所有分類(lèi)信息 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)有獲取到任何分類(lèi),如果不為空那么你就可以輸出分 類(lèi)了。$terms的每個(gè)數(shù)組項(xiàng)就是一個(gè)對(duì)象,部分對(duì)象屬性的意義如:slug:分類(lèi)縮略名,name:分類(lèi)名,term_id:分類(lèi)id。如以上代碼所 示,你可以通過(guò)$term->name來(lái)獲取對(duì)象的屬性值。 二、使用讀數(shù)據(jù)庫(kù)的方式獲取分類(lèi)列表 <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)前分類(lèi)的id 在分類(lèi)頁(yè)獲取當(dāng)前分類(lèi)的id: if ( is_category() ) { $cat_id = get_query_var('cat'); } 在文章頁(yè)獲取該文章的第一個(gè)分類(lèi): $cats = get_the_category(); if($cats) $cat_id = $cats[0]->cat_ID; 四、子導(dǎo)航的制作 <ul> <?php // 這里我們用到上面獲取到的$cat_id,獲取該分類(lèi)下的所有子分類(lèi) wp_list_categories('orderby=name&hide_empty=0&child_of=' . $cat_id); ?> </ul> 如果你的網(wǎng)站規(guī)模比較小,一個(gè)分類(lèi)下的文章也不多,那么你可以在子導(dǎo)航中列出這個(gè)分類(lèi)下的所有文章: <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ī)則你可以自己定義。 <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> |
|
來(lái)自: 溫柔一哮 > 《WordPress》