整理媒体库

介绍

请和我一起探索媒体库以及整理所有媒体文件的方法。你可以向媒体库添加各种类型的媒体,包括照片、截图、音频、PDF文档、电子表格、PowerPoint演示文稿等。如果你的媒体库中有大量文件,管理这些媒体可能会开始感到杂乱无章或令人不知所措。你可能会问,难道没有办法对媒体进行分类吗?答案是有的,我们将使用一个插件来实现这个目标。

媒体库整理器

让我们前往插件页面,点击“安装新插件”。我在搜索框中输入“Media plugin organizer”,一两秒内,就可以从各种选项中进行选择。我将选择一个名为“Media Library Organizer”的开源插件。Media Library Organizer 不会替换媒体库的外观和感觉,而是会增强WordPress的用户界面,添加批量整理、搜索和筛选媒体所需的关键功能。插件目录中还有许多其他插件,例如 WordPress Real Media Library、FileBird 和 Wicked Folders。我们继续安装 Media Library Organizer 插件。请始终记得点击“启用”。

分类

当我返回媒体库时,你会看到左侧新增了一个名为“媒体分类”的侧边栏,并且有三个选项:添加、编辑和删除。由于我还没有创建任何分类,目前只能添加新的分类和子分类。我将创建一个新分类,命名为“旅行”。然后,点击“批量选择”,挑选合适的图片。完成后,我将它们拖放到新分类中。我想创建的第二个分类叫做“自然”,创建文件夹后,再次点击“批量选择”,选择所有要添加到这个分类的相关图片。选择完所有媒体后,我将它们拖入新分类“自然”中。我想创建的第三个分类叫做“生活方式”。

子分类

现在,我将点击分类来添加子分类。我右键点击鼠标,选择“添加子分类”,并命名我的子分类。第一个叫做“运动”,第二个是“食谱”。完成后,点击“批量选择”,选择运动图片,拖放到新分类中。最后,我想在“食谱”下再创建三个子分类。第一个分类是“素食”,第二个是“肉类”,最后一个是“早餐”。创建子分类后,我选择“批量选择”,将图片拖放到各自的分类中。先是早餐,然后是素食选项,最后是肉类菜肴。现在,你会看到所有图片都在各自的分类中。

结论

我们在这里看到的分类显示方式称为树状视图,用于轻松搜索、筛选和批量分类。如果点击“未分配”,你将能够查看所有尚未分类的图片或文件。如果你右键点击某个分类并选择删除,图片或文件只会回到未分配状态。正如你所见,使用媒体管理插件可以帮助你整理网站媒体,并让你感觉更有掌控力。

创建自定义同步与非同步模式


同步与非同步

在本课中,我们将学习区分、创建和管理同步与非同步模式。当您创建了一个想要保留并重复使用的特殊设计时,可以将其保存为模式,并指定是否同步。同步模式以前被称为可重用区块,对同步模式的更改将应用于您网站中添加了该模式的所有部分。正如我们在本例中所见,当我更新一个模式中的内容时,它会自动更新另一个模式,因为它们是同步的。

非同步模式只是普通的模式,可以独立编辑。它们可以重复使用和更改,而不会改变或影响原始模式。在本例中,我更改了一个非同步模式中的图片,由于模式未同步,原始模式中的图片没有发生变化。

创建自定义模式

例如,假设您找到或创建了一个特殊设计,并想将其保存为模式。选择容器区块,点击三个垂直点,然后选择创建模式。接着,我们可以为其命名并添加到相关类别中。然后,我们可以将其保存为同步或非同步模式。在本例中,我将保存为同步模式,然后点击创建。当您点击左上角的插入器,选择模式时,您会看到该模式已添加到“我的模式”区域,您可以在那里找到所有自定义模式。

站点编辑器

您也可以在站点编辑器中添加、编辑和管理自定义的同步与非同步模式。让我们前往外观,点击编辑器。这当然会将我们带到站点编辑器。如果我们进入模式,我们可以管理自定义模式、主题提供的模式,以及头部、底部和通用模板部分模式。如果我们进入“我的模式”,我们将看到所有已创建的自定义模式。

同步模式有一个紫色图标,而非同步模式只会显示名称。如果您想将主题附带的某个模式保存为同步或非同步模式,请导航到相关模式,点击三个垂直点,选择复制。然后,我们可以更新名称并保存为同步或非同步模式。在本例中,我将保存为非同步模式。然后,我们可以选择复制,当返回“我的模式”区域时,我们会看到该模式现在是我们可以随意修改和更新的自定义模式之一。

