如何開發一個自動產生目錄樹的WordPress插件

如何開發一個自動產生目錄樹的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 id="Table-of-Contents-Settings">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插件的詳細內容。更多資訊請關注PHP中文網其他相關文章！