Mẹo nhỏ: Để tìm kiếm chính xác các chia sẻ của f4vnn.com, hãy search trên Google với cú pháp: "Từ khóa" + "f4vnn". (Ví dụ: tắt update windows f4vnn). Tìm kiếm ngay

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.

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

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

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;
}

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.

Tham khảo: https://www.sourcecodester.com/

Theo dõi trên

Logo Google new
5/5 - (1 bình chọn)