要创建自定义模式,请点击模式旁边的加号图标,选择创建模式。命名后,我们可以将其添加到相关类别。在本例中,我将保存为非同步模式,然后点击创建。然后,我们可以继续创建新模式。完成后,我们可以点击保存,当返回“我的模式”区域时,我们可以查看新的非同步模式。

添加模式

最后,让我们将这个自定义模式添加到我们的一个页面中。让我们前往页面,选择相关页面,在本例中是我的“关于”页面。然后,我将打开列表视图,确保将内容添加到文章内容区块中。要添加非同步模式,我将点击左上角的插入器,进入模式,点击“我的模式”,然后选择所需的非同步模式。

结论

祝您在创建和管理自己的自定义模板时一切顺利。

仅用模式构建页面


简介

在本课中,我将向你展示如何仅使用模式来构建整个页面。块模式是一组预先设计好的块,你可以将它们插入到页面和文章中,然后用自己的内容进行自定义。使用块模式是一种简单的方法,可以创建结合不同块的美观布局。模式不仅能节省你的时间,还能激发创意。

添加和选择模式

要添加主题自带的模式,请点击左上角的插入器,然后进入“模式”。接着,你可以按类别浏览模式,并在右侧查看预览。如果找不到你需要的模式,可以前往模式目录,方法是访问 WordPress.org,点击“扩展”,然后选择“模式”。我建议你浏览所有模式,并点赞那些吸引你的。一旦你点击星标,该模式就会成为你收藏模式列表的一部分;当你进入“收藏”时,就能看到所有符合你设计需求的模式。

示例页面

让我展示一个我为马术学校使用模式创建的服务页面。在顶部,我们有一个介绍、服务列表,然后是为每项服务单独设置的部分。首先,我们有骑马课程及价格列表,接着是骑马远足、生日派对和假期项目。让我们看看如何仅使用模式来实现这一点。

规划阶段

首先,我在工作文档中规划了我的页面。然后,我浏览了所有标记为收藏的模式。接着,我复制了模式的 URL,并将其粘贴到相关部分的下方。现在基础工作已经完成,我们可以逐一打开每个模式。

构建页面

然后,我们将复制模式,复制后,前往我们的网站并粘贴第一个模式。接着,我们可以复制并粘贴服务模式,然后依次向下操作。我实际上只是使用电脑快捷键粘贴命令 V。现在,我已经将所有模式添加到页面中,我们可以开始编辑了。所以,如你所见,我们现在有了页面结构。

让我们从第一部分开始,替换相关图片。如你所见,我已经将所有图片添加到媒体库中。然后,我们可以开始更改右侧的内容。我将更新标题。我还想更改按钮块或行动号召的背景颜色。顶部的文本不是标题,所以我会将其改为段落。然后,我们更改措辞以及文本颜色。这样,第一部分就完成了。

对于服务部分,我将把组块改为全宽,并将左右内边距改为 60 像素,与顶部和底部相同。然后,将背景颜色改为第三色,接着添加我们提供的服务:骑马课程、骑马远足、生日派对和假期项目。

对于下一部分,我将把列块改为全宽,然后将滑块上的内边距改为 4。我会替换图片,重置顶部文本的字体大小,并写上“从初学者到高级”。然后,将部分标题改为“骑马课程”,并取消加粗。我还会重置占位文本的字体大小,并为该部分添加更多文本。最后,我会复制之前按钮块或行动号召的样式,并将该按钮块的样式粘贴到另一个上。然后,将行动号召改为“立即预订”,这样就完成了。

对于价格表,我将为组块选择全宽,然后将背景颜色改为第三色,并将块的圆角半径改为 0 像素。然后,修改标题,确保它是标题 2,并写上“价格”。接着,我们可以删除下面的文本,并开始向表格中添加内容。现在,我们的价格表准备好了。

对于骑马远足部分,我将更新左列的内容,删除底部的图片,并替换内容旁边的两张图片。最后,将列块的内边距改为 4。这样,这部分也完成了。

接下来是生日部分。替换图片后,我将选择列块并将其改为全宽。然后,使用滑块将内边距改为 4。接着,删除右列的内容,并用标题、占位内容和行动号召进行更新。最后,将列块的背景颜色改为第三色。

在最后一部分,我将把列块调整为宽幅,删除右列的内容,添加新的标题、内容和行动号召按钮,最后替换图片。替换完所有四张图片后,我的服务页面就完成了。最后,我会为所有图片添加替代文本,检查内容、标题和样式,并确保我的页面或网站对移动设备响应友好。

高级WordPress区块布局

介绍

