如何在wordpress的博客文章中显示目录？

Question

如何在博文中显示目录？我们可以通过点击标题滚动到特定的标题

Answer 1

1. 转到您要添加目录的帖子或页面。

1. 如果没有，请创建将用作目录中项目的标题。

1. 单击进入第一个标题块。将出现一个工具栏。 H2 标题的 Gutenberg 块工具栏

4. 单击更多选项按钮（三个垂直点图标）并选择编辑为 HTML。 在 WordPress 编辑器中单击以 HTML 格式编辑-1

5. 在标题的开始标签中添加一个唯一的 ID 名称。 ID 名称是添加到 HTML 元素的开始标记的唯一标识符。这是标题的样子：

部分名称

6. 对页面上的其余标题（或仅包含在目录中的标题）重复。对于这个演示，我将使用 ID 名称“anchor-1”、“anchor-2”、“anchor-3”和“anchor-4”。 将 ID 名称添加到 WordPress 帖子中的所有标题

1. 滚动回到页面顶部。单击顶部工具栏中的添加块按钮。 在 WordPress Gutenberg editor8 中添加块按钮。单击自定义 HTML 块。此 HTML 块将允许您创建目录。

Gutenberg 编辑器中的自定义 HTML 块

9. 使用跳转链接添加目录。跳转链接是一种特定类型的超链接，读者可以点击它来“跳转”到同一页面上的不同部分。要为这个演示创建跳转链接，我只需在 href 属性中填写一个井号标签和我在上一步中编写的标题的 id 名称。 要创建目录，请将以下 HTML 复制并粘贴到块中：

<div class="toc">


<p>Table of contents</p>


<ol>


<li><a rel="noopener" target="_blank" href="#anchor-1">Section 1</a></li>


<li><a rel="noopener" target="_blank" href="#anchor-2">Section 2 </a></li>


<li><a rel="noopener" target="_blank" href="#anchor-3">Section 3 </a></li>


<li><a rel="noopener" target="_blank" href="#anchor-4">Section 4 </a></li>


</ol>


</div>

10. 自定义部分名称和跳转链接，以便它们链接到正确的部分。