ディレクトリツリーを自動生成するWordPressプラグインを開発する方法

ディレクトリ ツリーを自動生成する WordPress プラグインの開発方法

WordPress Web サイトの継続的な開発に伴い、Web サイトのコンテンツの規模も大きくなり、もっと大きい。読者にとって、Web サイトのコンテンツをすばやく移動して閲覧できることは非常に重要です。ディレクトリ ツリーは、読者が Web サイトのさまざまな部分をすばやく見つけて閲覧するのに役立つ非常に便利な機能です。この記事では、ディレクトリ ツリーを自動的に生成する WordPress プラグインを開発する方法を説明します。

プラグインの開発を開始する前に、WordPress プラグインの基本構造と原則を理解する必要があります。 WordPress プラグインは、メインのプラグイン フォルダーと 1 つ以上の機能ファイルで構成されます。メイン フォルダーには、プラグインのメイン ファイル (通常は 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
}

上記のコードでは、WordPress が提供する関数 add_options_page() を使用して設定ページを作成します。 , そして、そのリンクをWordPressバックエンドの「設定」メニューに追加します。また、設定ページのコンテンツをレンダリングするための関数 toc_render_settings_page() も作成しました。

ステップ 3: 設定フィールドの追加と関数の保存
前のステップでは設定ページを作成しましたが、ページにはまだ設定フィールドがありません。次に、ツリーを表示するページまたは投稿を選択するチェックボックス フィールドを追加します。 「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 データベースに保存します。

ステップ 4: ディレクトリ ツリーを生成する
プラグインの基本構造と設定ページを設定したので、ディレクトリ ツリーを生成する機能を追加します。 「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() 関数を呼び出し、生成されたディレクトリ ツリーをコンテンツとして返します。

ステップ 5: スタイルとスクリプトを追加する
ディレクトリ ツリーの外観とインタラクティブな効果を向上させるには、いくつかのスタイルとスクリプトを追加する必要があります。 「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' );

上記のコードでは、によって提供される関数 wp_enqueue_style() と wp_enqueue_script を使用しました。 WordPress () を使用して、プラグインに必要なスタイル シートとスクリプト ファイルを読み込みます。スタイルシートとスクリプト ファイルをプラグイン フォルダーの「css」サブフォルダーと「js」サブフォルダーに配置し、対応するファイル名をそれらに追加する必要があることに注意してください。

ステップ 6: ページまたは記事にディレクトリ ツリーを追加する
最後のステップは、生成されたディレクトリ ツリーを、ディレクトリ ツリーを表示するページまたは記事に追加することです。ページまたは投稿を編集するときに、ショートコード [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] エディターにショートコードを入力します。

上記の 6 つの手順を経て、ディレクトリ ツリーを自動生成する WordPress プラグインを開発しました。独自のニーズに応じてプラグインをさらに変更および最適化できます。この記事があなたのお役に立てば幸いです。そして、あなたのスムーズな開発を祈っています。

以上がディレクトリツリーを自動生成するWordPressプラグインを開発する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。