在本课中,我们将探索 WordPress 区块布局。我们将学习嵌套和分组区块,以创建高级布局和区块结构。提醒一下,我们使用容器区块(如组区块、列区块、封面区块、媒体与文本区块、行区块、堆叠区块和网格区块)来将区块嵌套在一起。容器区块作为其他区块的容器或包装器,允许您对相关内容进行分组,并对整个组应用样式或设置。

示例 1

在第一个示例中,让我们重新创建以下内容。我将一个标题、一个分隔符和一个列区块组合在一起。首先,我将添加一个组区块并选择一个容器。然后,我将打开侧边栏设置,并取消选择“内部区块使用内容宽度”,因为我想更改区块的宽度。接着,我将使用区块工具栏将宽度更改为宽宽度。然后,在组区块内部,我将添加一个标题和相关文本。我将按住 Shift 键,然后按回车键移动到下一行。在我的标题下方,我将添加一个分隔符区块。在区块工具栏中,我将样式更改为宽线。在分隔符区块下方,我们可以添加一个列区块。选择两个等宽的列。然后,在左侧和右侧列中添加文本。

现在,我们可以继续进行样式设置。首先,我将选择标题。然后,打开我的排版选项。首先,选择外观。并将外观更改为细体。然后,我将添加一个自定义大小。在这种情况下,是 5 REM。最后,我还会将字母大小写更改为大写。然后,我将保持左侧列中的文本不变。但我会将右侧列中的文本大小更改为小号以形成对比。然后,我将选择组区块或容器区块,并在组区块内容周围添加一些内边距。这样,我们的第一个设计就完成了。

示例 2

在下一个示例中,我们将基于模式目录中可用的一个模式重新创建以下设计。第一步是添加一个封面区块,并选择一个相关的覆盖颜色。然后,我将选择封面区块,打开侧边栏设置,并取消选择“内部区块使用内容宽度”,因为我想更改区块的宽度。然后,我将使用我的区块工具栏,将区块的宽度更改为全宽。

下一步是添加一个行区块,并在行区块内添加一个组区块。在第一个组区块中,我将添加一些文本,并在文本下方添加一个行动号召或按钮区块,其中包含文字“探索”。然后,我将设置我的按钮区块样式。我将背景颜色更改为黑色,文本更改为白色。我还会将大小增加到中号,并将字母大小写更改为大写。然后,我将选择组区块并转到样式。我将组区块中两个区块之间的区块间距更改为 24 像素。然后,我将组区块的宽度更改为固定。一旦我们选择固定,我们会看到它显示指定一个固定宽度——我们将固定宽度更改为 320 像素。

接下来,我们将选择行区块,并为右侧的文本添加另一个组区块。然后,添加我在此部分中重点介绍的专辑名称。所以我会输入“on”,然后按住 Shift 键,按回车键,输入“in the”,按住 Shift 键,按回车键,然后输入“flame”。接下来,我们将选择文本,然后我们可以在排版下方进一步设置其样式。在这种情况下,我将选择外观、行高、字母间距和字母大小写。然后,我将文本大小更改为 148 像素,外观更改为粗体,行高更改为 0.8,字母间距更改为 -4 像素,字母大小写更改为大写。然后,我们可以将文本的对齐方式更改为右对齐。为了节省时间,我将继续复制文本并相应地进行修改。

然后我们可以选择右侧的组区块,打开样式,对于这个组区块,在宽度下方,我们将选择“填充”。在这里,我们可以看到它显示“拉伸以填充可用空间”。完成后,我们可以转到设置并将项目对齐到右侧。然后,我们可以再次选择行区块,并在区块工具栏中,将垂直对齐方式更改为顶部对齐。之后,我们可以选择封面区块,打开样式,并在封面区块内容周围添加一些内边距或空间。在这种情况下,我将内边距更改为 5。为了确保我们的设计在移动设备上正确显示,请选择行区块,然后选择“允许换行到多行”。现在,我们可以在桌面和移动设备上查看我们的设计。

示例 3

在最后一个示例中,我们可以使用列区块重新创建以下设计。所以首先,让我们添加列区块,然后选择 3 个等宽的列。然后,我将选择主列区块或容器区块,并将宽度更改为宽宽度。然后,我将选择第一列,添加一个封面区块,并从我的媒体库中选择一张图片。插入后,我将选择封面区块,打开样式,将覆盖颜色更改为黑色,并将覆盖不透明度更改为 40。

