search
HomeCMS TutorialWordPressHow to develop a WordPress plugin that automatically generates a table of contents

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

Sep 05, 2023 am 08:07 AM
Development Processwordpress pluginAutomatically generate directory

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!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
How to easily move your blog from WordPress.com to WordPress.orgHow to easily move your blog from WordPress.com to WordPress.orgApr 18, 2025 am 11:33 AM

Do you want to move your blog from WordPress.com to WordPress.org? Many beginners start with WordPress.com but quickly realize their limitations and want to switch to the self-hosted WordPress.org platform. In this step-by-step guide, we will show you how to properly move your blog from WordPress.com to WordPress.org. Why migrate from WordPress.com to WordPress.org? WordPress.com allows anyone to create an account

How to Automate WordPress and Social Media with IFTTT (and more)How to Automate WordPress and Social Media with IFTTT (and more)Apr 18, 2025 am 11:27 AM

Are you looking for ways to automate your WordPress website and social media accounts? With automation, you will be able to automatically share your WordPress blog posts or updates on Facebook, Twitter, LinkedIn, Instagram and more. In this article, we will show you how to easily automate WordPress and social media using IFTTT, Zapier, and Uncanny Automator. Why Automate WordPress and Social Media? Automate your WordPre

How to Fix Custom Menu Item Limits in WordPressHow to Fix Custom Menu Item Limits in WordPressApr 18, 2025 am 11:18 AM

Just a few days ago, one of our users reported an unusual problem. The problem is that he reaches the limit of custom menu items. Any content he saves after reaching the menu item limit will not be saved at all. We've never heard of this issue, so we decided to give it a try on our local installation. More than 200 menu items were created and saved. The effect is very good. Move 100 items to the drop-down list and save them very well. Then we knew it had to do with the server. After further research, it seems that many others have encountered the same problem. After digging deeper, we found a trac ticket ( #14134 ) that highlighted this issue. Read very

How to add custom metafields to custom classification in WordPressHow to add custom metafields to custom classification in WordPressApr 18, 2025 am 11:11 AM

Do you need to add custom metafields to custom taxonomy in WordPress? Custom taxonomy allows you to organize content besides categories and tags. Sometimes it is useful to add other fields to describe them. In this article, we will show you how to add other metafields to the taxonomy they create. When should custom metafields be added to custom taxonomy? When you create new content on your WordPress site, you can organize it using two default taxonomy (category and tag). Some websites benefit from the use of custom taxonomy. These allow you to sort content in other ways. For example,

How to Remotely Publish to WordPress using Windows Live WriterHow to Remotely Publish to WordPress using Windows Live WriterApr 18, 2025 am 11:02 AM

Windows live writer is a versatile tool that allows you to post posts directly from your desktop to your WordPress blog. This means you don't need to log in to the WordPress admin panel to update your blog at all. In this tutorial, I will show you how to enable desktop publishing for your WordPress blog using Windows Live Writer. How to set up Windows Live Writer on WordPress Step 1: To use Windows Live Writer in WordPr

How to Fix White Text and Missing Buttons in WordPress Visual EditorHow to Fix White Text and Missing Buttons in WordPress Visual EditorApr 18, 2025 am 10:52 AM

Recently, one of our users reported a very strange installation problem. When writing a post, they can’t see anything they write. Because the text in the post editor is white. What's more, all the visual editor buttons are missing, and the ability to switch from visual to HTML doesn't work either. In this article, we will show you how to fix the white text and missing button issues in the WordPress visual editor. Be a Beginner Note: If you are looking for hidden buttons that may be seen in screenshots of other websites, you may be looking for a kitchen sink. You have to click on the kitchen sink icon to see other options such as underline, copy from word, etc.

How to display avatar in user email in WordPressHow to display avatar in user email in WordPressApr 18, 2025 am 10:51 AM

Do you want to display avatars in user emails in WordPress? Gravatar is a network service that connects a user's email address to an online avatar. WordPress automatically displays visitors’ profile pictures in the comments section, but you may also want to add them to other areas of the site. In this article, we will show you how to display avatars in user emails in WordPress. What is Gravatar and why should I display it? Gravatar stands for globally recognized avatars, which allows people to link images to their email addresses. If the website supports

How to change the default media upload location in WordPressHow to change the default media upload location in WordPressApr 18, 2025 am 10:47 AM

Do you want to change the default media upload location in WordPress? Moving media files to other folders can improve website speed and performance and help you create backups faster. It also gives you the freedom to organize your files in the way that suits you best. In this article, we will show you how to change the default media upload location in WordPress. Why change the default media upload location? By default, WordPress stores all images and other media files in the /wp-content/uploads/ folder. In this folder you will find children of different years and months

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

SublimeText3 Linux new version

SublimeText3 Linux new version

SublimeText3 Linux latest version

Dreamweaver Mac version

Dreamweaver Mac version

Visual web development tools

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment

SecLists

SecLists

SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)