So entwickeln Sie ein WordPress-Plugin, das automatisch Verzeichnisbäume generiert

So entwickeln Sie ein WordPress-Plug-in, das automatisch einen Verzeichnisbaum generiert

Mit der kontinuierlichen Entwicklung von WordPress-Websites wird auch der Umfang der Website-Inhalte immer größer. Für die Leser ist es sehr wichtig, schnell durch die Inhalte der Website navigieren und sie durchsuchen zu können. Der Verzeichnisbaum ist eine sehr nützliche Funktion, die Lesern dabei helfen kann, verschiedene Teile der Website schnell zu finden und zu durchsuchen. In diesem Artikel erfahren Sie, wie Sie ein WordPress-Plug-in entwickeln, das automatisch Verzeichnisbäume generiert.

Bevor wir mit der Entwicklung von Plugins beginnen, müssen wir die Grundstruktur und Prinzipien von WordPress-Plugins verstehen. Ein WordPress-Plugin besteht aus einem Haupt-Plugin-Ordner und einer oder mehreren Feature-Dateien. Der Hauptordner enthält die Hauptdatei des Plugins (normalerweise eine PHP-Datei) und andere erforderliche Dateien (z. B. CSS- und JavaScript-Dateien). Die Funktionsdatei enthält den Code, der die spezifischen Funktionen des Plug-Ins implementiert. Als nächstes erstellen wir ein WordPress-Plugin, das Schritt für Schritt automatisch Verzeichnisbäume generiert.

Schritt 1: Grundstruktur des Plug-ins erstellen
Zuerst müssen wir einen Ordner als Hauptordner unseres Plug-ins erstellen. Geben Sie ihm einen aussagekräftigen Namen, z. B. „Inhaltsverzeichnis“. In diesem Ordner erstellen wir eine Haupt-Plugin-Datei mit dem Namen „table-of-contents.php“.

Öffnen Sie die Datei „table-of-contents.php“ und fügen Sie den folgenden Code zur Datei hinzu:

<?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
 */

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

Im obigen Code definieren wir die grundlegenden Informationen des Plugins, wie Name, Beschreibung, Version, Autor, und Lizenz.

Schritt 2: Plugin-Einstellungsseite hinzufügen
Jetzt müssen wir eine Einstellungsseite für das Plugin hinzufügen, um auszuwählen, auf welchen Seiten oder Artikeln wir den Verzeichnisbaum anzeigen möchten. Fügen Sie in der Datei „table-of-contents.php“ den folgenden Code hinzu:

// 激活插件时添加设置菜单
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
}

Im obigen Code erstellen wir eine Einstellungsseite mit der von WordPress bereitgestellten Funktion add_options_page() und fügen sie hinzu Der Link wird zum Menü „Einstellungen“ im WordPress-Backend hinzugefügt. Wir haben auch eine Funktion toc_render_settings_page() erstellt, die den Inhalt der Einstellungsseite rendert. 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]

Schritt drei: Einstellungsfelder hinzufügen und Funktion speichern🎜Im ​​vorherigen Schritt haben wir eine Einstellungsseite erstellt, aber es gab noch keine Einstellungsfelder auf der Seite. Als Nächstes fügen wir ein Kontrollkästchenfeld hinzu, das auswählt, auf welchen Seiten oder Beiträgen der Baum angezeigt werden soll. Fügen Sie in der Datei „table-of-contents.php“ den folgenden Code hinzu: 🎜rrreee🎜Im obigen Code verwenden wir die Funktion register_setting(), um ein Einstellungsfeld zu registrieren, verwenden Sie Die Funktion add_settings_section( ) erstellt eine Gruppe von Einstellungsfeldern und verwendet die Funktion add_settings_field(), um ein Mehrfachauswahlfeld zu erstellen. 🎜🎜Wir definieren außerdem eine Rückruffunktion toc_display_options_field_callback() zum Rendern von Einstellungsfeldern, die alle Seiten als Felder mit Mehrfachauswahlfeldern anzeigt. Wir definieren auch eine Funktion zum Speichern von Einstellungen toc_save_settings(), in der wir die Funktion update_option() verwenden, um die vom Benutzer ausgewählte Seite in der WordPress-Datenbank zu speichern. 🎜🎜Schritt 4: Verzeichnisbaum erstellen🎜Da wir nun die Grundstruktur und die Einstellungsseite des Plug-Ins eingerichtet haben, fügen wir die Funktion zum Generieren eines Verzeichnisbaums hinzu. Fügen Sie in der Datei „table-of-contents.php“ den folgenden Code hinzu: 🎜rrreee🎜Im obigen Code rufen wir zunächst die vom Benutzer ausgewählten Seiten ab und generieren einen Verzeichnisbaum basierend auf dem Inhalt dieser Seiten. Wir verwenden einen regulären Ausdruck, um Titel-Tags auf der Seite abzugleichen und die übereinstimmenden Titel in einem Array zu speichern. Anschließend verwenden wir Schleifen, um diese Titel hierarchisch und sequentiell in einem Verzeichnisbaum zu organisieren. 🎜🎜Wir verwenden auch einen Shortcode [table_of_contents], um die Funktion toc_generate_toc() aufzurufen und den generierten Verzeichnisbaum als Inhalt zurückzugeben. 🎜🎜Schritt 5: Stile und Skripte hinzufügen🎜Um dem Verzeichnisbaum ein besseres Aussehen und einen interaktiven Effekt zu verleihen, müssen wir einige Stile und Skripte hinzufügen. Fügen Sie in der Datei „table-of-contents.php“ den folgenden Code hinzu: 🎜rrreee🎜 Im obigen Code haben wir die bereitgestellten Funktionen wp_enqueue_style() und wp_enqueue_script(), um die für das Plug-in erforderlichen Stylesheets und Skriptdateien zu laden. Beachten Sie, dass wir die Stylesheet- und Skriptdateien in den Unterordnern „css“ und „js“ des Plugin-Ordners ablegen und ihnen entsprechende Dateinamen hinzufügen müssen. 🎜🎜Schritt 6: Fügen Sie den Verzeichnisbaum zur Seite oder zum Beitrag hinzu🎜Der letzte Schritt besteht darin, den generierten Verzeichnisbaum zur Seite oder zum Beitrag hinzuzufügen, auf der der Verzeichnisbaum angezeigt werden soll. Wenn Sie eine Seite oder einen Beitrag bearbeiten, können Sie den Shortcode <code>[table_of_contents] verwenden, um an einer beliebigen Stelle auf der Seite einen Inhaltsverzeichnisbaum einzufügen. Bitte fügen Sie den folgenden Code in die Datei „table-of-contents.php“ ein: 🎜rrreee🎜Im obigen Code verwenden wir JavaScript-Code, um dem Editor eine Schaltfläche hinzuzufügen, mit der schnell [table_of_contents] eingefügt werden kann. Code> Shortcode in den Editor eingeben. 🎜<p>Durch die oben genannten sechs Schritte haben wir ein WordPress-Plug-in entwickelt, das automatisch Verzeichnisbäume generiert. Sie können das Plug-in entsprechend Ihren eigenen Bedürfnissen weiter modifizieren und optimieren. Ich hoffe, dieser Artikel ist hilfreich für Sie und wünsche Ihnen eine reibungslose Entwicklung! </p>

Das obige ist der detaillierte Inhalt vonSo entwickeln Sie ein WordPress-Plugin, das automatisch Verzeichnisbäume generiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!