Posts 博客列表 添加文章小部件

Estimated reading: 2 minutes 14 views

文章小部件(Posts widget)

将文章小部件添加到画布上

什么是文章小部件? 文章小部件允许您在网站上显示博客帖子列表或任何自定义帖子类型。它自动从WordPress数据库中拉取帖子,并以指定的布局和格式展示它们。

文章小部件提供了丰富的自定义选项,允许您选择帖子的显示方式。您可以自定义每个帖子的外观,包括标题、特色图片、摘要等。

常见用例 Alex是一位美食博主,正在建设一个网站,在那里他们可以分享美味的食谱和烹饪技巧。Alex希望创建一个专用页面,让访客能够轻松地探索和发现他们丰富的食谱集。为此,Alex使用了文章小部件。

Alex在他的主页上设计了一个美丽的食谱博客,并以经典的网格布局展示他们的菜肴,配以引人入胜的图片和简短的描述。Alex网站上的访客可以轻松浏览食谱,点击他们喜欢的食谱,并访问详细的烹饪指南和成分列表。

Posts widget 18

额外的使用案例 在新闻网站首页显示最近的新闻文章。 在事件管理网站上突出即将到来的事件。 在自由职业者的网站上展示作品集项目。 在物业管理网站上显示房地产列表。

设置文章小部件:

一步步来 将文章小部件添加到画布上。有关详情,请参见添加页面元素

在内容标签页(Content tab)下的布局部分(Layout section),选择最适合您网页设计的皮肤(Skin)。您有三个选项可以选择:经典(Classic)、卡片(Card)和完整内容(Full Content)。

Posts widget 13根据您选择的皮肤类型,布局部分的选项会有所不同。

  • 经典皮肤(Classic Skin):提供可自定义的传统设计用于帖子。您可以设置列数、每页帖子数、图片位置、启用砌砖布局、设置图片分辨率、标题显示、摘要长度、元数据显示、阅读更多按钮等。

Posts widget 2

  • 卡片皮肤(Cards Skin):为帖子提供时尚的材料设计风格。用户可以设置列数、每页帖子数、特色图片显示、启用砌砖布局、定义图片分辨率、标题显示、摘要长度、元数据显示、阅读更多按钮、徽章显示、头像显示等。

Posts widget 12

  • 完整内容皮肤(Full Content Skin):在帖子列表页面上显示整个帖子内容。您可以设置每页帖子数、特色图片显示、图片分辨率、标题显示、元数据显示、在新标签页中打开帖子选项。

Posts widget 9在查询部分(Query section),选择小部件从中获取其内容的来源(Source)。您可以选择的选项包括帖子、页面、登陆页面、自定义帖子类型(如果可用)、手动选择、当前查询和相关。根据您选择的来源,您可以根据不同的参数包含/排除帖子:

包含(Include)

  • 包含方式(Include By):选择术语(Term)或作者(Author),然后搜索并选择特定项目。
  • 日期(Date):按时间范围过滤帖子(例如,过去一天、过去一周、自定义)。
  • 排序方式(Order By):设置帖子显示的顺序。选项包括日期、标题、菜单顺序或随机。
  • 排序(Order):选择降序(DESC)或升序(ASC)。
  • 忽略置顶帖子(Ignore Sticky Posts):决定是否在结果中包含置顶帖子。
  • 查询 ID(Query ID):为您的查询分配一个独特的自定义ID,以启用服务器端过滤。您可以手动输入ID到指定字段,或使用动态标签自动填充相关数据。

Posts widget 1 Posts Widget 7

排除(Exclude)

  • 排除方式(Exclude By):指定排除帖子的标准(例如,当前帖子、手动选择、术语、作者)。
  • 避免重复(Avoid Duplicates):选择是否防止在前端显示重复的帖子。Elementor在页面级别(而不是小部件级别)查找重复项,因为在文章小部件中不能有重复项。
  • 偏移(Offset):跳过一定数量的帖子。例如,设置为2将跳过前2个帖子。
  • 日期(Date):根据时间范围过滤帖子。选项包括所有、过去一天、过去一周、过去一个月、过去一个季度、过去一年、自定义(选择之前或之后的日期)。
  • 排序方式(Order By):设置排除帖子的顺序。
  • 排序(Order):选择降序或升序。
  • 忽略置顶帖子(Ignore Sticky Posts):决定是否在排除结果中包含置顶帖子。
  • 查询 ID(Query ID):给您的查询赋予一个独特的自定义ID,以允许服务器端过滤。有关如何使用此高级功能的更多信息,请查看开发者文档。

