WordPress导航栏分类如何高亮显示

— 2014年9月12日 in Wordpress • add comment

几乎每个网站都有一个导航栏，导航栏一般将网站的内容分成几个类目，然后在导航栏中显示出来，以方便读者查阅相关内容。WordPress博客也提供了此功能，但是不同的博客主题在导航栏的设置方面也不尽相同，现在大多数主题是以页面（page）作为导航栏类目的，但是这种方式似乎达不到”导航”的目的，个人觉得用分类（category）和页面(Page一起)做为导航栏更合适。本文将指导你在WordPress中，如何设计一个用分类和页面作为菜单的导航栏，并高亮显示当前所在的栏目。

     其实稍微懂一点网页设计的朋友都知道，这可以通过CSS来实现，但关键是如何确定该文章属于哪个分类，WordPress已经提供了现成的方法，更简单，调用几个函数就可以实现，而且不需要太多额外的代码。下面我们一步一步地来实现我们的目的。

     WordPress主题都提供了导航栏，一般导航栏的代码在header.php这个文件中，找到相应的导航栏代码（如果你的导航栏现在显示的是页面列表，你只需找到 wp_list_pages 就可以了 ），改成如下形式，修改完毕后在浏览器里看看效果吧！注意：本文不讲解导航栏的样式设计，可根据需要自己定义相关的CSS和HTML。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22
<ul>

<li<?php if (is_home()) { echo ‘ class=”current-cat”‘;} ?>><a title=”Home” href=”/”>博客主页</a></li>

<?php

$currentcategory = ”;



// 以下这行代码用于在导航栏添加分类列表，

// 如果你不想添加分类到导航中，

// 请删除 6 – 14 行代码

if  (!is_page() && !is_home()) {

$catsy = get_the_category();

$myCat = $catsy[0]->cat_ID;

$currentcategory = ‘&current_category=’.$myCat;

}

wp_list_categories(‘depth=1&title_li=&show_count=0&hide_empty=0&child_of=0’.$currentcategory);



// 以下这行代码用于在导航栏添加页面列表

// 如

方法二：

  1.   <ul>  
  2.                     <li class=“li_0”><a href=“<?php bloginfo(‘url’); ?>”>网站首页</a></li>  
  3.                       
  4.                     <?php   
  5.                   
  6.                         $catsy = get_the_category();  
  7.                       
  8.                     $terms = get_terms(‘category’, ‘orderby=name&hide_empty=0&exclude=6’ );  
  9.   
  10. // 获取到的分类数量  
  11.   
  12. $count = count($terms);  
  13.   
  14. if($count > 0){  
  15.   
  16. // 循环输出所有分类信息  
  17.           
  18. foreach ($terms as $term) {  
  19. $myCat = ”;  
  20. static $i=1;  
  21. if(!is_home() && !is_page()){  
  22.  $catsy = get_the_category();  
  23.      $myCat = $catsy[0]->cat_ID;  
  24.      }  
  25.      $a = $term->term_id == $myCat ? ‘act’ : ”;  
  26. echo ‘<li class=“li_’.$i++.'”><a class=“‘.$a.'” href=“‘.get_term_link($term, $term->slug).'” title=“‘.$term->name.'”><span>’.$term->name.'</span></a></li>’;  
  27. if($i==4) break ;  
  28. }  
  29. }  
  30. ?>  
  31.           <!–          <li class=“li_1”><a href=’http://www.fh628.com/fhpt/’ ><span>凤凰资讯</span></a></li>  
  32.                     <li class=’li_2′><a href=’http://www.fh628.com/cjwt/’  class=’act’><span>热门新闻</span></a></li>  
  33.                     <li class=“li_3”><a href=’http://www.fh628.com/khd/’ ><span>最新新闻</span></a></li>  
  34.                     –>  
  35.                       
  36.               </ul>  

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

www.admin122.com 关注微信
24小时客服在线