Bagaimana untuk membangunkan pemalam WordPress yang menjana pepohon direktori secara automatik

Cara membangunkan pemalam WordPress yang menjana pepohon direktori secara automatik

Dengan pembangunan berterusan tapak web WordPress, skala kandungan laman web juga menjadi lebih besar dan lebih besar. Adalah sangat penting bagi pembaca untuk dapat menavigasi dan melayari kandungan laman web dengan cepat. Pepohon direktori ialah ciri yang sangat berguna yang boleh membantu pembaca mencari dan menyemak imbas bahagian tapak web dengan cepat. Artikel ini akan mengajar anda cara membangunkan pemalam WordPress yang menjana pepohon direktori secara automatik.

Sebelum kita mula membangunkan pemalam, kita perlu memahami struktur asas dan prinsip pemalam WordPress. Pemalam WordPress terdiri daripada folder pemalam utama dan satu atau lebih fail ciri. Folder utama mengandungi fail utama pemalam (biasanya fail PHP) dan fail lain yang diperlukan (seperti fail CSS dan JavaScript). Fail fungsi mengandungi kod yang melaksanakan fungsi khusus pemalam. Seterusnya, kami akan mencipta pemalam WordPress yang menjana pepohon direktori secara automatik langkah demi langkah.

Langkah 1: Buat struktur asas pemalam
Pertama, kita perlu mencipta folder sebagai folder utama pemalam kita. Beri nama yang bermakna, seperti "jadual-kandungan". Dalam folder ini kami akan mencipta fail pemalam utama yang dipanggil "table-of-contents.php".

Buka fail "table-of-contents.php" dan tambahkan kod berikut pada fail:

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

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

Dalam kod di atas, kami mentakrifkan maklumat asas pemalam, seperti nama, penerangan, versi, pengarang, dan lesen.

Langkah 2: Tambah halaman tetapan pemalam
Kini, kita perlu menambah halaman tetapan untuk pemalam untuk memilih halaman atau artikel yang ingin kita paparkan pepohon direktori. Dalam fail "table-of-contents.php", tambah kod berikut:

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

Dalam kod di atas, kami mencipta halaman tetapan menggunakan fungsi add_options_page() yang disediakan oleh WordPress dan menambahnya Pautan ditambahkan pada menu Tetapan dalam bahagian belakang WordPress. Kami juga mencipta fungsi toc_render_settings_page() yang menjadikan kandungan halaman tetapan. 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]

Langkah Tiga: Tambah Medan Tetapan dan Simpan Fungsi🎜Dalam langkah sebelumnya, kami telah mencipta halaman tetapan, tetapi belum ada sebarang medan tetapan pada halaman tersebut. Seterusnya, kami akan menambah medan kotak pilihan yang memilih halaman atau siaran yang kami mahu pokok itu dipaparkan. Dalam fail "table-of-contents.php", tambah kod berikut: 🎜rrreee🎜Dalam kod di atas, kami menggunakan fungsi register_setting() untuk mendaftarkan medan tetapan, gunakan fungsi add_settings_section( ) mencipta sekumpulan medan tetapan dan menggunakan fungsi add_settings_field() untuk mencipta medan kotak berbilang pilihan. 🎜🎜Kami juga mentakrifkan fungsi panggil balik toc_display_options_field_callback() untuk memaparkan medan tetapan, yang memaparkan semua halaman sebagai medan kotak berbilang pilihan. Kami juga mentakrifkan fungsi untuk menyimpan tetapan toc_save_settings(), di mana kami menggunakan fungsi update_option() untuk menyimpan halaman yang dipilih pengguna ke pangkalan data WordPress. 🎜🎜Langkah 4: Jana pepohon direktori🎜Sekarang kami telah menyediakan struktur asas dan halaman tetapan pemalam, kami akan menambah fungsi menjana pepohon direktori. Dalam fail "table-of-contents.php", tambah kod berikut: 🎜rrreee🎜Dalam kod di atas, kami mula-mula mendapatkan halaman yang dipilih oleh pengguna dan menjana pepohon direktori berdasarkan kandungan halaman ini. Kami menggunakan ungkapan biasa untuk memadankan teg tajuk pada halaman dan menyimpan tajuk yang dipadankan dalam tatasusunan. Selepas itu, kami menggunakan gelung untuk menyusun tajuk ini secara hierarki dan berurutan ke dalam pepohon direktori. 🎜🎜Kami juga menggunakan kod pendek [table_of_contents] untuk memanggil fungsi toc_generate_toc() dan mengembalikan pepohon direktori yang dijana sebagai kandungan. 🎜🎜Langkah 5: Tambah gaya dan skrip🎜Untuk memberikan pepohon direktori penampilan yang lebih baik dan kesan interaktif, kami perlu menambah beberapa gaya dan skrip. Dalam fail "table-of-contents.php", tambah kod berikut: 🎜rrreee🎜Dalam kod di atas, kami telah menggunakan fungsi wp_enqueue_style() dan wp_enqueue_script() untuk memuatkan helaian gaya dan fail skrip yang diperlukan oleh pemalam. Ambil perhatian bahawa kita perlu meletakkan lembaran gaya dan fail skrip dalam subfolder "css" dan "js" folder pemalam dan menambah nama fail yang sepadan dengannya. 🎜🎜Langkah 6: Tambahkan pepohon direktori ke halaman atau siaran🎜Langkah terakhir ialah menambah pepohon direktori yang dijana pada halaman atau siaran di mana anda mahu pepohon direktori dipaparkan. Apabila mengedit halaman atau siaran, anda boleh menggunakan kod pendek <code>[table_of_contents] untuk memasukkan pepohon jadual kandungan di mana-mana sahaja pada halaman. Sila tambahkan kod berikut dalam fail "table-of-contents.php": 🎜rrreee🎜Dalam kod di atas, kami menggunakan kod JavaScript untuk menambah butang pada editor, yang boleh memasukkan [table_of_contents] dengan cepat kod> Kod pendek ke dalam editor. 🎜<p>Melalui enam langkah di atas, kami telah membangunkan pemalam WordPress yang menjana pepohon direktori secara automatik. Anda boleh mengubah suai dan mengoptimumkan pemalam mengikut keperluan anda sendiri. Saya harap artikel ini berguna kepada anda, dan saya berharap perkembangan anda lancar! </p>

Atas ialah kandungan terperinci Bagaimana untuk membangunkan pemalam WordPress yang menjana pepohon direktori secara automatik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!