Posts widget 17

注意 如果您将来源选择为相关(Related)并且将包含方式(Include By)术语设置为类别(Category),小部件将显示与当前正在查看的帖子分配的类别相关的帖子。例如,如果用户正在阅读一个属于旅行类别的帖子,页面将显示也归类于旅行的相关帖子。如果当前帖子分配了多个类别,则相关帖子将从字母顺序上第一个列出的类别中拉取。

但是,如果您为相关帖子设置了后备选项,它将不会按照上述查询工作。相反,它将显示指定为后备的内容,这可能是最近的帖子或由您手动选择的任何其他帖子类型。

Posts widget 8 在分页部分(Pagination section),选择帖子的分页类型。可用选项包括:无(None)、数字(Numbers)、前一个/后一个(Previous/Next)、数字+前一个/后一个(Numbers + Previous/Next)、点击加载(Load On Click)或无限滚动(Infinite Scroll)。

Posts widget 16 Posts Widget 11

 

Settings for the Posts Widget

文章小部件的设置 您可以使用内容、样式和其他高级参数自定义小部件,这为您提供了极大的灵活性,以根据您的需求进行定制。点击下面的标签查看此小部件的所有设置选项。

Content tab

Layout (Classic)

皮肤 选择“经典”(Classic)。

列数 设置将显示的列数,从1到6列。

每页帖子数 设置显示的确切帖子数量。

图片位置 设置图片相对于内容的位置。选项包括:顶部 / 左侧 / 右侧 / 无。

砌砖布局 开启或关闭。

图片分辨率 设置图片的大小,从缩略图到完整大小。

图片比例 设置图片的确切比例。

图片宽度 设置图片的确切宽度。

标题 选择显示或隐藏帖子标题。

标题HTML标签 选择用于标题的HTML标签,从H1到H6,或div、span、p。

摘要 选择显示或隐藏摘要。

摘要长度 选择摘要的长度,设置显示的确切单词数量。

应用于自定义摘要 启用时,将覆盖在WP编辑器中编写的手动摘要的长度。

元数据 选择要在小部件中显示的元数据。点击字段将打开选项列表。选项包括作者、日期、时间和评论。

元素间分隔符 选择您想要使用的元数据之间的分隔符。

阅读更多 显示或隐藏“阅读更多”按钮。

阅读更多文本 自定义“阅读更多”文本。您还可以使用动态标签功能从站点的元数据或自定义字段调用。

自动对齐按钮 滑动到是(Yes),将“阅读更多”按钮对齐到包装器的底部。当帖子标题超过一行时,此功能非常有用。

在新窗口中打开 如果您希望帖子在新标签页中打开,滑动到是(Yes)。

Posts widget 19 Posts Widget 13

 

Layout (Cards)

皮肤 选择“卡片”(Cards)。

注意:您可以从三种皮肤选项中选择:经典(Classic)、卡片(Card)和全内容(Full Content)。内容标签中的自定义选项将根据您选择的皮肤类型而有所不同。

列数 选择您希望帖子显示的列数,从1到6列。

每页帖子数 决定每页要显示多少篇帖子。

显示图片位置 切换以显示或隐藏与每个帖子关联的主要/特色图片。

砌砖布局 切换以启用或禁用砌砖布局,这种布局调整元素的位置,使其整齐地拼接在一起。

图片分辨率 选择要显示的图片大小,从小缩略图到全尺寸图片。

图片比例 设置图片的确切形状。

标题 选择是显示还是隐藏每个帖子的标题。

标题HTML标签 选择用于标题的HTML标签类型,如标题(H1至H6)或其他内联标签(div、span、p)。

摘要 决定是否显示每个帖子的简短摘要。

摘要长度 设置摘要中要显示的单词数量。

