### [如何开发一个自动生成目录树的WordPress插件](https://www.prosaas.cn/article/755)

**Published:** 2023-09-06T01:55:45

**Author:** 5201314

**Excerpt:** 如何开发一个自动生成目录树的WordPress插件随着WordPress网站的不断发展，网站内容的规模也越来越…

![](//zhiqipro.oss-cn-beijing.aliyuncs.com/2023/12/20231212115030609.jpg)

如何开发一个自动生成目录树的WordPress插件

随着WordPress网站的不断发展，网站内容的规模也越来越庞大。对于读者来说，能够快速导航和浏览网站的内容是非常重要的。目录树是一个非常实用的功能，可以帮助读者快速定位并浏览网站的不同部分。本文将教你如何开发一个自动生成目录树的WordPress插件。

在开始开发插件之前，我们需要了解一下WordPress插件的基本结构和原理。一个WordPress插件由一个主要的插件文件夹和一个或多个功能文件组成。主要文件夹包含插件的主要文件（通常是一个PHP文件）和其他所需的文件（如CSS和JavaScript文件）。功能文件则包含实现插件具体功能的代码。接下来，我们将一步一步地创建一个自动生成目录树的WordPress插件。

第一步：创建插件基本结构  
首先，我们需要创建一个文件夹，作为我们插件的主文件夹。给它起一个有意义的名字，比如"table-of-contents"。在这个文件夹中，我们将创建一个名为"table-of-contents.php"的主要插件文件。

打开"table-of-contents.php"文件，并添加以下代码到文件中：

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

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

在上述代码中，我们定义了插件的基本信息，如名称、描述、版本、作者和许可证。

第二步：添加插件设置页面  
现在，我们需要为插件添加一个设置页面，用于选择要在哪些页面或文章中显示目录树。在"table-of-contents.php"文件中，添加以下代码：

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

在上述代码中，我们使用WordPress提供的函数`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]`短代码到编辑器中。

通过以上六个步骤，我们已经开发出了一个自动生成目录树的WordPress插件。你可以根据自己的需求对插件进行进一步的修改和优化。希望这篇文章对你有所帮助，祝你开发顺利！

以上就是如何开发一个自动生成目录树的WordPress插件的详细内容，更多请关注知企PROSAAS其它相关文章！

**Categories:** WordPress

---