讲师中心 微信公众号
AI工具推荐 视频效率加速

如何在 WordPress 中轻松显示带有缩略图的页面列表

胖敏君_1815

胖敏君_1815

发布时间:2025-05-24 13:30:12

|

1099人浏览过

|

来源于php中文网

原创

您想了解如何在 wordpress 网站上轻松显示带有缩略图的页面列表吗?

在帖子或页面标题旁边显示特色图像有助于创造更多视觉兴趣,并为访问者提供有关内容的更多信息,因此他们更有可能点击并访问这些页面。

在本文中,我们将逐步向您展示如何在 WordPress 中显示带有缩略图的页面列表。

如何在 WordPress 中轻松显示带有缩略图的页面列表

为什么在 WordPress 中显示带有缩略图的页面列表?

WordPress 有两种不同的帖子类型,称为帖子和页面。

页面用于更常青的内容,例如“关于我们”、“联系我们”和“服务”页面,而帖子用于更新更频繁的博客内容。

您最重要的页面通常从主导航菜单链接到,但您可能有更多想要显示的页面。

通过添加带有缩略图的页面列表,您可以使链接比标准文本链接更具吸引力,并使访问者更好地了解WordPress 网站上每个页面的内容。

当访问者参与并感兴趣时,他们可能会访问更多页面并在您的网站上停留更长时间,这使得他们更有可能进行购买或加入您的电子邮件列表。

话虽这么说,让我们看一下在网站上显示带有缩略图的页面列表的几种不同方法。只需使用下面的快速链接即可直接跳至您要使用的方法:

  • 方法 1. 通过向 WordPress 添加代码来显示带有缩略图的页面列表
  • 方法 2. 使用 WordPress 块编辑器显示带有缩略图的页面列表

方法 1. 通过向 WordPress 添加代码来显示带有缩略图的页面列表

显示带有缩略图的页面列表的一种方法是将代码添加到 WordPress 文件中。

这种方法更先进,但优点是您将能够使用可自定义的短代码。每当您发布新页面时,无需手动更新列表,短代码将自动为您生成更新的页面列表。

如果您之前没有向 WordPress 网站添加过代码,那么您可以参阅我们的初学者指南,将网页上的代码片段粘贴到 WordPress 中。

然后,您需要将以下代码添加到您的functions.php文件中,在特定于站点的插件中,或者使用像WPCode这样的代码片段插件(推荐)。

如何在 WordPress 中轻松显示带有缩略图的页面列表

之后,搜索“短代码”块。

然后,单击“短代码”块将其添加到您的网站,然后只需粘贴上面的短代码即可。

如何在 WordPress 中轻松显示带有缩略图的页面列表

完成后,请确保单击“保存”或“发布”以保存更改。

之后,您的访问者将能够使用缩略图查看您的页面列表。

如何在 WordPress 中轻松显示带有缩略图的页面列表

您还可以使用小部件中的短代码在侧边栏或页脚中显示页面列表。

显示包含特定网站页面的页面列表

要显示仅包含某些页面的页面列表,您需要将以下短代码添加到您的网站:

[pagelist id="20, 10, 35"]

此短代码将根据页面 ID 显示特定页面。有关更多详细信息,请参阅有关如何在 WordPress 中查找页面 ID 的指南。

显示包含您最新博客文章的列表

您还可以使用短代码来显示最新博客文章的列表。这可能是增加博客文章浏览量的好方法。

只需将以下短代码添加到 WordPress:

[pagelist type=post]

以下是您的读者所看到的包含最新博客文章的列表。

如何在 WordPress 中轻松显示带有缩略图的页面列表

替代方案:您还可以使用MonsterInsights在页面和其他网站小部件区域中显示带有缩略图的帖子列表。有关更多详细信息,请参阅有关如何在 WordPress 中按视图显示热门帖子的指南。

显示包含您已发布的每个页面的页面列表

最后,您可以显示带有缩略图的页面列表,其中包含您已发布的每个页面。

如果您想为读者创建存档页面或HTML 站点地图页面,这会很有用。添加的帖子缩略图使其比简单的页面列表更具吸引力。

您需要将以下短代码添加到您的网站:

[pagelist limit="-1"]

当您发布新页面时,您的页面列表将自动更新。

方法 2. 使用 WordPress 块编辑器显示带有缩略图的页面列表

在 WordPress 中显示页面列表的另一种方法是使用WordPress 块编辑器。

Wordpress REST API
Wordpress REST API

OpenClaw技能,提供WordPress REST API命令行工具,支持通过原生HTTP处理文章、页面、分类、标签、用户及自定义请求。

下载

注意:使用此方法时,您的页面列表将需要手动创建和更新,因为新页面发布后不会自动添加。

为此,请打开您要编辑的页面。

然后,单击“加号”添加块图标以打开块菜单。

如何在 WordPress 中轻松显示带有缩略图的页面列表

之后,在搜索框中搜索“列”。

然后,选择“列”块。

如何在 WordPress 中轻松显示带有缩略图的页面列表

这将显示可用列块的列表。

选择“30/70”列块。我们将使用左列作为缩略图,使用右列作为页面标题和简短摘要。

如何在 WordPress 中轻松显示带有缩略图的页面列表

然后,单击“加号”添加块图标。

之后,选择“图像”块来添加您的特色图像。您可以选择上传新图像,或从媒体库中选择一张。

如何在 WordPress 中轻松显示带有缩略图的页面列表

