目次を自動生成するWordPressプラグインを開発する方法

目次を自動的に生成する WordPress プラグインを開発する方法

ブログ投稿のコンテンツがますます豊富になるにつれて、読書体験の向上が求められています。重要な考慮事項になります。目次を自動的に生成することは、読書体験を向上させる一般的な方法です。 WordPress プラットフォーム上で目次を自動的に生成するプラグインを開発し、読者が記事のコンテンツをすばやく参照して移動できるようにします。この記事では、目次を自動生成する WordPress プラグインの開発方法を紹介し、参考として関連するコード例を示します。

まず、記事の目次を表示するための新しいウィジェット(Widget)をWordPressプラグインに登録する必要があります。以下は、ディレクトリ ウィジェットの簡単な登録例です。

class AutoTOC_Widget extends WP_Widget {
    
    public function __construct() {
        parent::__construct(
            'auto_toc_widget',
            '自动生成目录',
            array( 'description' => '在文章中自动生成目录' )
        );
    }
    
    public function widget( $args, $instance ) {
        // 在文章中显示自动生成的目录
    }
    
    public function form( $instance ) {
        // 小部件设置表单
    }
    
    public function update( $new_instance, $old_instance ) {
        // 更新小部件设置
    }
}

次に、ウィジェットの widget() メソッドにコードを記述して、ディレクトリ生成のロジックを実装する必要があります。まず、記事のコンテンツを取得し、正規表現を使用してすべてのタイトル要素と一致させる必要があります。コードの例を次に示します。

public function widget( $args, $instance ) {
    global $post;
    
    $post_id = $post->ID;
    $post_content = $post->post_content;
    
    // 正则表达式匹配所有标题元素
    preg_match_all( '/<h([1-6])>(.*?)</h
>/', $post_content, $matches, PREG_SET_ORDER );
    
    $toc_items = array();
    
    // 构建目录项数组
    foreach ( $matches as $match ) {
        $toc_item = array(
            'title' => $match[2],
            'level' => $match[1],
            'anchor' => sanitize_title( $match[2] )
        );
        
        $toc_items[] = $toc_item;
    }
    
    // 显示目录部件的HTML输出
}

上記のコードでは、preg_match_all() 関数を使用して記事コンテンツの title 要素を照合し、一致結果を ## に保存します。 # $matches 配列。次に、$matches 配列を反復処理し、タイトルのテキスト、レベル、アンカーを含む目次アイテムの配列 $toc_items を構築します。

最後に、目次ウィジェットの

widget() メソッドで HTML 出力を生成し、記事内に表示する必要があります。例のコードを次に示します。

public function widget( $args, $instance ) {
    global $post;
    
    $post_id = $post->ID;
    
    // 生成目录HTML输出
    $output = '<div class="auto-toc">';
    $output .= '<h2 class="widget-title">' . $instance['title'] . '</h2>';
    $output .= '<ul>';
    
    foreach ( $toc_items as $item ) {
        $output .= '<li><a href="#' . $item['anchor'] . '">' . $item['title'] . '</a></li>';
    }
    
    $output .= '</ul>';
    $output .= '</div>';
    
    echo $output;
}

上記のコードでは、

foreach ループを使用してカタログ項目配列 $toc_items を反復処理し、カタログの HTML 出力。各目次アイテムはリスト アイテムの

タグで囲まれており、読者がクリックして記事内で対応するタイトルに移動できるアンカー リンクが含まれています。 最後に、ウィジェットの

form() メソッドにいくつかの設定オプションを追加して、ユーザーがディレクトリに表示されるタイトルをカスタマイズできるようにすることもできます。以下は簡単なサンプル コードです。

public function form( $instance ) {
    $title = isset( $instance['title'] ) ? $instance['title'] : '目录';
    
    echo '<p>';
    echo '<label for="' . $this->get_field_id( 'title' ) . '">标题:</label>';
    echo '<input class="widefat" id="' . $this->get_field_id( 'title' ) . '" name="' . $this->get_field_name( 'title' ) . '" type="text" value="' . esc_attr( $title ) . '">';
    echo '</p>';
}

上記のコードでは、

input フォーム要素を使用して、ユーザーがカスタム ディレクトリ タイトルを入力できるようにします。この値はプラグインの設定に保存され、ウィジェットの widget() メソッドで使用されます。

上記のコード例を通じて、ブログ記事の読書体験を向上させるために、WordPress プラットフォームに基づいて目次を自動的に生成するプラグインを開発できます。読者は、目次内のリンクをクリックすることで、記事のコンテンツをすばやく参照して移動できます。独自の WordPress プラグインを開発すると、実際のニーズに応じて拡張およびカスタマイズでき、読者により良いユーザー エクスペリエンスをもたらします。

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