WordPress文章页侧边栏添加文章目录

2024-7-19

前言

不少主题都支持文章页的侧边栏添加文章目录的小工具

教程

将如下代码放到子主题的function.php中

class Article_TOC_Widget extends WP_Widget {

    public function __construct() {
        parent::__construct(
            'article_toc_widget',
            '文章目录小工具',
            array( 'description' => '在文章或页面的侧边栏中显示文章目录' )
        );
    }

    public function widget( $args, $instance ) {
        global $post;
        if ( is_singular() && ! empty( $post->post_content ) ) {
            $toc = $this->get_toc( $post->post_content );
            if ( ! empty( $toc ) ) {
                echo $args['before_widget'];
                echo $args['before_title'] . '文章目录' . $args['after_title'];
                echo '' . $toc . '';
                echo $args['after_widget'];
            }
        }
    }

    public function get_toc( $content ) {
        $toc = '';
        $dom = new DOMDocument();
        @$dom->loadHTML( mb_convert_encoding( $content, 'HTML-ENTITIES', 'UTF-8' ) );
        $xpath = new DOMXPath( $dom );
        $headers = $xpath->query( '//h2|//h3|//h4|//h5|//h6' );
        if ( $headers->length > 0 ) {
            foreach ( $headers as $header ) {
                $id = $header->getAttribute( 'id' );
                if ( empty( $id ) ) {
                    $id = sanitize_title( $header->nodeValue );
                    $header->setAttribute( 'id', $id );
                }
                $toc .= '' . $header->nodeValue . '';
            }
        }
        return $toc;
    }

}
function register_article_toc_widget() {
    register_widget( 'Article_TOC_Widget' );
}
add_action( 'widgets_init', 'register_article_toc_widget' );