WordPress: Cách tạo Mục lục cho bài viết

Đây là cách tự động tạo Mục lục cho mỗi bài viết của bạn, nếu bạn đang sử dụng WordPress.

Bây giờ bạn có thể nhận thấy rằng chủ đề của trang web bao gồm một bảng nội dung cho mỗi bài đăng. Bạn có thể tự hỏi nếu tôi thực sự dành thời gian tự tạo ra mục lục đó. Vâng, xin lỗi để thất vọng, nhưng câu trả lời là: Không. Thực tế nó được tạo tự động dựa trên các tiêu đề bên trong bài viết. Tôi nghĩ nó khá hấp dẫn, vì vậy tôi quyết định chia sẻ với bạn cách thực hiện.

Giới thiệu

Trên thực tế, đây là một cách tiếp cận rất phổ biến để tạo ra một mục lục. Vì vậy, thông thường, mà nó là những gì MS Word sử dụng để tạo ra nó quá. Thực tế, có 2 cách để tạo ra một bảng nội dung trong WordPress:

  1. Thông qua JavaScript, ở mặt trước.
  2. Thông qua PHP, khi hiển thị nội dung.

Bây giờ, không có sự khác biệt trực quan giữa hai phương pháp. Nhưng, từ góc độ SEO, tôi đã chọn cái thứ hai, vì TOC cũng được nhúng vào chính nội dung trang.

Phương thức này bao gồm việc loại bỏ tất cả các thành phần tiêu đề và tạo một danh sách của chúng, trong đó mọi mục đều trỏ đến chính tiêu đề bên trong bài viết.

Vì vậy, hãy xem cách nó được thực hiện trong mã.

Tạo Mục lục HTML

Bước đầu tiên là tạo HTML. Điều này có nghĩa là loại bỏ nội dung HTML của bài đăng để lấy từng phần tử tiêu đề và nối nó vào TOC mới được tạo.

Để làm điều này, chúng tôi sẽ thêm một bộ lọc mới cho  the_content, từ functions.phptệp chủ đề của chúng tôi .

Trước tiên, hãy xem toàn bộ mã trông như thế nào, và sau đó chúng tôi sẽ phân tích từng chút một.

// Inject the TOC on each post.
add_filter('the_content', function ($content) {
    global $tableOfContents;
    $tableOfContents = "
        <div class='h5'>
            Table of Contents <span class='toggle'>+ show</span>
        </div>
        <div class='items'>
            <div class='item-h2'>
                <a href='#preface'>Preface</a>
            </div>
    ";
    $index = 1;
    // Insert the IDs and create the TOC.
    $content = preg_replace_callback('#<(h[1-6])(.*?)>(.*?)</\1>#si', function ($matches) use (&$index, &$tableOfContents) {
        $tag = $matches[1];
        $title = strip_tags($matches[3]);
        $hasId = preg_match('/id=(["\'])(.*?)\1[\s>]/si', $matches[2], $matchedIds);
        $id = $hasId ? $matchedIds[2] : $index++ . '-' . sanitize_title($title);
        $tableOfContents .= "<div class='item-$tag'><a href='#$id'>$title</a></div>";
        if ($hasId) {
            return $matches[0];
        }
        return sprintf('<%s%s id="%s">%s</%s>', $tag, $matches[2], $id, $matches[3], $tag);
    }, $content);
    $tableOfContents .= '</div>';
    return $content;
});

Sử dụng Mục lục
Tôi đã tạo một hàm đơn giản để trả về $tableOfContentsbiến toàn cục. Điều đó không thực sự cần thiết, nhưng nó giữ cho nó phù hợp với các thành phần WordPress khác và bạn không phải kiểm tra sự tồn tại trong mẫu của mình.


function get_the_table_of_contents()
{
    global $tableOfContents;
    return $tableOfContents;
}

Bên trong vòng lặp.

Đây là cách nó trông bên trong mẫu:


<div id="preface" class="post-content row">
    
<div class="content col">
        <?php the_content() ?>
    </div>

    <?php if (is_single()): ?>
        
<div class="post-toc col-auto">
            
<div class="wrapper">
                <?= get_the_table_of_contents() ?>
            </div>

            
<div class="placeholder"></div>

        </div>

    <?php endif ?>

WordPress: How to Generate a Table of Contents for Posts

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *