博客

  • 古腾堡编辑器教程:如何使用WordPress诗篇区块

    古腾堡编辑器教程:如何使用WordPress诗篇区块-1

    WordPress诗篇区块旨在以经过验证的格式显示文本。它在不更改换行符和空格的情况下显示文本。按Enter键开始下一行而不是开始一个新段落。它不适用于您的正常内容。相反,它是为诗歌、歌词或任何其他类型的文学表达而设计的。

    了解如何使用诗篇区块可以帮助您正确设计内容的外观。在本教程中,我们将查看诗篇区块的设置和选项,查看如何使用它的最佳实践,并查看常见问题。

    如何将诗篇区块添加到文章或页面

    古腾堡编辑器教程:如何使用WordPress诗篇区块-2

    要将诗篇区块添加到您的页面和文章,请在您的内容中或页面左上角选择块图标,输入区块的名称,并在出现时选择它。

    古腾堡编辑器教程:如何使用WordPress诗篇区块-3

    然后将诗篇区块添加到您的内容中,您可以在其中开始添加诗歌、歌词等。诗篇区块的默认样式将根据您使用的主题而有所不同。对于这些示例,我正在使用WordPress官方附带主题。

    古腾堡编辑器教程:如何使用WordPress诗篇区块-4

    当您在字段中输入文本并按Enter键时,您将转到下一行。这与预格式区块而不是段落区块类似,后者在您按Enter时添加一个新段落。

    古腾堡编辑器教程:如何使用WordPress诗篇区块-5

    它甚至会保留您在单词之间添加的任何额外空格。此示例显示已发布的文章,包含空格和换行符。

    诗篇区块设置和选项

    古腾堡编辑器教程:如何使用WordPress诗篇区块-6

    诗篇区块有两个带有设置和选项的区域。第一个是诗歌工具栏。第二个是右侧边栏中的诗篇区块选项。下面来看看两者。

    诗篇区块工具栏

    古腾堡编辑器教程:如何使用WordPress诗篇区块-7

    单击诗篇区块中的任意位置会打开其工具栏。

    更改区块类型或样式

    古腾堡编辑器教程:如何使用WordPress诗篇区块-8

    第一个设置将块更改为段落区块,更改列数,并让您分组。悬停会显示预览,以便您了解它的外观。

    拖动或移动

    古腾堡编辑器教程:如何使用WordPress诗篇区块-9

    拖动工具包括六个点。抓住这些点将块拖动到任何你想要的地方。或者,您可以单击箭头向上移动块或内容中的文本。

    文本对齐

    古腾堡编辑器教程:如何使用WordPress诗篇区块-10

    文本对齐选项包括左对齐、居中对齐和右对齐。这将移动文本在块内对齐的位置。

    粗体和斜体

    古腾堡编辑器教程:如何使用WordPress诗篇区块-11

    粗体和斜体设置适用于您选择选项时突出显示的文本。单独或一起使用它们,就像我在这个例子中所做的那样。

    链接

    古腾堡编辑器教程:如何使用WordPress诗篇区块-12

    链接设置允许您搜索或输入您突出显示的文本部分的 URL。

    更多设置

    古腾堡编辑器教程:如何使用WordPress诗篇区块-13

    更多设置链接会打开一个包含许多选项的下拉框。他们试图提供一个简单的例子来直观地展示它们的用途。

    (1)内联代码

    古腾堡编辑器教程:如何使用WordPress诗篇区块-14

    这将文本显示为代码。在此示例中,我已将第一行和第三行设置为代码格式。

    (2)内嵌图像

    古腾堡编辑器教程:如何使用WordPress诗篇区块-15

    内嵌图像打开媒体库,您可以在其中选择图像。图像内嵌添加到光标所在的位置。选择图像会打开一个下拉框,您可以在其中选择图像的宽度。

    (3)键盘输入

    古腾堡编辑器教程:如何使用WordPress诗篇区块-16

    键盘输入为您的内容添加键盘标签。这定义了键盘输入并以浏览器的默认等宽字体显示。

    古腾堡编辑器教程:如何使用WordPress诗篇区块-17

    以下是在代码编辑器中查看文本时添加到文本中的标签。

    (4)删除线

    古腾堡编辑器教程:如何使用WordPress诗篇区块-18

    删除线会在您突出显示的文本中添加一行。

    (5)下标

    古腾堡编辑器教程:如何使用WordPress诗篇区块-19

    下标将您突出显示的文本格式化为下标。

    (6)上标

    古腾堡编辑器教程:如何使用WordPress诗篇区块-20

    上标将您突出显示的文本格式化为上标。

    古腾堡编辑器教程:如何使用WordPress诗篇区块-21

    下标和上标一起使用可减小字体大小并使其水平居中。

    (7)文字颜色

    古腾堡编辑器教程:如何使用WordPress诗篇区块-22

    文本颜色可让您调整突出显示的文本的颜色。您可以从一些预先选择的颜色中进行选择,在颜色选择器工具上选择一种颜色,或者输入十六进制或 RBG 代码形式的值。

    诗篇区块选项

    古腾堡编辑器教程:如何使用WordPress诗篇区块-23

    诗篇区块选项包括:

    • 隐藏更多设置– 这会隐藏右侧边栏,为您提供更干净的工作区。
    • 复制– 复制诗篇区块,以便您可以将其粘贴到您想要的编辑器中的任何位置。
    • 创建副本– 创建诗篇区块的副本并将其放置在原件下方。
    • 在当前区块前插入– 在诗篇区块之前添加一个空格,您可以在其中放置另一个区块。
    • 在当前区块前插入– 在诗篇区块之后添加一个空格,您可以在其中放置另一个区块。
    • 移动到– 放置一条蓝线,您可以使用箭头键向上或向下移动。当蓝线到达您要将诗篇区块移动到的位置时,按 Enter 键,您的区块将自动移动。
    • 作为HTML编辑 – 打开代码编辑器,您可以在其中将所有内容编辑为HTML。
    • 添加至可重用块– 将诗篇区块添加到您的可重用区块列表中,以便您可以在任何页面或文章中使用它。
    • – 将区块添加到组中,以便您可以将区块作为一个单元进行调整。
    • 删除块– 删除区块。

    区块设置

    古腾堡编辑器教程:如何使用WordPress诗篇区块-24

    诗篇区块设置位于右侧边栏中。如果侧边栏显示,则选择区块将显示设置。如果侧边栏未显示,请单击齿轮图标,然后选择内容区域中的区块。

    (1)排版

    古腾堡编辑器教程:如何使用WordPress诗篇区块-25

    排版允许您从下拉框中选择整个区块的字体大小或输入自定义大小。

    (2)颜色

    古腾堡编辑器教程:如何使用WordPress诗篇区块-26

    颜色使您可以控制诗篇区块的文本和背景颜色。从预先选择的颜色中选择或选择自定义颜色。选择纯色或为背景创建渐变。将渐变设置为线性或径向。您还可以设置链接的颜色。

    (3)间距

    古腾堡编辑器教程:如何使用WordPress诗篇区块-27

    间距允许您为诗篇区块的所有边或特定边添加空间。

    (4)高级

    古腾堡编辑器教程:如何使用WordPress诗篇区块-28

    高级包括一个 HTML锚点选项和一个用于添加CSS类的字段。锚点是专门针对诗篇区块的特殊网址。这使您可以直接链接到此块。CSS类字段允许您创建自定义CSS来设置区块的样式。

    有效使用诗篇区块的提示和最佳实践

    使用它来显示与您网站上的标准文本不同的文本。如果您想在内容中保留空间,这也是一个不错的选择。

    使用段落区块为诗歌或歌曲创建标题。

    默认情况下,您的诗篇区块的样式将与您的主题相匹配。以不同的方式为您设计风格,使其从您网站的其他部分中脱颖而出。设计好样式后,将其添加到可重复使用的区块中,以便再次使用。

    要将其转换为另一种类型的区块,您需要先将其转换为段落区块。然后,您可以将其转换为其他类型的区块。

    关于诗篇区块的常见问题

    诗篇区块的目的是什么?

    它用于显示多行文本。这是诗歌、歌词等的理想选择。

    诗篇区块和段落区块有什么区别?

    它的工作方式与段落区块类似,不同之处在于它保留您的间距并通过按回车键将文本添加到下一行。段落区块要求您在按 Enter 键时按住 shift 键。

    它可以用于诗歌之外的任何东西吗?

    是的。它是诗歌和歌词的理想选择,但它也可用于您想要分成诗歌格式的任何类型的文本。例如,您还可以使用它来显示没有项目符号或编号的列表。

    诗歌内容必须使用这个区块吗?

    不一定。您可以在按 Enter 键时按住 shift 键将诗歌添加到段落区块中,但诗歌块是预先格式化的,因此更易于快速使用。只需输入您的文本,按回车键,然后在下一行继续输入。

    小结

    这就是我们对WordPress诗篇区块的看法。这是显示诗歌、歌词或任何其他类型的文学作品的绝佳区块。它对于您想要保留空格或换行符的任何类型的文本也很有用。它易于使用,并且可以为您的内容赋予段落块难以获得的视觉风格。我们强烈建议将这个专门的WordPress区块用于您所有的诗意内容。

  • 古腾堡编辑器教程:如何访问和使用WordPress区块目录

    古腾堡编辑器教程:如何访问和使用WordPress区块目录-1

    如果您曾经在Gutenberg区块编辑器中搜索过特定块,那么您已经看到了WordPress区块目录,甚至可能不知道它。在5.5版中引入并在WordPress 5.8中使用模式目录进行了增强,区块目录的工作方式与WordPress.org上的主题插件存储库非常相似。不同之处在于它直接内置在编辑器本身中,以便于访问和安装单个区块。使用区块目录,您只需单击一下即可将新功能、设计、布局和自定义区块添加到文章和页面——所有这些都来自区块编辑器本身。

    如何访问和搜索区块目录

    古腾堡编辑器教程:如何访问和使用WordPress区块目录-2

    在其基础上,区块目录是区块编辑器扩展和插件的存储库,您可以安装它们以增强您创建的内容。WordPress 5.8 的版本包括一个新的模式库作为区块目录的一部分。此库为您提供了前所未有的WordPress Core后端设计访问权限。在插件库中,您可以找到一系列启用区块的插件。但是编辑器本身的主区块目录是一个单区块插件列表,您可以立即安装和使用它们。

    古腾堡编辑器教程:如何访问和使用WordPress区块目录-3

    虽然您绝对可以独立进入主题和/或模式目录,但最大的吸引力在于您可以在Gutenberg区块编辑器本身中访问此内容。只需按+ 按钮添加一个块,然后开始搜索您需要的任何区块。如果您已经安装了该区块,它将显示在此处。

    但是,如果您不这样做,则结果的下一部分来自区块目录。5.8之后,第一段结果会是patterns,最初只能选择区块样式。

    在模式结果下面是特定的区块,您可以直接从可用安装标题下的侧边栏目录安装这些区块

    古腾堡编辑器教程:如何访问和使用WordPress区块目录-4

    这些结果基于您用作搜索词的任何内容。在撰写本文时,区块目录本身的结果有些有限。但是,随着越来越多的人向目录添加自定义区块和模式,搜索结果将变得更加健壮。

    如何从目录中添加新区块

    古腾堡编辑器教程:如何访问和使用WordPress区块目录-5

    只需单击一个区块即可安装它。此外,该区块会立即出现在您的文章中。这是一个非常有用且有点令人讨厌的功能,因为您无法单击区块目录条目来展开和阅读描述或查看评论。但是,您可以将鼠标悬停在某个条目上以查看一些详细信息,例如星级和评论数量。

    古腾堡编辑器教程:如何访问和使用WordPress区块目录-6

    以这种方式通过目录安装块实际上会安装并激活相关的WordPress插件。您可以在管理面板的典型位置插件–已安装的插件中找到它。由于区块目录指南,这些区块的唯一选项将在编辑器本身中。

    如果您出于任何原因需要卸载区块插件,这与使用WordPress管理仪表盘停用和卸载任何其他插件相同。

    如何将自定义区块添加到WordPress区块目录

    如果您是设计师或开发人员,您可能希望在目录中显示您的模式和区块。像所有其他WordPress库一样,有一个专门的过程可以将您的区块包含在目录中。该过程相对简单,使用单一工具进行验证、上传和删除。

    开发插件

    第一步显然是创建自己的插件。确保您首先遵循WordPress.org 包含的所有插件指南。从根本上说,自定义区块仍然是插件。除了这些准则之外,您的插件还必须符合要考虑包含的特定于区块的准则

    请记住,如果您提交到目录,您的插件必须只包含一个块。如果您正在创建它们的套件,您将需要决定是将它们作为一个包包含在传统存储库中,还是将它们作为单独的块发布以包含在此处。

    验证并发布您的插件

    古腾堡编辑器教程:如何访问和使用WordPress区块目录-7

    开发区块插件后,您需要对其进行验证。该区块插件检查是一个简单的工具,您可以上传一个 .zip文件的代码库文件或URL(从SVN,GitHub上,还是从插件库本身)。

    如果检查器发现问题,您需要在发布之前解决这些问题。如果验证器返回一条没有发现问题的消息,您就可以实时推送它了。您将使用相同的工具来发布区块插件。

    您还将使用相同的工具将其从目录中删除或在更新代码和功能时对其进行调整。

    小结

    这是新WordPress生态系统的隐藏宝石。作为用户,从编辑器内向内容添加单个外部区块是一个巨大的用户体验增强。作为创建者,区块目录为您提供了前所未有的用户访问权限。以前,他们必须通过库寻找插件。多亏了区块编辑器,您的创作——出于所有意图和目的——在他们搜索时寻找它们。希望用不了多久,更多的用户和开发人员就会意识到并使用这个神奇的工具。对于参与WordPress的每个人来说,它都是一个非常强大的工具。

  • 古腾堡编辑器教程:如何使用Automatic的WordPress活动区块插件

    古腾堡编辑器:如何使用Automatic的WordPress活动区块-1

    WordPress的母公司Automattic已经发布了一些最著名的WP插件。WooCommerce、Jetpack、Akismet、BuddyPress、bbPress……等等。在列表中他们还增加了另一个强大的插件:活动区块插件。这是一个非常简单的解决方案,可以让您的用户知道您要做什么。

    什么是活动区块?

    与WordPress 5.8的许多新区块不同,活动区块必须通过插件库手动安装,而不是编辑器本身的区块目录。

    古腾堡编辑器:如何使用Automatic的WordPress活动区块-2

    Automattic现代设计理念的精髓在这个插件中如火如荼。它简单、易于使用且时尚。只需导航到 管理面板中的插件并搜索或上传即可安装它。然后它将作为Event出现在您的插件列表中 。

    古腾堡编辑器:如何使用Automatic的WordPress活动区块-3

    该块本身允许您添加事件、时间和位置的描述,并将图片添加到显示给访问者的卡片中。此外,您还有特定于区块的选项和设置,您可以调整这些选项和设置,以使区块更适合您网站的设计和您正在显示的事件的外观。

    如何将活动区块添加到文章或页面

    安装插件后,将活动区块添加到您的页面就很容易了。在 WordPress区块编辑器中,只需按 + 按钮即可添加新区块。您可以在顶部工具栏中或任何空白区块的右侧找到此按钮。

    古腾堡编辑器:如何使用Automatic的WordPress活动区块-4

    将出现区块选择侧栏。如果您滚动浏览整组已安装的区块,您可以在小工具部分找到活动区块。您还可以搜索 Event 以查找该区块。(请注意,搜索Event不会拉起区块。)

    古腾堡编辑器:如何使用Automatic的WordPress活动区块-5

    每个区块为单个事件/活动显示一张卡片。如果您打算使用它来显示一个节日或一系列活动(例如连续播放多天的戏剧的放映时间),您将需要在描述中包含该信息或为每个单独的节目创建多张卡片。

    活动区块设置和选项

    正如我们上面所说,一个包括在内的选项是能够展示一系列事件。从技术上讲,无法展示一系列日期。话虽如此,让我们看看到底活动区块插件可以做什么。

    古腾堡编辑器:如何使用Automatic的WordPress活动区块-6

    要设置事件的日期,只需单击“选择日期(Choose a Date)”按钮。将出现一个弹出式日历,您可以在其中选择事件/活动发生的日期和时间。如果您不选择时间,则默认为您选择日期的时间。然后日期将替换按钮并出现在区块的左上角。

    古腾堡编辑器:如何使用Automatic的WordPress活动区块-7

    其他字段—— titlelocationdescription —— 只是您在其中键入相关信息的文本框。它们本质上是不言自明的。

    古腾堡编辑器:如何使用Automatic的WordPress活动区块-8

    但是,此卡的一个主要缺点是位置不可点击。要将它们链接到地图,您需要使用块或其他方法将其单独包含在文章中。默认情况下,电话号码可在移动设备上点击。

    我们应该注意,您可以超链接描述或位置框中的任何文本。这意味着,如果您转到Google地图并输入事件的位置,则可以获取该搜索的URL,并根据需要使用位置文本创建超链接。这不是一个理想的解决方案,但也许是您在不添加其他插件的情况下拥有的最好的解决方案。

    事件/活动图像本质上是一个图像区块放置在活动区块的侧面。它将拉伸以适应区块。您可以通过将蓝色圆圈定位在焦点选取器标题下,将块设置中图像的焦点向右调整 。

    古腾堡编辑器:如何使用Automatic的WordPress活动区块-9

    下面是颜色设置部分。您可以使用这些来调整区块的外观,为整个区块设置背景和文本颜色。

    古腾堡编辑器:如何使用Automatic的WordPress活动区块-10

    幸运的是,编辑器会警告那些对颜色组合不甚了解的人,并且会在您选择的组合难以阅读时发出警告。

    也许活动区块的最佳选择是您可以向其中添加子区块。只需在描述后按回车/返回,您将获得另一个 + 按钮,就像在基本编辑器中一样。从这里,您可以在事件本身内添加任意数量的其他区块。甚至其他事件

    古腾堡编辑器:如何使用Automatic的WordPress活动区块-11

    活动区块中的每个单独元素都可以单独调整。您可以将新创建​​的事件块视为您正在处理的文章或页面的较小内容区域。每个子事件都可以有自己的设计和图像,以及每个段落区块或其他任何内容。根据您选择的区块,块的选项将全部显示在区块选项侧栏中的右侧。

    活动区块插件的最后一个选项是您决定将事件本身显示为居中对齐的元素还是拉伸内容区域的宽度。

    古腾堡编辑器:如何使用Automatic的WordPress活动区块-12

    在上下文菜单中,对齐图标可让您选择其中之一。无论您选择哪个,您在其中创建的任何子区块都会自行调整以适应更改。图像仍将聚焦在您指示的位置,但如果宽度允许,它们将扩展并显示更多基本图像。

    有效使用活动区块的提示和最佳实践

    活动区块插件简单而强大,你可以用它做很多事情。这里有一些提示,可确保您在客人中脱颖而出。

    1. 使用颜色

    不要让颜色选项浪费在事件块上。利用能够调整设计的优势,以便您可以补充您的页面设计以及事件/活动内和同一页面上的其他区块。

    如果您在活动区块本身中使用区块,请确保将它们的样式设置为从其容器中脱颖而出,以便您的用户更有可能注意到它们。

    2. 使用适当大小的图像

    真的,图像可以成就或破坏一个事件。如果您的活动看起来不令人兴奋或不吸引人,人们就不太可能想要参加。确保您使用能够以各种尺寸和形状呈现您的活动的高质量图像。由于图像具有响应性并根据它们拥有的空间调整它们的位置,因此可以设置没有特别的颗粒状照片。

    始终测试您的图像以确保它们在多个方面都能很好地显示。

    3.利用子块的优势

    不要害怕在活动本身中添加免费区块。当然,您可以在页面内容中添加一些内容,但是如果您想保证看到该信息,将其嵌入到活动区块中是最好的方法。

    例如,您可以在事件中使用Divi区块来使用地图模块,因为WordPress中没有一个默认值,并且活动区块默认不呈现可点击的地址。(同样请记住,如果您愿意,您可以使用超链接将Google地图URL粘贴到该位置。)

    4. 试验Patterns选项卡

    WordPress 5.8向编辑器引入了Patterns选项卡。结合Event Block插件,你可以不费吹灰之力就做出一些非常赏心悦目的页面设计。

    古腾堡编辑器:如何使用Automatic的WordPress活动区块-13

    在任何可以添加区块的情况下,您都可以选择左侧边栏中的“模式”选项卡。选择一个会将其添加到您的模板中,您可以从那里开始。在上图中,我们只是在模式放入的每一列的底部添加了一个事件块,并在默认页面列中添加了一个。因为古腾堡编辑器允许在任何地方进行调整,您也可以尝试创建自己的模式。这样,您的活动就不会在标准网格或列表中丢失。

    小结

    起初,活动区块插件可能并不健壮。但是通过一些周到的设计和浏览选项,您可以用一个来修饰任何页面。有了各种可用的子区块以及在其中嵌套其他事件的能力,活动区块肯定会增强几乎任何类型的站点。无论是面对面的活动、虚拟活动,还是只是一个重要公告的占位符,这个插件可能是最简单的方法。

  • 古腾堡编辑器教程:如何使用WordPress列表区块

    古腾堡编辑器教程:如何使用WordPress列表区块-1

    列表看似简单,但却是强大的工具。列表使您能够以一种比长而无休止的段落以更易于阅读的方式共享信息。它们使您能够切入正题并为用户提供他们正在寻找的确切信息。换句话说,列表是您可以使用的最强大的工具之一来构建引人入胜的内容。

    创建列表很容易,如果您使用WordPress,您将可以访问专用的列表区块,该区块使您能够以多种方式自定义此元素。在本教程中,我们将讨论列表区块,解释它的工作原理,并介绍一些提示以帮助您创建更好的列表。

    如何将列表区块添加到文章或页面

    在WordPress中添加块是一项简单的任务。转到要添加列表区块的任何文章或页面,然后使用“浏览所有” 选项或搜索栏找到它:

    古腾堡编辑器教程:如何使用WordPress列表区块-2

    选择列表区块后,您将能够开始处理新列表。该过程的下一部分很简单。您可以在无序(项目符号)或有序(编号)列表之间进行选择,然后开始添加条目,直到您满意为止:

    古腾堡编辑器教程:如何使用WordPress列表区块-3

    正如您在上面的菜单中看到的那样, 列表区块包括广泛的其他设置。让我们看看这些选项是什么。

    列表区块设置和选项

    使用区块编辑器添加的任何元素都有两组选项。如果将鼠标悬停在任何块上,将显示一个菜单,其中通常包含基本格式选项。如果您单击屏幕右上角的齿轮图标,您还可以访问特定于区块的设置菜单:

    古腾堡编辑器教程:如何使用WordPress列表区块-4

    让我们先回顾一下鼠标悬停在列表区块上时出现的快速设置访问菜单 。从菜单的左端开始,您可以访问以下设置:

    1. 更改您正在使用的区块类型
    2. 将方块向上或向下移动一个点
    3. 在无序列表和有序列表之间进行选择
    4. 在列表条目中添加或删除缩进
    5. 加粗、斜体或添加指向部分文本的链接

    这是一个快速备忘单,显示了与这些选项对应的菜单项:

    古腾堡编辑器教程:如何使用WordPress列表区块-5

    向列表区块添加格式的工作与任何其他基于文本的元素非常相似。您可以将特定条目或什至只是其中的一部分加粗或斜体,这同样适用于链接。

    您还会注意到此菜单最右侧的一个附加选项。向下箭头包括更高级的格式选项,例如添加内联代码、图像、“删除线文本”、文本颜色等:

    古腾堡编辑器教程:如何使用WordPress列表区块-6

    请注意,虽然可以将图像添加到列表区块,但结果往往看起来很尴尬(最好使用专用的图片区块):

    古腾堡编辑器教程:如何使用WordPress列表区块-7

    继续,一旦您打开屏幕右侧的 “设置” 菜单,您就可以访问更高级的配置选项。在那里您可以更改整个列表的字体大小,以及选择文本和背景颜色:

    古腾堡编辑器教程:如何使用WordPress列表区块-8

    请记住,字体大小和颜色设置适用于整个列表,而不是单个条目。如果您想进一步自定义列表的样式,则需要使用CSS 类和HTML锚点。为此,请打开块 设置菜单下的高级选项卡(它位于字体大小和颜色选项的正下方):

    古腾堡编辑器教程:如何使用WordPress列表区块-9

    这涵盖了如何在WordPress中使用列表区块的所有基础知识 。然而,创建引人入胜的列表不仅仅是基本的格式和样式。让我们来谈谈如何确保您的清单顺利进行。

    有效使用列表区块的提示和最佳实践

    您可以使用许多提示和技巧来创建更具吸引力的列表。由于我们有很多使用列表区块的经验,我们将使用我们自己的列表分享一些我们最喜欢的技巧。以下是在WordPress中处理列表时要记住的事项:

    • 每当您需要共享可以分解为易于阅读的点的关键信息时,请使用列表。
    • 避免将图像添加到您的列表中,因为它们可以将注意力从单个条目上移开并破坏格式。
    • 不要以相同的词开始列表中的每个条目,这样行就不会混合在一起。
    • 对列表中的每个条目使用一致的样式和格式。

    如果列表持续时间过长,用户可能会开始忽略其中的某些条目。为了清楚起见,您可以对需要对每个项目进行额外解释的列表使用以下样式:

    • 突出显示条目的开头。 通过突出显示初始短语或句子您可以为每个列表项指定自己的标题,然后使用常规文本扩展该点。
    • 列表太棒了。没有什么比一个很好的清单更能说明问题的了。

    尽管列表可能非常有效,但重要的是不要过度使用它们。如果您正在处理包含大量内容的文章或页面,则文本、图像、列表、表格和其他类型的元素之间应该保持健康的平衡。这种多样性将使游客保持参与。另外,它将确保当您使用列表时,读者会注意它。

    关于列表区块的常见问题

    到目前为止,您几乎了解了有关WordPress列表区块以及如何使用它的所有信息。但是,让我们回顾一下有关此块的一些最常见问题,以确保您不会错过任何关键信息。

    在哪里可以找到WordPress列表区块?

    当您向页面或文章添加新元素时,您可以使用搜索功能或浏览全部 选项找到列表区块 。请记住,还有其他区块包含“列表”一词,例如文章列表和页面列表。 但是,这些区块提供了一组完全不同的功能。

    页面列表和文章列表区块有何作用?

    您可能已经注意到WordPress中有不止一种类型的“列表”区块。页面 和文章列表区块是什么所谓的“Theme Building”区块。它们的使用方式与我们在本文中介绍的标准列表区块非常不同。无论您将它们放置在何处,它们都会添加您网站页面和文章的列表作为元素。与大多数其他区块不同,这两个区块不包含任何格式或样式选项。

    传统上,大多数用户将页面列表 和文章列表区块添加到侧边栏或页脚小工具。这样,您可以将访问者引导至他们可能认为相关的网站其他部分。但是,这两个元素都与传统的列表区块没有太多共同之处。

    可以在WordPress的任何地方添加列表吗?

    您可以在可以访问区块编辑器的任何位置添加列表区块。这包括文章、页面和WordPress小工具。当编辑WordPress的小工具,你可以访问区块编辑器和它的所有内容,包括的列表框和选项,如页面列表和文章列表。

    小结

    您可能不会认为列表非常迷人,但您错了。列表是任何类型的引人入胜的内容中最基本的元素之一,但当您处理页面和文章时,它们会变得特别有用。无论您在WordPress网站上发布什么类型的内容,列表都可以更轻松地共享关键信息并吸引访问者的注意力。

    WordPress让您可以访问功能强大的列表区块,其中包含大量格式和样式选项。您可以在网站上的任何位置放置列表,包括文章、页面和小工具,我们建议您充分利用此功能。

  • 古腾堡编辑器教程:如何调整WordPress区块大小

    古腾堡编辑器教程:如何调整WordPress区块大小-1

    WordPress 5.0中正式引入的古腾堡区块编辑器让用户有机会完全自定义他们的WordPress内容和网站。不再受需要在TinyMCE经典编辑器等WYSIWYG工具中创建的限制,Gutenberg为文章或页面内容的每个元素提供单独的区块。通过控制每个特定区块的设置,用户可以比以往更轻松地设计WordPress内容。让设计脱颖而出的最简单方法之一就是让它们超越默认设置。因此,我们将研究如何在WordPress中调整区块的大小,以便您可以开始跳出框框思考(和设计)。

    由于区块的响应性质,区块编辑器中的大多数调整大小仍然受限于站点的内容区域。如果您将页面的内容区域设置为全幅,您将在该空间内工作。例如,如果您将文章内容区域设置为580像素或1200像素,您将在那里工作。我们用来教您如何在WordPress中调整区块大小的方法都是基于这样的想法,即您将停留在任何特定区块容器的边界内。

    如何在编辑器中调整区块大小

    一些(但不是全部)块具有内置的调整大小选项。由于显而易见的原因,这些是最容易调整大小的。但是,根据区块的不同,调整大小选项将位于不同的位置。

    示例 #1:图片区块

    单击区块会弹出上下文菜单,这里的调整大小选项实际上是间距选项。但是, 宽幅宽度和全幅宽度对齐会将图片区块的大小更改为容器的宽度(宽幅)或整个页面的宽度(全幅)。

    古腾堡编辑器教程:如何调整WordPress区块大小-2

    您还可以使用右侧边栏中的块设置调整图片区块的大小。恰当命名的图像大小部分有许多选项,您可以使用这些选项调整区块的大小。 古腾堡编辑器教程:如何调整WordPress区块大小-3

    WordPress有一个用于快速调整大小的下拉菜单,您可以从缩略图、中、大和全尺寸中选择预设 选择全尺寸将因您的主题而异,无论它是实际完全显示还是适合内容区域。

    您还可以按像素专门调整宽度和高度。在此之下,您可以按百分比进行调整。该百分比基于在宽度和高度字段中的数值。不是您从下拉菜单中选择的预设图像尺寸。

    最后,您可以单击图像本身以显示带有白色圆形锚点的蓝色边框 。您可以拖动它们来调整区块的大小。

    古腾堡编辑器教程:如何调整WordPress区块大小-4

    您只需单击并拖动任何锚点即可缩放图像。这样做将调整块设置菜单中高度和宽度字段的大小。

    示例#2:活动区块

    对于活动区块,调整大小设置仅在编辑器本身的上下文菜单中。(Event Block是您将安装的Automattic的一个单独插件,它不是古腾堡核心编辑器的一部分。)

    古腾堡编辑器教程:如何调整WordPress区块大小-5

    像一些图片区块选项一样,这里的调整大小选项在技术上是间距选项。但是这两个选项是居中对齐和全幅宽度您可以选择一个在容器中居中或在屏幕上的整个宽度。

    在编辑器本身中调整区块的高度有点麻烦,但有效。如果您只是在空区块字段中按Enter/return,则可以通过插入额外的空段落区块来扩展高度。

    古腾堡编辑器教程:如何调整WordPress区块大小-6

    这是一个不太理想的解决方案。但它很快,而且在紧要关头工作——特别是考虑到活动区块没有真正的高度调整选项。

    示例 3#:在WordPress中使用栏目调整区块大小

    如果您需要调整大小的区块在其设置面板或上下文菜单中没有调整大小选项,则使用区块编辑器的栏目是您可以调整任何块大小的另一种方式。只需按任意+ 按钮搜索栏目区块即可添加新区块。

    古腾堡编辑器教程:如何调整WordPress区块大小-7

    在栏目区块中,您可以添加所需的任何其他区块。在搜索选项中,还会出现区块编辑器模式。这些是您可以插入到文章或页面中的模板,其中内容已经调整大小和放置,等待您的内容替换占位符。

    从一开始,栏目区块就允许您选择栏目本身的大小。它分为6个不同的方向,每个方向都有不同的页面百分比用于各个栏目。

    古腾堡编辑器教程:如何调整WordPress区块大小-8

    这些不是您可以使用的唯一配置。您可以使用块内的 蓝色 + 按钮 随时添加新栏目。每个单独的栏目都有自己的设置面板,您可以在其中按百分比单独调整其宽度。

    古腾堡编辑器教程:如何调整WordPress区块大小-9

    可能需要进行一些实验才能使尺寸适合您的设计。但是,当它完成后,您可以在首页上放置一些精心设计且间隔适当的内容。请记住,区块编辑器中的任何空栏目也将在前端显示为空。

    古腾堡编辑器教程:如何调整WordPress区块大小-10

    通过调整不同栏目的宽度、位置和数量,您的区块几乎可以以任何方式调整大小和放置。

    需要更多尺寸选择?考虑使用更高级的页面构建器

    我们意识到其中一些调整区块大小的方法可能会受到限制。如果您发现它们对您来说限制太多,那么可能是时候研究更高级的页面构建器了。

    古腾堡编辑器教程:如何调整WordPress区块大小-11

    例如, Divi为每个模块(区块)提供了大小调整变换选项,与古腾堡相比,您可以更好地控制形状、大小和间距。大多数高级页面构建器也是如此,因此如果您发现Gutenberg的选项过于有限,那么查看Divi之类的内容可能是下一步的最佳选择。

    如何使用CSS调整WordPress区块大小

    每个区块在高级设置下的设置面板中都有一个CSS部分 。除了任何其他特定于块的高级设置外,每个设置都有一个字段用于额外CSS类。您可以将您想要的任何选择器分配给这个单独的区块,无论它们是否已经存在于您的站点上,或者您是否专门为此区块创建了它。

    古腾堡编辑器教程:如何调整WordPress区块大小-12

    通常,我们建议对单个区块使用CSS ID而不是类,但区块编辑器不支持(至少默认情况下)。因此,您将只想使用多个类来跟上单个区块而不是ID。类实际上是为了涵盖大类的元素类型,而ID是为了单个元素。在这种情况下,我们建议使用清晰的命名约定来保持代码中的简洁。

    无论如何,您只需将类输入到文本字段中即可。 请勿在此字段中的类名称前包含句点/点

    古腾堡编辑器教程:如何调整WordPress区块大小-13

    现在,您应该导航到外观– 自定义并在最底部找到额外CSS部分。编写或粘贴CSS代码以根据您的喜好调整区块的大小。

    古腾堡编辑器教程:如何调整WordPress区块大小-14

    我们建议避免使用以像素 (px)单位的度量,因为它们是绝对的。最好使用 vw(视口宽度)、vh(视口高度)或(百分比)来调整区块。这些都将参考设备和/或它周围的其他内容进行缩放。

    .block-1 {
    height:35vh;
    max-height:50vh;
    }
    .block-2 {
    width: 100vw;
    }
    .block-3 {
    max-width:80vw;
    }
    .block-1 {
    height:35vh;
    max-height:50vh;
    }

    .block-2 {
    width: 100vw;
    }

    .block-3 {
    max-width:80vw;
    }

    .block-1 {
        height:35vh;
        max-height:50vh;
    }
     
    .block-2 {
        width: 100vw;
    }
     
    .block-3 {
        max-width:80vw;
    }

    请记住,%vw/vh也不同,尽管它们的功能相似。它们都按百分比起作用,但它们与不同的锚点有关。

    百分比测量与元素所在的容器有关。因此,如果元素所在的部分或行没有到达屏幕的边缘,即使设置width:100%也不会到达边界。

    然而,使用 vh/vw将是相对于设备本身的视口,而不是站点的元素。使用height:80vh,您可以始终确保此块占据屏幕高度的 80%,无论它是显示在移动设备、台式机还是平板电脑上。

    小结

    WordPress中的区块编辑器为用户提供了大量以前不可用的自定义选项(即在编辑器本身内)。了解如何在WordPress中调整区块大小对于能够最大程度地利用区块编辑器至关重要。现在有了全站点编辑功能,这项技能只会随着时间的推移变得更加有用。

  • 古腾堡编辑器教程:如何使用WordPress经典区块

    古腾堡编辑器教程:如何使用WordPress经典区块-1

    WordPress编辑器的经典区块旨在帮助简化WordPress的旧版TINYMCE编辑器与其较新的基于区块的编辑器(称为古腾堡)之间的转换。当新编辑器被引入WordPress Core时,之前使用旧编辑器创建的更新网站上的所有文章和页面都会使用经典区块自动转换为新的基于区块的编辑器中的内容。因此,在非常真实的意义上,经典区块只是WordPress新文本编辑器中的旧文本编辑器。也就是说,存在一些值得了解的关键差异和特定用例,即使您已经完全采用WordPress的区块编辑器(及其许多其他区块)进行内容创建,使用经典区块仍然是一个好主意。

    在本教程中,我们将向您展示如何将经典区块添加到文章或页面,我们将介绍它的全部设置和选项,我们还将为您提供在新区块中有效使用它的提示 -基于WordPress的世界。

    如何将经典区块添加到文章或页面

    古腾堡编辑器教程:如何使用WordPress经典区块-2

    经典区块以与任何块相同的方式添加到文章和页面中。单击左上角或要放置区块的位置的区块插入器图标。

    古腾堡编辑器教程:如何使用WordPress经典区块-3

    在区块插入器的搜索字段中输入经典,然后选择经典区块。

    古腾堡编辑器教程:如何使用WordPress经典区块-4

    经典区块已添加到您的内容中。

    经典区块设置和选项

    古腾堡编辑器教程:如何使用WordPress经典区块-5

    与大多数古腾堡区块不同,经典区块在编辑器侧栏中不包括选项。相反,您需要的所有选项都在经典区块工具栏本身中。单击经典区块以显示其工具,包括工具栏,上面有一组选项。让我们仔细看看。

    经典区块选项

    古腾堡编辑器教程:如何使用WordPress经典区块-6

    每个区块都有自己的特定控件以及区块的选项。工具栏上方的一小组区块选项允许您更改区块类型、转换为区块以及打开选项。

    古腾堡编辑器教程:如何使用WordPress经典区块-7

    第一个选项包括列数和设置组。

    古腾堡编辑器教程:如何使用WordPress经典区块-8

    Group允许您将区块添加至可重用区块中。

    古腾堡编辑器教程:如何使用WordPress经典区块-9

    接下来的两个选项允许您通过手动拖动区块或通过单击箭头向上或向下移动块来移动区块。

    古腾堡编辑器教程:如何使用WordPress经典区块-10

    转换为区块将所有内容转换为其特定类型的区块。例如,文本将转换为段落区块,图像将转换为图片区块等。离开页面或发布后无法撤消此操作,但如果您愿意,可以将内容复制并粘贴到新的经典区块中。

    古腾堡编辑器教程:如何使用WordPress经典区块-11

    这三个点打开了更多选项,允许您隐藏设置、复制、创建副本、前后插入、移动、作为HTML编辑、组合或删除区块。

    经典区块工具栏

    古腾堡编辑器教程:如何使用WordPress经典区块-12

    工具栏提供了经典编辑器中的所有TinyMCE工具,允许您设置文本格式、添加媒体等。永久使用此工具栏编辑所有内容。

    文本格式

    古腾堡编辑器教程:如何使用WordPress经典区块-13

    从文本格式下拉框中格式化突出显示的文本。默认为段落。我选择了一个段落并将其设置为H3标题。

    粗体和斜体

    古腾堡编辑器教程:如何使用WordPress经典区块-14

    突出显示文本并单击粗体或斜体以设置文本格式。单独或一起使用它们。

    项目符号和编号列表

    古腾堡编辑器教程:如何使用WordPress经典区块-15

    创建带有项目符号或数字的列表。

    引用

    古腾堡编辑器教程:如何使用WordPress经典区块-16

    引用控制鼠标光标所在段落的格式。引用格式因主题而异。2021主题缩进段落,添加引号,并使文本加粗。

    文本对齐

    古腾堡编辑器教程:如何使用WordPress经典区块-17

    对齐设置文本边缘对齐的位置。在左对齐、居中对齐和右对齐之间进行选择。在这个例子中,我选择了右对齐,所以文本在右侧对齐。左对齐是默认设置。

    插入删除链接

    古腾堡编辑器教程:如何使用WordPress经典区块-18

    插入链接和删除链接工具允许您添加,编辑或删除任何元素上的链接。要插入链接,请选择元素(例如文本或图像),然后单击要使用的链接工具。然后,搜索或粘贴URL。通过突出显示文本并选择删除链接删除链接

    插入更多标签

    古腾堡编辑器教程:如何使用WordPress经典区块-19

    将阅读更多标签加在您的鼠标光标放置文本停顿位置,这会为前端的博客文章创建断点。

    添加媒体

    古腾堡编辑器教程:如何使用WordPress经典区块-20

    添加媒体打开媒体库,您可以在其中上传或选择要添加的媒体。

    显示/隐藏工具栏

    古腾堡编辑器教程:如何使用WordPress经典区块-21

    这将扩展工具栏以显示下一组工具。

    删除线

    古腾堡编辑器教程:如何使用WordPress经典区块-22

    删除线会在您单击图标时突出显示的文本中添加删除线。

    水平线

    古腾堡编辑器教程:如何使用WordPress经典区块-23

    水平线在内容区域中添加一条线。它从光标位置开始划分内容,并将线放置在该点下方。在上面的示例中,我将光标放在虚拟词felis之后

    文字颜色

    古腾堡编辑器教程:如何使用WordPress经典区块-24

    文本颜色可让您选择突出显示的文本的颜色。颜色工具可让您设置多种自定义颜色。

    粘贴为文本

    古腾堡编辑器教程:如何使用WordPress经典区块-1

    粘贴为文本允许您粘贴某些内容而不包括其格式。如果您从文字处理器或其他网站复制了文本,这会很有帮助。根据需要打开或关闭此选项。

    清除格式

    古腾堡编辑器教程:如何使用WordPress经典区块-26

    清除格式会删除所选文本的粗体、斜体、删除线和颜色格式。在这个例子中,我选择了一个段落中的一个词并删除了它的格式。

    特殊字符

    古腾堡编辑器教程:如何使用WordPress经典区块-27

    特殊字符可让您添加在标准键盘上找不到的字符。

    减少增加缩进量

    古腾堡编辑器教程:如何使用WordPress经典区块-28

    减少缩进量和增加缩进量会更改项目符号列表和编号列表的缩进量。这会为项目符号点创建子级别。

    撤消和重做

    古腾堡编辑器教程:如何使用WordPress经典区块-29

    撤消将恢复到上次编辑之前的先前设置。它突出显示了更改,以便您可以看到它。如果您一直单击该图标,它会撤消上一个设置,直到您返回到第一个设置。重做增加了这个设置。在此示例中,我取消了从编号列表更改为项目符号列表的设置。

    键盘快捷键

    古腾堡编辑器教程:如何使用WordPress经典区块-30

    键盘快捷键提供了与经典块一起使用的所有快捷键的列表。

    有效使用经典区块的技巧和最佳实践

    古腾堡编辑器教程:如何使用WordPress经典区块-31

    如果您习惯了经典编辑器,请使用经典区块。这为您提供了所需的编辑器,而不会放弃区块编辑器的任何好处。它还充当两个编辑器之间的桥梁。您可以在学习使用区块编辑器的同时使用您习惯的经典编辑器。

    如果您更喜欢在经典编辑器中创建内容,但希望获得区块编辑器的优势,请使用区块,然后选择转换为区块以将每个内容元素转换为单独的区块。

    如果您希望在一个位置查看所有样式工具,请使用经典区块。滚动时工具栏会保持原位,因此所有选项都在视图中。单击区块中的任意位置以显示工具栏。

    如果您希望将您的内容作为一个单一的内容单元保存在一起,请使用它。它使您不必使用和管理多个区块。

    使用多个经典区块或将其转换为标准区块以在您的内容中使用第三方区块。

    将它用于任何需要经典编辑器的第三方插件。例如,某些插件与媒体库配合使用以创建自定义画廊。这些无法从标准图库或图片区块访问,但您可以使用经典区块中的媒体选项访问它们。

    关于经典区块的常见问题

    经典区块的目的是什么?

    1. 它包含使用原始WordPress编辑器创建的旧内容。
    2. 它为喜欢它的人提供了经典编辑器设计。

    是否从经典编辑器中删除了任何内容?

    有些东西被移到了区块编辑器中。Visual/Text选项卡位于右侧边栏中。任何向经典编辑器添加按钮的第三方插件都是作为区块而不是按钮提供的。它不包括无干扰写作模式。

    经典区块不包括视觉/文本选项卡。我还可以编辑HTML吗?

    是的。文本选项卡现在称为代码编辑器。它已移至右侧边栏中名为编辑器的部分下的选项

    工具上方的媒体按钮在哪里?

    媒体按钮已从工具栏上方移至工具栏本身。

    经典区块可以使用短代码吗?

    是的。任何短代码都可以添加到内容区域。

    区块可以在经典区块中使用吗?

    不,但您可以将其转换为常规区块,或使用多个经典区块,然后在您想要的任何位置添加新区块。

    小结

    这就是我们对WordPress区块编辑器的经典区块的看法。我觉得它很直观。对于喜欢经典编辑器或使用经典编辑器创建内容的任何人来说,这是一个很好的选择。

  • 古腾堡编辑器教程:如何使用WordPress画廊区块

    古腾堡编辑器教程:如何使用WordPress画廊区块-1

    当您想将单个媒体文件插入WordPress网站上的文章或页面时,了解如何使用图片区块会派上用场。但是,如果您想添加一组照片怎么办?为此,您可以使用画廊区块

    WordPress画廊区块可以轻松快捷地将多个图像添加到WordPress文章和页面。在本教程中,我们将解释画廊区块是什么以及它是如何工作的。我们还将提供一些提示和最佳实践,以便在您的网站上有效地使用它。

    如何将画廊区块添加到页面或文章

    要将画廊区块添加到WordPress网站,首先导航到任何页面或文章(新的或现有的)。接下来,单击“添加块”按钮 – 加号 (+) 图标 – 并搜索“画廊”:

    古腾堡编辑器教程:如何使用WordPress画廊区块-2 您可以单击画廊区块以将其插入,或将图标拖放到编辑器中。或者,您可以直接在编辑器中输入“/gallery”,然后按 Enter键。

    插入画廊区块后,您将有几个添加照片的选项。您可以单击上传按钮从计算机中选择图像,或选择媒体库选择已上传到您网站的照片:

    古腾堡编辑器教程:如何使用WordPress画廊区块-3 使用任一选项,您都可以搜索并选择要使用的所有照片。之后,它们将出现在区块中:

    古腾堡编辑器教程:如何使用WordPress画廊区块-4 如您所见,顶部工具栏中有一个选项可以调整块的对齐方式,右侧菜单中还有各种设置。让我们仔细看看每个选项是什么以及如何使用它们。

    画廊区块设置和选项

    在画廊区块的工具栏中,您可以单击对齐图标来更改图库在页面上的位置。默认为左对齐,但您可以将区块移动到页面的右侧或中心:

    古腾堡编辑器教程:如何使用WordPress画廊区块-5 您还可以选择全幅或宽幅- 后者会将画廊扩展到主题的典型内容部分宽度之外。如果您单击三个垂直点,您会发现一些其他选项,包括以下选项:

    • 复制区块
    • 在当前区块之前或之后插入另一个区块
    • 移动画廊区块
    • 作为HTML编辑
    • 将画廊区块添加至可重用

    画廊区块最有用的事情之一是它不仅让您将多张照片添加到您的WordPress页面或同时发布。您还可以使用它根据自己的喜好排列这些图像。例如,您可以自定义包含的列数和画廊中图像的大小。

    您可以在右侧菜单的画廊设置部分下更改画廊列的数量:

    古腾堡编辑器教程:如何使用WordPress画廊区块-6 要更改列数,您可以使用滑块或在文本字段中输入所需的值。您还可以使用裁剪图像切换选项:

    古腾堡编辑器教程:如何使用WordPress画廊区块-7 默认情况下启用此设置,以便均匀裁剪图像。但是,如果您将其关闭,图像将自动以其原始版本显示。

    在链接到下拉菜单下,您可以选择将画廊超链接到附件页面或媒体文件。使用图像尺寸下拉菜单,您可以调整照片的尺寸,选项包括缩略图、 全尺寸

    最后,通过单击图库中的单个图像,您会发现更多选项:

    古腾堡编辑器教程:如何使用WordPress画廊区块-8 如果要编辑单张照片,只需单击铅笔图标即可。您可以选择X图标将其从画廊区块中完全删除。要在照片系列中向前或向后移动,您可以使用箭头按钮。

    有效使用画廊区块的提示和最佳实践

    现在我们已经介绍了画廊区块的基础知识,您已经准备好学习如何有效地使用它。您可以牢记一些最佳实践,以充分利用此WordPress功能。

    首先,我们建议确保在插入画廊区块后启用裁剪图像功能。当您拥有各种大小和形状的图像时,此选项特别有用 – 默认情况下有时会显得凌乱。

    当您启用此功能时,它可以确保图库中的所有图像看起来都是统一的。这有助于使其看起来更专业、更有条理和美观。

    接下来,确保您上传到WordPress画廊的每张图片都经过适当优化非常重要。这包括:

    遵循这些图像优化最佳实践有助于提高您网站的性能。它还可以提高您的搜索引擎排名。

    最后,您可以考虑为画廊中的每张图片添加标题。这有助于在访问者浏览时向他们提供必要的上下文和背景信息。

    关于画廊区块的常见问题

    此时,您应该牢牢掌握Gallery块以及如何使用它。为确保涵盖所有基础知识,让我们看看有关此元素的一些常见问题。

    在哪里可以找到WordPress中的画廊区块?

    要找到画廊区块,请导航到任何文章或页面。接下来,单击加号 (+) 图标并在搜索字段中键入“画廊”。只需单击画廊选项,或将其拖放到编辑器中即可插入区块。或者,您可以通过直接在编辑器中键入“/gallery”,然后键盘上的Enter来找到画廊区块。

    画廊区块有什么作用?

    画廊区块可以让你在一个位置添加多张照片到您的文章。您可以直接在WordPress区块编辑器中以美观的方式轻松调整大小和排列它们。例如,您可以决定要使用的列数并调整图像的大小。

    可以在WordPress的任何地方添加画廊区块吗?

    您可以将画廊区块添加到任何页面或在您的WordPress网站上发布。此外,您可以使用WordPress小工具在站点的其他区域(例如页脚)中添加画廊区块。

    小结

    将图像插入WordPress文章或页面的过程非常简单。但是,有时您可能希望将多张照片分组并一次性添加所有照片。在这种情况下,您可以利用画廊区块的优势。

    正如我们在这篇文章中所讨论的,您可以轻松地将此区块插入文章和页面(以及通过小工具的侧边栏和页脚区域),以轻松地一次上传和排列多个图像。此区块可让您根据自己的喜好无缝调整照片大小和组织照片。您可以使用它来增强页面的整体外观和感觉,而无需退出编辑器或使用第三方画廊插件

  • 古腾堡编辑器教程:如何使用Twitter嵌入区块

    古腾堡编辑器教程:如何使用Twitter嵌入区块-1

    WordPress的Twitter嵌入区块可让您在WordPress文章和页面中嵌入Twitter推文。虽然这仅适用于公开推文,但知道您不需要Twitter帐户即可使用此功能会很有帮助。

    古腾堡编辑器教程:如何使用Twitter嵌入区块-2

    想要在您的WordPress文章或页面中嵌入推文的原因有很多:

    • 为您的网站或博客内容添加社交资料
    • 与其他人互动,无论他们是行业专家还是粉丝
    • 丰富您的内容,使其看起来更具吸引力并提供更多信息
    • 用现实生活中的例子来支持你所说的

    在本教程中,我们将向您介绍如何将Twitter嵌入区块添加到WordPress文章或页面,包括该区块包含的所有不同选项。我们还将介绍一些提示、最佳实践和常见问题解答,以帮助您顺利上路。

    如何将Twitter嵌入区块添加到文章或页面

    查找推文的URL

    找到您要嵌入的推文。要获取特定推文的链接,您有三个选项:

    1. 将鼠标悬停在推特名称右侧的空白处,然后单击以在其自己的页面中打开推文。

    古腾堡编辑器教程:如何使用Twitter嵌入区块-3

    2. 右键单击​​时间或日期戳,然后选择复制链接(或类似)。

    古腾堡编辑器教程:如何使用Twitter嵌入区块-4

    3. 单击推文窗口底部的向上箭头。这将打开一个菜单,将链接复制到推文可能是选项之一。

    古腾堡编辑器教程:如何使用Twitter嵌入区块-5

    在WordPress中添加Twitter嵌入区块

    使用Gutenberg区块编辑器,添加Twitter嵌入区块。将鼠标悬停在页面上的空白区域上,您会看到一个黑色框内的白色加号(当您将光标移到它上面时,框会变成蓝色,如下图所示)。

    古腾堡编辑器教程:如何使用Twitter嵌入区块-6

    单击该加号将显示您可以添加到WordPress文章或页面的所有区块。在搜索框中输入“Twitter”,然后选择出现的Twitter嵌入区块。

    古腾堡编辑器教程:如何使用Twitter嵌入区块-7

    这会将Twitter嵌入区块添加到您的WordPress文章或页面。

    古腾堡编辑器教程:如何使用Twitter嵌入区块-8

    将推文的URL添加到Twitter嵌入框

    现在,获取您从推文中保存的URL并将其粘贴到嵌入框中。完成后单击嵌入。

    古腾堡编辑器教程:如何使用Twitter嵌入区块-9

    Twitter嵌入框的最终结果(或错误消息)

    这是添加后的样子:

    古腾堡编辑器教程:如何使用Twitter嵌入区块-10

    但是,如果您抓取了无法嵌入的链接,您可能会收到错误消息。您可以再次尝试链接或选择转换为链接选项,但如果两者都不起作用,则必须使用其他链接。

    古腾堡编辑器教程:如何使用Twitter嵌入区块-11

    Twitter嵌入区块设置和选项

    当您单击Twitter嵌入区块时,嵌入推文顶部上方的工具栏中会显示六个选项:

    古腾堡编辑器教程:如何使用Twitter嵌入区块-12

    从左到右分别是:

    • 更改区块类型或样式
    • 拖动
    • 向上或向下移动
    • 更改对齐方式
    • 修改网址
    • 更多选项

    更改区块类型或样式

    此选项允许您从三种块类型中进行选择:栏目、组和段落。您(可能)想要使用的唯一两个是栏目和组;段落只会将您嵌入的推文变成直接链接。

    列选项很棘手。在我的主题中,只添加两列最终切断了推文:

    古腾堡编辑器教程:如何使用Twitter嵌入区块-13

    我在组布局上运气更好,它将两条推文并排放置并完整显示它们:

    古腾堡编辑器教程:如何使用Twitter嵌入区块-14

    您还可以将背景颜色更改为纯色或渐变色。要在右侧边栏中显示该工具栏,请单击“更多选项”按钮(带有三个垂直点),然后选择“显示更多设置”

    古腾堡编辑器教程:如何使用Twitter嵌入区块-15

    知道块样式工具非常喜怒无常。当你点击时弄清楚发生了什么并不容易,你必须继续玩弄它,直到推文按照你的意愿出现。

    拖动

    将鼠标悬停在拖动选项上将使您的光标变成一只手。然后,您可以拖动块以将其放置在页面上所需的位置。请注意,当您拖动该框时,它会变成一个小黑框,直到您重新定位它为止。

    向上或向下移动

    上移或下移箭头可让您将Twitter嵌入框向上或向下移动一个空间,除非您已经位于页面的顶部或底部。

    更改对齐方式

    您有五个对齐选项:

    • 左对齐
    • 右对齐
    • 居中对齐
    • 宽幅
    • 全幅

    选择向左或向右对齐将使Twitter嵌入框更小。选择其他三个选项中的任何一个都会使其更大。

    修改网址

    如果您想替换推文的URL,您可以在这里进行。这比删除Twitter嵌入框并从新开始更容易。

    更多的选项

    更多选项的选择,这是三个点,有许多可供选择的方案:

    • 隐藏更多设置:隐藏右侧编辑边栏。
    • 复制:将块复制到剪贴板。将其粘贴到您当前文章/页面上的另一个位置或另一个文章/页面。
    • 创建副本:在当前嵌入块下方创建Twitter嵌入区块的副本。
    • 在之前或之后插入:在当前块之前或之后添加一个块。
    • 移动到:调整出现的蓝线,然后按键盘上的Return将推文重新定位到那里。
    • 作为HTML编辑:编辑块的HTML代码。
    • 添加至可重用区块:从当前Twitter嵌入区块创建一个可重用区块。
    • 组合:将块样式更改为组。
    • 移除区块:删除块。

    有效使用Twitter嵌入区块的提示和最佳实践

    保持纵横比

    如果您单击Twitter嵌入区块工具栏中的“更多选项”按钮,您将看到右侧边栏中显示一个菜单。如果您单击顶部的区块(如果尚未选择),您将看到媒体设置部分。切换为较小的设备调整大小按钮,使其为蓝色。

    古腾堡编辑器教程:如何使用Twitter嵌入区块-16

    这意味着当浏览器调整大小时,比如在移动设备而不是计算机上查看时,嵌入的推文的纵横比也会自动调整。这可以使推文更容易被看到。

    不要太担心背景颜色

    我认为能够以几种不同的方式更改列或组布局的背景颜色是一个不错的选择,但是这个工具非常敏感,我不确定是否值得麻烦。此外,当我能够改变颜色时,它看起来不太好。假设您的网站已经设置为展示您的品牌颜色,则可能不需要调整您的Twitter嵌入的背景。在这种情况下,更简单的方法可能是最好的方法——添加Twitter嵌入区块并保留布局。

    嵌入您自己的推文!

    在您的WordPress内容中嵌入您自己的推文是鼓励交叉推广的好方法。例如,如果您正在举办Twitter竞赛,嵌入的推文将很容易将博客阅读引导至他们可以参与的平台。您可以根据文章或页面上的主题嵌入不同的推文,或者如果您有特别吸引人或相关的推文,则可以在所有内容中嵌入相同的推文。

    关于Twitter嵌入区块的常见问题

    为什么要嵌入推文?

    嵌入推文的原因有很多,无论是您自己的、您公司的还是其他人的。嵌入的推文可以帮助您分享客户推荐、增加社交媒体资料的流量、宣传活动或表示对其他Twitter用户的支持。

    可以在WordPress中嵌入最近的推文吗?

    要嵌入您最近的推文(并始终更新它们),您需要使用插件,因为Twitter嵌入区块没有此功能。

    小结

    Twitter是一个强大的社交工具,用于展示您的想法、内容和他人的支持,并突出您最喜欢的推文——无论是您自己的还是其他人的——将帮助您创建更丰富的 WordPress 内容。商业成功和创造力都不是泡沫,向其他人张开你的(虚拟)手臂只会帮助你的部落成长。此外,您越习惯使用WordPress区块,学习曲线就越平缓,您会发现让您的网站看起来像您想要的样子变得越来越容易。

  • WordPress托管主机与共享主机之间有什么区别?

    如果您不熟悉搭建WordPress网站,您可能会对选择服务器托管计划感到困惑。共享主机和托管主机是WordPress网站最受欢迎的两个选项,在它们之间做出决定是决定您网站成功的一方面。

    作为新的WordPress站长,共享主机将以实惠的价格提供您所需的功能。但是,托管主机提供了一些好处,可能会使其对规模有利,并使其值得付出额外的成本。因此,该决定不一定是明确的。

    在这篇文章中,我们将探讨WordPress共享主机和托管主机的优缺点。然后,我们将通过仔细研究两者之间的差异来帮助您决定最适合您的选择。

    什么是WordPress托管主机?

    WordPress托管主机与共享主机之间有什么区别?-1

    简而言之,WordPress托管主机是指您的服务提供商管理特定于您的WordPress安装的任何服务器资源。换句话说,安装平台、保持更新和执行备份等任务通常包含在您的托管计划中。

    托管主机有几个好处,包括:

    • 更好的性能,因为服务器专门针对WordPress进行了优化。
    • 获得更高质量的支持(再次,因为主机专门研究WordPress)。
    • 可扩展性,因此您的网站有空间随着流量的增加而增长。

    如果您需要您的提供商承担保持平台更新和安全的繁重工作,WordPress托管主机是一个很好的解决方案。它让您只需专注于您的内容,而不必为技术问题而烦恼。但是,共享主机也有一些您可能想要探索的好处。

    什么是WordPress共享主机?

    WordPress托管主机与共享主机之间有什么区别?-2

    如果属于WordPress入门站长,WordPress共享主机可能是您的一个不错的初始选择。虽然它通常提供的功能比托管主机少,但仍有许多关键优势:

    • 技术以一种允许更多功能的方式不断改进,例如增加的带宽、更大的服务器空间和更多的管理选项。
    • 您可以构建您的网站并增加您的受众和流量,直到您需要升级。

    然而,共享主机的主要好处是它的定价。由于您与其他网站共享服务器资源,因此提供商可以为您提供极具竞争力的价格。

    虽然您的预算最初可能是主要问题,但在选择该路线之前,需要考虑共享主机的一些缺点:

    • 鉴于其他站点共享相同的资源,您的服务器空间和性能受到限制。
    • 您可以安装的软件类型可能存在限制,这可能会限制您的站点扩展和增长的能力。
    • 支持选项较少或有限,因为大多数基本计划不包括顶级支持。

    共享主机是大多数新网站和博客最流行的解决方案。它的预算友好,如果您不希望使用很多资源,则可能需要一段时间才能需要升级。但是,您必须权衡支持、站点备份和性能与较低价位的问题。

    WordPress托管和共享主机之间的差异

    WordPress托管主机与共享主机之间有什么区别?-3

    当然,托管和共享主机并不相等,因此您需要根据您当前的需求和整体增长计划来考虑关键差异。

    在功能方面,这两个平台各有优缺点:

    • WordPress共享主机。这些软件包在特定于WordPress的功能方面受到更多限制。尽管您可以使用WordPress之外的工具,但您只能获得为它们提供的支持和维护。
    • WordPress托管主机。在资源管理方面,您将依赖于您的主机。这通常是一件好事,因为您将获得更多的支持,因为您的房东拥有丰富的知识和专业知识。但是,对于那些希望根据自己的确切要求优化服务器的人来说,选择较少。

    如何确定您是否需要WordPress共享或托管主机

    WordPress托管主机与共享主机之间有什么区别?-4

    当然,最终的问题是:哪个套餐适合我?答案将基于您的预算、需求和技术专长的组合。

    共享主机非常适合运行小型网站、博客或投资组合网站。如果出现以下情况,您应该考虑共享主机:

    • 您的预算很少或有限,并且有“DIY”的态度。虽然价格是一个合理的问题,但您还必须对管理您的网站感到满意。备份、WordPress 更新和一般服务器维护等方面可能是您的责任,具体取决于您的网络主机。
    • 您不会期望有大量的网络流量。由于您与他人共享服务器空间和资源,您可能会遇到延迟或速度缓慢的情况,具体取决于服务器上其他站点的构成。但是,如果您不希望网站上有大量流量,这可能不是一个交易破坏者。
    • 您想将WordPress与其他工具集成。由于共享主机的通用性足以与大多数基于 Web 的平台配合使用,因此您几乎可以安装任何您想要的东西。

    总体而言,如果您喜欢在幕后工作,并且不期望使用大量服务器资源,那么共享主机可能适合您。

    另一方面,如果您计划运行大中型商业网站或电子商务网站,WordPress托管主机是理想的选择。如果出现以下情况,您应该考虑WordPress托管主机计划:

    • 您有一个可以容纳价格的预算。托管 WordPress 托管的前期成本要高一些,但从长远来看,它可以为您节省大笔的停机时间。
    • 您不能(或不想)执行站点维护。如果您不精通技术,或者根本没有时间或不想进行站点维护,那么投资托管托管非常适合您。您可以专注于您的内容,而您的主持人管理技术方面。
    • 您需要特定于WordPress的支持。WordPress托管主机提供专门研究与平台相关的所有内容的支持技术人员。如果您的数据库有问题,或者最近的升级或插件安装有问题,与共享服务相比,它们可以更好地为您提供帮助。

    如果您更愿意委托您的站点进行维护并且认为价格略高没有问题,我们绝对建议您使用托管计划。

    但是,如果您知道您的网站将会有大量流量,或者您计划开发应用程序或网站,那么选择托管主机可以让您避免性能问题。

    WordPress共享主机和托管主机这两个称呼更多存在于国外的服务器提供商。

    这两者之间最大的区别是,WordPress托管主机专门针对WordPress进行了深度的优化和适配,服务器性能更佳;而WordPress共享主机,则提供的服务器资源有限,并且由于服务器资源共享,在带宽资源、CPU占用及内存使用有较大的限制。

    在国内众多服务器提供商中:

    WordPress共享主机,我们一般称之为虚拟主机。在阿里云(国内),则以入门型主机和企业型主机进行服务器划分。其中个人站长集中于入门型主机,可以选择共享型主机、突发性能型和轻量应用型,并且这些主机都属于VPS主机。

    WordPress托管主机在国内几乎是没有的,WordPress在国内的流行程度远远不及海外市场。

    因此,如果选择国内的服务器提供商,个人建议先从入门级服务器开始,后期根据实际使用情况逐步升级。

     结论

    许多网站所有者从共享主机开始。它可以帮助您快速入门,同时使您能够进一步重新评估您的选择。但是,在做出最终决定之前,您应该考虑WordPress托管主机的许多好处。

    在这篇文章中,我们讨论了共享主机和托管主机之间的区别,并讨论了哪种最适合您的网站。简要回顾一下:

    1. WordPress共享主机是一种低价服务,您可以在其中与其他站点共享资源。对于小型网站、博客或作品集来说,这是一个不错的入门选择。但是,随着网站和流量的增长,您可能需要升级。这将需要技术知识和预算增加。
    2. WordPress托管主机为您的站点提供特定于WordPress的服务和专用资源。主要推荐用于高流量的大型网站,例如电子商务商店。但是,它有点贵,因此您需要将其纳入您的决定中。
  • 如何手动安装WordPress?

    WordPress是最流行的网络平台和可用的内容管理系统 (CMS)。选择它来开发您的网站,您就加入了一个由用户和开发人员组成的蓬勃发展的社区。但是,如果您以前从未安装过它,您可能不确定该过程以及如何使一切正常工作。

    幸运的是,您所需要的只是一个清晰的计划和一点耐心。执行手动安装可能比一键式安装需要更多时间。但是,当您完成时,您将对是什么让平台如此出色以及您可以在未来使用的宝贵知识有更深入的了解。

    如何简化WordPress的安装

    手动安装WordPress并不太困难,但如果您遇到平台的不熟悉方面,它可能会让您感到困惑。我们稍后将讨论为什么以及如何执行这种安装,但如果我们不首先告诉您如何完全避免它,我们将是疏忽大意。

    您通常可以通过托管服务执行此任务,而不是自己安装WordPress。如果该服务针对WordPress进行了优化,则可能会为您提供可显着简化流程的功能。

    又或者你可以考虑安装类似宝塔的服务器管理系统,也可以实现一键安装WordPress。

    要使用宝塔一键部署WordPress非常简单,只需要登入你的宝塔控制面板,然后访问软件商店,选择一键部署分类,搜索“WordPress”,在列表中找到WordPress,点击一键部署,安装说明操作即可。

    如何手动安装WordPress?插图

    但是,如果您无法访问一键安装选项,或者您只是想知道如何手动安装 WordPress,请继续阅读以了解所涉及的所有内容。

    什么时候应该手动安装WordPress

    正如我们所讨论的,部分服务提供商会为您提供了一种安装WordPress的简单方法。但是,您也可能出于某些原因需要执行手动安装。

    对于初学者来说,手动安装让您有机会了解平台在幕后工作的来龙去脉。这让您在故障排除和处理可能出现的任何问题时获得额外的洞察力,同时还能让您对平台及其定制更有信心。

    您还可以使用XAMPP等工具将这些知识运用到创建本地安装中。这是在向公众展示网站之前测试网站的好方法。

    手动安装WordPress所需的工具

    在深入研究这个过程之前,您需要一些工具来手动安装WordPress。除了使您能够创建数据库和用户的托管服务提供商之外,您还需要:

    • 文件传输协议 (FTP) 客户端。我们推荐FileZilla,因为它是开源的、独立于平台的、易于使用并且支持安全传输协议。在开始之前,您可能还需要复习FTP技能
    • 最新版本的WordPress您需要单击WordPress.org网站上的蓝色按钮来下载它。
    • 专用的编码文本编辑器。这是可选的,因为每个操作系统 (OS) 都包含一个标准解决方案。

    最后一点,虽然您可能可以直接通过您的主机帐户面板编辑文本文件,但我们建议您使用FTP来执行此操作。

    正如我们所提到的,虽然您可以使用任何文本编辑器编辑文件,但Atom之类的解决方案可以为您提供更大的灵活性和其他功能,让您的工作变得更轻松。

    如何手动安装WordPress

    准备好工具后,您就可以开始手动安装WordPress,首先是设置数据库和管理员用户。

    1. 创建一个新的WordPress数据库和用户

    在此全面披露:这有时可能是最令人困惑的步骤,因为它涉及很多细节。我们不仅要创建一个数据库和一个关联的用户帐户,我们将在稍后配置您的wp-config.php文件时参考它们。

    您的第一步是登录您的托管帐户,访问您的帐户仪表板,然后找到一个可以让您创建数据库的选项。一般情况下,你需要访问的mysql管理后台phpmyadmin

    如何手动安装WordPress?插图1

    创建完数据库后,即具备了数据库名、数据库管理用户及密码三个必备的要素。

    2.配置wp-config.php文件

    在这一步中,我们需要使用wp-config.php文件告诉WordPress您的数据库在哪里以及如何访问它。简而言之,这个文件告诉WordPress在哪里可以找到数据库中站点的每个元素。可以想象,它是一个关键的WordPress核心文件。

    首先,导航到您下载的 WordPress 文件夹,然后解压缩它。在里面,你会找到wp-config-sample.php文件。您需要打开它并找到以下代码:

    // ** MySQL 设置 – 您可以从您的网络主机获取此信息 ** //
    /** WordPress 的数据库名称 */
    define(‘DB_NAME’, ‘database_name_here’);
    /** MySQL 数据库用户名 */
    define(‘DB_USER’, ‘username_here’);
    /** MySQL 数据库密码 */
    define(‘DB_PASSWORD’, ‘password_here’);
    /** MySQL 主机名 */
    define(‘DB_HOST’, ‘mysql.example.com’);
    // ** MySQL 设置 – 您可以从您的网络主机获取此信息 ** //
    /** WordPress 的数据库名称 */
    define(‘DB_NAME’, ‘database_name_here’);

    /** MySQL 数据库用户名 */
    define(‘DB_USER’, ‘username_here’);

    /** MySQL 数据库密码 */
    define(‘DB_PASSWORD’, ‘password_here’);

    /** MySQL 主机名 */
    define(‘DB_HOST’, ‘mysql.example.com’);

    // ** MySQL 设置 - 您可以从您的网络主机获取此信息 ** //
    /** WordPress 的数据库名称 */
    define('DB_NAME', 'database_name_here');
    
    /** MySQL 数据库用户名 */
    define('DB_USER', 'username_here');
    
    /** MySQL 数据库密码 */
    define('DB_PASSWORD', 'password_here');
    
    /** MySQL 主机名 */
    define('DB_HOST', 'mysql.example.com');

    您需要使用上一步中的数据库信息替换每个相关定义函数中的占位符,特别是:

    • database_name_here(您创建数据库时所使用的名称)。
    • username_here(数据库用户名,一般为root,包括前缀和下划线)。
    • password_here(您的数据库管理密码)。
    • mysql.example.com(除非数据库服务器和网站服务器是不一样的,否则使用默认)。

    最后,保存您的更改,然后将文件本身重命名为wp-config.php,上传到WordPress服务器了。

    3. 将WordPress文件上传到您的服务器

    这一步可以说是最容易实现的。我们实际上已经讨论了如何找到您的FTP凭据并登录到您的服务器。到达那里后,您正在寻找顶级目录(这可以称为home、public_html、www 或 root)

    虽然您可以将WordPress安装到子目录中(特别是如果您已经启动并运行了一个网站),但在本示例中,我们使用的是干净的服务器。为此,只需导航到 FileZilla 左侧面板中的本地 WordPress 文件夹,复制其中的所有文件,然后将它们拖到根文件夹:

    现在您的文件已上传,并且您的数据库已设置,倒数第二步是安装和设置 WordPress 本身。

    4.运行WordPress的安装脚本

    完成前面的步骤后,就可以运行将完成WordPress安装的脚本了。首先,导航到yourdomain.com/wp-admin/install.php,将占位符域替换为您站点的占位符域。您应该会看到一个提示,要求您为WordPress安装选择一种语言,您应该在单击继续之前执行此操作

    如何手动安装WordPress?-1

    下一个界面使您可以为站点命名,并添加 WordPress 管理员用户名、密码和电子邮件地址。创建用户名时,务必确保其安全。如果不出意外,请选择一个不同的名称,而不是简单的admin — 并生成一个复杂的密码。

    如何手动安装WordPress?-2

    最后,取消选中允许搜索引擎索引此站点框。这会阻止您的网站出现在搜索引擎中,直到您准备好上线,尽管您可以稍后在WordPress中更改此设置。完成后,单击安装WordPress

    5. 完成并测试您的安装

    安装 WordPress 后,您将被带到 WordPress 仪表板。如果没有,您需要解决一些常见的安装问题,并在遇到困难时咨询您的主机。

    此时,您可能会想知道接下来要做什么。以下是我们的建议:

    • 选择一个合适的主题。简而言之,这决定了您的网站在“前端”上的外观。
    • 安装一些必要的插件。这些是扩展 WordPress 功能的附加组件,其中一些对于保护您的站点和用户至关重要。
    • 开始写作。您现在想要创建您需要的任何页面和文章——这是有趣的部分!

    我们的建议是尽可能多地阅读有关该平台的内容,让自己沉浸在 WordPress 中。我们的博客是一个很好的起点,但有大量关于WordPress及其运作方式的可用信息。例如,the Codex将成为发展您的专业知识的关键。

     结论

    了解如何手动安装 WordPress 为您构建成功的网站提供了优势。您可以准确地看到您的网站如何与数据库交互,以及您的文件及其权限如何工作。您还可以学习从源头解决问题,同时获得一套技能,使您能够自信地构建未来的站点。