如何開發(fā)一個自動生成目錄樹的WordPress插件

隨著WordPress網(wǎng)站的不斷發(fā)展，網(wǎng)站內(nèi)容的規(guī)模也越來越龐大。愛掏網(wǎng) - it200.com對于讀者來說，能夠快速導(dǎo)航和瀏覽網(wǎng)站的內(nèi)容是非常重要的。愛掏網(wǎng) - it200.com目錄樹是一個非常實用的功能，可以幫助讀者快速定位并瀏覽網(wǎng)站的不同部分。愛掏網(wǎng) - it200.com本文將教你如何開發(fā)一個自動生成目錄樹的WordPress插件。愛掏網(wǎng) - it200.com

在開始開發(fā)插件之前，我們需要了解一下WordPress插件的基本結(jié)構(gòu)和原理。愛掏網(wǎng) - it200.com一個WordPress插件由一個主要的插件文件夾和一個或多個功能文件組成。愛掏網(wǎng) - it200.com主要文件夾包含插件的主要文件（通常是一個PHP文件）和其他所需的文件（如CSS和JavaScript文件）。愛掏網(wǎng) - it200.com功能文件則包含實現(xiàn)插件具體功能的代碼。愛掏網(wǎng) - it200.com接下來，我們將一步一步地創(chuàng)建一個自動生成目錄樹的WordPress插件。愛掏網(wǎng) - it200.com

第一步：創(chuàng)建插件基本結(jié)構(gòu)
首先，我們需要創(chuàng)建一個文件夾，作為我們插件的主文件夾。愛掏網(wǎng) - it200.com給它起一個有意義的名字，比如"table-of-contents"。愛掏網(wǎng) - it200.com在這個文件夾中，我們將創(chuàng)建一個名為"table-of-contents.php"的主要插件文件。愛掏網(wǎng) - it200.com

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

登錄后復(fù)制

在上述代碼中，我們定義了插件的基本信息，如名稱、描述、版本、作者和許可證。愛掏網(wǎng) - it200.com

第二步：添加插件設(shè)置頁面
現(xiàn)在，我們需要為插件添加一個設(shè)置頁面，用于選擇要在哪些頁面或文章中顯示目錄樹。愛掏網(wǎng) - it200.com在"table-of-contents.php"文件中，添加以下代碼：

// 激活插件時添加設(shè)置菜單
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' );

// 渲染設(shè)置頁面
function toc_render_settings_page() {
  ?>
  
    
Table of Contents Settings
    

      

  
  登錄后復(fù)制

在上述代碼中，我們使用WordPress提供的函數(shù)add_options_page()創(chuàng)建了一個設(shè)置頁面，并將其鏈接添加到WordPress后臺的"設(shè)置"菜單中。愛掏網(wǎng) - it200.com我們還創(chuàng)建了一個用于渲染設(shè)置頁面內(nèi)容的函數(shù)toc_render_settings_page()。愛掏網(wǎng) - it200.com

第三步：添加設(shè)置字段和保存功能
在上一步中，我們創(chuàng)建了一個設(shè)置頁面，但頁面上還沒有任何設(shè)置字段。愛掏網(wǎng) - it200.com接下來，我們將添加一個多選框字段，用于選擇要在哪些頁面或文章中顯示目錄樹。愛掏網(wǎng) - it200.com在"table-of-contents.php"文件中，添加以下代碼：

// 注冊設(shè)置字段
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 ' ' . esc_html( $page->post_title ) . '
';
  }
}

// 保存設(shè)置
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' );

登錄后復(fù)制

上述代碼中，我們使用了register_setting()函數(shù)來注冊一個設(shè)置字段，使用add_settings_section()函數(shù)創(chuàng)建了一個設(shè)置字段的組，使用add_settings_field()函數(shù)創(chuàng)建了一個多選框字段。愛掏網(wǎng) - it200.com

