WordPress如何快速制作CMS栏目块

有网友提问:首页如果每个栏目都单独成一个列表(类似常规的cms)怎么写啊?类似下面的效果: 其实这个功能还是比较容易实现的,只需用WodPress内置的 WP_Query 类调用指定分类的文章即可,下面用一个具体实例来讲解如何制作CMS栏目块。 1、制作HTML页面 本文
有网友提问:首页如果每个栏目都单独成一个列表(类似常规的cms)怎么写啊?类似下面的效果:

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

1、制作HTML页面

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

<div class="box">
   <!-- 分类名称及链接 -->
   <h3>
      <strong><a href="http://历史分类链接/">历史</a></strong>
      <em><a href="http://历史分类链接/">更多</a></em>
   </h3>

   <!-- 文章列表 -->
   <ul class="iconBoxT14">
      <li><a href="http://文章1链接">文章1标题</a></li>
      <li><a href="http://文章2链接">文章2标题</a></li>
      <li><a href="http://文章3链接">文章3标题</a></li>
      <li><a href="http://文章4链接">文章4标题</a></li>
   </ul>
</div>


2、获取分类链接

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

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


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

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

3、获取分类文章列表

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

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

<ul class="iconBoxT14">
   <?php
      // 传递调用参数
      $the_query = new WP_Query(
                  array(
                      'category_name' => '历史',  // 分类名称
                      'posts_per_page' => 10     // 最多显示的文章数
                  ) );

      if ( $the_query->have_posts() ) {
         while ( $the_query->have_posts() ) {
            $the_query->the_post();
           
            // get_permalink()是获取文章链接
            // get_the_title()是获取文章标题
            echo '<li><a href="' . get_permalink() .'">' . get_the_title() .'</a></li>';
         }
      }
      else {
         echo '<li><a href="#">该分类没有文章</a></li>';
      }

      // WP_Query结束都要重置一下
      // 以免影响其他代码
      wp_reset_postdata();
?>
</ul>

4、限制文章标题字数

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

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


一个汉字是2个字符,上面的28代表最多显示14个汉字,超出的用…代替。长度自选。

完整代码

下面是通过以上修改后的完整代码,多个分类块就依此类推:

<div class="box">
   <!-- 分类名称及链接 -->
   <h3>
      <strong><a href="<?php echo get_category_link(get_cat_ID('历史')); ?>">历史</a></strong>
      <em><a href="<?php echo get_category_link(get_cat_ID('历史')); ?>">更多</a></em>
   </h3>

   <!-- 文章列表 -->
   <ul class="iconBoxT14">
   <?php
      // 传递调用参数
      $the_query = new WP_Query(
                  array(
                      'category_name' => '历史',  // 分类名称
                      'posts_per_page' => 10      // 最多显示的文章数
                  ) );

      if ( $the_query->have_posts() ) {
         while ( $the_query->have_posts() ) {
            $the_query->the_post();
           
            // get_permalink()是获取文章链接
            // get_the_title()是获取文章标题
            echo '<li><a href="' . get_permalink() .'">' . mb_strimwidth(get_the_title(), 0, 28, '...') .'</a></li>';
         }
      }
      else {
         echo '<li><a href="#">该分类没有文章</a></li>';
      }

      // WP_Query结束都要重置一下
      // 以免影响其他代码
      wp_reset_postdata();
   ?>
   </ul>
</div>

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

上一篇、下一篇文章代码: ?php previous_post_link(%link,) ??php next_post_link(%link,) ? 该代码解析出来的代码大概如下: a href= rel=external nofollow rel=external nofollow /aa href= rel=external nofollow rel=external nofollow /a 通过 get_pr
WordPress目前在最近的版本中为所有需要新窗口打开的链接都自动添加了新的 noopener noreferrer 属性。noopener noreferrer 属性并不是新发布的标准,但 WordPress 4.7.4 版开始的编辑器默认都会添加该属性。新窗口打开超链接的属性 target=_blank 增加 rel=
NAS已经把玩差不多半个月了,基本的download,DLNA,都已搞定。因为一直都是博客的忠实支持者,所以必须把自己的博客也搬到NAS上,老是跟大家都混在新浪上岂不是很没面子。于是开始购入域名,研究DDNS,找博客平台。很快锁定wordpress,看了别人建站效果,感
尊敬的百度站长平台用户您好: 百度搜索自推出MIP移动网页加速器以来反响良好,截至目前超过10.2亿个页面完成MIP化改造。 为了降低站点MIP改造难度,在MIP技术研究小组的辛勤工作下,wordpress、帝国CMS、织梦DEDECMS标准模板已编写完成供大家使用,欢迎大家
WordPress全站伪静态应该怎么做?主机的操作系统不同,设置方法也不同: 一、linux主机下的WordPress全站伪静态设置起来比较容易,只需要在WP的后台设置固定链接更改为自定义格式:/%post_id%.html 设置更改后,文章的网址就会变成形如:http://www.XXX.com/
随着互联网的普及,建站门槛的降低,很多没有专业知识的国人也加入到了建站大军之中,最初那批只为了讨论代码的以及建站经验的站长也都消失的差不多了,现在个人建站很少有不带商业目的的。随着网站的增加,但是互联网信息的资源却没有那么快速的增长,造成