如何在 WordPress 文章中创建内容目录

文章目录是 WordPress 文章的必要组成部分,尤其是带有许多标题的长文章。创建目录有助于读者轻松快速地遵循和掌握想法。此外,它还可以帮助您在文章中添加更多关键字,这对 SEO 非常有利。

创建文章目录的方法

有两种方法可以在 WordPress 文章中创建目录。

第一种方法是使用插件。这对 WordPress 的代码专家和新手来说都是简单、快速且免费的。

第二个是使用代码。这使您可以自定义目录,即使是最小的细节,但对于非编码人员来说却非常复杂。我们将在这篇文章中写下创建目录的代码,只需复制并粘贴它!

如何在 WordPress 文章中创建内容目录

让我们先来看看使用插件创建目录的过程:

方法1:使用插件创建目录

第1步:创建和设置目录

有许多免费插件可用于在 WordPress 中创建目录,比如 4个不错的WordPress文章目录插件。在这里,我们选择LuckyWP Table of Contents是因为它为我们提供了高度可定制且美观的结果。但是,这个插件有很多设置,一开始可能会让你感到困惑。因此,请按照我们的说明来节省您的时间。

LuckyWP Table of Contents 是一个免费插件,可在wordpress.org 上获得。您只需在后台上安装并激活插件。

LuckyWP Table of Contents

然后,转到设置 > Table of Contents,您将看到设置屏幕。

这里有4个标签需要注意:常规 General、外观 Appearance、自动插入 Auto Insert、处理标题 Processing headings。它们是用于设置和自定义目录显示的选项卡。杂项 是具有复杂且不重要的设置的选项卡,因此您可以忽略它。

在设置目录时,您必须注意一些部分。

在此步骤中,您只需在“常规”选项卡上工作。

本节有很多设置。为了节省时间,您应该关注以下重要部分:

  • 记数:标题的序号。您应该从以下选项中选择一个:无编号、十进制数字(嵌套)、罗马数字(嵌套)

我选择十进制数字(嵌套)Decimal numbers (nested),所以我的 TOC 看起来像这样:

您可以选择标题前的数字样式。
  • 标题:目录的标题。默认为内容
您还可以为目录命名。

让我们将其余设置保留为默认值,因为这不会对您的 TOC 产生太大影响。

单击保存更改以完成。至此,我们已经完成了 TOC 的常规设置。让我们继续下一步。

第2步:在文章中插入目录

有两种方法可以在文章中插入目录:自动插入和手动插入。

自动插入意味着自动在所有文章中添加目录。这种方式可以节省大量时间和精力,但是如果您只想在某些文章中插入目录,则行不通。

手动插入意味着如果您想在文章中包含目录,您需要自己将其插入到该文章中。这可能需要更多时间。

我们将详细介绍这两种方法。您可以选择适合您的选项。

自动插入

转到选项卡Auto Insert > Enable。该插件默认选择Post(文章)。如果您不想要它,您可以更改为其他文章类型。

在“位置”部分中,选择要插入目录的位置。不要忘记单击保存更改

设置索引的文章类型和位置。

至此,所选文章类型中的所有文章都有目录。

手动插入

手动插入听起来很复杂,但实际上非常简单。转到处理标题选项卡。在那里,也选择文章类型,然后点击保存更改

在手动中,您还必须选择文章类型。

然后,转到您选择的文章类型的文章的编辑器,单击启用目录

单击要插入字符的文章的编辑器中的启用目录。

现在,您的 TOC 基本完成。此外,我们甚至可以设置它的颜色、字体、项目大小……以使其更漂亮。按照下一步操作。

第3步:自定义目录显示

还有两种方法可以自定义目录显示:一是在所有文章中自定义,二是在每个文章中单独自定义。

自定义所有文章的目录

您可以通过转到“外观”选项卡来详细自定义所有目录。有许多设置,例如标题字体大小、项目字体大小、链接颜色……

无需注意所有设置,只需专注于您想要的。

例如,我不喜欢蓝色和当前标题字体大小。我想将颜色更改为深灰色和较小的尺寸,以便它们在文章中看起来更好。因此,我将自定义标题字体大小、项目字体大小、链接颜色并保留如下图所示的其余设置:

我们可以自定义目录的许多设置。
您可以设置文本或背景的颜色。

自定义后我的 TOC 如下所示:

我的目录示例。

