디렉토리 트리를 자동으로 생성하는 WordPress 플러그인을 개발하는 방법

디렉토리 트리를 자동으로 생성하는 WordPress 플러그인 개발 방법

WordPress 웹사이트의 지속적인 개발과 함께 웹사이트 콘텐츠의 규모도 점점 커지고 있습니다. 독자가 웹사이트의 콘텐츠를 빠르게 탐색하고 검색할 수 있는 것은 매우 중요합니다. 디렉토리 트리는 독자가 웹사이트의 다른 부분을 빠르게 찾고 탐색하는 데 도움이 되는 매우 유용한 기능입니다. 이 기사에서는 디렉토리 트리를 자동으로 생성하는 WordPress 플러그인을 개발하는 방법을 설명합니다.

플러그인 개발을 시작하기 전에 WordPress 플러그인의 기본 구조와 원리를 이해해야 합니다. WordPress 플러그인은 기본 플러그인 폴더와 하나 이상의 기능 파일로 구성됩니다. 기본 폴더에는 플러그인의 기본 파일(일반적으로 PHP 파일)과 기타 필수 파일(예: CSS 및 JavaScript 파일)이 포함되어 있습니다. 함수 파일에는 플러그인의 특정 기능을 구현하는 코드가 포함되어 있습니다. 다음으로, 단계별로 디렉토리 트리를 자동으로 생성하는 WordPress 플러그인을 만들어 보겠습니다.

1단계: 플러그인의 기본 구조 만들기
먼저 플러그인의 기본 폴더로 사용할 폴더를 만들어야 합니다. "목차"와 같이 의미 있는 이름을 지정합니다. 이 폴더에 "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
 */

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

위 코드에서는 이름, 설명, 버전, 작성자, 플러그인의 기본 정보를 정의합니다. 그리고 라이센스.

2단계: 플러그인 설정 페이지 추가
이제 디렉토리 트리를 표시할 페이지나 기사를 선택하기 위해 플러그인에 대한 설정 페이지를 추가해야 합니다. "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
}

위 코드에서는 워드프레스에서 제공하는 add_options_page() 함수를 이용하여 설정 페이지를 생성하고 이를 추가합니다. 링크는 WordPress 백엔드의 설정 메뉴에 추가됩니다. 또한 설정 페이지 콘텐츠를 렌더링하는 toc_render_settings_page() 함수도 만들었습니다. 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]

3단계: 설정 필드 추가 및 기능 저장🎜이전 단계에서 설정 페이지를 생성했지만 아직 페이지에 설정 필드가 없었습니다. 다음으로 트리를 표시할 페이지나 게시물을 선택하는 확인란 필드를 추가하겠습니다. "table-of-contents.php" 파일에 다음 코드를 추가합니다: 🎜rrreee🎜위 코드에서는 register_setting() 함수를 사용하여 설정 필드를 등록합니다. add_settings_section( ) 함수는 설정 필드 그룹을 생성하고 add_settings_field() 함수를 사용하여 다중 선택 상자 필드를 생성합니다. 🎜🎜또한 모든 페이지를 다중 선택 상자 필드로 표시하는 설정 필드 렌더링을 위한 콜백 함수 toc_display_options_field_callback()을 정의합니다. 또한 toc_save_settings() 설정을 저장하는 함수를 정의합니다. 여기서 update_option() 함수를 사용하여 사용자가 선택한 페이지를 WordPress 데이터베이스에 저장합니다. 🎜🎜4단계: 디렉토리 트리 생성🎜 이제 플러그인의 기본 구조와 설정 페이지를 설정했으므로 디렉토리 트리를 생성하는 기능을 추가하겠습니다. "table-of-contents.php" 파일에 다음 코드를 추가합니다: 🎜rrreee🎜위 코드에서는 먼저 사용자가 선택한 페이지를 가져오고 이 페이지의 콘텐츠를 기반으로 디렉토리 트리를 생성합니다. 정규식을 사용하여 페이지의 제목 태그를 일치시키고 일치하는 제목을 배열에 저장합니다. 그런 다음 루프를 사용하여 이러한 제목을 계층적, 순차적으로 디렉토리 트리로 구성합니다. 🎜🎜또한 단축 코드 [table_of_contents]를 사용하여 toc_generate_toc() 함수를 호출하고 생성된 디렉터리 트리를 콘텐츠로 반환합니다. 🎜🎜5단계: 스타일 및 스크립트 추가🎜디렉토리 트리에 더 나은 모양과 대화형 효과를 제공하려면 몇 가지 스타일과 스크립트를 추가해야 합니다. "table-of-contents.php" 파일에 다음 코드를 추가하세요: 🎜rrreee🎜 위 코드에서는 제공된 wp_enqueue_style() 및 wp_enqueue_script()를 통해 플러그인에 필요한 스타일 시트와 스크립트 파일을 로드합니다. 스타일시트와 스크립트 파일을 플러그인 폴더의 "css" 및 "js" 하위 폴더에 배치하고 해당 파일 이름을 추가해야 합니다. 🎜🎜6단계: 페이지나 게시물에 디렉터리 트리 추가🎜 마지막 단계는 생성된 디렉터리 트리를 디렉터리 트리를 표시하려는 페이지나 게시물에 추가하는 것입니다. 페이지나 게시물을 편집할 때 단축 코드 <code>[table_of_contents]를 사용하여 페이지 어디든 목차 트리를 삽입할 수 있습니다. "table-of-contents.php" 파일에 다음 코드를 추가하세요: 🎜rrreee🎜위 코드에서는 JavaScript 코드를 사용하여 [table_of_contents]를 빠르게 삽입할 수 있는 버튼을 편집기에 추가했습니다. code> 편집기에 단축 코드를 입력합니다. 🎜<p>위의 6단계를 거쳐 디렉토리 트리를 자동으로 생성하는 워드프레스 플러그인을 개발했습니다. 필요에 따라 플러그인을 추가로 수정하고 최적화할 수 있습니다. 이 글이 여러분에게 도움이 되길 바라며, 원활한 발전을 기원합니다! </p>

위 내용은 디렉토리 트리를 자동으로 생성하는 WordPress 플러그인을 개발하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!