如何在WordPress中轻松添加项目符号和编号列表

您想在WordPress中添加项目符号和编号列表吗？向内容添加列表有助于提高网站的可读性。它们也是与访问者共享分步说明或复杂数据的好方法。有时，搜索引擎甚至可以为在其内容中使用列表的页面提供更高的排名。在本文中，我们将向您展示如何使用自定义样式在WordPress中轻松添加项目符号和编号列表。

为什么要在WordPress中添加项目符号和编号列表？

我们认为，最佳做法是将内容分解为可扫描的部分，而不是向访问者展示一堵文字墙。有很多方法可以使页面对读者更友好，包括创建表格、使用副标题、添加视频和创建列表。

列表可以帮助访问者一目了然地了解您的内容，即使您共享的是复杂的信息或大量数据。这可以改善用户体验，并让人们在您的网站上停留更长时间。

它们也是创建待办事项列表或与访问者共享分步说明的理想选择。例如，您可以将食谱转换为美食博客上的编号列表。

方法 1.使用内置的WordPress列表块（简单）

添加项目符号和编号列表的最简单方法是使用内置的列表块和 WordPress 块编辑器。

这允许您创建简单的列表，而无需安装单独的WordPress插件，尽管默认块只有几个自定义选项。

如果要使用自定义图标、水平布局、不同颜色等微调列表的每个部分，那么我们建议使用本文中的其他方法之一。

要开始使用，只需打开要添加列表的帖子或页面即可。然后，您可以选择是创建项目符号点还是编号列表。

如何在WordPress中创建项目符号列表

要创建项目符号列表，请单击“+”图标以添加新块。

在出现的弹出窗口中，输入“列表”。

当右侧块出现时，单击它以将其添加到页面中。

这将创建项目符号点列表中的第一项。只需键入要用于第一个列表项的文本。

完成后，按键盘上的“Enter”键移动到下一行。WordPress将自动创建第二个项目符号。

现在，您可以继续键入要用于第二个项目符号点的文本。只需重复这些步骤即可将更多项目添加到列表中。

如果要创建嵌套列表，请单击“缩进”按钮。这会将光标向右移动一步，以便您键入缩进的文本。

您可以再次单击“缩进”按钮，以创建两级嵌套项目符号点。

如下图所示，每个级别使用不同的图标。

要减少缩进，请单击“缩进”按钮。

这会将光标向左移动一步，准备开始键入。

通过按“缩进”和“缩进”按钮，您可以创建具有多个不同级别的嵌套列表。

默认情况下，WordPress将使用“中等”字体大小，但您可以使用右侧块选项中的“排版”设置在小，大和超大之间切换。

您还可以添加链接，或使用标准文本格式选项，如粗体和斜体。

如何在WordPress中创建编号列表

要在WordPress中创建编号列表，只需按键盘上的“1”键，然后按句号（.）。

WordPress会自动将此文本转换为编号列表中的第一项。

现在，您已准备好在编号列表中键入第一项。

之后，只需按键盘上的“返回”键，WordPress将自动创建下一个编号点。

就像项目符号一样，您可以通过单击“缩进”和“缩进”按钮来创建嵌套列表。

这将在编号的项目符号点下方创建一个缩进的项目符号点。

与项目符号点列表不同，您只能使用单个缩进级别。

当您对列表的外观感到满意时，只需单击“更新”或“发布”按钮即可使其在您的WordPress网站上生效。

方法 2.使用超级列表块WordPress插件（创建多媒体列表）

内置的列表块非常适合创建基于文本的列表，但有时您可能希望包含其他内容。例如，您可能希望创建一个包含图像、文本和号召性用语按钮的定价表。

最简单的方法是使用超级列表块。这个免费的插件添加了一个新块，允许您使用列表中的任何WordPress块。

您甚至可以通过向单个列表项添加多个块来创建多媒体项目符号点。在下图中，我们在每个列表项中使用了段落和图像块。

超级列表块还允许您在垂直和水平列表样式之间切换，并创建没有项目符号图标或数字的“无标记”列表。

