17、wordpress文章目录插件-Easy Table of Contents

使用简单，默认就好，如果有其他需求，可以自己改设置。

插件法：

第一步：安装 Easy Table of Contents 插件

登录 WordPress 后台 >> 插件 >> 安装插件 >> 搜索：Easy Table of Contents >> 找到并点击对应的【现在安装】按钮，成功安装之后点击启用该插件即可。

第二步：设置 Easy Table of Contents 插件

1、进入设置页面成功安装好 Easy Table of Contents（支持中文，中文名为简易目录）插件后，我们需要进行简单的设置，设置路径有两个：

路径 1：插件 >> 已安装插件 >> 找到“简易目录”后点击“设置”即可进入设置页面。

路径 2：设置 >> 目录，即可进入到简易目录的设置页面。

2、设置简易目录因为这款插件是支持中文的，所以设置页面都是中文选项，大家根据自己站点实际情况进行简单设置即可，最后记得点击【保存更改】按钮即可。在这里文公子就跟大家简单说几个小方面。

2.1 “启动支持”和“自动插入”选项根据自己站点的实际情况选择。

2.2 “位置”就是目录在文章中显示的位置，可选：在第一个标题之前或之后、顶部或底部。

2.3 “显示何时”意思就是文章中出现多少个标题才会出现文章目录。

2.4 “标题”默认生成目录的标题包括 H1 到 H6，可以自由选择。如站点一般就出现 H2 到 H3，那么可以只勾选这两个选项。

第三步：编辑文章或页面

1、在编辑文章或页面的时候，我们需要添加标题（H1、H2、H3……等），这样插件才会生成文章目录。

1.1 经典编辑器。在经典编辑器中，选择文章中相应内容后点击上方的相应标题即可。

1.2 块编辑器。块编辑器中选择文章相应内容后点击“更改区块类型或样式”，选择“标题”，然后就可以设置是 H1 还是 H2 或其他标题。

2、在文章编辑器下方还有相对应的简易目录设置，比如“禁用自动插入目录”勾选之后就不会出现文章目录，也可以勾选文章中哪些标题可以生成目录等。

代码法：

将下面代码添加到主题文件夹下的functions.php中：

// declare a function and pass the $content as an argument
function insert_table_of_contents($content) {
// used to determine the location of the
// table of contents when $fixed_location is set to false
$html_comment = "<!--insert-toc-->";
// checks if $html_comment exists in $content
$comment_found = strpos($content, $html_comment) ? true : false;
// set to true to insert the table of contents in a fixed location
// set to false to replace $html_comment with $table_of_contents
$fixed_location = true;

// return the $content if
// $comment_found and $fixed_location are false
if (!$fixed_location && !$comment_found) {
return $content;
}

// 设置排除，默认页面文章不生成目录
// exclude the table of contents from all pages
// other exclusion options include:
// in_category($id)
// has_term($term_name)
// is_single($array)
// is_author($id)
if (is_page()) {
return $content;
}

// regex to match all HTML heading elements 2-6
$regex = "~(<h([2-6]))(.*?>(.*)<\/h[2-6]>)~";

// preg_match_all() searches the $content using $regex patterns and
// returns the results to $heading_results[]
//
// $heading_results[0][] contains all matches in full
// $heading_results[1][] contains '<h2-6'
// $heading_results[2][] contains '2-6'
// $heading_results[3][] contains '>heading title</h2-6>
// $heading_results[4][] contains the title text
preg_match_all($regex, $content, $heading_results);

// 默认小于3个段落标题不生成目录
// return $content if less than 3 heading exist in the $content
$num_match = count($heading_results[0]);
if($num_match < 3) {
return $content;
}

// declare local variable
$link_list = "";
// loop through $heading_results
for ($i = 0; $i < $num_match; ++ $i) {

// rebuild heading elements to have anchors
$new_heading = $heading_results[1][$i] . " id='$i' " . $heading_results[3][$i];

// find original heading elements that don't have anchors
$old_heading = $heading_results[0][$i];

// search the $content for $old_heading and replace with $new_heading
$content = str_replace($old_heading, $new_heading, $content);

// generate links for each heading element
// each link points to an anchor
$link_list .= "<li class='heading-level-" . $heading_results[2][$i] .
"'><a href='#$i'>" . $heading_results[4][$i] . "</a></li>";
}

// opening nav tag
$start_nav = "<nav class='table-of-content'>";
// closing nav tag
$end_nav = "</nav>";
// title
$title = "<h2>Table of Contents</h2>";

// wrap links in '<ul>' element
$link_list = "<ul>" . $link_list . "</ul>";

// piece together the table of contents
$table_of_contents = $start_nav . $title . $link_list . $end_nav;

// if $fixed_location is true and
// $comment_found is false
// insert the table of contents at a fixed location
if($fixed_location && !$comment_found) {
// location of first paragraph
$first_paragraph = strpos($content, '</p>', 0) + 4;
// location of second paragraph
$second_paragraph = strpos($content, '</p>', $first_p_pos);
// insert $table_of_contents after $second_paragraph
return substr_replace($content, $table_of_contents, $second_paragraph + 4 , 0);
}
// if $fixed_location is false and
// $comment_found is true
else {
// replace $html_comment with the $table_of_contents
return str_replace($html_comment, $table_of_contents, $content);
}
}
// pass the function to the content add_filter hook
add_filter('the_content', 'insert_table_of_contents');

默认页面和文章中少于三个段落标题不生成目录，代码中加了中文注释，可酌情修改。

层级显示
可以通过调整样式显示层级关系。

例如：H3为一级，H4、H5、H6为二级文章源自知更鸟-https://zmingcx.com/wordpress-table-of-contents.html

.heading-level-4,
.heading-level-5,
.heading-level-6 {
margin-left: 40px;
}

jQuery平滑滚动代码
需要加载jQuery.js

jQuery(document).ready(function($){
$('.table-of-content a[href*=#]').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']');
if ($target.length) {
var targetOffset = $target.offset().top;
$('html,body').animate({
scrollTop: targetOffset - 100
},
800);
return false;
}
}
});
})

其中：scrollTop: targetOffset – 100，为距上100px，用于固定的导航菜单。

想实现显示当前目录位置考虑使用 js-toc，利用JQ将目录提取出来，可以实时显示当前滑动位置所在的目录，但不能实现层级显示。