接着,我会在封面区块中添加一个堆栈区块。在堆栈区块里,我会添加一个标题区块,输入相关文字,选中文字,然后将标题改为大写。接着,我会将字号改为 2 REM,并将文字加粗。在标题下方,我会添加一个分隔线区块,再在分隔线下方添加一个按钮区块。添加好按钮区块后,我会输入文字,并将样式改为“轮廓”。我还会将文字加粗。别忘了添加相关的网址链接。然后,我会选中堆栈区块,将对齐方式改为居中。接着,我还会打开样式设置,将堆栈区块内各区块之间的间距调整为 3。之后,我们可以选中封面区块,将内容位置改为顶部居中。最后,我们可以在封面区块的内容周围添加一些内边距。此外,你还可以选择放大封面区块的尺寸。现在样式设置完成了,我们可以选中左侧列,将其复制两次。然后,我们可以删除两个空白列,只需更新内容即可。

探索封面区块

介绍

今天,我们将探索封面区块。它是创建页头、横幅式展示、行动号召等内容的绝佳工具。封面区块允许你在图片或视频上显示文本和其他内容。在本课程中,我们将创建两种不同的设计。但首先,让我们快速了解一些关键功能和设置,这些是继续学习前需要掌握的。

关键功能和设置

需要理解的重要一点是,封面区块是一个容器区块,可以在其中容纳其他区块。当你向页面添加封面区块时,可以从电脑或媒体库上传图片或视频。你还可以选择“使用特色图片”选项,将封面设置为页面或文章的特色图片。然后,你可以点击彩色圆圈为封面区块添加叠加颜色,稍后可以在侧边栏设置中更新。

让我们从媒体库添加一张图片。值得注意的是,WordPress 会自动添加与图片相配的叠加颜色。插入后,在列表视图中选择你的封面区块,然后使用区块工具栏将对齐方式改为全宽。你还可以将内容位置改为左上角、中间左侧或其他位置。此外,你可以将封面区块切换为全高,并根据需要添加双色调滤镜。在侧边栏设置中,我们可以选择“固定背景”,从而创建视差效果。当图片尺寸与填充空间不匹配时,“重复背景”选项非常有用。焦点选择器允许你标识图片最重要的视觉点,特别是在移动设备查看时。同时,记得添加替代文本,为屏幕阅读器和 SEO 描述图片的用途。在样式下方,你可以编辑颜色叠加并更改其不透明度,使其变暗或变亮。接下来,你可以添加内边距,为封面区块中的内容创造更多空间。

横幅示例

现在,我们可以继续看一些示例。我想展示在第一个示例中如何创建以下横幅。我们可以继续添加封面区块,然后从媒体库选择一张图片。接下来,我会确保选择封面区块,并将对齐方式改为全宽。然后,我会将内容位置改为顶部中间。接着,我们可以继续添加一些文本。在这种情况下,我会写“探索山脉”,然后将文本大小改为自定义大小。对于这个示例,我们将其改为“4 rem”。我还会将文本外观改为“中等”。

要更改文本的对齐方式,我将把段落区块或文本包裹在一个群组区块中。然后,取消选中“内部区块使用内容宽度”。完成此操作后,我可以将群组区块的对齐方式改为全宽。接着,我会选择封面区块,打开样式。然后,我会将叠加不透明度保持在 50%,并可以添加一些内边距或空间围绕区块内容。现在,我们可以在侧边栏设置中关闭列表视图,设计完成后,我们还可以检查它在移动设备上的显示效果。

如果你不希望图片被裁剪,就像我们在这里看到的,你可以更改宽高比。为此,我们可以返回页面,打开样式,然后向下滚动到宽高比。我会选择经典的 3×2 宽高比。当我们在移动设备上查看时,图片不会被裁剪。图片会适当缩放并保持其比例。

视差示例

在下一个示例中,我想展示如何创建这个酷炫的视差效果,将两张图片融合在一起。我添加了一个封面区块来创建这个设计,并从媒体库选择了一张图片。插入后,我选择了封面区块,将对齐方式改为全宽,并将区块切换为全高。然后,我打开侧边栏设置,选择了“固定背景”来创建视差效果。接着,我会点击区块工具栏上的三个垂直点,然后复制。

区块复制后,我会添加一张新图片。接下来,我会打开列表视图,选择两个封面区块,并将它们添加到一个群组区块中。由于我想移除两张图片之间的间距,我会打开群组区块的样式,找到区块间距,并将其改为零。请注意,如果你看不到区块间距设置,可能是因为你使用的主题不支持。然后,我们的设计就完成了。我们还可以在较小的屏幕上查看。

更多选项

最后,我想展示一些使用封面区块创建的其他设计。在这种情况下,我使用封面区块为作品集网站创建了这个行动号召。同时,别忘了访问模式目录,找到使用封面区块构建的精彩模式。在最后一个示例中,我使用了其中一个页头模式,为我的猫头鹰保护区网站创建了页头,左上角有标志和网站标题,右上角有导航菜单。在这里,我们也可以在移动设备上查看。

结论