首先，您需要安装并激活超级列表块插件。

之后，转到要添加列表的页面或帖子。然后，您可以单击“+”图标并开始输入“超级列表”。

当出现右侧块时，单击一下。

这将添加一个具有两个默认列表项的新块。

首先，您可以使用工具栏和左侧菜单中的箭头在水平和垂直布局之间切换。

您还可以使用“更改列表样式”下的图标在编号列表或项目符号列表之间进行选择。

另一个选项是“无标记”，这是插件提供的独特列表样式。

当您对列表的配置方式感到满意时，即可创建第一项。

只需单击超级列表块一角的“+”按钮，然后选择要添加的第一个块。 超级列表与所有默认的WordPress块兼容，因此您可以添加图像，标题或任何其他所需的块。

然后，您可以照常设置块的样式。例如，您可以上传图像、添加下载链接或键入一些文本。

要在项目符号点添加另一个块，只需按键盘上的“Enter”键。这会在第一个块下方添加一个新的“键入/以选择块”行。

您现在可以单击列表项内的“+”图标，并按照上述相同过程添加另一个块。

如果对第一个列表项的设置方式感到满意，可以按照相同的步骤配置第二个默认项。

若要添加更多项目符号，需要选择整个列表项。这可能有点棘手，因为您需要选择整个项，而不是该列表项中的单个块。

当您在工具栏中看到“+”图标时，您选择了正确的项目。完成后，只需继续并单击“+”按钮即可。

这会将一个新的空项添加到列表中。

只需继续重复这些步骤即可添加更多项目符号和块。

当您对列表的外观感到满意时，您可以单击“更新”或“发布”按钮以使其在您的WordPress博客或网站上生效。

方法 3.使用页面构建器插件（最适合登录页面）

如果要使用自定义样式创建漂亮的列表，则可能需要使用SeedProd。

这个高级拖放页面构建器插件可让您使用简单的拖放编辑器创建专业设计的页面。它还带有一个现成的列表块，可让您微调列表设计的每个部分，包括更改单个项目之间的间距、用自定义图标替换标准项目符号等。

SeedProd 可以轻松设计具有独特设计的独立页面，因此，如果要将列表添加到自定义主页或登录页面，这也是一个不错的选择。

您需要做的第一件事是安装并激活SeedProd。

激活后，您需要输入许可证密钥。

您可以在SeedProd网站上的帐户下找到此信息。添加许可证密钥后，只需单击“验证密钥”。

之后，转到 种子生产 » 登陆页面，然后单击“添加新登陆页面”。

在下一个屏幕上，系统会要求您选择一个模板。

SeedProd 附带了 180 多个漂亮的模板，这些模板分为不同的类别，例如 404 页模板和自定义 WooCommerce “谢谢”页面。

只需单击任何选项卡即可查看该类别中的不同模板。

当您找到要使用的模板时，只需将鼠标悬停在其上，然后单击复选标记图标即可。

我们在所有图像中使用“爆炸性增长网络研讨会”模板，但您可以使用任何您想要的设计。

接下来，您需要为页面指定标题。

SeedProd 将根据页面标题自动创建一个 URL，但您可以将其更改为所需的任何内容。例如，将相关关键字添加到URL通常会改善您的WordPress SEO，并帮助页面出现在相关搜索结果中。

当您对标题和URL感到满意时，请单击“保存并开始编辑页面”。

这将加载 SeedProd 拖放页面编辑器。在右侧，您将看到页面设计的实时预览，左侧有一些设置。

SeedProd 附带了许多可以添加到设计中的块，包括允许您添加社交分享按钮、视频、联系表单等的块。

要向设计添加列表，请找到“列表”块并将其拖到页面上。

这会向页面添加一个垂直列表，并带有占位符“Item 1”。

如果要创建水平列表，请单击“高级”选项卡，然后选择“水平”按钮。

现在，您可以通过选择“内容”选项卡开始构建列表。

