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

奥多也网络

前言

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

教程

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

1. class Article_TOC_Widget extends WP_Widget {
   
2. 
   
3.     public function __construct() {
   
4.         parent::__construct(
   
5.             'article_toc_widget',
   
6.             '文章目录小工具',
   
7.             array( 'description' => '在文章或页面的侧边栏中显示文章目录' )
   
8.         );
   
9.     }
   
10. 
    
11.     public function widget( $args, $instance ) {
    
12.         global $post;
    
13.         if ( is_singular() && ! empty( $post->post_content ) ) {
    
14.             $toc = $this->get_toc( $post->post_content );
    
15.             if ( ! empty( $toc ) ) {
    
16.                 echo $args['before_widget'];
    
17.                 echo $args['before_title'] . '文章目录' . $args['after_title'];
    
18.                 echo '<ul>' . $toc . '</ul>';
    
19.                 echo $args['after_widget'];
    
20.             }
    
21.         }
    
22.     }
    
23. 
    
24.     public function get_toc( $content ) {
    
25.         $toc = '';
    
26.         $dom = new DOMDocument();
    
27.         @$dom->loadHTML( mb_convert_encoding( $content, 'HTML-ENTITIES', 'UTF-8' ) );
    
28.         $xpath = new DOMXPath( $dom );
    
29.         $headers = $xpath->query( '//h2|//h3|//h4|//h5|//h6' );
    
30.         if ( $headers->length > 0 ) {
    
31.             foreach ( $headers as $header ) {
    
32.                 $id = $header->getAttribute( 'id' );
    
33.                 if ( empty( $id ) ) {
    
34.                     $id = sanitize_title( $header->nodeValue );
    
35.                     $header->setAttribute( 'id', $id );
    
36.                 }
    
37.                 $toc .= '<li><a href="https://www.xrbk.cn/1725.html#' . $id . '">' . $header->nodeValue . '</a></li>';
    
38.             }
    
39.         }
    
40.         return $toc;
    
41.     }
    
42. 
    
43. }
    
44. function register_article_toc_widget() {
    
45.     register_widget( 'Article_TOC_Widget' );
    
46. }
    
47. add_action( 'widgets_init', 'register_article_toc_widget' );

复制代码

结语

功能不是很完善，但是可以显示了，需要其他功能自己添加