How to develop a WordPress plugin that automatically generates a table of contents

How to develop a WordPress plug-in that automatically generates a table of contents

As the content of blog posts becomes more and more abundant, improving the reading experience has become an important consideration. Automatically generating a table of contents is a common method to improve the reading experience. Develop a plug-in that automatically generates a table of contents on the WordPress platform to help readers quickly browse and navigate article content. This article will introduce how to develop a WordPress plug-in that automatically generates a table of contents, and provide relevant code examples for reference.

First, we need to register a new widget (Widget) in the WordPress plugin to display the table of contents in the article. The following is a simple registration example of a directory 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 ) {
        // 更新小部件设置
    }
}

Next, we need to write code in the widget() method of the widget to implement the logic of directory generation. First, we need to get the content of the article and use a regular expression to match all title elements. The following is an example code:

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输出
}

In the above code, we use the preg_match_all() function to match the title element in the article content, and store the matching results in $matches array. We then iterate over the $matches array and build an array of TOC items $toc_items that contains the text, level, and anchor of the title.

Finally, we need to generate the HTML output in the widget() method of the Table of Contents widget and display it in the article. The following is the code for an example:

public function widget( $args, $instance ) {
    global $post;
    
    $post_id = $post->ID;
    
    // 生成目录HTML输出
    $output = '<div class="auto-toc">';
    $output .= '<h2 id="instance-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;
}

In the above code, we use a foreach loop to iterate through the catalog item array $toc_items, generating the HTML output of the catalog . Each table of contents item is wrapped in a list item's <li> tag and contains an anchor link that enables readers to click to navigate within the article to the corresponding title.

Finally, we can also add some setting options in the form() method of the widget to allow users to customize the title displayed in the directory. The following is a simple sample code:

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>';
}

In the above code, we use an input form element to allow the user to enter a custom directory title. This value will be saved in the plugin's settings and used in the widget's widget() method.

Through the above code example, we can develop a plug-in that automatically generates a table of contents based on the WordPress platform to help improve the reading experience of blog articles. Readers can quickly browse and navigate article content by clicking on links in the table of contents. Developing your own WordPress plug-in can be expanded and customized according to actual needs, bringing a better user experience to readers.

The above is the detailed content of How to develop a WordPress plugin that automatically generates a table of contents. For more information, please follow other related articles on the PHP Chinese website!