尽情使用封面区块吧,并始终仔细检查你的设计在较小屏幕上是否显示正确。

使用行与堆叠块进行设计

介绍

在本课中,我们将更深入地了解如何使用行和堆栈块来实现我们的设计需求。使用组块是掌握块编辑器的基石之一。当你选择一个组块时,你会看到组块的变体。标准组块将块收集在一个容器中,行块水平排列块,堆栈块垂直排列块,网格块以网格形式排列块。让我们看看一些常见的例子,其中行块会派上用场。

使用行块

首先,我想向你展示如何借助行块创建我示例中的顶部部分。所以如果我们向下滚动,我们会看到它目前是空的,那么让我们继续输入斜杠 row。添加一个行块,然后添加一个标题并命名为“温室”。然后我会按回车,当然,文本现在会出现在标题的右侧。让我们从示例中复制文本“让你的家成为避难所”,然后粘贴。打开列表视图,选择标题和段落块,然后使用我的块工具栏将它们组合在一起。现在文本在我的标题下方,我想删除块之间的间距。所以我打开侧边栏设置,进入样式,在尺寸下方,我会确保块间距设置为零。现在标题和文本更接近了,我觉得看起来很棒。

我将关闭侧边栏设置,并在列表视图中再次选择行块。点击插入器并添加一个按钮块。假设是“探索”,然后打开我们的侧边栏设置,选择轮廓样式。接下来,我想将按钮块移到右侧,这就是行块真正发挥作用的地方。在侧边栏设置中选择行块,进入块工具栏中的对齐方式,然后选择项目之间间距。一旦我们选择了这个,我们会注意到按钮块被推到右侧。最后,我想将按钮块底部对齐。所以,在块工具栏中选择更改垂直对齐,然后点击底部对齐。正如你所见,使用行块的间距和对齐选项可以实现许多设计可能性。

构建页眉

其次,行块对于页眉非常有效。所以,要添加一个页眉,让我们进入外观,然后点击编辑器。这将带你进入站点编辑器,你可以在其中管理模板并添加页眉和页脚。进入模式,点击模式旁边的加号图标,然后选择创建模板部分。我们将选择页眉,然后适当命名,再点击创建。

现在,我们可以通过首先添加一个行块来构建我们的页眉。接下来,我将添加我的站点徽标,我已经将其添加到媒体库中,然后放大它。完成后,我会按回车。在我的站点徽标旁边,我将添加我的站点标语块。“更好的豆子,更好的咖啡。”然后,我会打开列表视图,选择站点徽标和站点标语块,然后将它们包裹在一个堆栈块中。现在,我想删除两个块之间的间距,所以我会确保选择了我的堆栈块,在侧边栏设置中打开样式,并确保块间距为零。然后,我会在块工具栏中将对齐方式更改为居中。

接下来,我会选择我的行块,即容器块,进入样式并将背景颜色更改为鲑鱼色。然后,我会点击插入器并添加我的导航块。现在,我们会看到我添加到站点的所有页面列表,但我会点击三个垂直点并选择一个我已经创建的导航菜单。然后,我会确保再次选择我的行块,并在侧边栏设置中的布局下方,点击项目之间间距,以确保导航菜单移到右侧。然后,我们的页眉就完成了。

使用堆栈块

最后,让我们更仔细地看看堆栈块。在这个例子中,我们有三个列;正如你会注意到的,左列中的文本或内容较少。我希望背景颜色和按钮块向下推,并与中间和右侧的列对齐。让我们看看我做了什么。我将一个列中的所有内容堆叠在一个堆栈块中,其次,我将标题和段落堆叠在一个堆栈块中。但我把按钮块单独留下了。

接下来,当我们选择主堆栈块并打开我们的样式设置时,你会注意到我更改了堆栈块的背景颜色,而不是列。并且我在主堆栈块周围添加了一些内边距。下一个关键步骤是将堆栈块的最小高度更改为 100%。当我们这样做时,你会注意到背景颜色扩展了,并与其他列对齐。接下来,我们将确保左侧的按钮块与其他按钮块对齐。所以,在块工具栏中选择更改垂直对齐,然后选择项目之间间距。现在你会看到按钮块被向下推,以与其他列对齐。

结论

这些区块表面上看可能很简单,但正如你所见,一旦应用了间距和最小高度等额外设置,你就可以用它们做很多事情。

使用群组区块

介绍

欢迎使用“群组”区块。群组区块允许您将多个区块组合在一起并设置样式,从而简化内容管理和设计。

示例概览

这里有一个示例页面,我想先带您了解一些使用群组区块的选项。第一个示例,我使用了带有背景图片和标题的群组区块,还添加了边框和圆角。第二个示例,我使用了包含图片、标题和段落的群组区块,并添加了边框。第三个示例是一个包含标题和图库区块的群组区块,用于构建页面。

群组区块演示 #1

我打开了一个页面,并开启了列表视图(即左上角的三条斜线图标)。我喜欢将工具栏放在顶部。如果您也想这样设置,可以点击右上角的三个点,选择“顶部工具栏”并开启。我们将添加一个群组区块。输入斜杠加“group”,然后点击第一个选项。接着,我会转到样式工具,添加背景图片,打开媒体库(请确保上传前已优化图片),并添加替代文本以确保无障碍访问。

现在我们来设置图片样式。选中群组区块后,点击顶部工具中的“对齐”,选择“全宽”。然后回到右侧的“样式”面板,向下滚动到“最小高度”,我打算设置为大约 644 像素,试试 645 像素,因为我想让双手图案显示出来。先这样设置,并点击“更新”。另一个可用的工具是回到背景图片设置,打开“尺寸”选项。这样您可以调整焦点,让双手图案显示出来,然后点击“更新”。接着,点击群组区块内的加号,添加一个标题。输入“烘焙”。点击工具中的“文本对齐”,选择“居中”。由于标题文字不太清晰,我需要调整样式。转到样式工具,点击“背景”,选择绿色。然后需要添加内边距。在标题区块的“尺寸”设置中,开启“内边距”,前后和上下各点击两次,左右也各点击两次。再回到群组区块进行更多样式调整,因为我想在标题和顶部之间留出一些空间。在“样式”中为上下添加内边距,效果不错。然后添加边框,选择同样的绿色,并增加一些厚度。接着使用圆角功能,点击“圆角”,圆角可以为角落添加曲线。我将圆角值调大,直接设为 100,然后点击“更新”。刷新页面,第一个区块就完成了。

群组区块演示 #2

在我们的第二个示例中,我将点击三个点并选择“在后面添加”。这次,我不会从组块开始,因为我想向您展示如何将多个块组合在一起。所以,我们先添加一个图像。我们将这个图像设为饼干主题,然后我会添加一个标题。接着,我从示例中复制一些文本,我使用的是 cupcake ipsum。这是一个免费的网站,您可以从中获取填充文本,而这个文本是关于烘焙的,所以很有趣。好了,现在我们在列表视图中有了三个块,我们可以点击第一个块,然后按住 Shift 键点击最后一个块。选中这些块后,我们点击三个点,向下滚动到“组合”选项。好的,这很简单。点击“更新”,然后我们可以再次点击三个点选择“重命名”,以保持列表视图的整洁。好的,接下来我们继续为这个组合添加样式。对于这个组合,我将其设置为宽宽度。好的,让布局稍微不同。我关闭这个选项,因为我希望文本能够更舒展一些。等我们完成所有样式设置后,再看看效果。我想点击图像,因为图像有点大,它没有自动适应原始尺寸。所以我将其宽度设为 568,因为我希望它小一点。然后,我想将其居中对齐。好的,点击它,再点击“更新”按钮。然后,我还想回到我们的组块,为其添加边框。所以我点击颜色选项,打开它,设置一个小边框。点击“更新”。接着,我向上添加一些内边距。对于这个组合,我想在顶部和底部添加大约四次点击的内边距,在两侧添加两次。我们来操作一下。然后,还有一个块间距的选项。我想在我使用的三个块之间添加一些间距。所以我们也设置一下。我觉得都设置好了。让我们在前端查看一下。点击并刷新。我忘了对齐文本。所以回到标题,将其居中对齐。好了,这样就完成了。

组块演示 #3

要添加最后一个组块,我将点击前一个组块的三个点,选择“在后面添加”,然后输入组块。我会选择第一个选项。我添加一个标题,并从顶部工具栏将其文本居中对齐,然后像这样添加我的画廊,但示例中有多个不同的图像。为了节省时间,我快速备份一下。我打算直接复制粘贴,而不是逐个添加所有图像。所以我点击那个画廊,进入三个点,选择“复制”,以便快速添加我的图像。如果我打开画廊块,您会看到它们都是独立的图像。好的,我们回到我们的组块。我们会重命名它,你们知道怎么操作。现在,对于这个组块,我将其设置为全宽,好吗?另外,对于组块的布局,我关闭这个切换开关,这会让图像更舒展一些。确保我点击了“更新”,因为这是一个重要的更新。我添加一个背景,所以点击样式,进入背景,选择棕色。我需要一些内边距,所以向下滚动到尺寸下的内边距,在顶部和底部点击两次,在两侧点击两次。点击“更新”。我觉得一切看起来都不错。大家祈祷一下,我们刷新页面,好了,完成了。