要将默认文本替换为您自己的消息，请单击左侧菜单中的“项目 1”。

现在，您可以在出现的小文本编辑器中键入列表项。

在这里，您还可以应用要使用的任何格式，例如粗体或斜体。

默认情况下，SeedProd 对每个项目符号点使用复选标记，但它有一个内置的图标字体库，其中包括 1400 个字体真棒图标，您可以改用这些图标。

要替换复选标记，只需将鼠标悬停在其上，然后在出现时单击“图标库”。

这将打开一个弹出窗口，您可以在其中选择要使用的图标。

您可以为列表中的单个项目符号使用不同的图标，因此这是创建更有趣和引人注目的列表的好方法。

要创建更多要点，只需单击“添加新项目”按钮。

现在，您可以按照上述完全相同的过程添加文本并更改默认图标。

将所有项目添加到列表后，您可以使用左侧菜单中的设置更改字体大小和对齐方式。

您还可以使用“间距”滑块增加或减少各个列表项之间的间距。

之后，您可能需要更改列表中图标的颜色。即使您使用不同的图标，SeedProd 也会对每个项目应用相同的颜色，因此设计将始终保持一致。

要进行此更改，请单击“图标颜色”区域，然后从出现的弹出窗口中选择新颜色。

完成后，您可能需要单击“高级”并查看一些其他设置。我们已经了解了如何在垂直和水平列表布局之间切换，但您也可以更改文本颜色和字体。

要真正使您的列表脱颖而出，您可以添加框阴影或 CSS 动画。

“高级”选项卡中的大多数设置都是不言自明的，因此值得浏览它们以查看您可以创建哪些不同类型的效果。

完成后，您可以通过添加更多块，然后使用左侧菜单中的设置自定义它们来继续处理页面设计。

如果您对页面的外观感到满意，请单击“保存”按钮上的下拉菜单，然后选择“发布”。

您现在可以访问此页面以查看您的在线商店或网站上的实时列表。

方法 4.使用代码添加项目符号和编号列表（高级）

您还可以使用内置的WordPress代码编辑器和HTML创建列表。

这更复杂，因此它不是初学者的最佳方法。但是，它确实允许您在内置列表块中使用更多样式和格式。例如，您可以使用 和 等标记快速轻松地向列表项添加标题样式。

要开始使用，请打开要显示列表的页面或帖子。然后，单击右上角的三点图标并选择“代码编辑器”。

后续步骤将根据您是要添加项目符号列表还是编号列表而有所不同。

如何使用代码创建项目符号列表

要创建项目符号列表，请首先键入以下内容：

<ul>

代表“无序列表”，这意味着列表没有任何数字，并告诉WordPress您正在手动创建列表块。ul  wp:list

接下来，按“返回”键移动到新行并创建您的第一个列表项：

<ul>
    <li>
    Red
    </li>

在这里，代表“列表项”，我们将用 .<li> </li>

可以重复此过程以创建更多列表项。例如：

<ul>
    <li>Red</li>
    <li>Orange</li>
    <li>Green</li>

完成后，使用另一个“无序列表”标志关闭代码块：

</ul>

这给了我们以下列表代码：

<ul>
    <li>Red</li>
    <li>Orange</li>
    <li>Green</li>
</ul>

如下图所示，这将创建一个非常简单的列表，但您可以通过添加其他 HTML（如标题标签）来自定义它。

如何使用代码创建编号列表

要创建编号列表，只需键入以下内容：

<!-- wp:list {"ordered":true} -->

然后，您可以键入哪个代表有序列表：ol

<ol>

之后，按照上述相同过程添加每个列表项：

<ol>
<li>Red</li>

最后，使用标记和 关闭有序列表。/ol``wp:list

<ol>
<!-- wp:list-item -->
<li>Red</li>
<!-- /wp:list-item -->
 
<!-- wp:list-item -->
<li>Orange</li>
<!-- /wp:list-item -->
 
<!-- wp:list-item -->
<li>Green </li>
<!-- /wp:list-item -->
</ol>