如何開(kāi)發(fā)一個(gè)自動(dòng)生成目錄樹(shù)的WordPress插件的方法

美工學(xué)習(xí)

如何開(kāi)發(fā)一個(gè)自動(dòng)生成目錄樹(shù)的wordpress插件

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

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

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

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

1. <?php
   
2. /**
   
3. * Plugin Name: Table of Contents
   
4. * Description: Automatically generates a table of contents for your WordPress posts and pages.
   
5. * Version: 1.0.0
   
6. * Author: Your Name
   
7. * License: GPL2
   
8. */
   
9. 
   
10. // 插件代碼將在這里添加
    
11. ?>

復(fù)制代碼

在上述代碼中，我們定義了插件的基本信息，如名稱、描述、版本、作者和許可證。

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

復(fù)制

1. // 激活插件時(shí)添加設(shè)置菜單
   
2. function toc_add_settings_menu() {
   
3.   add_options_page( 'Table of Contents Settings', 'Table of Contents', 'manage_options', 'table-of-contents-settings', 'toc_render_settings_page' );
   
4. }
   
5. add_action( 'admin_menu', 'toc_add_settings_menu' );
   
6. 
   
7. // 渲染設(shè)置頁(yè)面
   
8. function toc_render_settings_page() {
   
9.   ?>
   
10.   <div class="wrap">
    
11.     <h1>Table of Contents Settings</h1>
    
12.     <form method="post" action="options.php">
    
13.       <?php settings_fields( 'toc_settings_group' ); ?>
    
14.       <?php do_settings_sections( 'toc_settings_page' ); ?>
    
15.       <?php submit_button(); ?>
    
16.     </form>
    
17.   </div>
    
18.   <?php
    
19. }

復(fù)制代碼

上述代碼中，我們使用了register_setting()函數(shù)來(lái)注冊(cè)一個(gè)設(shè)置字段，使用add_settings_section()函數(shù)創(chuàng)建了一個(gè)設(shè)置字段的組，使用add_settings_field()函數(shù)創(chuàng)建了一個(gè)多選框字段。

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

第四步：生成目錄樹(shù)
現(xiàn)在，我們已經(jīng)設(shè)置了插件的基本結(jié)構(gòu)和設(shè)置頁(yè)面，接下來(lái)我們將添加生成目錄樹(shù)的功能。在"table-of-contents.php"文件中，添加以下代碼：

1. // 生成目錄樹(shù)
   
2. function toc_generate_toc() {
   
3.   $options = get_option( 'toc_display_options' );
   
4.   if ( $options ) {
   
5.     global $post;
   
6.     if ( isset( $options[$post->ID] ) ) {
   
7.       $content = apply_filters( 'the_content', $post->post_content );
   
8.       $pattern = "/<h([1-6])>(.*?)</h[1-6]>/";
   
9.       preg_match_all( $pattern, $content, $headings, PREG_SET_ORDER );
   
10.       $tree = array();
    
11.       foreach ( $headings as $heading ) {
    
12.         $level = intval( $heading[1] );
    
13.         $title = strip_tags( $heading[2] );
    
14.         $tree[] = array(
    
15.           'level' => $level,
    
16.           'title' => $title
    
17.         );
    
18.       }
    
19.       $toc_html = '<ul class="toc">';
    
20.       $current_level = 0;
    
21.       foreach ( $tree as $branch ) {
    
22.         if ( $branch['level'] == $current_level ) {
    
23.           $toc_html .= '</li><li>';
    
24.         } elseif ( $branch['level'] > $current_level ) {
    
25.           $toc_html .= '<ul>';
    
26.         } elseif ( $branch['level'] < $current_level ) {
    
27.           $toc_html .= '</li>';
    
28.           for ( $i = $branch['level']; $i < $current_level; $i++ ) {
    
29.             $toc_html .= '</ul></li>';
    
30.           }
    
31.           $toc_html .= '<li>';
    
32.         }
    
33.         $toc_html .= '<a href="#' . sanitize_title( $branch['title'] ) . '">' . esc_html( $branch['title'] ) . '</a>';
    
34.         $current_level = $branch['level'];
    
35.       }
    
36.       $toc_html .= '</li>';
    
37.       for ( $i = $current_level; $i > 0; $i-- ) {
    
38.         $toc_html .= '</ul></li>';
    
39.       }
    
40.       $toc_html .= '</ul>';
    
41.       return $toc_html;
    
42.     }
    
43.   }
    
44. }
    
