在WordPress网站中，为长篇文章或页面添加目录（TOC）可以提升用户体验，帮助读者快速定位内容。本文将介绍几种常见的配置方法，包括使用插件和手动代码实现。
方法一：使用插件自动生成目录
WordPress有许多插件可以轻松实现目录功能，以下是推荐的两款插件及配置步骤：
1. Table of Contents Plus
- 安装插件：在WordPress后台点击“插件”>“安装插件”，搜索“Table of Contents Plus”并安装激活。
- 配置选项：进入“设置”>“TOC+”进行自定义，例如：
- 设置目录显示的位置（文章开头或自定义位置）。
- 选择包含的标题级别（如H2、H3等）。
- 启用自动插入目录功能。
2. Easy Table of Contents
- 安装并激活插件后，进入“设置”>“Easy Table of Contents”。
- 配置显示规则，例如：
- 仅对特定文章类型显示目录。
- 设置目录的折叠/展开效果。
方法二：手动添加目录（适合开发者）
如果不想依赖插件，可以通过代码实现目录功能：
- 在主题文件中添加目录短代码
在
functions.php中添加以下代码：
function custom_toc_shortcode($atts, $content = null) {
global $post;
$headings = preg_match_all('/<h[2-3].*?>(.*?)<\/h[2-3]>/i', $post->post_content, $matches);
if ($headings) {
$output = '<div class="toc"><ul>';
foreach ($matches[1] as $heading) {
$output .= '<li><a href="#' . sanitize_title($heading) . '">' . $heading . '</a></li>';
}
$output .= '</ul></div>';
return $output;
}
}
add_shortcode('toc', 'custom_toc_shortcode');
在文章中使用[toc]短代码即可显示目录。
- 为标题添加锚点
在主题的
header.php或通过插件（如“Header and Footer Scripts”）添加以下JavaScript代码，自动为标题生成ID：
jQuery(document).ready(function($) {
$('h2, h3').each(function() {
$(this).attr('id', $(this).text().toLowerCase().replace(/\s+/g, '-'));
});
});
优化建议
- 样式调整：通过CSS美化目录，例如调整字体、间距或添加边框。
- 移动端适配：确保目录在手机端也能正常显示和点击。
总结
无论是通过插件还是手动编码，在WordPress中配置目录都非常简单。插件适合普通用户快速实现，而手动编码则适合需要高度定制的开发者。选择适合你的方法，提升内容的可读性和用户体验吧！
