如何在没有插件的情况下在 WordPress 中创建栏目

如何在没有插件的情况下在 WordPress 中创建栏目

借助 WordPress Columns 块,将内容组织成栏是小菜一碟。该块属于每个 WP 主题中可能使用的核心块。列块最多可以有 6 列。因此,您可以并排显示 6 个不同的内容。

今天我们将向您展示如何在没有插件的情况下在 WordPress 中创建栏 - 通过使用栏块。我们还为您带来了总结 WP 5.3版本的最新功能 更新。

在本教程中,您将找到以下信息:

列的目的是什么

网站上的栏目可以有多种应用。首先,它们可以使内容排列整齐、更具可读性并且更易于浏览。通过将内容组织成列,您可以突出显示重要信息或参数。

例如,您可以使用多栏布局来展示您的服务。添加说明性图像、描述或按钮。您当然可以使图像可点击。

具有服务的多列布局
带有服务的多列布局

与服务类似,您可以使用 WordPress 上的栏来显示产品或产品类别。如果您有一个简单的商业网站,这是理想的选择。

包含产品和类别的多列布局
用于显示产品和类别的列

在博客文章中,您可以使用栏来分隔内容。您可以并排放置文本、项目符号点或图像。

使用列分隔内容
使用列来分隔内容

旧编辑器中列的工作方式

在 WordPress 5+ 之前,如果您想制作多列内容,则必须使用表格。这比最新的编辑器要困难得多。此外,移动设备上的样式和显示表格通常存在问题。过去是如何运作的?

关于如何在 WordPress 网站中创建列,您有多种选择:

1. 手动将 HTML 代码插入文本编辑器

<table>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

这种方法主要由开发人员使用,他们可以根据自己的需求快速创建表或列。缺点是并非所有 WordPress 主题都能很好地处理列。表格通常并不完美,普通用户无法轻松解决所有可能的问题。

2.允许在WordPress编辑器中使用表格

因为WordPress使用TinyMCE编辑器,所以可以允许函数编辑表格。如果您有兴趣了解更多信息,可以找到所有详细信息 在这个论坛中。如果您对我们的 AIT 主题执行相同的操作,表格将正常工作。

3.在AIT主题中使用Columns元素

如果您使用我们较旧的 WordPress 主题之一,您肯定知道我们的“Columns”元素。该元素可用于在页面内添加列。它是一个可排序的元素,这意味着您可以将其放置在任何需要的地方。优点是页面内的可变性。

列元素
可订购元素列 – 您可以在任何 AIT 主题中使用它

4. 下载第3方插件来管理表

关于如何在 WordPress 帖子和页面中创建列的另一个解决方案是下载一个用于创建表格的可用插件。这些插件允许只需点击几下即可添加列/表,无需任何编码。经验不足的用户也可以使用它。

如何在没有插件的情况下在 WordPress 中创建列(在块编辑器中)

感谢新的块编辑器,创建列变得非常容易。如果您仍在使用旧版 WordPress,现在是更新到最新版本的最佳时机。使用“列”块,只需单击几下,您就可以简单地添加和管理列。

对于想要处理多列内容、展示产品或撰写博客但没有编程经验的每个人来说,此块都是一个受欢迎的更改。

让我们看看如何添加列块以及如何在没有插件的情况下在 WordPress 中创建列:

  • 第一个选项是单击顶部栏中的“+”,然后从可用块中选择“列”块。
  • 第二个选项是单击编辑器内任意位置的“+”。
单击“+”在 WordPress 中添加列
通过单击“+”在 WordPress 中添加列
添加带有斜杠“/”的列块
使用斜杠“/”在 WordPress 中添加列

WordPress Columns 块的预定义布局(WP 5.3 的新增功能)

最新版本在列设置方面带来了巨大改进。首先,有可用的默认布局样式。这是什么意思?

用户可以在向内容区域添加新块的过程中选择布局和对齐方式。预定义的布局非常有帮助 – 特别是对于那些不具备高级 WordPress 技能的用户。此功能代表了我们如何想象如何在 WordPress 中创建栏目(无需插件或任何其他附加组件)。

列块中的预定义布局
预定义布局选项

 

如果您不想在 WordPress Columns 块中选择预定义布局,请跳过它。跳过此步骤后,内容将分为 2 个相同的部分/两个可以编辑的单独列。

创建的列块
具有 2 个可编辑的默认区域(列)的列块

列块基本设置

WordPress Columns 块本身没有很多选项。为什么会这样,我们稍后会解释。在顶部栏中,您可以将对齐方式更改为宽或全宽。如果您的活动主题支持,您可以更改此对齐方式。

列块的顶部工具栏
带有对齐选项的顶部工具栏

最重要的列块设置是右侧检查器侧栏中的列数。默认情况下有 2 列,但您可以将此数字增加到 6。您可以使用鼠标更改它或输入数字。增加或减少列后您将立即看到它的外观。块根据滑块动态变化。

更改列数
使用滑块移动以根据需要更改列数

它非常实用,因为您可以在几秒钟内更改列数,而无需对设置或编码进行任何困难的更改。

与 WordPress 编辑器中的其他块类似,您也可以将自定义 CSS 类插入到列块中。

块附加器可以更顺畅地使用块

列块很特殊,因为您可以用它创建多个块。在新版本发布之前,使用单个块非常困难。当您想要添加一些块时,您不知道到底要单击哪里。借助块附加程序(及其通过背景颜色进行区分),可以更轻松地将内容插入到正确的列中。

WordPress 列块中的块附加程序
具有背景颜色的块附加器

如何使用 WordPress 列块

Columns 块的优点在于每列都可以嵌套其他块。它可以是段落、图像块或按钮块。最大列数为 6,因此您可以根据需要创建多列内容。如前所述,要展示产品,您可以并排添加产品图像、名称、价格和按钮。

多栏布局中不同类型的内容
使用列块,您可以并排呈现不同类型的内容

您还可以使用多个列块一个接一个地创建网格。您可以使用它来展示您的服务或宣传重要功能。

列块的网格效果
列块放置在彼此下方的网格效果

编辑嵌套块

正如我们已经提到的,您可以在列内嵌套其他块。每个嵌套块都有其所有可用的设置。这意味着如果您将图像块添加到列中,您可以按照与独立中完全相同的方式对其进行编辑 图像块.

将图像块编辑为嵌套块
嵌套在列块中的图像块的可用设置

结论:柱块优点

发布 WordPress 块编辑器以及在页面和帖子中使用列的可用性显着简化了用户处理内容的方式。感谢 WordPress Columns 块,使用第 3 方解决方案或编写 HTML 代码不再重要。只需点击几下即可添加或删除列。对于技术含量较低的用户来说,一切都非常直观和快速。

多列布局中的内容将很好地对齐到网格中。它在响应式版本中也会立即看起来不错。

我们正在努力开发新的 Citadela WordPress 主题,该主题是专门为 WordPress 块编辑器开发的。了解有关 Citadela 主题和可用布局包的更多信息。

2 对“How to make columns in WordPress without plugin”的思考

    1. 你好大卫,

      感谢您的来信。您应该激活古腾堡编辑器,它提供了选择单个列的选项,在设置侧边栏(右侧)中您可以调整其宽度。

      此致!
      兹拉特科
      艾特团队

评论已关闭。