百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

在WordPress中如何按照类别显示最近的文章

zhezhongyun 2025-05-23 21:33 3 浏览

最近许多用户在寻找一种在网站的侧边栏按照文章的类别来显示文章的方法。文章显示如下图:

这里给大家介绍两种方法,通过这两种方法均可以实现在WordPress网站侧边栏按类别显示文章。第一种方法比较适合初学者,因为这个方法用到一个现成的插件。第二种方法则是用一段代码,这个方法比较适合DIY用户。

方法一:插件法

首先安装启用 Category Posts Widget 插件,然后打开外观菜单下的widgets选项,你会发现有一个新的小工具:Category Posts出现在列表中。

点击并拖动该小工具到你想要按类显示文章的区域。在挂件区会展开一个小工具设置选项如下图:

接下来你需要提供小工具的标题,选择一个文章的类别,另外你还可以选择填写其他项目,比如文章排序方式和数目等等。所有的都设置完成后点击保存按钮。现在查看你的网站你会发现,在侧边栏小工具区域出现了按类显示的文章。

方法二:手动编辑代码法

首先添加下述代码到网站主题的function.php文件中

function wpb_postsbycategory {

// the query

$the_query = new WP_Query( array( 'category_name' => 'announcements', 'posts_per_page' => 10 ) );

// The Loop

if ( $the_query->have_posts ) {

$string .= '<ul>';

while ( $the_query->have_posts ) {

$the_query->the_post;

if ( has_post_thumbnail ) {

$string .= '<li>';

$string .= '<a href="' . get_the_permalink .'" rel="bookmark">' . get_the_post_thumbnail($post_id, array( 50, 50) ) . get_the_title .'</a></li>';

} else {

// if no featured image is found

$string .= '<li><a href="' . get_the_permalink .'" rel="bookmark">' . get_the_title .'</a></li>';

}

}

} else {

// no posts found

}

$string .= '</ul>';

return $string;

/* Restore original Post Data */

wp_reset_postdata;

}

// Add a shortcode

add_shortcode('categoryposts', 'wpb_postsbycategory');

// Enable shortcodes in text widgets

add_filter('widget_text', 'do_shortcode');

注意:要将代码第三行中的announcements改为你自己的类别。

该代码设置显示10篇文章,如果文章有特色图像,在列表中特色图像也可以正常显示。最后还创建了短代码“categoryposts”

接下来有三种方法,来按类显示文章:方法一、添加下面一行代码到任意一个模板文件中,比如: footer.php, single.php等等

<?php wpb_postsbycategory ?>

方法二和方法三是在小工具区域、文章或页面添加短代码。

如果想要在小工具区域显示分类文章,你只需要打开小工具界面添加文本小工具到挂件区,然后复制粘贴短代码:[categoryposts],然后保存更新。如果想要在帖子或页面的顶端分类显示文章,只需要在帖子或页面的内容区域添加短代码:[categoryposts]。

同时,我们可以通过添加下述CSS代码到主题或子主题的样式表中,实现对列表的美化。

ul.postsbycategory {

list-style-type: none;

}

.postsbycategory img {

float:left;

padding:3px;

margin:3px;

border: 3px solid #EEE;

}

这篇教程就为大家讲到这里,希望对您有所帮助。

相关推荐

平和!晨间攻克 HTML 表格属性题,面试难题轻松化解

当清晨的阳光轻轻洒在窗台,泡上一杯淡雅的茉莉茶,翻开这篇文章,就像开启一场宁静的知识对话。前端面试中那些让人有些头疼的HTML表格属性问题,今天咱们不慌不忙,慢慢梳理,把它们变成面试时的底气,让焦...

高效设计表格 - 用我们的HTML表格生成器轻松搞定

在图形开发领域,效率和质量是我们所追求的。HTML表格生成器(HTML表格生成器-在线工具|图形开发学院),以其简洁的界面、高效的性能和人性化的设计,降低了图形开发的门槛,让每一位用户都能...

一看就懂的Excel表格的基本操作的十大技巧

Excel表格已经成为Office人员最常用的数据处理软件,Excel表格的基本操作视频教程也成为Excel表格初学者急着寻找的资料之一。其实,普通人需要用到的Excel的功能不到其全部功能的10%。...

干货满满!Python Flask 中级应用,构建任务管理系统全流程揭秘

PythonFlask开发Web服务:中级实战教程Flask是一个轻量级的PythonWeb框架,以其灵活性和扩展性而受到开发者的喜爱。本教程将带你从基础到实战,通过一个完整的案例来深入学习Fla...

php手把手教你做网站(二十)vue+tp6简单案例(demo)

很多时候搭建好了环境,但是不知道怎么入手去开发。下面我们通过简单案例说明如何快速入门开发模块:例1:开发helloworld模块搭建好环境,新建项目以后,进入项目所在文件夹,依次进入src/compo...

前端经验-如何在p元素中展示固定行数的文字,超出部分显示省略号

1说明最近项目上有个需求,就是有一个网站列表,每个网站下面要加上一段简介,简介文字有行数限制,超出行数以后后面的文字用省略号显示。2CSS代码.websiteulp{margin:...

jQuery 动画制作与特效

使用show()和hide()方法在普通的javascript编程中,要实现元素的显示、隐藏通常是利用其CSS的display属性或者visibility属性。在jQuery中提供了show()和hi...

抓狂!代码混乱漏洞百出?7 个技巧助你逆袭成大神

写JavaScript代码时,是不是经常遇到这种崩溃瞬间:数组越界报错、异步请求乱成麻、页面交互卡到怀疑人生?别让这些“老大难”问题拖慢你的开发进度!今天手把手教你7个超实用的JavaS...

玩转Markdown(2)——抽象语法树的提取与操纵

上一篇玩转Markdown——数据的分离存储与组件的原生渲染发布,转眼已经鸽了大半年了。最近在操纵mdast生成md文件的时候,心血来潮,把玩转Markdown(2)给补上了。这一...

关于ul里边的li浮动后边的p不独占一行问题

为什么ul里面的li元素浮动起来以后本应该独占一行的P标签会跟着上去贴着li元素的内容呢?引入的一个CSS里面把除非设置Ul的行高,这样P标签才会下拉,这是为什么?下图是出来的没加css效果刚开始我...

用css设计电子相册 下

本篇学习资料讲解:延续上一篇的学习资料,仍然介绍使用css对电子相册进行排版和侧面强调“盒子模型、标准流、浮动和定位”的重要性。上篇学习资料介绍的“阵列模式电子相册”,如果也能够看到详细信息就更...

第六次记录,利用CSS调整样式位置

本小节基本要求:了解标签的父子关系要点:1、如何对父标签下的子标签进行样式修改2、display-inline-block;3、绝对定位absolute4、margin与padding5、以上是关键,...

在WordPress中如何按照类别显示最近的文章

最近许多用户在寻找一种在网站的侧边栏按照文章的类别来显示文章的方法。文章显示如下图:这里给大家介绍两种方法,通过这两种方法均可以实现在WordPress网站侧边栏按类别显示文章。第一种方法比较适合初学...

初识CSS——布局小技巧

#大有学问##头条创作挑战赛#垂直对齐作用用于设置图片或者表单等行内块元素和文字的垂直对齐。垂直对齐只针对行内元素或者行内块元素有效。语法vertical-align:baseline|top...

一篇文章教会你如何制做精美导航条

【一、项目背景】让更多的人去学习html,以广东科技学院的导航栏为例,教大家怎么去做一个横向的导航栏。【二、项目准备】准备一个编程的软件Dreamweaver,打开软件点击文件新建一个叫导航栏的...