应用于自定义摘要 启用时,将覆盖WordPress编辑器中编写的任何手动摘要。

元数据 选择要与每篇帖子一起显示的额外信息,如作者姓名、发布日期、时间或评论。

阅读更多 切换以显示或隐藏前往完整帖子的按钮。

阅读更多文本 自定义“阅读更多”按钮上的文本。您也可以使用动态标签功能,从站点的元数据或自定义字段调用。

在新窗口中打开 启用此选项以调整“阅读更多”按钮的位置,确保其整齐对齐。

徽章 决定点击时帖子是否在新浏览器标签页中打开。

徽章分类法 选择是否显示显示额外信息(如帖子类别或标签)的徽章。

头像 决定是否显示帖子作者的个人资料图片。

Posts widget 10 1 Posts Widget 15

 

Layout (Full Content)

皮肤 选择“全内容”(Full Content)。

注意:您可以从三种皮肤选项中选择:经典(Classic)、卡片(Card)和全内容(Full Content)。内容标签中的自定义选项将根据您选择的皮肤类型而有所不同。

每页帖子数 决定您想在每页看到多少篇帖子。

行间距 选择是否显示每篇帖子的特色图片,选项为“是”或“否”。

显示缩略图 设置特色图片的大小,从小缩略图到全图尺寸。

图片分辨率 设置特色图片的大小,从小缩略图到全图尺寸。

图片比例 设置特色图片的确切形状。

图片宽度 调整特色图片的宽度。

标题 决定是否显示每篇帖子的标题。

标题HTML标签 选择用于格式化标题的HTML标签,如H1至H6或其他选项,如div、span或p。

元数据 选择要显示的每篇帖子的附加信息,如作者、日期、时间或评论。

元数据间分隔符 指定您想用来分隔元数据的字符。

在新窗口中打开 切换选择是否希望帖子在新浏览器标签中打开。

Posts widget 6

 

Query

Source 来源 选择小部件获取其内容的来源。选项包括帖子(Posts)、页面(Pages)、自定义帖子类型(Custom post types)、手动选择(Manual Selection)、当前查询(Current Query)和相关(Related)。根据您的选择,您将有过滤选项。

Include 包含 选择特定的帖子或页面以包含在小部件中。您可以按术语或作者进行过滤。可用的术语分类包括类别(categories)、标签(tags)、格式(formats)和自定义分类(custom taxonomies)。您还可以按日期进行筛选,选择如过去一天(Past Day)、过去一周(Past Week)等选项,或设置自定义日期范围。

Exclude 排除 选择排除某些帖子的标准。选项包括当前帖子(Current Post)、手动选择(Manual Selection)、术语(Term)或作者(Author)。您可以手动选择要排除的帖子、术语或作者。

Posts widget 11

Pagination

Pagination

  • Page Limit: 设置每页显示的帖子数量。
  • Previous Label: 自定义上一页按钮的文本。
  • Next Label: 自定义下一页按钮的文本。
  • Alignment: 选择分页控件的对齐方式。

If choose: Numbers

  • Page Limit: 设置每页显示的帖子数量。
  • Shorten: 切换是否需要缩短显示。
  • Alignment: 选择分页控件的对齐方式 (Right, Center, Left)。

If choose: Previous / Next

  • Page Limit: 设置每页显示的帖子数量。
  • Previous Label: 自定义上一页按钮的文本。
  • Next Label: 自定义下一页按钮的文本。
  • Alignment: 选择分页控件的对齐方式。

If choose: Numbers + Previous / Next

  • Page Limit: 设置每页显示的帖子数量。
  • Previous Label: 自定义上一页按钮的文本。
  • Next Label: 自定义下一页按钮的文本。
  • Shorten: 切换是否需要缩短显示。
  • Alignment: 选择分页控件的对齐方式。

If choose: Load On Click

  • Spinner: 选择是否显示加载旋转器。
  • Button Text: 设置加载更多按钮的文本。
  • Alignment: 选择加载更多按钮的对齐方式。
  • Icon: 为按钮选择一个图标。
  • Icon Spacing: 调整图标周围的间距。
  • Button ID: 分配一个唯一的按钮 ID,这在 Google Analytics 事件等情况下很有帮助。

