Hướng dẫn cách tạo mục lục bài viết không cần Plugin cho WordPress

Tạo mục lục bài viết không cần Plugin cho WordPress – Trong hướng dẫn này, chúng ta sẽ khám phá cách tạo tập lệnh mục lục bài viết tùy chỉnh cho trang web WordPress. Mục tiêu là cung cấp cho người đọc một bảng tóm tắt các nội dung chính của bài viết giúp người đọc hình dung ra trước những gì họ sẽ đọc. Bắt đầu thôi nào.

Cách tạo mục lục bài viết không cần Plugin cho WordPress

Dưới đây, tôi sẽ cung cấp một tập lệnh PHP mẫu thể hiện tạo mục lục bài viết không cần Plugin cho WordPress được tạo tự động (TOC). Thực hiện theo các bước được nêu dưới đây.

Có thể bạn quan tâm: Cách xây dựng ứng dụng thời tiết bằng HTML CSS và JS cho WordPress

Style 1

1] Thêm code vào functions

Hãy mở tệp functions.php của theme WP đang hoạt động của bạn và thêm tập lệnh PHP tùy chỉnh với bộ lọc được đề cập, như hiển thị bên dưới

<?php 
/**
 * Generate Table of Contents
 */
function custom_content_toc($content){
    $new_content = $content;
    if(is_single()){
        $list = [];
        $ids = [];
        // Find all Headings from Content
        $headings = preg_match_all('/<h\d[^>]*>.*?<\/h\d>/si', $content, $matches);
        if($headings > 0 && isset($matches[0])){
            foreach($matches[0] as $k => $heading){
                // Getting the Heading Level
                preg_match_all('/<h(\d)[^>]*>/si', $heading, $level);
                $level = $level[1][0] ?? 1;
 
                //update heading attributes
                $id = "";
                $dom = new DOMDocument();
                $dom->loadHTML($heading);
                $html = new DOMXPath($dom);
                foreach($html->query('//h1 | //h2 | //h3 | //h4 | //h5') as $el){
                    // Get Heading ID
                    $id= $el->getAttribute('id') ?? '';
                    // Generate Heading ID if not exists
                    if(empty($id)){
                        $id = str_replace([" ",".",","], "-",trim(strtolower(strip_tags($heading))));
                    }
                    $i=1;
                    while(true){
                        if(!in_array($id, $ids)){
                            $ids[] = $id;
                            break;
                        }else{
                            $id = $id."_".($i++);
                        }
                    }
                    // Set Heading's Updated ID attribute
                    $el->setAttribute('id', $id);
                }
                $new_heading = $dom->saveHTML();
                $new_content = str_replace($heading, $new_heading, $new_content);
 
                $parent = false;
                // Locate and set the parent Heading
                if($level > 1 && !empty($list)){
                    $headingBeforeArr = array_slice($list, 0, $k + 1);
                    krsort($headingBeforeArr);
                    foreach($headingBeforeArr as $key => $headingBefore){
                        if($headingBefore['level'] < $level){
                            $parent = $key;
                            break;
                        }
                    }
                }
                // Add heading Item to array
                $list[] = ["level" => $level, "html" => $heading, "parent" => $parent, "id" => $id];
            }
        }
 
        /**
         * Generate the Table of Content 
         */
        $toc = "";
        if(!empty($list)){
            $toc .= "<div class='custom-toc-container'>";
            $toc .= "<div class='custom-toc-title'>Table of Contents</div>";
            $toc .= "<ul class='custom-toc'>";
            foreach($list as $k=> $row){
                if($row['parent'] !== false)
                    continue;
                $toc .= "<li class='custom-toc-item'>";
                $toc .= "<a href ='#{$row['id']}' class='custom-toc-item'>".(strip_tags($row['html']))."</a>";
                // Find Child Headings
                $toc .= get_child($list, $k);
                $toc .= "</li>";
            }  
            $toc .= "</ul>";
            $toc .= "</div>";
        }
 
    }
    // Return Post Content with Table of Contents 
    $new_content = $toc. $new_content;
    return $new_content;
}
 
/**
 * Generate Sub-Headings for Table of Contents
 */
