Comment développer un plugin WordPress qui génère automatiquement une table des matières

Comment développer un plugin WordPress qui génère automatiquement une table des matières

À mesure que les articles de blog deviennent de plus en plus riches en contenu, l'amélioration de l'expérience de lecture est devenue une considération importante. La génération automatique d'une table des matières est une méthode courante pour améliorer l'expérience de lecture. Développez un plug-in qui génère automatiquement une table des matières sur la plateforme WordPress pour aider les lecteurs à parcourir et naviguer rapidement dans le contenu des articles. Cet article explique comment développer un plug-in WordPress qui génère automatiquement une table des matières et fournit des exemples de code pertinents à titre de référence.

Tout d'abord, nous devons enregistrer un nouveau widget (Widget) dans le plugin WordPress pour afficher la table des matières de l'article. Ce qui suit est un exemple simple d'enregistrement d'un widget d'annuaire :

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 ) {
        // 更新小部件设置
    }
}

Ensuite, nous devons écrire du code dans la méthode widget() du widget pour implémenter la logique de génération d'annuaire. Tout d’abord, nous devons obtenir le contenu de l’article et utiliser une expression régulière pour faire correspondre tous les éléments du titre. Voici un exemple de code : 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 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;
}

在上述代码中，我们使用了一个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()rrreee

Dans le code ci-dessus, nous utilisons la fonction preg_match_all() pour faire correspondre les éléments de titre dans le contenu de l'article et stockons les résultats correspondants dans $matches tableau. Nous parcourons ensuite le tableau <code>$matches et construisons un tableau d'éléments de table des matières $toc_items qui contient le texte, le niveau et l'ancre du titre.

Enfin, nous devons générer une sortie HTML dans la méthode widget() du widget de table des matières et l'afficher dans l'article. Voici le code pour un exemple : 🎜rrreee🎜Dans le code ci-dessus, nous utilisons une boucle foreach pour parcourir le tableau d'éléments du catalogue $toc_items et générer la sortie HTML de le catalogue. Chaque élément de la table des matières est enveloppé dans la balise <li> d'un élément de liste et contient un lien d'ancrage qui permet aux lecteurs de cliquer pour naviguer dans l'article jusqu'au titre correspondant. 🎜🎜Enfin, nous pouvons également ajouter quelques options de paramétrage dans la méthode form() du widget pour permettre aux utilisateurs de personnaliser le titre affiché dans le répertoire. Voici un exemple de code simple : 🎜rrreee🎜 Dans le code ci-dessus, nous utilisons un élément de formulaire input pour permettre à l'utilisateur de saisir un titre de répertoire personnalisé. Cette valeur sera enregistrée dans les paramètres du plugin et utilisée dans la méthode widget() du widget. 🎜🎜Grâce à l'exemple de code ci-dessus, nous pouvons développer un plug-in qui génère automatiquement une table des matières basée sur la plateforme WordPress pour aider à améliorer l'expérience de lecture des articles de blog. Les lecteurs peuvent rapidement parcourir et naviguer dans le contenu de l'article en cliquant sur les liens dans la table des matières. Le développement de votre propre plug-in WordPress peut être étendu et personnalisé en fonction des besoins réels, offrant ainsi une meilleure expérience utilisateur aux lecteurs. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!