0

0

一文详解WordPress制作CMS栏目块的方法

藏色散人

藏色散人

发布时间:2023-03-01 16:42:22

|

1743人浏览过

|

来源于ludou

转载

本篇文章给大家带来了关于wordpress的相关知识,其中主要给大家聊聊wordpress是怎么制作cms栏目块,感兴趣的朋友下面一起来看一下吧,欢迎大家收藏学习!

WordPress制作CMS栏目块

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

ccc6b816afcc89c099d8e3ea0708698.jpg

其实这个功能还是比较容易实现的,只需用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、获取分类文章列表

Napkin AI
Napkin AI

Napkin AI 可以将您的文本转换为图表、流程图、信息图、思维导图视觉效果,以便快速有效地分享您的想法。

下载

我们需要动态获取该分类下的指定数量的文章,然后动态输出到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>

推荐学习:《WordPress教程

相关文章

WPS零基础入门到精通全套教程!
WPS零基础入门到精通全套教程!

全网最新最细最实用WPS零基础入门到精通全套教程!带你真正掌握WPS办公! 内含Excel基础操作、函数设计、数据透视表等

下载

相关标签:

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

WorkBuddy
WorkBuddy

腾讯云推出的AI原生桌面智能体工作台

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
http500解决方法
http500解决方法

http500解决方法有检查服务器日志、检查代码错误、检查服务器配置、检查文件和目录权限、检查资源不足、更新软件版本、重启服务器或寻求专业帮助等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

497

2023.11.09

http请求415错误怎么解决
http请求415错误怎么解决

解决方法:1、检查请求头中的Content-Type;2、检查请求体中的数据格式;3、使用适当的编码格式;4、使用适当的请求方法;5、检查服务器端的支持情况。更多http请求415错误怎么解决的相关内容,可以阅读下面的文章。

453

2023.11.14

HTTP 503错误解决方法
HTTP 503错误解决方法

HTTP 503错误表示服务器暂时无法处理请求。想了解更多http错误代码的相关内容,可以阅读本专题下面的文章。

3615

2024.03.12

http与https有哪些区别
http与https有哪些区别

http与https的区别:1、协议安全性;2、连接方式;3、证书管理;4、连接状态;5、端口号;6、资源消耗;7、兼容性。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2922

2024.08.16

wordpress seo
wordpress seo

WordPress网站SEO优化方法有:1、选择一个SEO友好的主题,具有清晰的代码结构,快速的加载速度和响应式设计;2、使用SEO插件,优化你的标题标签,元描述,关键字,XML站点地图等;3、优化你的内容,内容是SEO优化的核心;4、优化你的网站速度;5、创建友好的URL;6、使用内部链接;7、优化图像;8、使用社交媒体;9、定期更新你的网站;10、监控和分析你的网站等等。

435

2023.09.18

wordpress下载后怎么安装
wordpress下载后怎么安装

安装前准备:确保服务器满足要求、获取安装文件、创建数据库。上传 wordpress 文件。创建数据库和用户。运行安装程序:选择语言、输入数据库信息、网站标题和管理员信息。安装 wordpress。安装后配置:设置永久链接、安装主题、安装插件、创建内容。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

336

2024.04.15

TypeScript类型系统进阶与大型前端项目实践
TypeScript类型系统进阶与大型前端项目实践

本专题围绕 TypeScript 在大型前端项目中的应用展开,深入讲解类型系统设计与工程化开发方法。内容包括泛型与高级类型、类型推断机制、声明文件编写、模块化结构设计以及代码规范管理。通过真实项目案例分析,帮助开发者构建类型安全、结构清晰、易维护的前端工程体系,提高团队协作效率与代码质量。

42

2026.03.13

Python异步编程与Asyncio高并发应用实践
Python异步编程与Asyncio高并发应用实践

本专题围绕 Python 异步编程模型展开,深入讲解 Asyncio 框架的核心原理与应用实践。内容包括事件循环机制、协程任务调度、异步 IO 处理以及并发任务管理策略。通过构建高并发网络请求与异步数据处理案例,帮助开发者掌握 Python 在高并发场景中的高效开发方法,并提升系统资源利用率与整体运行性能。

79

2026.03.12

C# ASP.NET Core微服务架构与API网关实践
C# ASP.NET Core微服务架构与API网关实践

本专题围绕 C# 在现代后端架构中的微服务实践展开,系统讲解基于 ASP.NET Core 构建可扩展服务体系的核心方法。内容涵盖服务拆分策略、RESTful API 设计、服务间通信、API 网关统一入口管理以及服务治理机制。通过真实项目案例,帮助开发者掌握构建高可用微服务系统的关键技术,提高系统的可扩展性与维护效率。

234

2026.03.11

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
第二十三期_前端开发
第二十三期_前端开发

共98课时 | 8.4万人学习

WordPress视频教程
WordPress视频教程

共23课时 | 9.8万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号