45. add_shortcode( 'table_of_contents', 'toc_generate_toc' );

復(fù)制代碼

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

我們還使用了一個(gè)短代碼[table_of_contents]來(lái)調(diào)用toc_generate_toc()函數(shù)，并將生成的目錄樹(shù)作為內(nèi)容返回。

第五步：添加樣式和腳本
為了讓目錄樹(shù)具有更好的外觀和交互效果，我們需要添加一些樣式和腳本。在"table-of-contents.php"文件中，添加以下代碼：

1. // 添加樣式和腳本
   
2. function toc_enqueue_scripts() {
   
3.   wp_enqueue_style( 'toc-style', plugins_url( 'css/style.css', __FILE__ ) );
   
4.   wp_enqueue_script( 'toc-script', plugins_url( 'js/script.js', __FILE__ ), array( 'jquery' ), '1.0.0', true );
   
5. }
   
6. add_action( 'wp_enqueue_scripts', 'toc_enqueue_scripts' );

復(fù)制代碼

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

第六步：將目錄樹(shù)添加到頁(yè)面或文章中
最后一步是將生成的目錄樹(shù)添加到要顯示目錄樹(shù)的頁(yè)面或文章中。在編輯頁(yè)面或文章時(shí)，你可以使用短代碼[table_of_contents]將目錄樹(shù)插入到頁(yè)面的任意位置。請(qǐng)?jiān)?quot;table-of-contents.php"文件中添加以下代碼：

1. <!-- 在編輯器中顯示目錄樹(shù)短代碼按鈕 -->
   
2. <script>
   
3.   function add_toc_shortcode_button() {
   
4.     if ( typeof wp !== 'undefined' && wp.hasOwnProperty( 'shortcode' ) ) {
   
5.       wp.mce = wp.mce || {};
   
6.       wp.mce.tinymce = wp.mce.tinymce || {};
   
7.       wp.mce.views = wp.mce.views || {};
   
8. 
   
9.       wp.mce.tinymce.Template = Backbone.Marionette.ItemView.extend({});
   
10. 
    
11.       $( document ).on( 'click', 'a.add-toc-shortcode', function(e) {
    
12.         e.preventDefault();
    
13.         wp.mce.views.getParentWindow().send_to_editor('[table_of_contents]');
    
14.       });
    
15.     }
    
16.   }
    
17.   $(document).ready(function() {
    
18.     add_toc_shortcode_button();
    
19.   });
    
20. </script>

復(fù)制代碼

上述代碼中，我們使用JavaScript代碼為編輯器添加一個(gè)按鈕，該按鈕可以快速插入[table_of_contents]短代碼到編輯器中。

通過(guò)以上六個(gè)步驟，我們已經(jīng)開(kāi)發(fā)出了一個(gè)自動(dòng)生成目錄樹(shù)的WordPress插件。你可以根據(jù)自己的需求對(duì)插件進(jìn)行進(jìn)一步的修改和優(yōu)化。希望這篇文章對(duì)你有所幫助，祝你開(kāi)發(fā)順利！

道勤主機(jī)提供365天*24小時(shí)全年全天無(wú)休、實(shí)時(shí)在線、零等待的售后技術(shù)支持。竭力為您免費(fèi)處理您在使用道勤主機(jī)過(guò)程中所遇到的一切問(wèn)題! 如果您是道勤主機(jī)用戶，那么您可以通過(guò)QQ【792472177】、售后QQ【59133755】、旺旺【詮釋意念】、微信：q792472177免費(fèi)電話、后臺(tái)提交工單這些方式聯(lián)系道勤主機(jī)客服！ 如果您不是我們的客戶也沒(méi)問(wèn)題，點(diǎn)擊頁(yè)面最右邊的企業(yè)QQ在線咨詢圖標(biāo)聯(lián)系我們并購(gòu)買后，我們?yōu)槟�免費(fèi)進(jìn)行無(wú)縫搬家服務(wù)，讓您享受網(wǎng)站零訪問(wèn)延遲的遷移到道勤主機(jī)的服務(wù)！