Comment développer un plugin WordPress qui génère automatiquement des arborescences de répertoires

Comment développer un plug-in WordPress qui génère automatiquement une arborescence de répertoires

Avec le développement continu des sites Web WordPress, l'échelle du contenu du site Web devient également de plus en plus grande. Il est très important que les lecteurs puissent naviguer et parcourir rapidement le contenu du site Web. L'arborescence des répertoires est une fonctionnalité très utile qui peut aider les lecteurs à localiser et à parcourir rapidement les différentes parties du site Web. Cet article vous apprendra comment développer un plug-in WordPress qui génère automatiquement des arborescences de répertoires.

Avant de commencer à développer des plugins, nous devons comprendre la structure et les principes de base des plugins WordPress. Un plugin WordPress se compose d’un dossier principal de plugin et d’un ou plusieurs fichiers de fonctionnalités. Le dossier principal contient le fichier principal du plugin (généralement un fichier PHP) et d'autres fichiers requis (tels que des fichiers CSS et JavaScript). Le fichier de fonction contient le code qui implémente les fonctions spécifiques du plug-in. Ensuite, nous créerons un plugin WordPress qui génère automatiquement des arborescences de répertoires, étape par étape.

Étape 1 : Créer la structure de base du plug-in
Tout d'abord, nous devons créer un dossier comme dossier principal de notre plug-in. Donnez-lui un nom significatif, tel que « table des matières ». Dans ce dossier, nous allons créer un fichier de plugin principal appelé "table-of-contents.php".

Ouvrez le fichier "table-of-contents.php" et ajoutez le code suivant au fichier :

<?php
/**
 * Plugin Name: Table of Contents
 * Description: Automatically generates a table of contents for your WordPress posts and pages.
 * Version: 1.0.0
 * Author: Your Name
 * License: GPL2
 */

// 插件代码将在这里添加
?>

Dans le code ci-dessus, nous définissons les informations de base du plugin, telles que le nom, la description, la version, l'auteur, et licence.

Étape 2 : Ajouter une page de paramètres du plugin
Maintenant, nous devons ajouter une page de paramètres pour le plugin afin de sélectionner les pages ou les articles sur lesquels nous souhaitons afficher l'arborescence des répertoires. Dans le fichier "table-of-contents.php", ajoutez le code suivant :

// 激活插件时添加设置菜单
function toc_add_settings_menu() {
  add_options_page( 'Table of Contents Settings', 'Table of Contents', 'manage_options', 'table-of-contents-settings', 'toc_render_settings_page' );
}
add_action( 'admin_menu', 'toc_add_settings_menu' );

// 渲染设置页面
function toc_render_settings_page() {
  ?>
  <div class="wrap">
    <h1>Table of Contents Settings</h1>
    <form method="post" action="options.php">
      <?php settings_fields( 'toc_settings_group' ); ?>
      <?php do_settings_sections( 'toc_settings_page' ); ?>
      <?php submit_button(); ?>
    </form>
  </div>
  <?php
}

Dans le code ci-dessus, on crée une page de paramètres en utilisant la fonction add_options_page() fournie par WordPress et on l'ajoute Le lien est ajouté au menu Paramètres dans le backend WordPress. Nous avons également créé une fonction toc_render_settings_page() qui restitue le contenu de la page de paramètres. add_options_page()创建了一个设置页面，并将其链接添加到WordPress后台的"设置"菜单中。我们还创建了一个用于渲染设置页面内容的函数toc_render_settings_page()。

第三步：添加设置字段和保存功能
在上一步中，我们创建了一个设置页面，但页面上还没有任何设置字段。接下来，我们将添加一个多选框字段，用于选择要在哪些页面或文章中显示目录树。在"table-of-contents.php"文件中，添加以下代码：

// 注册设置字段
function toc_register_settings() {
  register_setting( 'toc_settings_group', 'toc_display_options' );
  add_settings_section( 'toc_general_section', 'General Settings', 'toc_general_section_callback', 'toc_settings_page' );
  add_settings_field( 'toc_display_options_field', 'Display Options', 'toc_display_options_field_callback', 'toc_settings_page', 'toc_general_section' );
}
add_action( 'admin_init', 'toc_register_settings' );

// 渲染字段
function toc_display_options_field_callback() {
  $options = get_option( 'toc_display_options' );
  $pages = get_pages();
  foreach ( $pages as $page ) {
    $checked = isset( $options[$page->ID] ) ? checked( $options[$page->ID], $page->post_title, false ) : '';
    echo '<input type="checkbox" name="toc_display_options[' . $page->ID . ']" value="' . esc_attr( $page->post_title ) . '" ' . $checked . '> ' . esc_html( $page->post_title ) . '<br>';
  }
}