现在,它看起来更加和谐。

但是,也许您希望在不同的文章中有不同的目录,只需向下滚动以阅读如何在每个文章中自定义它。

自定义每篇文章的目录

这项工作也简单快捷。首先,转到文章编辑器,选择“目录”>“自定义”

您可以在帖子编辑器中自定义每个帖子的目录。

出现自定义目录弹出窗口。你会看到一些熟悉的标签,如上。它们是常规General、外观 Appearance和杂项Misc。.

转到外观选项卡并更改一些设置,同样在插件的仪表板上进行编辑。点击保存完成!

有一些熟悉的设置可以自定义目录。

现在,让我们看看自定义目录的最终结果。

定制后我的目录。

这两种自定义方法都带来了非常漂亮和详细的目录。所以你可以自由选择你喜欢的方式。

现在,让我们看看如何使用代码来创建目录。

方法2:使用代码创建目录

第1步 :为文章创建目录

转到外观>主题>编辑器>functions.php

然后,将以下代码添加到文件中functions.php以将目录插入文章。

  1. function wpkj_create_toc($html) {
  2. $toc = '';
  3. if (is_single()) {
  4. if (!$html) return $html;
  5. $dom = new DOMDocument();
  6. libxml_use_internal_errors(true);
  7. $dom->loadHTML(mb_convert_encoding($html, 'HTML-ENTITIES', 'UTF-8'));
  8. libxml_clear_errors();
  9. $toc = '<div class="toc-bound">
  10. <div class="toc-ctr">
  11. table of contents
  12. </div>
  13. <ul class="toc">';
  14. $h2_status = 0;
  15. $h3_status = 0;
  16. $i = 1;
  17. foreach($dom->getElementsByTagName('*') as $element) {
  18. if($element->tagName == 'h2') {
  19. if($h3_status){
  20. $toc .= '</ul>';
  21. $h3_status = 0;
  22. }
  23. if($h2_status){
  24. $toc .= '</li>';
  25. $h2_status = 0;
  26. }
  27. $h2_status = 1;
  28. $toc .= '<li><a href="'%20<span%20class="pun">. get_the_permalink() . '#toc-'%20<span%20class="pun">. $i . '">'%20<span%20class="pun">. $element->textContent . '</a>';
  29. $element->setAttribute('id', 'toc-'%20<span%20class="pun">. $i);
  30. $i++;
  31. }elseif($element->tagName == 'h3') {
  32. if(!$h3_status){
  33. $toc .= '<ul class="toc-sub">';
  34. $h3_status = 1;
  35. }
  36. $toc .= '<li><a href="'%20<span%20class="pun">. get_the_permalink() . '#toc-'%20<span%20class="pun">. $i . '">'%20<span%20class="pun">. $element->textContent . '</a></li>';
  37. $element->setAttribute('id', 'toc-'%20<span%20class="pun">. $i);
  38. $i++;
  39. }
  40. }
  41. if($h3_status){
  42. $toc .= '</ul>';
  43. }
  44. if($h2_status){
  45. $toc .= '</li>';
  46. }
  47. $toc .= '</ul></div>';
  48. $html = $dom->saveHTML();
  49. }
  50. return $toc . $html;
  51. }
  52. add_filter('the_content', 'wpkj_create_toc');

注意:此代码仅将 2 个标题级别 h2、h3添加到目录中。

解释:

代码 解释
函数$toc = ‘<div class=”toc-bound”>
<div class=”toc-ctr”>
table of contents
</div>
<ul class=”toc”>
向目录添加标题并将其显示在此之上。您可以将文本“目录”替换为您希望在标题中出现的任何内容。
变量h2, h3 标题级别插入到目录中。如果您想更换H2 H3具有超视距呃标签,改变整个参数像H2 H3为标记你的代码需要。
函数  $toc .= ‘<li><a href=”‘ . get_the_permalink() . ‘#toc-‘ . $i . ‘”>’ . $element->textContent . ‘</a>’;  单击后立即创建指向文章中相应部分的跳转链接。
函数 if($h3_status){
$toc .= ‘</ul>’;
}
if($h2_status){
$toc .= ‘</li>’;
}
$toc .= ‘</ul></div>’;
$html = $dom->saveHTML();
}
return $toc . $html;
在目录中的每个标题前添加项目符号。

插入代码后不要忘记单击更新文件

在 function.php 文件中插入代码以创建目录。