总结

请查看资源部分,获取关于组块的文档链接。尽情探索使用组块的各种方法。感谢您的观看。

使用列区块进行设计

简介

在本课中,我们将探索如何利用“列”区块来创建不同的设计。“列”区块是一个容器区块,可用于创建各种自定义布局。它开启了设计可能性的世界。“列”区块允许您将文本、媒体和其他类型的内容插入最多六列中。当连续使用时,“列”区块会创建出酷炫的网格效果。

添加和自定义“列”区块

要添加“列”区块,请点击插入器并输入“列”。或者,您可以输入斜杠“/列”并从那里选择它。您可以选择起始列的数量和大小。“列”区块的美妙之处在于,您可以将其他区块添加到每一列中。例如,您可以创建“列”区块来添加结构,然后添加图像区块、标题区块和段落区块。您还可以通过向每一列添加封面区块来创建这种类型的设计。

区块工具栏

主“列”区块与构成父区块的各个列之间存在父子关系。当您点击对齐图标时,可以将区块的对齐方式更改为宽幅或全宽。您知道还可以复制列吗?让我们选择“列”区块中的第三列。当您点击三个垂直点时,会看到一个复制选项。复制设计将为您节省大量时间和精力。当您选择单个列时,还可以在区块工具栏中使用箭头将列移动到新位置。但您也可以在列表视图中通过拖放将列放置到所需位置。

侧边栏设置

如果您想添加另一列,只需点击两列之间的插入器,或选择父区块并打开侧边栏设置。然后,在“列”下方,您可以选择增加或减少列数。在其下方,我们看到取消选择或选择“在移动设备上堆叠”的选项。因此,如果您希望列在移动设备上查看时彼此堆叠,请确保选择此选项。

当我们打开样式时,会看到“列”区块还允许我们更改父区块或单个列的颜色。各种排版选项值得探索,例如字体系列、外观、字母间距等。您甚至可以选择更改“列”区块的大小。在尺寸下方,您可以调整区块内容周围的内边距或空间,可以添加外边距,或修改列之间的间距。在样式的底部,我们可以为“列”区块添加边框和圆角。最后,您还可以选择添加投影。有多种选项可供选择。

将其他区块转换为“列”区块

另一个很棒的功能是,您可以将其他区块转换为“列”区块,甚至可以将“列”区块转换为组区块。

结论

如您所见,使用“列”区块可以实现任何自定义设计。从介绍您的团队、显示不同的媒体类型,甚至创建定价表。尽情使用“列”区块来实现您的设计需求吧。

使用评论区块

引言

在本课中,我们将简要讨论在使用区块主题时评论是如何显示的。在进入网站后台之前,我们先看看当有人回复博客文章时评论是如何显示的。当我访问网站前端时,我会点击一篇博客文章。当我们滚动到文章底部时,会注意到已经有三人通过添加评论进行了回复:罗杰、蒂娜和罗斯。在评论下方是一个区域,供更多人发表意见。

允许评论的优势

允许网站上的评论有许多优势。它可以加深你与读者的关系,并发现他们的兴趣所在。同时,它还能增加他们订阅你的新闻通讯或购买商品的可能性。本质上,允许评论可以帮助你围绕博客建立一个社区。通过使用仪表盘中“讨论”设置下的WordPress内置功能,并安装反垃圾插件,有效管理评论至关重要。你还可以查看我们关于管理垃圾评论的视频。

单篇文章模板与评论区块

评论区块通常被添加到单篇文章模板中。让我们进入“外观”并点击“编辑器”。然后,打开模板并选择单篇文章模板。正如我们所看到的,单篇文章模板包含一个页眉、一个内容区块,然后是一个评论区块。在最底部,是一个页脚。当我们打开列表视图时,会更清晰地看到所有嵌套区块。在群组区块内,我们会看到评论区块。你有没有想过如果删除评论区块会发生什么?所有分配到此模板的博客文章上的评论都会在网站前端消失。所以,小心不要删除这个区块。

为了更清楚地说明,当我打开一篇帖子时,比如《世界是你的牡蛎》,我们会在左侧看到帖子内容,在右侧模板旁边,会看到这篇帖子被分配到了单篇文章模板。当我在网站前端打开这篇帖子时,会看到模板提供的结构以及评论区块。但如果你想在某个页面上显示评论呢?你可以打开侧边栏设置,在“讨论”下方选择“允许评论”。

最新评论区块