// 保存设置
function toc_save_settings() {
  if ( isset( $_POST['toc_display_options'] ) ) {
    $options = array();
    foreach ( $_POST['toc_display_options'] as $page_id => $title ) {
      $options[$page_id] = $title;
    }
    update_option( 'toc_display_options', $options );
  }
}
add_action( 'admin_post_save_toc_settings', 'toc_save_settings' );

上述代码中，我们使用了register_setting()函数来注册一个设置字段，使用add_settings_section()函数创建了一个设置字段的组，使用add_settings_field()函数创建了一个多选框字段。

我们还定义了一个渲染设置字段的回调函数toc_display_options_field_callback()，该函数将所有页面作为多选框字段显示。我们还定义了一个保存设置的函数toc_save_settings()，在该函数中，我们使用update_option()函数将用户选择的页面保存到WordPress数据库中。

第四步：生成目录树
现在，我们已经设置了插件的基本结构和设置页面，接下来我们将添加生成目录树的功能。在"table-of-contents.php"文件中，添加以下代码：

// 生成目录树
function toc_generate_toc() {
  $options = get_option( 'toc_display_options' );
  if ( $options ) {
    global $post;
    if ( isset( $options[$post->ID] ) ) {
      $content = apply_filters( 'the_content', $post->post_content );
      $pattern = "/<h([1-6])>(.*?)</h[1-6]>/";
      preg_match_all( $pattern, $content, $headings, PREG_SET_ORDER );
      $tree = array();
      foreach ( $headings as $heading ) {
        $level = intval( $heading[1] );
        $title = strip_tags( $heading[2] );
        $tree[] = array(
          'level' => $level,
          'title' => $title
        );
      }
      $toc_html = '<ul class="toc">';
      $current_level = 0;
      foreach ( $tree as $branch ) {
        if ( $branch['level'] == $current_level ) {
          $toc_html .= '</li><li>';
        } elseif ( $branch['level'] > $current_level ) {
          $toc_html .= '<ul>';
        } elseif ( $branch['level'] < $current_level ) {
          $toc_html .= '</li>';
          for ( $i = $branch['level']; $i < $current_level; $i++ ) {
            $toc_html .= '</ul></li>';
          }
          $toc_html .= '<li>';
        }
        $toc_html .= '<a href="#' . sanitize_title( $branch['title'] ) . '">' . esc_html( $branch['title'] ) . '</a>';
        $current_level = $branch['level'];
      }
      $toc_html .= '</li>';
      for ( $i = $current_level; $i > 0; $i-- ) {
        $toc_html .= '</ul></li>';
      }
      $toc_html .= '</ul>';
      return $toc_html;
    }
  }
}
add_shortcode( 'table_of_contents', 'toc_generate_toc' );

在上述代码中，我们首先获取用户选择的页面，并根据这些页面的内容生成目录树。我们使用了正则表达式来匹配页面中的标题标签，并将匹配到的标题存储在一个数组中。之后，我们使用循环将这些标题按层级和顺序组织成目录树。

我们还使用了一个短代码[table_of_contents]来调用toc_generate_toc()函数，并将生成的目录树作为内容返回。

第五步：添加样式和脚本
为了让目录树具有更好的外观和交互效果，我们需要添加一些样式和脚本。在"table-of-contents.php"文件中，添加以下代码：