然后,结果如下:

使用代码创建目录非常简单,这是我的结果。

当然,我们需要稍微设计一下。

第2步:使用 CSS 进行自定义

通过CSS定制,访问主题编辑器style.css文件。在那里,您需要插入您自己编写的代码以根据需要自定义 TOC。

比如我想自定义目录的颜色和强度,所以插入如下代码:

  1. .toc-bound {
  2. background-color: #619162;
  3. color: #fff;
  4. }
  5. .toc-ctr {
  6. border-bottom: 1px solid #fff;
  7. padding: 10px;
  8. font-size: 20px;
  9. text-transform: uppercase;
  10. }
  11. ul.toc {
  12. list-style-type: none;
  13. padding: 10px;
  14. padding-left: 25px;
  15. }
  16. .toc li a {
  17. color: #fff;
  18. }
  19. ul.toc > li {
  20. font-size: 18px;
  21. font-weight: 700;
  22. padding: 5px 0;
  23. }
  24. ul.toc-sub {
  25. list-style-type: none;
  26. }
  27. ul.toc-sub li a {
  28. font-weight: 200;
  29. }

不要忘记单击更新文件以保存它。

您也可以使用 CSS 设置目录样式。

最终结果如下所示:

定制后我的目录更有吸引力。

总之,使用插件和编码都为我们提供了相同的漂亮目录。只要您满意,您可以选择任何方式。

总结

如您所见,在 WordPress 文章中创建目录并不复杂。按照我们的教程,您将拥有漂亮的目录。一个好的目录让你的文章更清晰、更专业。因此,您的观众在阅读您的博客时可能会有更友好的体验。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 lk2768783601@gmail.com 举报,一经查实,本站将立刻删除。

(1)
上一篇 2023年9月6日 下午12:08
下一篇 2023年9月6日 下午12:36

相关推荐

  • WordPress 块样板是什么,如何使用它?

    块样板(Block Patterns)首次在WordPress 5.5 中引入,为古腾堡编辑器成为全面的页面构建器开辟了道路。他们帮助用户以最少的时间、精力和技术专长构建复杂的 WordPress 网站。 在本文中,我们将向您展示 WordPress 块样板的工作原理以及它们与可重用块的区别。您还将学习如何在 WordPress 块编辑器中使用样板来更轻松地…

    2023年8月29日
    2270
  • 让 Rank Math SEO 输出关键词 keywords meta 字段信息

    在《6个优秀的WordPress SEO插件》和《WordPress网站SEO优化插件:Rank Math》中,我们简单介绍了 Rank Math SEO 插件。也许很多WordPress用户比较熟悉SEO插件还是 Yoast SEO 和 All in One SEO Pack,但是比较这3个插件的免费版本,我们还是极力推荐采用 Rank Math SEO,…

    2023年9月6日
    2170
  • 6个优秀的WordPress SEO插件

    优秀的 WordPress SEO插件可以帮助您增强SEO(搜索引擎优化)效果,并确保您的网站对所有重要的搜索引擎更佳友好。 在本指南中,我们将介绍最受用户喜欢的6个WordPress SEO插件。   什么是WordPress SEO插件? 虽然WordPress作为内容管理系统已经非常适合SEO,但WordPress SEO插件为您提供了其他工…

    2023年8月29日
    3190
  • 谷歌SEO:反向链接作为排名信号的影响比过去要小

    在 Google SEO 办公时间视频中,一位 Googler 回答了一个关于反向链接和排名的问题,并提供了一个有趣的事实,即反向链接作为排名信号的影响比过去要小。   反向链接排名信号 链接和锚文本信号使谷歌在首次推出时成为比竞争对手更好的搜索引擎。 SEO 过去主要是关于优化标题、标题和带有关键字的内容。 在 Google 变得重要之后,人们意…

    2023年8月29日
    2760
  • WordPress免费图片压缩优化插件 reSmush.it Image Optimizer

    reSmush.it 是国外专门提供免费图片压缩优化服务api接口,它提供了基于几种高级算法的图片压缩功能,支持jpg、png和gif文件,单张图片最大支持5MB。对图片数量没有任何限制。 reSmush.it Image Optimizer 是一个基于reSmush.it API的免费的图片优化插件。该插件提供了一键批量优化已有图片的功能,还支持设置上传时…

    2023年9月6日
    3330
关注微信