function get_child($list = [], $parent = null){
    $child_content = "";
    if(!empty($list) && !is_null($parent)){
        foreach($list as $k => $row){
            if(!is_numeric($row['parent']) || $row['parent'] != $parent)
            continue;
                $child_content .= "<li class='custom-toc-item'>";
                $child_content .= "<a href ='#{$row['id']}' class='custom-toc-item'>".(strip_tags($row['html']))."</a>";
                $child_content .= get_child($list, $k);
                $child_content .= "</li>";
        }
    }
    if(!empty($child_content))
    $child_content = "<ul class='custom-toc'>{$child_content}</ul>";
    return $child_content;
}
 
add_filter( 'the_content' , 'custom_content_toc', 10, 1);
?>

2] Thêm css tùy chỉnh

Tiếp theo trong hướng dẫn tạo mục lục bài viết không cần Plugin cho WordPress, bạn truy cập theme trang web WordPress của bạn, hãy tích hợp tập lệnh CSS sau đây. Kiểu này xác định thiết kế tùy chỉnh cho Mục lục.

.custom-toc-container {
    display: block;
    width: 100%;
    padding: 0.75em 1em;
    border: 1px solid #00000024;
    box-shadow: 2px 5px 5px #00000024;
    margin-bottom: 15px;
    border-radius: 7px;
}
.custom-toc-title {
    font-size: 1.5rem;
    letter-spacing: .8px;
    font-weight: 600;
    border-bottom: 1px solid #d3c9c9;
    padding-bottom: 10px;
    margin-bottom: 15px;
}
ul.custom-toc .custom-toc-item {
    padding: 3px 1px;
    list-style: square;
}
a.custom-toc-item {
    font-weight: 500;
    text-decoration: none;
}

Style 2

1] Thêm code vào functions

function add_table_of_contents_before_first_heading($content) {
  // check if the current post type is "post" and if the content contains at least one heading
  if(get_post_type() == 'post' && preg_match('/<h[2-6]/', $content)) {
    // Get language_picker custom field value
    $language_picker_value = get_post_meta(get_the_ID(), 'language_pick', true);

    // Set the table of contents title based on language_picker value
$toc_title = (strpos($language_picker_value, 'ES') !== false) ? '<p>Tabla de Contenidos</p>' : '<p>Table of Contents</p>';


    // generate the table of contents
    $table_of_contents = '<div class="table-of-contents">';
    $table_of_contents .= $toc_title;
    $table_of_contents .= '<ul>';
    

    // find all headings in the content
    preg_match_all('/<h([2-6])(.*?)>(.*?)<\/h[2-6]>/', $content, $matches);
    foreach($matches[0] as $key => $heading) {
      // extract the heading level and text
      $heading_level = $matches[1][$key];
      $heading_text = $matches[3][$key];

      // add the heading to the table of contents
      $table_of_contents .= '<li><a href="#'.sanitize_title($heading_text).'">'.$heading_text.'</a></li>';

      // add an anchor to the heading
      $content = str_replace($heading, '<a id="'.sanitize_title($heading_text).'"></a>'.$heading, $content);
    }

    $table_of_contents .= '</ul>';
    $table_of_contents .= '</div>';

    // Insert the table of contents before the first heading
    $content = preg_replace('/<h[2-6]/', $table_of_contents.'<h2', $content, 1);

    // Add a separator after the table of contents
    $content = preg_replace('/<\/div><h2/', '</div><hr class="wp-block-separator has-alpha-channel-opacity" style=""><h2', $content, 1);
  }

  return $content;
}
add_filter('the_content', 'add_table_of_contents_before_first_heading');

2] Thêm css tùy chỉnh

.table-of-contents {
    padding: 1em;
    background-color: #f8f8f8;
    border: 1px solid #ddd;
}
.table-of-contents h2 {
    margin-top: 0;
    margin-bottom: 0.5em;
}
.table-of-contents li {
    margin-bottom: 0.5em;
}
.table-of-contents a {
    color: #333;
    text-decoration: none;
}
.table-of-contents a:hover {
    text-decoration: underline;
}

Kết luận

Tất cả chỉ có thế. Trên đây là hướng dẫn cách tạo mục lục bài viết không cần Plugin cho WordPress mà bạn có thể tham khảo. Hy vọng với chia sẻ của Blog thủ thuật máy tính f4vnn đã chia sẻ sẽ có ích với bạn, chúc bạn thành công.

Theo dõi trên