WordPress如何制作CMS栏目块

日期: 标签:WordPress教程
如需帮忙改代码,或者WordPress二次开发、PHP网站建设等需求,可联系我购买付费服务:  点此联系我
文章目录

有网友提问:首页如果每个栏目都单独成一个列表(类似常规的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>

-- 完 --

本文采用 「CC BY-NC-SA 4.0」创作共享协议,转载请标注以下信息:
原文出处:露兜即刻 https://www.ludou.org/wordpress-cms-category-block.html
露兜
kaapass@outlook.com  QQ 825533758

业余编程爱好者。

19 条留言

点此留言
  1. 路易大叔 路易大叔

    你搞起专业研究来了

  2. Julius Julius

    有心折腾WP,精神可嘉。我用的EM不想折腾了。

  3. 小二苘 小二苘

    学习了

  4. 懿古今 懿古今

    这样看起来好像又变简单了,有空折腾折腾,我就想折腾一个CMS主题,一直都入不了门

  5. 百话客 百话客

    哈哈 博客不错啊

  6. 小兽 小兽

    wordpress的强大之处

  7. 小菜 小菜

    都是高级货,收藏一个先。。

  8. 心情语录网 心情语录网

    收藏了

  9. 汉克博客

    讲的很细,要是通过文章id调用是怎么写呢

  10. 澈梦源 澈梦源

    讲的很细,收藏了,还是不会啊。

  11. 喜欢WP

    请问列表页这样写了以后列表页的分页如何实现呢

  12. s

    你用的这他代码高亮是什么?推荐来用一下,挺简洁的。

    • 露兜

      @s https://www.ludou.org/codecolorer.html

  13. 菠萝格格の博客志 菠萝格格の博客志

    还不更新 不能忍∑( ° △ °|||)︴

  14. Aaron Aaron

    和调用某分类目录下的文章好像是同一个意思。

  15. 叮语 叮语

    图片列表呢 如何显示图片?

  16. 小静

    我又来了

  17. 秋寒慕雪

    分类名称如果要动态获取的话,如果获取!?

  18. 弄你嘴 弄你嘴

    弄你嘴路过留名。。。

发表留言