// 添加样式和脚本
function toc_enqueue_scripts() {
  wp_enqueue_style( 'toc-style', plugins_url( 'css/style.css', __FILE__ ) );
  wp_enqueue_script( 'toc-script', plugins_url( 'js/script.js', __FILE__ ), array( 'jquery' ), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'toc_enqueue_scripts' );

在上述代码中，我们使用了WordPress提供的函数wp_enqueue_style()和wp_enqueue_script()来加载插件所需的样式表和脚本文件。注意，我们需要将样式表和脚本文件放在插件文件夹的"css"和"js"子文件夹中，并为它们添加相应的文件名。

第六步：将目录树添加到页面或文章中
最后一步是将生成的目录树添加到要显示目录树的页面或文章中。在编辑页面或文章时，你可以使用短代码[table_of_contents]将目录树插入到页面的任意位置。请在"table-of-contents.php"文件中添加以下代码：

<!-- 在编辑器中显示目录树短代码按钮 -->
<script>
  function add_toc_shortcode_button() {
    if ( typeof wp !== 'undefined' && wp.hasOwnProperty( 'shortcode' ) ) {
      wp.mce = wp.mce || {};
      wp.mce.tinymce = wp.mce.tinymce || {};
      wp.mce.views = wp.mce.views || {};

      wp.mce.tinymce.Template = Backbone.Marionette.ItemView.extend({});

      $( document ).on( 'click', 'a.add-toc-shortcode', function(e) {
        e.preventDefault();
        wp.mce.views.getParentWindow().send_to_editor('[table_of_contents]');
      });
    }
  }
  $(document).ready(function() {
    add_toc_shortcode_button();
  });
</script>

上述代码中，我们使用JavaScript代码为编辑器添加一个按钮，该按钮可以快速插入[table_of_contents]

Troisième étape : ajouter des champs de paramètres et enregistrer la fonction🎜 Dans l'étape précédente, nous avons créé une page de paramètres, mais il n'y avait pas encore de champs de paramètres sur la page. Ensuite, nous ajouterons un champ de case à cocher qui sélectionne les pages ou les publications sur lesquelles nous souhaitons que l'arborescence s'affiche. Dans le fichier "table-of-contents.php", ajoutez le code suivant : 🎜rrreee🎜Dans le code ci-dessus, nous utilisons la fonction register_setting() pour enregistrer un champ de paramétrage, utilisez La fonction add_settings_section( ) crée un groupe de champs de paramètres et utilise la fonction add_settings_field() pour créer un champ de boîte à sélection multiple. 🎜🎜Nous définissons également une fonction de rappel toc_display_options_field_callback() pour les champs de paramètres de rendu, qui affiche toutes les pages sous forme de champs de boîte à sélection multiple. Nous définissons également une fonction pour enregistrer les paramètres toc_save_settings(), dans laquelle nous utilisons la fonction update_option() pour enregistrer la page sélectionnée par l'utilisateur dans la base de données WordPress. 🎜🎜Étape 4 : Générer une arborescence de répertoires🎜Maintenant que nous avons configuré la structure de base et la page des paramètres du plug-in, nous allons ajouter la fonction de génération d'une arborescence de répertoires. Dans le fichier "table-of-contents.php", ajoutez le code suivant : 🎜rrreee🎜Dans le code ci-dessus, nous récupérons d'abord les pages sélectionnées par l'utilisateur et générons une arborescence de répertoires basée sur le contenu de ces pages. Nous utilisons une expression régulière pour faire correspondre les balises de titre sur la page et stockons les titres correspondants dans un tableau. Ensuite, nous utilisons des boucles pour organiser ces titres hiérarchiquement et séquentiellement dans une arborescence de répertoires. 🎜🎜Nous utilisons également un shortcode [table_of_contents] pour appeler la fonction toc_generate_toc() et renvoyer l'arborescence de répertoires générée sous forme de contenu. 🎜🎜Étape 5 : Ajouter des styles et des scripts🎜Afin de donner à l'arborescence des répertoires une meilleure apparence et un meilleur effet interactif, nous devons ajouter des styles et des scripts. Dans le fichier "table-of-contents.php", ajoutez le code suivant : 🎜rrreee🎜Dans le code ci-dessus, nous avons utilisé les fonctions wp_enqueue_style() et wp_enqueue_script() pour charger les feuilles de style et les fichiers de script requis par le plug-in. Notez que nous devons placer la feuille de style et les fichiers de script dans les sous-dossiers "css" et "js" du dossier du plugin et leur ajouter les noms de fichiers correspondants. 🎜🎜Étape 6 : Ajoutez l'arborescence de répertoires à la page ou à la publication🎜La dernière étape consiste à ajouter l'arborescence de répertoires générée à la page ou à la publication où vous souhaitez que l'arborescence de répertoires soit affichée. Lors de la modification d'une page ou d'une publication, vous pouvez utiliser le shortcode <code>[table_of_contents] pour insérer une arborescence de table des matières n'importe où sur la page. Veuillez ajouter le code suivant dans le fichier "table-of-contents.php": 🎜rrreee🎜Dans le code ci-dessus, nous utilisons du code JavaScript pour ajouter un bouton à l'éditeur, qui peut rapidement insérer [table_of_contents] code> Shortcode dans l’éditeur. 🎜<p>Grâce aux six étapes ci-dessus, nous avons développé un plug-in WordPress qui génère automatiquement des arborescences de répertoires. Vous pouvez modifier et optimiser davantage le plug-in en fonction de vos propres besoins. J'espère que cet article vous sera utile et je vous souhaite un bon développement ! </p>

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!