如果您想链接图像,请单击“插入链接”图标。

然后,只需添加您的页面 URL。

如何在 WordPress 中轻松显示带有缩略图的页面列表

添加图像后,单击右列中的“加号”添加块图标。

然后,搜索“标题”块并单击它以将其添加到您的页面。

如何在 WordPress 中轻松显示带有缩略图的页面列表

接下来,输入页面标题并突出显示它。

然后,单击“链接”图标添加指向该页面的链接。

如何在 WordPress 中轻松显示带有缩略图的页面列表

您可以通过单击打开或关闭开关来选择在同一页面或新选项卡中打开链接。

如果您想在标题下方添加文本,只需再次单击“添加块”图标并选择“段落”块即可。

如何在 WordPress 中轻松显示带有缩略图的页面列表

然后,只需在可用的文本区域中键入即可。

要使用刚刚创建的格式将更多项目添加到列表中,请单击列块并选择三个点的“选项”菜单。

如何在 WordPress 中轻松显示带有缩略图的页面列表

然后,从下拉列表中选择“复制”选项。

这将自动创建该列的副本。

如何在 WordPress 中轻松显示带有缩略图的页面列表

您所需要做的就是按照与上述相同的步骤来更改图像、标题和文本。

完成对页面列表的更改后,请务必点击页面顶部的“更新”或“发布”按钮。

现在,您的访问者将看到一个更具吸引力的页面列表,其中包含帖子缩略图。

如何在 WordPress 中轻松显示带有缩略图的页面列表

注意:还有另一个可用的块,称为“页面列表”块,可让您添加不带缩略图的页面列表。

但是,上面的手动方法是使用块编辑器添加带有缩略图的列表的唯一方法。

如果您希望创建完全自定义的页面,其中还包含带有缩略图的页面列表,那么您可以使用 SeedProd 插件通过拖放构建器来完成此操作。有关更多详细信息,请参阅有关如何在 WordPress 中创建自定义页面的指南。

我们希望本文能帮助您了解如何在 WordPress 中轻松显示带有缩略图的页面列表。您可能还想查看我们为小型企业精选的最佳实时聊天软件的专家以及有关如何注册域名的指南。

热门AI工具

更多
讯飞智作

讯飞智作是一款AI视频创作工具,AI文本配音工具,数字人课程、营销视频制作。

Laper
Laper Hot

Laper是专为编剧、导演和制片人推出的 AI 原生剧本创作工具。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

AionClaw
AionClaw Hot

AionClaw是一款面向办公、创作和编程任务的AI桌面智能体。

Atoms
Atoms Hot

Atoms是一款AI智能体工具,第一支自动构建真实业务的 AI 团队。

UpDream
UpDream Hot

一款AI视频创作工具,主要用于哔哩哔哩推出的自研AI视频创作工具,适合需要提升相关任务效率的用户。

VibeKnow
VibeKnow Hot

一款AI视频创作工具,主要用于全球首个AI知识视频创作平台,文档、文章、网页,一键生成视频,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

相关专题

更多
wordpress seo
wordpress seo

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

4715

2023.09.18

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

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

4859

2024.04.15

WordPress插件教程
WordPress插件教程

本专题整理热门WordPress插件资源,涵盖SEO优化、缓存加速、安全防护、表单管理、电商扩展等插件推荐与使用教程。

258

2026.06.16

WordPress建站教程大全
WordPress建站教程大全

本专题汇总WordPress教程相关内容,包括WordPress安装教程、建站教程、使用技巧、网站管理经验和实战案例,帮助用户快速掌握WordPress建站与运营方法。

500

2026.06.16

WordPress开发教程
WordPress开发教程

本专题提供WordPress开发技术资料,包括主题开发、插件开发、自定义功能开发、API调用及性能优化等内容。

638

2026.06.16

PixTV AI视频生成与无限画布创作
PixTV AI视频生成与无限画布创作

PixTV专题整理AI视频与视觉内容创作相关功能使用教程,涵盖AI生图、视频生成、无限画布、多模型创作、素材管理、声音音乐及视频剪辑等功能,帮助用户快速掌握PixTV从创意到成片的完整制作方法。

0

2026.09.29

Buffalo框架数据库开发全教程
Buffalo框架数据库开发全教程

本专题围绕Buffalo框架数据库开发,讲解database.yml多环境配置、soda与fizz迁移生成回滚、模型结构体标签、增删改查与条件查询、一对多与多对多关联、数据校验、回调钩子、事务处理及原生SQL执行能力。

200

2026.09.23

Buffalo框架路由与请求处理实操指南
Buffalo框架路由与请求处理实操指南

本专题讲解Buffalo框架路由与请求处理机制,涵盖路由注册与分组、资源路由、Handler编写规范、Context上下文方法、参数绑定、中间件编写挂载、Session与Cookie读写、Flash消息及错误页面定制方法。

120

2026.09.23

Buffalo框架零基础入门教程
Buffalo框架零基础入门教程

本专题整理Buffalo框架入门内容,涵盖Go环境准备、buffalo CLI安装、新项目生成、目录结构说明、dev热加载启动、数据库连接配置与常见报错排查,帮助新手按约定优于配置的思路跑通第一个Buffalo框架应用。

100

2026.09.23

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
如何在 Windows 11 上安装 XAMPP
如何在 Windows 11 上安装 XAMPP

共1课时 | 201人学习

第二十三期_前端开发
第二十三期_前端开发

共98课时 | 11.6万人学习

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

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn