当你开始建立一个网站时,使用一个适合你的内容,对你的访问者产生最佳影响是很重要的。通过本指南,您可以学习如何使用主题的tagDiv Composer Flex Block元素。
您可以从5个Flex Block元素中进行选择,以创建自己的自定义模块。您可以更改缩略图的大小、列布局、显示的文章数量等等。
通过将Flex Block拖到预览区域的行上,将Flex Block添加到页面。根据小缩略图显示的General样式选择要使用的Flex Block类型。
每个小缩略图都可以快速查看您可以创建的块的样式。
块设置分为5个选项卡:常规、过滤器、布局、样式和CSS。但是,不要将Flex Blocks与Flex Big Grids混淆,因为它们具有不同的布局。
一、预设的Flex Block样式
使用General选项卡快速设置Flex Block,因为它带有一组预设样式
本部分提供了一个快速面板,用于设置块的整体字体、文本对齐方式、图像格式、快速全局强调颜色、列数。
您还可以选择实际的布局样式,并选择显示或隐藏单个元信息。该面板根据所选的Flex Block显示不同的选项。
常规设置
General选项卡提供了大量的设置,并且在所有Flex模块中都相同。它包括以下内容:
Custom title (可选) – 为此块设置标题;如果将其留空,则该块不会显示任何标题。
Title URL(可选) – 为块标题设置自定义 URL。
Header template – 您可以从18种可用的标题样式中进行选择。如果您为该块设置了标题,则会更改该部分的样式。
Title background color(可选)– 为此块选择自定义标题背景颜色。标题背景颜色也会影响所显示文章的悬停颜色以及 Ajax 过滤器悬停颜色。
Title text color(可选)– 选择自定义标题文本颜色。
Title tag (SEO) – 这适用于标题文本的 HTML 标签。
Content-Length – 选择块上使用的每个模块的标题和摘要长度。
Limit post number – 如果该字段为空,则限制文章数量是WordPress设置>阅读中的数字
Offset posts – 以偏移量开始计数。如果你有一个块在这个块之前显示五篇文章,你可以让这个块从第6篇文章开始(通过使用偏移量 5)
Open posts in new tab – 文章将在新标签页中打开。此选项在图像缩略图和文章标题链接上添加目标空白。
Extra class – 此输入字段可用于为您的块添加特定或唯一的class,该class可用于向块添加其他自定义项。
Cache– 在Flex Block上启用缓存选项可通过缓存输出来减少数据库请求。
二、过滤器
在Filter选项卡中,您可以选择要为块显示的内容。
Post ID filter – 使用文章的ID按特定文章过滤您的块。您可以通过访问WP Admin>文章部分,将鼠标悬停在文章标题上并检查浏览器左下角区域显示的链接来获取文章ID。使用URL提取 ID。要从区块中排除文章,请在每个ID前面添加一个“-”符号。
Category Filter – 从包含所有现有类别的下拉菜单中为块选择特定类别。
特殊过滤器:
1. Single Post Template:(您应该将简码放在单文章模板中)
Single – 来自作者的更多内容:您可以在单个模板中的Flex Block上显示和排序同一作者的文章。
Single – 按类别相关:可以按当前文章类别显示和排序文章。
Single – 与标签相关:文章可以按当前文章标签排序。
Single – 与自定义分类相关:文章可以根据本文的自定义分类显示。
Single - 兄弟姐妹:这将显示您当前帖子的所有兄弟姐妹文章。
2.Category Template: Category:类别 - 当前类别;(您应该将简码放在类别模板中)
3. Author Template: Author:作者 – 当前作者;(您应该将简码放在作者模板中)
4. Tag Template: Tag:标签 – 当前标签;(您应该将简码放在标签模板中)
5. Date Template: Date:日期 - 当前日期;(您应该将简码放在日期模板中) ;
6. Search Template: Search:搜索 – 当前搜索。(您应该将简码放在搜索模板中) ;
7. Taxonomy Template: Taxonomy:自定义分类 – 当前自定义分类。(您应该将简码放在分类模板中);
Multiple terms filter – 此选项允许您按多个类别过滤文章。该过程类似于文章ID过滤器上使用的过程。添加以逗号分隔的类别ID(例如:13、23、18)。如果要排除类别,请在每个ID前面添加一个“-”符号。如果您想显示某个类别中的文章并删除其子类别之一中包含的文章,请先添加父类别 ID(例如时尚类别 – 341),然后添加子类别 ID(例如每日子类别 ID:342),并在前面加上“-”符号。如果您决定使用Multiple terms filter,则会忽略标准类别过滤器。
Posts(cpts) must belong to all terms – 显示的文章(cpts) 必须属于所有自定义分类。
Filter by tag slug – 按标签过滤文章,并输入用逗号分隔的标签 slug(例如:tag1、tag2、tag3)。
Multiple authors filter – 这允许您按作者过滤文章。输入以逗号分隔的作者 ID(例如:13、23、18)。
Post type – 如果要显示自定义文章类型,请使用此过滤器。添加文章类型的名称。这是由用于创建 CPT 的插件提供的,或者由用户提供(如果它是定制的)。用法:文章、页面、事件 – 编写 1 种或多种以逗号分隔的文章类型。
Include custom field – 按特定自定义字段(ACF true_false类型)包含文章。如果 CF meta 值为 true,则文章将显示在块上。
Exclude custom field – 按特定自定义字段(ACF true_false类型)排除文章。如果 CF 元值为 true,则该文章将被排除。
排序顺序
此选项允许您对文章进行排序。这些选项中的大多数都是不言自明的,但有一些选项有要求:
标准排序选项:
Latest posts – 它显示从最新到最旧的文章。
Oldest posts – 它与前面的排序选项相反。
Modified date – 它根据文章的最新更新时间显示文章。
Alphabetical A > Z – 您的文章按名称按字母顺序排序。
Random posts – 此排序选项在每次加载页面时随机显示文章。每次刷新页面时,上面都会有不同的文章。作为说明。请勿将此排序选项与分页一起使用,因为它可能会导致重复的文章。
Random posts from the last 7 days – 此字段根据过去 7 天内发布的帖子显示随机文章。
具有额外要求的排序选项:
Popular (all time) – 此排序选项要求文章浏览计数处于活动状态。如果禁用浏览计数,则此选项不起作用。
Popular (last 7 days) – 您必须从Theme Panel > Block Settings > 7 Days排序中启用 7 天文章排序。
Popular (last 24 hours) – 显示过去 24 小时内浏览量最多的文章
Popular (last 48 hours) – 显示过去 48 小时内浏览量最多的文章
Popular (jetpack + stats module required) – 不适用于其他设置/分页,需要安装 Jetpack – 统计模块。
Featured – 它显示由主题自动创建的精选类别中包含的文章。如果删除此类别并想要恢复它,请创建一个名称为Featured别名的新类别。
Random posts today – 此字段要求文章计数处于活动状态。
Highest rated – 需要文章评分,要了解如何设置评论,请查看以下指南。
Highest rated (reviews) – 评分最高(评论)排序选项根据作者的评论从高到低显示文章。
Lowest rated (reviews) - 它与之前的排序选项相反。
Highest rated (user reviews) –评分最高(评论)排序选项根据用户评论按降序排列文章。
Lowest rated (user reviews) – 它与前面的排序选项相反。
Most commented – 要求评论在文章上处于活动状态。您可以启用/禁用Theme Panel > Post Settings > Post and Custom Post Types中的评论。
Posts linked to current article – 该选项仅适用于单个模板,并且只有在使用Posts Form Link To Post元素时才能创建此关系。此元素可用于文章提交表单。
Parent post – 显示当前子文章的父文章。
Child posts – 显示属于当前父文章的子文章。
Show bookmark posts only – 它专门显示已添加到收藏夹的文章。
Show exclusive posts only – 这将显示受内容储物柜限制的文章。
Ajax 类别下拉列表:
Filter type – 在标题旁边显示类别、分类、作者或标签的列表。用户能够看到在此块上过滤的文章,这些文章是用 Ajax 动态加载的,而无需离开页面。Ajax 过滤器(流行度除外)需要一个额外的参数。
Show the following IDs – Ajax下拉列表仅显示您在此处输入的(作者 ID、类别 ID 或标记 ID),用逗号分隔。如果下面的输入中未提供 ID,则筛选器将显示所有可用项目(例如:所有作者、所有类别等)。
Filter drop-down text – 允许您从下拉 Ajax 列表中选择第一项的名称。默认情况下,它命名为“全部”。
Content preloading – 当预加载部分处于活动状态时,主题会在初始页面加载时加载每个 Ajax 过滤器的第一页内容。
额外:
Pagination – 您可以选择将分页添加到您的块中。
Next Prev ajax – 添加两个导航箭头来浏览文章。
Load More button – 加载更多按钮出现在 Flex Block的底部,允许用户查看更多文章
Infinite Load – 当用户到达 Flex Block 的末尾时,自动加载更多文章。
Infinite load show ‘Load more’ after x pages - 如果您选择无限加载,您可以使用此选项使其在某些页面后停止,加载更多按钮出现在页面底部,允许用户加载更多文章。注意:对于无限加载,您可能需要指定按钮显示多少页后,否则它会加载文章直到完成。
Next Prev swipe – 添加用户向左或向右滑动以加载更多文章的功能(注意!您必须启用选项 Pagination: Next Prev ajax)
三、布局
Layout选项卡是允许您自定义Flex Block表单的部分。Flex Block布局可以由1或2个模块组成。您可以在本节中找到每个Flex Block的设置,还可以找到特定Flex Block上使用的每个模块的设置。
单个Flex Block或多或少具有以下选项,具体取决于所选的Flex Block类型。为了使本指南尽可能简短,我们只提及最重要的选项,因为有很多自定义选项可供选择。
Overall layout
此部分允许您选择块显示的每列的列数或模块数、每个模块之间的间距(以像素为单位)、设置列周围的边距和填充以及在元素之间添加分隔符。
如果您选择的Flex Block由2个模块组成,则第二个模块有第二个布局部分,以便对模块进行更深入的自定义。
Article image
此部分允许您控制为内容显示的缩略图。Flex Block元素有4种缩略图大小,您可以在本节中选择适当地命名为 small、default、large 或 full。
选择图像大小后,您还可以使用其垂直对齐方式、图像宽度和高度(以百分比表示)、图像位置、图像半径,或者选择完全隐藏图像(如果您愿意)。
Article meta information
元信息是指文章标题、作者、日期、摘要和特定块中显示的文章的其他信息。
您可以选择元信息的位置、对齐方式,以及为每个单独的元素(如文章标题、类别标签、作者、日期和摘要)设置边距和填充。如果你想隐藏某些元素,你也可以这样做。
作者部分允许您使用作者图像以及调整其大小。
Flex blocks 1 和 5 还可以在本节中添加“阅读更多”按钮。
四、样式
style选项卡是关于设置布局样式的,允许您更改新创建的块元素的字体和颜色。
Block fonts
顶部允许您更改字体大小、字体系列、行高、字体粗细、字母间距和文本转换。本节介绍块标题、Ajax类别和加载更多按钮的字体。
Module fonts
模块字体部分控制每个模块的字体设置,特别是文章标题、类别标签、元信息、摘要以及“阅读更多”按钮(如果存在)。
Colors
颜色设置允许您更改每个布局部分的单个颜色。您可以更改文本颜色、背景颜色、悬停颜色,以及添加阴影效果和阴影偏移。
五、CSS
CSS选项卡将块CSS作为一个整体引用,并允许您相应地更改它。本部分包括 CSS 框模型,您可以在其中控制块的边距、填充和边框。
其他设置包括边框设置(颜色、样式、半径和宽度)、阴影(阴影大小、颜色、偏移量)、块整体背景颜色或图像(以及它们的位置和不透明度)。
颜色叠加功能会在块的顶部添加渐变,您可以在其中选择多种颜色来添加所有新的创意渐变,从而将您的块样式提升到一个新的水平。
显示选项允许您显示或隐藏特定块。如果要使用顶部设备选项卡隐藏特定设备的特定块,这将非常有用。