ตั้งค่า Excerpt WordPress ให้แสดงผลถูกต้อง

WordPress Excerpt คืออะไร และทำไมต้องตั้งค่า

WordPress Excerpt คือข้อความสรุปสั้น ๆ ของโพสต์ที่แสดงในหน้า Archive, หน้าหมวดหมู่, หน้า Tag, และ RSS Feed แทนที่จะแสดงเนื้อหาเต็ม ๆ ของโพสต์ ทำให้หน้ารายการบทความดูเรียบร้อย โหลดเร็ว และช่วยให้ผู้เข้าชมเลือกอ่านบทความที่สนใจได้ง่ายขึ้น

โดยค่าเริ่มต้น WordPress จะตัดเนื้อหาอัตโนมัติที่ 55 คำ (สำหรับภาษาอังกฤษ) แต่สำหรับภาษาไทยที่ไม่ได้ใช้ช่องว่างระหว่างคำเหมือนภาษาตะวันตก การตัดแบบนี้มักให้ผลลัพธ์ที่ไม่ถูกต้อง เช่น ตัดกลางประโยค หรือแสดงเนื้อหาน้อยหรือมากเกินไป การตั้งค่า Excerpt ที่ถูกต้องจึงเป็นสิ่งสำคัญสำหรับเว็บไซต์ภาษาไทย

2 วิธีหลักในการสร้าง Excerpt ใน WordPress

1. Manual Excerpt (แนะนำ)

การพิมพ์ Excerpt ด้วยตัวเองในช่อง Excerpt ของหน้า Editor เป็นวิธีที่ควบคุมได้ดีที่สุด สามารถเขียนสรุปที่กระชับ น่าสนใจ และ SEO-friendly ได้เต็มที่

1. เปิดโพสต์ใน WordPress Editor (Gutenberg หรือ Classic Editor)
2. ถ้าใช้ Gutenberg: คลิก Document Settings ทางขวา แล้วเลื่อนหา Excerpt
3. ถ้าใช้ Classic Editor: เลื่อนลงล่างหน้า Editor จะเห็นกล่อง Excerpt (ถ้าไม่เห็นให้คลิก Screen Options ด้านบนแล้ว tick Excerpt)
4. พิมพ์ข้อความสรุปบทความลงไป ความยาวแนะนำ 150-200 ตัวอักษรภาษาไทย
5. บันทึกโพสต์

2. Automatic Excerpt (ตัดอัตโนมัติ)

ถ้าโพสต์ไม่มี Manual Excerpt WordPress จะตัดเนื้อหาตอนต้นมาแสดงแทน ซึ่งสามารถปรับแต่งได้ผ่าน functions.php ของ Theme

ปรับความยาว Excerpt อัตโนมัติผ่าน functions.php

ไปที่ Appearance > Theme Editor (หรือแก้ผ่าน File Manager ใน cPanel) แล้วเปิดไฟล์ functions.php ของ Theme ที่ใช้งาน จากนั้นเพิ่มโค้ดต่อไปนี้:

// กำหนดความยาว Excerpt (หน่วยเป็นจำนวนคำ)
function mytheme_excerpt_length( $length ) {
    return 30; // ปรับตัวเลขนี้ตามต้องการ
}
add_filter( 'excerpt_length', 'mytheme_excerpt_length', 999 );

// กำหนด Read More text
function mytheme_excerpt_more( $more ) {
    return '... อ่านต่อ →';
}
add_filter( 'excerpt_more', 'mytheme_excerpt_more' );

กำหนดจุดตัด Excerpt ด้วย More Tag

วิธีที่ยืดหยุ่นที่สุดคือการใส่ More Tag (<!--more-->) ลงในเนื้อหาโพสต์โดยตรง WordPress จะตัดเนื้อหา ณ จุดนั้นเมื่อแสดงในหน้า Archive

วิธีใส่ More Tag:

• Gutenberg: คลิกจุดในเนื้อหาที่ต้องการตัด > กด + Add Block > ค้นหา "More" > เลือก More block
• Classic Editor: วางเคอร์เซอร์ตรงจุดที่ต้องการตัด > คลิกปุ่ม Insert Read More tag (ไอคอนแนวนอนในแถบเครื่องมือ)
• Text Mode: พิมพ์ <!--more--> ลงไปตรง ๆ

ตั้งค่า Excerpt ใน RSS Feed

WordPress มีตัวเลือกในการแสดงเนื้อหาใน RSS Feed ที่สามารถตั้งค่าได้ง่ายผ่าน Settings:

1. ไปที่ Settings > Reading (การอ่าน)
2. ในส่วน "For each article in a feed, show" เลือก Summary เพื่อแสดงแค่ Excerpt
3. ถ้าเลือก Full text จะแสดงเนื้อหาทั้งหมดใน Feed ซึ่งไม่แนะนำเพราะอาจถูก scrape
4. คลิก Save Changes

แก้ไข Excerpt ที่มี HTML Tags ติดมาด้วย

บางครั้ง Excerpt อัตโนมัติจะดึงเนื้อหาที่มี HTML tags มาด้วย ทำให้แสดงผลแปลก ๆ สามารถแก้ได้ด้วยโค้ดนี้ใน functions.php:

// ทำให้ Excerpt เป็น plain text ไม่มี HTML
function mytheme_clean_excerpt( $text ) {
    $text = strip_tags( $text );
    $text = str_replace( ' ', ' ', $text );
    $text = preg_replace( '/\s+/', ' ', $text );
    return trim( $text );
}
add_filter( 'the_excerpt', 'mytheme_clean_excerpt' );

// ใช้ Excerpt ที่ตั้งค่าไว้ใน get_the_excerpt() แทน the_content()
function mytheme_get_excerpt( $limit = 150 ) {
    $excerpt = get_the_excerpt();
    if ( mb_strlen( $excerpt ) > $limit ) {
        $excerpt = mb_substr( $excerpt, 0, $limit ) . '...';
    }
    return $excerpt;
}

แสดง Excerpt ใน Theme Template ด้วยตัวเอง

ถ้า Theme ของคุณไม่แสดง Excerpt ในหน้า Archive หรือหน้าหมวดหมู่ ให้แก้ไขไฟล์ archive.php หรือ index.php ของ Theme (ผ่าน Appearance > Theme Editor หรือ File Manager ใน cPanel) โดยแทนที่:

<?php the_content(); ?>

// เปลี่ยนเป็น:
<?php the_excerpt(); ?>

// หรือถ้าต้องการ Excerpt แบบกำหนด tag เอง:
<div class="entry-summary">
    <?php the_excerpt(); ?>
    <a href="<?php the_permalink(); ?>" class="btn-read-more">
        อ่านต่อ →
    </a>
</div>

ปรับสไตล์ปุ่ม Read More ด้วย CSS

หลังจากกำหนดปุ่ม Read More แล้ว สามารถตกแต่งด้วย CSS ผ่าน Appearance > Customize > Additional CSS หรือเพิ่มใน style.css ของ Child Theme:

/* สไตล์ปุ่ม Read More */
.read-more, .btn-read-more {
    display: inline-block;
    margin-top: 0.5rem;
    padding: 0.4rem 1rem;
    background: #16a34a;
    color: #fff;
    border-radius: 4px;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    transition: background 0.2s;
}
.read-more:hover, .btn-read-more:hover {
    background: #15803d;
    color: #fff;
}

/* Excerpt text */
.entry-summary p {
    color: #4b5563;
    line-height: 1.7;
    margin-bottom: 0.5rem;
}

ใช้ Plugin ช่วยจัดการ Excerpt (ไม่ต้องแก้โค้ด)

ถ้าไม่ต้องการแก้โค้ดเอง มีปลั๊กอินที่ช่วยจัดการ Excerpt ได้สะดวก:

• Advanced Excerpt - ปรับความยาว, ตัดตรงคำ, ใส่ Read More text, กรอง HTML tags ได้ครบ
• Yoast SEO - มี Meta Description ที่ทำงานคล้าย Excerpt สำหรับ SEO
• Code Snippets - เพิ่มโค้ด PHP ได้โดยไม่ต้องแก้ functions.php โดยตรง (ปลอดภัยกว่า)

ข้อควรระวังเรื่อง Excerpt ภาษาไทย

เนื่องจาก WordPress นับ Excerpt length ด้วย "จำนวนคำ" โดยใช้ช่องว่างเป็นตัวแบ่ง ภาษาไทยที่ไม่มีช่องว่างระหว่างคำจึงถูกนับเป็น 1 คำทั้งประโยค ทำให้ค่า excerpt_length ที่ตั้งไว้ไม่ส่งผลตามที่คาด

วิธีแก้คือใช้ฟังก์ชัน mb_substr() ตัดด้วยจำนวนอักขระแทน หรือใช้ Manual Excerpt ที่พิมพ์เองซึ่งไม่ขึ้นกับการนับคำของ WordPress

ตรวจสอบว่า Excerpt ทำงานถูกต้อง

# 1. ตรวจสอบว่า the_excerpt() ถูกเรียกใช้ในหน้า Archive หรือไม่
# เปิด archive.php หรือ index.php ใน Theme Editor แล้วค้นหา:
the_excerpt()

# 2. ดู Excerpt ที่ถูก generate ผ่าน wp-cli (ถ้า Host รองรับ SSH)
wp post get 1 --field=post_excerpt

# 3. ตรวจสอบผ่าน REST API ว่า Excerpt แสดงผลถูกต้อง
# เปิด URL นี้ในเบราว์เซอร์ (แทน 1 ด้วย ID โพสต์จริง):
https://yoursite.com/wp-json/wp/v2/posts/1?_fields=excerpt

# 4. ดู Excerpt ทุกโพสต์พร้อมกัน
https://yoursite.com/wp-json/wp/v2/posts?_fields=id,title,excerpt&per_page=5

# 5. ตรวจสอบ RSS Feed ว่าแสดงแค่ Excerpt ไม่ใช่ Full Content
https://yoursite.com/feed/

แก้ปัญหาที่พบบ่อย

Error: "Excerpt ไม่แสดงในหน้า Archive"

สาเหตุมักเกิดจาก Theme ใช้ the_content() แทน the_excerpt() ใน archive.php ให้เปิด Appearance > Theme Editor > archive.php (หรือ index.php) ค้นหา the_content() แล้วเปลี่ยนเป็น the_excerpt() ถ้าไม่อยากแก้ไฟล์ Theme ให้ใช้ปลั๊กอิน Advanced Excerpt แทน

Error: "Read More text แสดงเป็น […] แทนที่จะเป็นปุ่ม"

เกิดจาก filter excerpt_more ยังไม่ถูก override หรือมี Plugin อื่นมา override ทีหลัง ให้ตรวจสอบว่าโค้ดใน functions.php ใช้ priority สูง (เช่น 999) และตรวจว่าไม่มี Plugin อื่น (เช่น Yoast SEO หรือ Elementor) ที่แทรกแซง filter นี้

// ใช้ priority 999 เพื่อให้ override plugin อื่น
add_filter( 'excerpt_more', 'mytheme_excerpt_more', 999 );

Error: "Excerpt ภาษาไทยตัดกลางคำหรือแสดงผลเป็น ???"

ปัญหานี้เกิดจากการตัดข้อความโดยไม่คำนึงถึง Multibyte Character ของภาษาไทย ให้ใช้ mb_substr() แทน substr() เสมอ และตรวจสอบว่า PHP ของ Hosting รองรับ mbstring extension (cPanel Hosting ทั่วไปรองรับอยู่แล้ว)

Error: "Excerpt แสดง HTML tags เช่น <p> หรือ <strong> โผล่มาด้วย"

เกิดจาก Theme เรียก get_the_excerpt() แล้ว echo ออกมาโดยตรงโดยไม่ผ่าน strip_tags() หรือ the_excerpt() (ซึ่ง WordPress จัดการ strip tags ให้แล้ว) ให้ใช้ the_excerpt() แทน หรือผ่าน strip_tags( get_the_excerpt() )

Error: "More Tag (<!--more-->) ไม่ทำงาน แสดงเนื้อหาทั้งหมดอยู่ดี"

ตรวจสอบว่า Template ที่ใช้เรียก the_content() ไม่ใช่ the_excerpt() เพราะ More Tag ทำงานกับ the_content() เท่านั้น นอกจากนี้ให้ตรวจว่าอยู่ในหน้า Archive หรือ Loop (More Tag ไม่ทำงานในหน้า Single Post)

คำถามที่พบบ่อย

Q: Excerpt กับ Meta Description ต่างกันอย่างไร?

A: Excerpt คือข้อความสรุปที่แสดงในหน้า Archive และ RSS Feed ภายในเว็บไซต์ ส่วน Meta Description คือข้อความที่แสดงใน Google Search Results ทั้งสองอย่างควรเขียนให้น่าสนใจและกระชับ แต่ SEO Plugin เช่น Yoast SEO จะใช้ Excerpt มาเป็น Meta Description อัตโนมัติถ้าไม่ได้กรอก Meta Description ไว้ต่างหาก

Q: ควรกำหนดความยาว Excerpt เป็นกี่คำ หรือกี่ตัวอักษรสำหรับภาษาไทย?

A: สำหรับภาษาไทย แนะนำกำหนดที่ประมาณ 150-200 ตัวอักษร (ไม่ใช่คำ) ซึ่งเพียงพอสำหรับสรุปใจความสำคัญโดยไม่ยาวเกินไป ถ้าใช้ excerpt_length (หน่วยคำ) ให้ตั้งที่ 20-30 แต่สำหรับภาษาไทยควรใช้ Manual Excerpt หรือ mb_substr ดีกว่า

Q: ถ้าใช้ Page Builder เช่น Elementor จะแก้ Excerpt ได้อย่างไร?

A: ถ้าใช้ Elementor Widget "Posts" หรือ "Archive Posts" จะมีตัวเลือก Excerpt Length ภายใน Widget Settings ได้เลย โดยไม่ต้องแก้ functions.php นอกจากนี้ยังตั้ง Read More text และสไตล์ปุ่มได้ภายใน Elementor UI ทำให้สะดวกกว่าการแก้โค้ด