If choose: Infinite Scroll

  • Spinner: 选择是否显示加载旋转器。
  • No More Posts Message: 添加自定义消息并选择对齐方式。

Individual Pagination

  • Allows you to control pagination individually for multiple Posts Widgets on the same page. 当启用时,每个小部件都将拥有自己的分页设置。

Posts widget 7 Posts Widget 19

Style tab

Layout

Columns Gap

  • 使用滑块调整列之间的间距。

Rows Gap

  • 使用滑块设置行之间的间距。

Alignment

  • 指定小部件在其容器内的对齐方式。您可以选择左对齐、居中对齐或右对齐等选项。

Posts widget 15 Posts Widget 21

 

Box

Box [Classic Skin]

  • Border Width:调整盒子周围边框的厚度。
  • Border Radius:设置边框的圆角程度。有关详细信息,请查看边框圆角工具。
  • Padding:设置整个盒子内部的间距。
  • Content Padding:仅调整盒子内容内的间距。
  • Box Shadow:为盒子应用预定义的阴影效果。
  • Background Color:选择盒子在正常和悬停状态下的颜色。
  • Border Color:选择盒子在正常和悬停状态下边框的颜色。

Card [Cards Skin]

  • Background Color:设置背景颜色。有关详细信息,请查看创建背景。
  • Border Color:确定边框的颜色。
  • Border Width:调整每张卡片周围边框的厚度。
  • Border Radius:设置每张卡片的圆角程度。
  • Horizontal Padding:控制内容与卡片左右边缘之间的间距。
  • Vertical Padding:与水平内边距类似,控制内容与卡片上下边缘之间的间距。
  • Box Shadow:添加阴影效果。了解更多关于阴影的信息。
  • Hover Effect:启用当用户将鼠标悬停在卡片上时的效果。
  • Meta Border Color:指定元数据(如作者名称、日期等)周围边框的颜色。

Box [Full Content Skin]

  • Border Width:调整盒子周围边框的厚度。
  • Border Radius:设置边框的圆角程度。
  • Padding:设置整个盒子内部的间距。
  • Content Padding:仅调整盒子内容内的间距。
  • Box Shadow:为盒子应用预定义的阴影效果。
  • Background Color:选择盒子在正常和悬停状态下的颜色。
  • Border Color:选择盒子在正常和悬停状态下边框的颜色。

Posts widget 14

Image

Border Radius 设置特色图片的边角圆度。

Spacing 调整特色图片与内容之间的间距。

CSS Filters 使用 CSS 滤镜调整特色图片的风格,可设置模糊、亮度、对比度、饱和度和色调。

Posts widget 3

 

Content

Title Color: 选择标题的颜色。 Typography: 设置标题的字体样式。更多详情请查看 Typography。 Spacing: 调整标题与内容之间的间隔。

Meta Color: 设置元数据的颜色。 Separator Color: 选择元数据项之间分隔符的颜色。 Typography: 设置元数据的字体样式。 Spacing: 调整元数据与摘要之间的间隔。

Posts widget 20

 

Pagination

Typography 选择字体家族、大小和样式。更多详情请查看 Typography。

Colors 设置 Normal(正常)、Hover(悬停)和 Active(活跃)状态的颜色。

Space Between 调整分页元素之间的间隔。

Spacing 调整整体间隔。

Button (if Load on Click is selected) Typography: 设置按钮文本的字体样式。 Text Shadow: 给按钮文本应用阴影效果。 Text Color: 设置正常和悬停状态的字体颜色。 Background Type: 选择按钮背景的填充类型,可选纯色或渐变。 Border Style: 选择边框类型、宽度、颜色和圆角。更多详情请查看 Border type。 Box Shadow: 给按钮应用阴影。 Padding: 调整按钮的内边距。

Posts widget 5

 

Advanced tab

高级选项卡提供了控制小部件位置、调整间距、添加自定义代码等选项。

Learn more about the Advanced tab settings.

Advanced 边距

Posts widget 4

Leave a Reply

Your email address will not be published. Required fields are marked *

Share this Doc

Posts 博客列表 添加文章小部件

Or copy link

CONTENTS