最后,我还想提一下最新评论区块。最新评论区块允许你在博客上显示读者最近的评论。让我们把这个区块添加到我的主页,以展示它的工作原理。所以,在“来自读者的反馈”下方,我会添加最新评论区块。需要说明的是,这个区块不是用来添加评论的,而是用来显示读者在整个网站上发表的最新评论。每条评论都会链接到其原始文章、发表时间以及评论者。你可以使用右侧的侧边栏设置进一步调整区块样式。

结论

愿你利用评论区块,通过反馈和对话在网站上建立一个强大的社区或粉丝群体。

善用查询循环


简介

在本课中,我们将进一步了解查询循环以及如何使用查询循环区块。首先,我们来谈谈查询循环区块。这个强大的区块可以根据指定参数显示文章。它也是博客页面上用于显示所有文章的区块,允许你向数据库请求显示关于特定主题的所有文章。例如,你可以请求查看所有关于无麸质食谱的文章,或者你可能想查看关于电脑游戏评测的文章。

查询循环区块的结构

每个查询循环区块包含各种子区块,如文章特色图片区块、分类区块、文章标题区块、文章作者区块、文章摘要区块等。虽然你无法编辑这些嵌套区块的内容,但可以自定义其外观和布局,包括根据需要添加或删除其他区块。

示例

让我们看几个示例网站,了解它们如何使用查询循环。在第一个示例中,查询循环用于突出显示最新故事,表彰女性的创造力、领导力、勇气和创新精神。在其下方,查询循环用于显示博客文章。在第二个示例中,查询循环用于显示不同类型的食谱。首先,我们有早餐食谱,向下滚动还有美味开胃菜。在最后一个示例中,查询循环用于创建新闻页面。我们先来看看如何修改查询循环区块并使用模式。

编辑

那么,让我们前往“外观”并点击“编辑器”。这将带我们进入站点编辑器,目前我们位于博客首页模板,该模板显示所有博客文章。让我们打开列表,查看查询循环区块的结构。在顶部,我们会看到特色图片区块。然后是文章标题区块,接着是文章元数据区块,包括文章日期区块、文章作者区块和分类区块。最后是文章摘要区块。当然,我们可以更改想要显示的内容。例如,让我们删除文章摘要区块。选择文章标题区块,将其拖放到特色图片区块上方。更新查询循环区块的好处在于,如果你在一篇文章中更改了内容,它会应用到所有其他地方。

从空白开始与使用模式

但如果我们想使用完全不同的模式和布局呢?我们可以点击区块工具栏中的“替换”,浏览主题附带的各种模式。当你选择一个模式时,当然可以随意自定义它。添加新的查询循环区块时,你有两个选项:可以选择一个模式,或者从空白开始。点击“从空白开始”后,你可以选择一种变体。在这种情况下,我会选择“标题、日期和摘要”。然后我们可以进一步修改。让我们在标题下方添加一个特色图片区块。之后,我们可以打开样式,将宽高比更改为例如4:3,以确保所有文章特色图片显示一致。

筛选

接下来,我们将学习分类法或筛选器,以及如何使用侧边栏设置。我创建了一个生活方式页面,只想看到与此主题相关的文章。所以,我会选择查询循环区块并打开侧边栏设置。首先,我们必须取消选中“从模板继承查询”,因为我想自定义查询循环的设置。向下滚动时,你可以使用分类法(如分类和标签)、作者甚至关键词来筛选文章。我会选择分类法,因为我创建了一个生活方式分类,只想看到显示此分类的文章。当我添加生活方式分类时,所有不属于此分类的文章将被排除。

你还可以选择显示特定作者的文章。再次选择查询循环区块后,我会进入侧边栏设置,点击“筛选”,选择“作者”,然后选择我想显示其文章的人。现在,我们只会看到罗杰·利斯特写的文章。当然,你也可以选择一个关键词,只显示文本中包含该词或词组的内容。

侧边栏设置

最后,我们来仔细看看侧边栏设置。如前所述,我已取消勾选“从模板继承查询”以自定义查询。如果开启此选项,某些自定义选项将被隐藏;如果关闭,则会显示更多自定义选项。当你在文章或模板中添加新的查询循环块时,也建议关闭此选项,否则你的查询循环块可能无法在前端显示。下一个选项是文章类型。目前我们显示的是博客文章,但你也可以显示页面甚至自定义文章类型。下方可以按从最新到最旧、从最旧到最新或按字母顺序排列文章。接下来,我们来谈谈置顶文章。置顶文章是指固定在博客页面顶部的文章,侧边栏设置中的选项允许你包含置顶文章、排除它们或仅显示置顶文章。在置顶文章下方,我们看到可以关闭“强制页面重新加载”的选项。这允许用户浏览文章时无需重新加载页面,有助于提升用户体验。最后,我们已经讨论过使用筛选器。

总结

祝你充分利用这个强大的块来展示文章!