我們還定義了一個渲染設(shè)置字段的回調(diào)函數(shù)toc_display_options_field_callback()，該函數(shù)將所有頁面作為多選框字段顯示。愛掏網(wǎng) - it200.com我們還定義了一個保存設(shè)置的函數(shù)toc_save_settings()，在該函數(shù)中，我們使用update_option()函數(shù)將用戶選擇的頁面保存到WordPress數(shù)據(jù)庫中。愛掏網(wǎng) - it200.com

第四步：生成目錄樹
現(xiàn)在，我們已經(jīng)設(shè)置了插件的基本結(jié)構(gòu)和設(shè)置頁面，接下來我們將添加生成目錄樹的功能。愛掏網(wǎng) - it200.com在"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 = "/(.*?)[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 = '

'; $current_level = 0; foreach ( $tree as $branch ) { if ( $branch['level'] == $current_level ) { $toc_html .= '
• '; } elseif ( $branch['level'] > $current_level ) { $toc_html .= '
  '; } elseif ( $branch['level'] '; for ( $i = $branch['level']; $i
'; } $toc_html .= '
• '; } $toc_html .= '' . esc_html( $branch['title'] ) . ''; $current_level = $branch['level']; } $toc_html .= '
'; for ( $i = $current_level; $i > 0; $i-- ) { $toc_html .= '

'; } $toc_html .= ''; return $toc_html; } } } add_shortcode( 'table_of_contents', 'toc_generate_toc' ); 登錄后復(fù)制

在上述代碼中，我們首先獲取用戶選擇的頁面，并根據(jù)這些頁面的內(nèi)容生成目錄樹。愛掏網(wǎng) - it200.com我們使用了正則表達(dá)式來匹配頁面中的標(biāo)題標(biāo)簽，并將匹配到的標(biāo)題存儲在一個數(shù)組中。愛掏網(wǎng) - it200.com之后，我們使用循環(huán)將這些標(biāo)題按層級和順序組織成目錄樹。愛掏網(wǎng) - it200.com

我們還使用了一個短代碼[table_of_contents]來調(diào)用toc_generate_toc()函數(shù)，并將生成的目錄樹作為內(nèi)容返回。愛掏網(wǎng) - it200.com

第五步：添加樣式和腳本
為了讓目錄樹具有更好的外觀和交互效果，我們需要添加一些樣式和腳本。愛掏網(wǎng) - it200.com在"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' );

登錄后復(fù)制

在上述代碼中，我們使用了WordPress提供的函數(shù)wp_enqueue_style()和wp_enqueue_script()來加載插件所需的樣式表和腳本文件。愛掏網(wǎng) - it200.com注意，我們需要將樣式表和腳本文件放在插件文件夾的"css"和"js"子文件夾中，并為它們添加相應(yīng)的文件名。愛掏網(wǎng) - it200.com

第六步：將目錄樹添加到頁面或文章中
最后一步是將生成的目錄樹添加到要顯示目錄樹的頁面或文章中。愛掏網(wǎng) - it200.com在編輯頁面或文章時，你可以使用短代碼[table_of_contents]將目錄樹插入到頁面的任意位置。愛掏網(wǎng) - it200.com請在"table-of-contents.php"文件中添加以下代碼：

登錄后復(fù)制

上述代碼中，我們使用JavaScript代碼為編輯器添加一個按鈕，該按鈕可以快速插入[table_of_contents]短代碼到編輯器中。愛掏網(wǎng) - it200.com

通過以上六個步驟，我們已經(jīng)開發(fā)出了一個自動生成目錄樹的WordPress插件。愛掏網(wǎng) - it200.com你可以根據(jù)自己的需求對插件進行進一步的修改和優(yōu)化。愛掏網(wǎng) - it200.com希望這篇文章對你有所幫助，祝你開發(fā)順利！

以上就是如何開發(fā)一個自動生成目錄樹的WordPress插件的詳細(xì)內(nèi)容，更多請關(guān)注愛掏網(wǎng) - it200.com其它相關(guān)文章！