当前位置:首页 > CMS教程 > WordPress > 列表

WordPress打造像CMS栏目块的实现

发布:smiling 来源: PHP粉丝网  添加日期:2015-10-15 16:04:51 浏览: 评论:0 

我们国内的cms喜欢在首页把主要栏目单独做成一个列表块,而国外的如wordpress默认不是这样子的,那么喜欢用wordpress的同学,应该如何打造像国内cms栏目块呢?本文来告诉你如何实现.

这个功能只需用WodPress内置的 WP_Query 类调用指定分类的文章即可,实现起来还是比较容易的,下面用一个具体实例来讲解如何制作CMS栏目块.

1、制作HTML页面

本文就不讲解html页面的制作了,具体的html、css如何制作一个栏目块,请自行学习制作,这里假设你的栏目块是类似以下的html代码:

  1. <div class="box"> 
  2.    <!-- 分类名称及链接 --> 
  3.    <h3> 
  4.       <strong><a href="http://历史分类链接/">历史</a></strong> 
  5.       <em><a href="http://历史分类链接/">更多</a></em> 
  6.    </h3> 
  7.  
  8.    <!-- 文章列表 --> 
  9.    <ul class="iconBoxT14"> 
  10.       <li><a href="http://文章1链接">文章1标题</a></li> 
  11.       <li><a href="http://文章2链接">文章2标题</a></li> 
  12.       <li><a href="http://文章3链接">文章3标题</a></li> 
  13.       <li><a href="http://文章4链接">文章4标题</a></li> 
  14.    </ul> 
  15. </div> 

2、获取分类链接

分类链接我们可以用静态的网址,也可以用动态的获取的方式。静态方式就是直接将上面的http://历史分类链接/改成你的分类链接。动态获取分类链接有很多方式,可以通过分类id来获取,可以通过分类别名来获取,也可以通过分类名称来获取。这里介绍通过分类名称来获取分类链接,代码:

  1. <?php 
  2.   $catid = get_cat_ID('历史'); // 历史是分类名称 
  3.   echo get_category_link($catid); // 输出分类链接 
  4. ?> 

用上面的php代码替换html中的http://历史分类链接/,代码看起来是这样:

  1. <strong><a href="<?php echo get_category_link(get_cat_ID('历史')); ?>">历史</a></strong> 
  2. <em><a href="<?php echo get_category_link(get_cat_ID('历史')); ?>">更多</a></em> 

3、获取分类文章列表

我们需要动态获取该分类下的指定数量的文章,然后动态输出到html的ul列表中,这里需要用到 WP_Query 类,WP_Query有很多参数,这里只介绍2个简单的,其他参数请参阅文档或上网搜索.

我们将html做如下修改,加入WP_Query调用代码:

  1. <ul class="iconBoxT14"
  2.    <?php 
  3.       // 传递调用参数 
  4.       $the_query = new WP_Query( 
  5.                   array
  6.                       'category_name' => '历史',  // 分类名称 
  7.                       'posts_per_page' => 10     // 最多显示的文章数 
  8.                   ) ); 
  9.  
  10.       if ( $the_query->have_posts() ) { 
  11.          while ( $the_query->have_posts() ) { 
  12.             $the_query->the_post(); 
  13.             
  14.             // get_permalink()是获取文章链接 
  15.             // get_the_title()是获取文章标题 
  16.             echo '<li><a href="' . get_permalink() .'">' . get_the_title() .'</a></li>'
  17.          } 
  18.       } 
  19.       else { 
  20.          echo '<li><a href="#">该分类没有文章</a></li>'
  21.       } 
  22.  
  23.       // WP_Query结束都要重置一下 
  24.       // 以免影响其他代码//phpfensi.com 
  25.       wp_reset_postdata(); 
  26. ?> 
  27. </ul> 

4、限制文章标题字数

可能文章标题很长,超出了栏目块的范围,我们可以限制一下文章标题的字数,超出的用…代替,将第3点中的get_the_title()替换成以下代码即可:

mb_strimwidth(get_the_title(), 0, 28, '...')

一个汉字是2个字符,上面的28代表最多显示14个汉字,超出的用…代替,长度自选,完整代码,下面是通过以上修改后的完整代码,多个分类块就依此类推:

  1. <div class="box"
  2.    <!-- 分类名称及链接 --> 
  3.    <h3> 
  4.       <strong><a href="<?php echo get_category_link(get_cat_ID('历史')); ?>">历史</a></strong> 
  5.       <em><a href="<?php echo get_category_link(get_cat_ID('历史')); ?>">更多</a></em> 
  6.    </h3> 
  7.  
  8.    <!-- 文章列表 --> 
  9.    <ul class="iconBoxT14"
  10.    <?php 
  11.       // 传递调用参数 
  12.       $the_query = new WP_Query( 
  13.                   array
  14.                       'category_name' => '历史',  // 分类名称 
  15.                       'posts_per_page' => 10      // 最多显示的文章数 
  16.                   ) ); 
  17.  
  18.       if ( $the_query->have_posts() ) { 
  19.          while ( $the_query->have_posts() ) { 
  20.             $the_query->the_post(); 
  21.             
  22.             // get_permalink()是获取文章链接 
  23.             // get_the_title()是获取文章标题 
  24.             echo '<li><a href="' . get_permalink() .'">' . mb_strimwidth(get_the_title(), 0, 28, '...') .'</a></li>'
  25.          } 
  26.       } 
  27.       else { 
  28.          echo '<li><a href="#">该分类没有文章</a></li>'
  29.       } 
  30.  
  31.       // WP_Query结束都要重置一下 
  32.       // 以免影响其他代码 
  33.       wp_reset_postdata(); 
  34.    ?> 
  35.    </ul> 
  36. </div> 

现在,我们也能用wordpress打造成国内网民习惯的网页了.

Tags: WordPress栏目 WordPress实现

分享到: