วิธีสร้างสารบัญใน WordPress Post

สารบัญเป็นส่วนสำคัญของบทความใน WordPress โดยเฉพาะบทความยาวๆ ที่มีหลายหัวเรื่อง การสร้างสารบัญ ช่วยให้ผู้อ่านติดตามและเข้าใจแนวคิดได้ง่ายและรวดเร็ว นอกจากนี้ยังช่วยให้คุณเพิ่มคีย์เวิร์ดในโพสต์ได้อีกด้วย ซึ่งดีมากสำหรับ SEO

วิธีการสร้างสารบัญ

มี 2 ​​วิธีในการสร้างสารบัญในโพสต์ WordPress

วิธีแรกคือการใช้ปลั๊กอิน นั่นเป็นเรื่อง ง่าย รวดเร็วและฟรี สำหรับทั้งผู้เชี่ยวชาญด้านโค้ดและมือใหม่ใน WordPress

อันที่สองกำลังใช้รหัส ที่ช่วยให้คุณปรับแต่งสารบัญของคุณ แม้กระทั่งรายละเอียดที่เล็กที่สุด แต่ก็ค่อนข้างซับซ้อนสำหรับผู้ที่ไม่ใช่ผู้เขียนโค้ด เราจะเขียนโค้ดเพื่อสร้างสารบัญในโพสต์นี้ เพียงคัดลอกและวาง!

มาดูขั้นตอนการสร้างสารบัญด้วยปลั๊กอินกันก่อน:

วิธีที่ 1: ใช้ปลั๊กอินเพื่อสร้างสารบัญ

ขั้นตอนที่ 1: สร้างและตั้งค่าเนื้อหาสำหรับสารบัญ

มีปลั๊กอินฟรีมากมายสำหรับสร้างสารบัญใน WordPress เราเลือก สารบัญ LuckyWP เพราะมันให้ผลลัพธ์ที่ปรับแต่งได้สูงและสวยงาม อย่างไรก็ตาม ปลั๊กอินนี้มีการตั้งค่าค่อนข้างมาก ซึ่งอาจทำให้คุณสับสนในตอนแรก ดังนั้น ทำตามคำแนะนำของเราเพื่อประหยัดเวลาของคุณ

สารบัญ LuckyWP เป็นปลั๊กอินฟรีและมีอยู่ใน wordpress.org คุณเพียงแค่ติดตั้งและเปิดใช้งานปลั๊กอินบน แดชบอร์ด

จากนั้นไปที่ การ ตั้งค่า > สารบัญ คุณจะเห็นหน้าจอการตั้งค่า

มี 4 แท็บที่คุณต้องให้ความสนใจ: ทั่วไป, ลักษณะที่ปรากฏ, แทรกอัตโนมัติ, ส่วนหัวของการประมวลผล เป็นแท็บที่ใช้ในการตั้งค่าและปรับแต่งการแสดงสารบัญ อื่น ๆ. เป็นแท็บที่มีการตั้งค่าที่ซับซ้อนและไม่สำคัญ คุณจึงไม่ต้องสนใจ

ในขั้นตอนนี้ คุณเพียงแค่ทำงานในแท็บ ทั่วไป

มีการตั้งค่ามากมายในส่วนนี้ เพื่อประหยัดเวลา คุณควรเน้นส่วนสำคัญด้านล่าง:

• การนับ: เพื่อกำหนดหมายเลขหัวเรื่อง คุณควรเลือกหนึ่งรายการจากตัวเลือกเหล่านี้: ไม่มีตัวเลข, ตัวเลขทศนิยม (ซ้อน), ตัวเลขโรมัน (ซ้อน)

ฉันเลือก เลขทศนิยม (ซ้อนกัน) ดังนั้น TOC ของฉันจึงมีลักษณะดังนี้:

• ชื่อเรื่อง: ชื่อเรื่องของสารบัญ เป็น เนื้อหา ในค่าเริ่มต้น

ปล่อยให้การตั้งค่าที่เหลือเป็นค่าเริ่มต้น เพราะนั่นไม่ได้ส่งผลกระทบต่อ TOC ของคุณมากนัก

คลิก บันทึกการเปลี่ยนแปลง เพื่อเสร็จสิ้น ดังนั้นเราจึงได้ทำการตั้งค่าทั่วไปของ TOC ไปที่ขั้นตอนต่อไป

ขั้นตอนที่ 2: ใส่สารบัญในโพสต์

มี 2 ​​วิธีในการแทรกสารบัญในโพสต์ของคุณ: การแทรกโดยอัตโนมัติและด้วยตนเอง

การแทรกโดยอัตโนมัติหมายความว่ามีการเพิ่มสารบัญในทุกโพสต์โดยอัตโนมัติ วิธีนี้ช่วยประหยัดเวลาและความพยายามได้มาก แต่วิธีนี้ใช้ไม่ได้ผล หากคุณต้องการแทรก TOC ลงในบางโพสต์

การแทรกด้วยตนเองหมายความว่าหากคุณต้องการมี TOC ในโพสต์ คุณต้องแทรกลงในโพสต์นั้นด้วยตนเอง การดำเนินการนี้อาจใช้เวลานานและอาจเกิดข้อผิดพลาดได้

เราจะแนะนำทั้งสองวิธีโดยละเอียด คุณสามารถเลือกตัวเลือกที่เหมาะสมกับคุณ

แทรกโดยอัตโนมัติ

ไปที่แท็บ แทรกอัตโนมัติ > เปิดใช้งาน ปลั๊กอินเลือก โพสต์ เป็นค่าเริ่มต้น หากไม่ต้องการ คุณสามารถเปลี่ยนไปใช้โพสต์ประเภทอื่นได้

ในส่วน ตำแหน่ง เลือกตำแหน่งที่คุณต้องการแทรกสารบัญ อย่าลืมคลิก บันทึกการเปลี่ยนแปลง !

ดังนั้น โพสต์ทั้งหมดในประเภทโพสต์ที่เลือกจึงมีสารบัญ

การใส่ด้วยตนเอง

การแทรกด้วยตนเองฟังดูซับซ้อน แต่จริงๆ แล้วง่ายมาก ไปที่แท็บ หัวข้อการประมวลผล เลือกประเภทโพสต์ด้วย จากนั้นคลิก บันทึกการเปลี่ยนแปลง

จากนั้นไปที่เครื่องมือแก้ไขโพสต์ของโพสต์ในประเภทโพสต์ที่คุณเลือก คลิก เปิดใช้งาน TOC

ตอนนี้ TOC ของคุณเสร็จเรียบร้อยแล้ว นอกจากนี้ เรายังสามารถจัดรูปแบบสี แบบอักษร ขนาดของรายการ… เพื่อทำให้สวยงามยิ่งขึ้น ทำตามขั้นตอนต่อไป

ขั้นตอนที่ 3: ปรับแต่งการแสดงสารบัญ

นอกจากนี้ยังมี 2 วิธีในการปรับแต่งการแสดงสารบัญ: ปรับแต่งในโพสต์ทั้งหมดพร้อมกันและปรับแต่งทีละรายการในแต่ละโพสต์

ปรับแต่งสารบัญในโพสต์ทั้งหมด

คุณสามารถปรับแต่งรายละเอียดสารบัญทั้งหมดได้โดยไปที่แท็บ ลักษณะที่ปรากฏ มีการตั้งค่าต่างๆ มากมาย เช่น ขนาดแบบอักษรของชื่อเรื่อง ขนาดแบบอักษรของรายการ สีลิงก์ …

ไม่จำเป็นต้องสังเกตการตั้งค่าทั้งหมด แค่เน้นสิ่งที่คุณต้องการ

ตัวอย่างเช่น ฉันไม่ชอบสีน้ำเงินและขนาดตัวอักษรของชื่อปัจจุบัน ฉันต้องการเปลี่ยนสีเป็นสีเทาเข้มและขนาดที่เล็กกว่าเพื่อให้โพสต์ดูดีขึ้น ดังนั้น ฉันจะปรับแต่ง ขนาดแบบอักษรของชื่อเรื่อง ขนาดแบบอักษรของรายการ สีลิงก์ และคงการตั้งค่าที่เหลือไว้ดังภาพด้านล่าง:

TOC ของฉันหลังจากปรับแต่งแล้วมีลักษณะดังนี้:

ตอนนี้มันดูกลมกลืนกันมากขึ้น

อย่างไรก็ตาม คุณอาจต้องการให้มีสารบัญที่แตกต่างกันในโพสต์ต่างๆ เพียงเลื่อนลงมาเพื่ออ่านวิธีปรับแต่งในแต่ละโพสต์

ปรับแต่งสารบัญในแต่ละโพสต์

งานนี้ยังง่ายและรวดเร็ว ขั้นแรก ไปที่เครื่องมือแก้ไขโพสต์ เลือก สารบัญ > ปรับแต่ง

ป๊อปอัปปรับแต่งสารบัญ จะปรากฏขึ้น คุณจะเห็นบางแท็บที่คุ้นเคยดังข้างต้น พวกเขาเป็น นายพล รูปลักษณ์ และ เบ็ดเตล็ด .

ไปที่แท็บ ลักษณะที่ปรากฏ และเปลี่ยนการตั้งค่าบางอย่างเช่นเดียวกับการแก้ไขบน แดชบอร์ด ของปลั๊กอิน คลิก บันทึก เพื่อสิ้นสุด!

ตอนนี้ มาดูผลลัพธ์สุดท้ายของการปรับแต่งสารบัญ

วิธีการปรับแต่งทั้งสองวิธีนำมาซึ่งสารบัญที่สวยงามและมีรายละเอียดมาก คุณจึงมีอิสระในการเลือกแบบที่คุณชอบ

ตอนนี้เรามาดูวิธีการใช้โค้ดสำหรับสร้างสารบัญกัน

วิธีที่ 2: ใช้รหัสเพื่อสร้างสารบัญ

ขั้นตอนที่ 1: สร้างสารบัญสำหรับโพสต์

ไปที่ Appearance > Theme > Editor > functions.php

จากนั้นเพิ่มโค้ดต่อไปนี้ลงในไฟล์ functions.php เพื่อแทรกสารบัญลงในโพสต์

หมายเหตุ: รหัสนี้คือการเพิ่ม เพียง 2 ระดับหัวเรื่องลงในสารบัญ

 ฟังก์ชัน create_toc($html) {
    $toc = '';
    ถ้า (is_single()) {
        ถ้า (!$html) คืนค่า $html;
        $dom = DOMDocument ใหม่ ();
        libxml_use_internal_errors (จริง);
        $dom->loadHTML(mb_convert_encoding($html, 'HTML-ENTITIES', 'UTF-8'));
        libxml_clear_errors();
        $toc = '<div class="toc-bound">
            <div class="toc-ctr">
                สารบัญ
            </div>
            <ul class="toc">';
        $h2_status = 0;
        $h3_status = 0;
        $i = 1;
        foreach($dom->getElementsByTagName('*') เป็น $element) {
            if($element->tagName == 'h2') {
                ถ้า($h3_status){
                    $toc .= '</ul>';
                    $h3_status = 0;
                    }
                 ถ้า($h2_status){
                    $toc .= '</li>';
                    $h2_status = 0;
                  }
                  $h2_status = 1;
                  $toc .= '<li><a href="' . get_the_permalink() . '#toc-' . $i . '">' $element->textContent . '</a>';
                  $element->setAttribute('id', 'toc-' . $i);
                  $i++;
            }elseif($element->tagName == 'h3') {
                ถ้า(!$h3_status){
                    $toc .= '<ul class="toc-sub">';
                    $h3_status = 1;
                }
                $toc .= '<li><a href="' . get_the_permalink() . '#toc-' . $i . '">' $element->textContent . '</a></li>';
                $element->setAttribute('id', 'toc-' . $i);
                $i++;
            }
        }
        ถ้า($h3_status){
            $toc .= '</ul>';
        }
        ถ้า($h2_status){
            $toc .= '</li>';
        }
        $toc .= '</ul></div>';
        $html = $dom->บันทึก HTML();
    }
    ส่งคืน $toc $html;
}
add_filter('the_content', 'create_toc');

คำอธิบาย:

อย่าลืมคลิก ไฟล์อัปเดต หลังจากใส่รหัส

นี่คือผลลัพธ์:

แน่นอนว่าเราต้องจัดสไตล์สักหน่อย เราจะใช้ CSS ซึ่งเป็นเครื่องมือโปรดของผู้เขียนโค้ดทั้งหมด

ขั้นตอนที่ 2: ใช้ CSS เพื่อปรับแต่ง

หากต้องการปรับแต่งด้วย CSS ให้ไปที่ไฟล์ style.css ใน Theme Editor ที่นั่น คุณต้องใส่รหัสที่คุณเขียนด้วยตัวเองเพื่อปรับแต่ง TOC ตามที่คุณต้องการ

ตัวอย่างเช่น ฉันต้องการปรับแต่งสีและความเข้มของสารบัญ ดังนั้นฉันจะแทรกโค้ดต่อไปนี้:

 .toc ผูก {
    สีพื้นหลัง: #619162;
    สี: #fff;
}
.toc-ctr {
    ขอบล่าง: 1px ทึบ #fff;
    ช่องว่างภายใน: 10px;
    ขนาดตัวอักษร: 20px;
    การแปลงข้อความ: ตัวพิมพ์ใหญ่;
}
ul.toc {
    รายการสไตล์ประเภท: none;
    ช่องว่างภายใน: 10px;
    ช่องว่างภายใน-ซ้าย: 25px;
}
.toc li {
    สี: #fff;
}
ul.toc > ลี {
    ขนาดตัวอักษร: 18px;
    ตัวอักษร-น้ำหนัก: 700;
    ช่องว่างภายใน: 5px 0;
}
ul.toc-sub {
    รายการสไตล์ประเภท: none;
}
ul.toc-sub li a {
    ตัวอักษร-น้ำหนัก: 200;
}

อย่าลืมคลิก ไฟล์อัปเดต เพื่อบันทึก

ผลลัพธ์สุดท้ายมีลักษณะดังนี้:

โดยสรุป ทั้งการใช้ปลั๊กอินและการเข้ารหัสทำให้เรามีสารบัญที่สวยงามเหมือนกัน คุณสามารถเลือกตัวเลือกใดก็ได้ตราบเท่าที่คุณพอใจ

คำสุดท้าย

อย่างที่คุณเห็น การสร้างสารบัญในบทความ WordPress นั้นไม่ซับซ้อนเลย ทำตามบทช่วยสอนของเราแล้วคุณจะมีสารบัญที่สวยงาม สารบัญที่ดีทำให้โพสต์ของคุณชัดเจนและเป็นมืออาชีพมากขึ้น ดังนั้น ผู้ชมของคุณอาจมีประสบการณ์ที่เป็นมิตรมากกว่าเมื่ออ่านบล็อกของคุณ

หากคุณมีคำถามใด ๆ โปรดระบุในช่องแสดงความคิดเห็นด้านล่าง