### [如何开发一个自动生成目录的WordPress插件](https://www.prosaas.cn/article/2407)

**Published:** 2023-09-05T00:07:44

**Author:** 5201314

**Excerpt:** 如何开发一个自动生成目录的WordPress插件随着博客文章的内容越来越丰富，阅读体验的提升已经成为一个重要的…

![](//zhiqipro.oss-cn-beijing.aliyuncs.com/2023/12/20231212120845750.jpg)

如何开发一个自动生成目录的WordPress插件

随着博客文章的内容越来越丰富，阅读体验的提升已经成为一个重要的考虑因素。而自动生成目录是提升阅读体验的一种常用方法。在WordPress平台上开发一个自动生成目录的插件，可以帮助读者快速浏览和导航文章内容。本文将介绍如何开发一个自动生成目录的WordPress插件，并提供相关的代码示例供参考。

首先，我们需要在WordPress插件中注册一个新的小部件（Widget），以便将目录显示在文章中。以下是一个简单的目录小部件的注册示例：

class AutoTOC\_Widget extends WP\_Widget {
    
    public function \_\_construct() {
        parent::\_\_construct(
            'auto\_toc\_widget',
            '自动生成目录',
            array( 'description' => '在文章中自动生成目录' )
        );
    }
    
    public function widget( $args, $instance ) {
        // 在文章中显示自动生成的目录
    }
    
    public function form( $instance ) {
        // 小部件设置表单
    }
    
    public function update( $new\_instance, $old\_instance ) {
        // 更新小部件设置
    }
}

接下来，我们需要在小部件的`widget()`方法中编写代码来实现目录生成的逻辑。首先，我们需要获取文章的内容，并使用正则表达式来匹配所有标题元素。以下是一个示例的代码：

public function widget( $args, $instance ) {
    global $post;
    
    $post\_id = $post->ID;
    $post\_content = $post->post\_content;
    
    // 正则表达式匹配所有标题元素
    preg\_match\_all( '/<h(\[1-6\])>(.\*?)</h>/', $post\_content, $matches, PREG\_SET\_ORDER );
    
    $toc\_items = array();
    
    // 构建目录项数组
    foreach ( $matches as $match ) {
        $toc\_item = array(
            'title' => $match\[2\],
            'level' => $match\[1\],
            'anchor' => sanitize\_title( $match\[2\] )
        );
        
        $toc\_items\[\] = $toc\_item;
    }
    
    // 显示目录部件的HTML输出
}

在上述代码中，我们使用了`preg_match_all()`函数来匹配文章内容中的标题元素，并将匹配结果存储在`$matches`数组中。然后，我们遍历`$matches`数组，构建一个目录项数组`$toc_items`，其中包含标题的文本、级别和锚点。

最后，我们需要在目录小部件的`widget()`方法中生成HTML输出并显示在文章中。以下是一个示例的代码：

public function widget( $args, $instance ) {
    global $post;
    
    $post\_id = $post->ID;
    
    // 生成目录HTML输出
    $output = '<div class="auto-toc">';
    $output .= '<h2 class="widget-title">' . $instance\['title'\] . '</h2>';
    $output .= '<ul>';
    
    foreach ( $toc\_items as $item ) {
        $output .= '<li><a href="#' . $item\['anchor'\] . '">' . $item\['title'\] . '</a></li>';
    }
    
    $output .= '</ul>';
    $output .= '</div>';
    
    echo $output;
}

在上述代码中，我们使用了一个`foreach`循环来遍历目录项数组`$toc_items`，生成目录的HTML输出。每个目录项都被包装在一个列表项的`<li>`标签中，并包含一个锚点链接，使读者能够通过点击在文章中导航到相应的标题处。

最后，我们还可以通过在小部件的`form()`方法中添加一些设置选项，让用户能够自定义目录显示的标题。以下是一个简单的示例代码：

public function form( $instance ) {
    $title = isset( $instance\['title'\] ) ? $instance\['title'\] : '目录';
    
    echo '<p>';
    echo '<label for="' . $this->get\_field\_id( 'title' ) . '">标题:</label>';
    echo '<input class="widefat" id="' . $this->get\_field\_id( 'title' ) . '" name="' . $this->get\_field\_name( 'title' ) . '" type="text" value="' . esc\_attr( $title ) . '">';
    echo '</p>';
}

在上述代码中，我们使用了一个`input`表单元素，允许用户输入自定义的目录标题。该值将被保存在插件的设置中，并在小部件的`widget()`方法中使用。

通过以上的代码示例，我们可以基于WordPress平台开发一个自动生成目录的插件，帮助提升博客文章的阅读体验。读者可以通过点击目录中的链接快速浏览和导航文章内容。开发自己的WordPress插件可以根据实际需求进行扩展和定制，为读者带来更好的使用体验。

以上就是如何开发一个自动生成目录的WordPress插件的详细内容，更多请关注知企PROSAAS其它相关文章！

**Tags:** foreach, html, input, li, WordPress, 循环, 正则表达式

**Categories:** WordPress

---