WordPress CMS 栏目块设计指南

人亦已歌

WordPress CMS 栏目块设计指南

有网友提问：首页如果每个栏目都单独成一个列表（类似常规的cms）怎么写啊？类似下面的效果：

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

1、制作HTML页面

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

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

复制代码

2、获取分类链接

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

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

复制代码

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

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

复制代码

3、获取分类文章列表

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

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

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

复制代码

4、限制文章标题字数

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

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

复制代码

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

完整代码

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

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

复制代码