表格的内容

为什么我不使用目录插件？

对于“技术含量低”的兄弟，直接敲TOC插件就可以了，简洁利落。我自己喜欢玩，因为这个“目录”没什么大不了的，但要让它正常工作，还需要对其进行适当的配置。

我曾经使用古腾堡的目录。一切都很好，直到我决定换成另一个插件。我要删除每篇文章创建目录的块，哦！我的天啊。幸运的是，那时我只有大约 10 个帖子。

从那天起，我决定换哪个插件有根据heading标签title自动创建目录的功能。太可惜了，没有什么可以使照片开心的，如果它是真实的，则必须付费。

感谢 ChatGPT、Bard、Bing 等 AI 技术，我可以创建“自制 TOC”。

如何正确创建目录？

在创建 TOC 之前，我们需要了解如何配置目录以使其对 SEO 和用户友好。

友好的锚链接

有些插件可以自动创建目录，但将标题标签设置为 id="section-1" 指向这个标题标签的链接是 href="#section-1".

所以你需要注意这些小细节。目前可能对这个问题的需求不大。

以下是一些标准链接锚示例：

平滑滚动（平滑滚动）

帮助用户感觉更舒适，更引人注目。

使用从另一个站点发送的带有 #hashtag 的 url 以帮助用户了解此 #hashtag 项目在文章中的位置特别有用。

置顶（Pin）目录

这对用户来说也是一个很好的功能。在阅读文章时，他们可以知道自己在哪里阅读文章，而不必滚动到页面顶部来查看目录。

目前，我还没有在网站上使用这个功能。如果有任何变化会更新。

创建目录的说明

我将这些代码应用于 Oxygen Builder 拖放。您还可以申请其他构建器和主题。

自动创建目录的代码

下面的代码具有以下功能：

创建卡片 <a> 根据文章内容中的h2-h6。
添加属性 href="#" 到卡片 <a>.
对卡片进行排序 <a> 根据递归规则 <ol> <li>

放 PHP代码 这将放置您希望显示目录的位置。

/* MÃ PHP TẠO MỤC LỤC TỰ ĐỘNG H2-H6. SỬ DỤNG get_the_content() */
function generate_toc($content)
{
	preg_match_all('/<h([2-6]).*?>(.*?)<\/h\1>/', $content, $matches, PREG_SET_ORDER);
	$toc           = '<ol id="tocList">';
	$current_level = 2;
	foreach ($matches as $match)
	{
		$level         = $match[1];
		$heading       = $match[2];
		$id            = sanitize_title($heading);
		if ($level > $current_level)
		{
			$toc .= str_repeat('<ol>', $level - $current_level) . '<li><a href="#' . $id . '">' . $heading . '</a>';
		}
		else if ($level < $current_level)
		{
			$toc .= str_repeat('</li></ol>', $current_level - $level) . '</li><li><a href="#' . $id . '">' . $heading . '</a>';
		}
		else
		{
			$toc .= '</li><li><a href="#' . $id . '">' . $heading . '</a>';
		}
		$current_level = $level;
	}
	$toc .= str_repeat('</li></ol>', $current_level - 2);
	$content = '<div id="tocDiv"><p>MỤC LỤC</p>' . $toc . '</div>';
	return $content;
};
$content          = get_the_content();
$content_with_toc = generate_toc($content);
echo $content_with_toc;

应用上述代码后，目录将具有以下结构：

<div id="tocDiv">
	<p>MỤC LỤC</p>
	<ol id="tocList">
		<!-- Danh sách mục lục -->
		<li></li>
		<li></li>
		<li></li>
	</ol>
</div>

将“id”属性添加到标题标签

这是为了当用户单击目录中的链接时，他们将移动到正确的标题标签。

PHP代码 为应该放在文件中的标题标签添加 id function.php 在儿童主题或创造更多 mu-plugins 或者可能是您放置代码以创建上面目录的相同位置，但我不推荐这种方式。

/* MÃ PHP TẠO THUỘC TÍNH ID CHO CÁC THẺ HEADING H2-H6 TRONG NỘI DUNG BÀI VIẾT */
function prefix_heading_ids($content)
{
	$pattern = '#(?P<full_tag><(?P<tag_name>h\d)(?P<tag_extra>[^>]*)>(?P<tag_contents>[^<]*)</h\d>)#i';
	if (preg_match_all($pattern, $content, $matches, PREG_SET_ORDER))
	{
		$find    = array();
		$replace = array();
		foreach ($matches as $match)
		{
			if (strlen($match['tag_extra']) && false !== stripos($match['tag_extra'], 'id='))
			{
				continue;
			}
			$find[]         = $match['full_tag'];
			$id      = sanitize_title($match['tag_contents']);
			$id_attr = sprintf(' id="%s"', $id);
			$replace[]         = sprintf('<%1$s%2$s%3$s>%4$s</%1$s>', $match['tag_name'], $match['tag_extra'], $id_attr, $match['tag_contents']);
		}
		$content = str_replace($find, $replace, $content);
	}
	return $content;
}
add_filter('the_content', 'prefix_heading_ids');

递归排序目录的CSS代码

下面是包装目录的递归排序 CSS 代码 <div> 有 id="tocDiv" 和 <ol> 有 id="tocList"。

#tocDiv {
	width: 100%;
	border-radius: 10px;
	box-shadow: 5px 5px 10px 5px rgba(0, 0, 0, 0.5);
	overflow: hidden;
	margin: 50px 0px 50px 0px;
}
#tocDiv p {
	font-weight: bold;
	text-align: center;
	display: block;
}
#tocDiv ol {
	list-style: none;
}
#tocList {
	padding-left: 20px;
	white-space: nowrap;
	overflow-x: auto;
	padding-bottom: 20px;
	margin-bottom: 0px;
}
#tocList a {
	margin-right: 10px;
}
#tocList ol {
	padding-left: 20px;
}
#tocList {
	counter-reset: item;
}
#tocList>li:before {
	counter-increment: item;
	content: counter(item) ". ";
}
#tocList>li>ol {
	counter-reset: item2;
}
#tocList>li>ol>li:before {
	counter-increment: item2;
	content: counter(item) "." counter(item2) " ";
}
#tocList>li>ol>li>ol {
	counter-reset: item3;
}
#tocList>li>ol>li>ol>li:before {
	counter-increment: item3;
	content: counter(item) "." counter(item2) "." counter(item3) " ";
}
#tocList>li>ol>li>ol>li>ol {
	counter-reset: item4;
}
#tocList>li>ol>li>ol>li>ol>li:before {
	counter-increment: item4;
	content: counter(item) "." counter(item2) "." counter(item3) "."
		counter(item4) " ";
}
#tocList>li>ol>li>ol>li>ol>li>ol {
	counter-reset: item5;
}
#tocList>li>ol>li>ol>li>ol>li>ol>li:before {
	counter-increment: item5;
	content: counter(item) "." counter(item2) "." counter(item3) "."
		counter(item4) "." counter(item5) " ";
}

CSS代码 平滑滚动效果，同时使标题距顶部 100px，因此它不会被标题遮挡。

html {
	scroll-behavior: smooth;
}
:target {
	scroll-margin-top: 100px;
}

在制氧机中创建“维护模式”

在 Oxygen Builder 中禁用 Translatepress

在 Oxygen Builder 中创建目录