วิธีเพิ่มลิงค์ถัดไป / ก่อนหน้าใน WordPress (คู่มือขั้นสูง)

คุณต้องการเพิ่มลิงค์ถัดไป / ก่อนหน้าใน WordPress หรือไม่?

ลิงก์ถัดไปและก่อนหน้าเป็นลิงก์แบบไดนามิกที่อนุญาตให้ผู้ใช้ดูโพสต์ถัดไปหรือก่อนหน้า

ในบทความนี้ เราจะแสดงวิธีเพิ่มลิงก์ถัดไป/ก่อนหน้าใน WordPress อย่างง่ายดาย และวิธีใช้ประโยชน์สูงสุดจากลิงก์เหล่านี้

ลิงค์ถัดไป / ก่อนหน้าใน WordPress คืออะไร?

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

ตามค่าเริ่มต้น บล็อกโพสต์ WordPress จะแสดงตามลำดับเวลาย้อนกลับ (โพสต์ที่ใหม่กว่าก่อน)

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

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

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

ที่ถูกกล่าวว่า มาดูวิธีการเพิ่มลิงก์ถัดไปและก่อนหน้าใน WordPress อย่างง่ายดาย

ต่อไปนี้เป็นรายการหัวข้อที่เราจะกล่าวถึงในบทความนี้

• การเพิ่มลิงค์ถัดไป / ก่อนหน้าไปยัง WordPress โดยใช้ Plugin
• การเพิ่มลิงค์ถัดไป / ก่อนหน้าไปยังธีม WordPress
• การจัดแต่งลิงก์ถัดไป / ก่อนหน้าใน WordPress
• การเพิ่มลิงค์ถัดไป / ก่อนหน้าไปยังเพจ
• การเพิ่มลิงค์ถัดไป / ก่อนหน้าด้วยภาพขนาดย่อ
• การลบลิงค์ถัดไป / ก่อนหน้าใน WordPress

การเพิ่มลิงค์ถัดไป / ก่อนหน้าไปยัง WordPress โดยใช้ Plugin

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

ขั้นแรก คุณต้องติดตั้งและเปิดใช้งานปลั๊กอิน CBX Next Previous Article สำหรับรายละเอียดเพิ่มเติม โปรดดูคำแนะนำทีละขั้นตอนเกี่ยวกับวิธีการติดตั้งปลั๊กอิน WordPress

เมื่อเปิดใช้งาน คุณต้องไปที่หน้าการ ตั้งค่า » CBX Next Previous จากที่นี่ คุณสามารถเลือกตำแหน่งที่คุณต้องการให้แสดงลิงก์ถัดไปและก่อนหน้าในเว็บไซต์ของคุณ

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

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

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

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

จากที่นี่ คุณต้องเลือกอนุกรมวิธานที่คุณต้องการใช้เพื่อเลือกลิงก์ถัดไปและก่อนหน้า

ปลั๊กอินยังช่วยให้คุณติดตามการคลิกโดยใช้ Google Analytics ได้อีกด้วย หากต้องการใช้คุณลักษณะนี้ คุณจะต้องติดตั้ง Google Analytics ใน WordPress ก่อน

หลังจากนั้น สลับไปที่แท็บ Google Analytics ในการตั้งค่าปลั๊กอินและเปิดใช้งานตัวเลือกการติดตามการคลิก

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

ตอนนี้คุณสามารถเยี่ยมชมเว็บไซต์ WordPress ของคุณเพื่อดูการทำงานของลิงก์ถัดไป/ก่อนหน้า

วิธีนี้ง่ายกว่าแต่ไม่ได้ให้ความยืดหยุ่นมากนัก ตัวอย่างเช่น เวอร์ชันฟรีจะไม่แสดงชื่อโพสต์ถัดไปหรือก่อนหน้า

หากคุณต้องการความยืดหยุ่นมากกว่านี้ โปรดอ่านต่อไป

การเพิ่มลิงค์ถัดไป / ก่อนหน้าไปยังธีม WordPress

สำหรับวิธีนี้ คุณจะต้องแก้ไขไฟล์ธีม WordPress หากคุณยังไม่เคยทำมาก่อน ให้ดูคำแนะนำเกี่ยวกับวิธีการคัดลอกและวางโค้ดบน WordPress

ถัดไป คุณจะต้องเชื่อมต่อกับเว็บไซต์ WordPress ของคุณโดยใช้ไคลเอนต์ FTP หรือโดยใช้แอพตัวจัดการไฟล์ในแผงควบคุมโฮสติ้ง WordPress ของคุณ

เมื่อคุณเชื่อมต่อแล้ว คุณต้องไปที่ /wp-content/themes/your-current-theme/ โฟลเดอร์

ตอนนี้ คุณจะต้องค้นหาไฟล์ single.php นี่คือไฟล์ที่รับผิดชอบในการแสดงรายการโพสต์เดียวบนเว็บไซต์ของคุณ

ธีม WordPress บางชุดอาจอ้างอิงถึงไฟล์อื่นๆ ภายในไฟล์ single.php ไฟล์เหล่านี้เรียกว่าส่วนเทมเพลตและอยู่ในโฟลเดอร์ส่วนเทมเพลตของธีม WordPress ของคุณ

สำหรับรายละเอียดเพิ่มเติม โปรดดูบทความเกี่ยวกับไฟล์ที่จะแก้ไขในธีม WordPress

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

<?php the_post_navigation(); ?> 

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

แท็กเทมเพลตด้านบนจะแสดงลิงก์ไปยังโพสต์ถัดไปและก่อนหน้าโดยมีชื่อโพสต์เป็น anchor text ไม่ได้บอกว่านี่คือลิงค์ไปยังบทความถัดไปและก่อนหน้า

มาเปลี่ยนแปลงสิ่งนี้เล็กน้อยและให้บริบทแก่ผู้ใช้เกี่ยวกับลิงก์เหล่านี้ เราจะดำเนินการนี้โดยเพิ่มพารามิเตอร์ที่มีอยู่สำหรับแท็กเทมเพลต the_post_navigation

เพียงแทนที่โค้ดด้านบนด้วยสิ่งต่อไปนี้:

<?php the_post_navigation( array(
 'prev_text'  => __( 'Previous Article: %title' ),
 'next_text'  => __( 'Next Article: %title' ),
 ) );
?>

ตอนนี้คุณสามารถบันทึกการเปลี่ยนแปลงและดูตัวอย่างเว็บไซต์ของคุณได้แล้ว

นี่คือลักษณะที่ปรากฏบนเว็บไซต์ทดสอบของเรา:

คุณยังสามารถใช้อักขระพิเศษและลูกศรร่วมกับชื่อโพสต์ถัดไปและก่อนหน้า

เพียงแทนที่รหัสด้วยสิ่งต่อไปนี้:

<?php the_post_navigation( array(
 'prev_text'  => __( '← %title' ),
 'next_text'  => __( '%title →' ),
 ) );
?>

นี่คือลักษณะของโค้ดนี้บนเว็บไซต์ทดสอบของเรา:

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

คุณสามารถทำได้โดยแสดงลิงก์ถัดไปและก่อนหน้าจากหมวดหมู่หรือแท็กเดียวกัน

<?php the_post_navigation( array(
 'prev_text'  => __( '← %title' ),
 'next_text'  => __( '%title →' ),
 'in_same_term' => true, 
 'taxonomy'	=> __( 'category' ),
 ) );
?>

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

การจัดแต่งลิงก์ถัดไป / ก่อนหน้าใน WordPress

ตอนนี้เราได้เรียนรู้วิธีเพิ่มลิงก์ถัดไป/ก่อนหน้าใน WordPress แล้ว มาดูวิธีจัดรูปแบบพวกมันให้เหมาะสมกัน

ตามค่าเริ่มต้น WordPress จะเพิ่มคลาส CSS เริ่มต้นหลายคลาสให้กับลิงก์การนำทางโพสต์โดยอัตโนมัติ คุณสามารถใช้คลาส CSS เหล่านี้ในธีม WordPress เพื่อจัดรูปแบบลิงก์เหล่านี้

นี่คือ CSS พื้นฐานบางส่วนที่คุณสามารถเพิ่มลงในธีมของคุณได้

.nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
}

.nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	flex: 1 0 50%;
}

.nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	text-align: end;
	flex: 1 0 50%;
}

CSS พื้นฐานนี้จะแสดงลิงก์ถัดไปและก่อนหน้าที่อยู่ติดกัน แต่อยู่คนละด้านของบรรทัดเดียวกัน

คุณยังสามารถทำให้ลิงก์การนำทางของคุณโดดเด่นได้ด้วยการเพิ่มสีพื้นหลัง เอฟเฟกต์โฮเวอร์ และอื่นๆ

นี่คือตัวอย่างโค้ด CSS บางส่วนที่คุณสามารถใช้เป็นจุดเริ่มต้นได้

.post-navigation {
background-color:#f3f9ff;
padding:0px;
}
.nav-previous, .nav-next{
padding:10px;
font-weight:bold
}
.nav-previous:hover,.nav-next:hover {
background-color:#0170b9;
}
.nav-previous:hover a:link ,.nav-next:hover a:link {
color:#fff;
}

โค้ดนี้จัดรูปแบบข้อความลิงก์และเพิ่มสีพื้นหลังและเอฟเฟกต์โฮเวอร์เพื่อทำให้ลิงก์ถัดไปและก่อนหน้ามีความโดดเด่นมากขึ้น

การเพิ่มลิงค์ถัดไป / ก่อนหน้าไปยังหน้า WordPress

โดยปกติ ลิงก์การนำทางโพสต์จะใช้สำหรับโพสต์บล็อกใน WordPress นั่นเป็นเพราะว่ารายการเหล่านั้นถูกตีพิมพ์ตามลำดับเวลาย้อนกลับ

ในทางกลับกัน หน้า WordPress มักจะไม่เผยแพร่ตามลำดับเวลา สำหรับรายละเอียดเพิ่มเติม โปรดดูคำแนะนำเกี่ยวกับความแตกต่างระหว่างบทความและหน้าใน WordPress

อย่างไรก็ตาม ผู้ใช้บางรายอาจต้องแสดงการนำทางของหน้าเพื่อให้ผู้ใช้สามารถค้นหาหน้าถัดไปได้อย่างง่ายดาย

โชคดีที่คุณสามารถใช้โค้ดเดียวกับที่เราใช้ก่อนหน้านี้สำหรับหน้าต่างๆ อย่างไรก็ตาม คุณจะต้องเพิ่มโค้ดในเทมเพลต page.php

<?php the_post_navigation( array(
  'prev_text'   => __( '← %title' ),
  'next_text'   => __( '%title →' ),
   ) );
?>

นี่คือลักษณะที่ปรากฏบนเว็บไซต์สาธิตของเรา:

การเพิ่มลิงค์ถัดไป / ก่อนหน้าใน WordPress ด้วยรูปขนาดย่อ

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

มาเพิ่มลิงก์ถัดไปและก่อนหน้าด้วยภาพขนาดย่อของโพสต์หรือรูปภาพเด่นข้างๆ กัน

ขั้นแรก คุณต้องเพิ่มโค้ดต่อไปนี้ลงในไฟล์ functions.php ของธีมหรือปลั๊กอินเฉพาะไซต์

function wpb_posts_nav(){
    $next_post = get_next_post();
    $prev_post = get_previous_post();
     
    if ( $next_post || $prev_post ) : ?>
     
        <div class="wpb-posts-nav">
            <div>
                <?php if ( ! empty( $prev_post ) ) : ?>
                    <a href="<?php echo get_permalink( $prev_post ); ?>">
                        <div>
                            <div class="wpb-posts-nav__thumbnail wpb-posts-nav__prev">
                                <?php echo get_the_post_thumbnail( $prev_post, [ 100, 100 ] ); ?>
                            </div>
                        </div>
                        <div>
                            <strong>
                                <svg viewBox="0 0 24 24" width="24" height="24"><path d="M13.775,18.707,8.482,13.414a2,2,0,0,1,0-2.828l5.293-5.293,1.414,1.414L9.9,12l5.293,5.293Z"/></svg>
                                <?php _e( 'Previous article', 'textdomain' ) ?>
                            </strong>
                            <h4><?php echo get_the_title( $prev_post ); ?></h4>
                        </div>
                    </a>
                <?php endif; ?>
            </div>
            <div>
                <?php if ( ! empty( $next_post ) ) : ?>
                    <a href="<?php echo get_permalink( $next_post ); ?>">
                        <div>
                            <strong>
                                <?php _e( 'Next article', 'textdomain' ) ?>
                                <svg viewBox="0 0 24 24" width="24" height="24"><path d="M10.811,18.707,9.4,17.293,14.689,12,9.4,6.707l1.415-1.414L16.1,10.586a2,2,0,0,1,0,2.828Z"/></svg>
                            </strong>
                            <h4><?php echo get_the_title( $next_post ); ?></h4>
                        </div>
                        <div>
                            <div class="wpb-posts-nav__thumbnail wpb-posts-nav__next">
                                <?php echo get_the_post_thumbnail( $next_post, [ 100, 100 ] ); ?>
                            </div>
                        </div>
                    </a>
                <?php endif; ?>
            </div>
        </div> <!-- .wpb-posts-nav -->
     
    <?php endif;
}

รหัสนี้สร้างฟังก์ชันที่แสดงโพสต์ถัดไปและก่อนหน้าด้วยรูปภาพเด่นหรือรูปขนาดย่อของโพสต์

ถัดไป คุณต้องเพิ่ม wpb_posts_nav() ให้กับไฟล์ single.php ของธีมที่คุณต้องการแสดงลิงก์

หากธีมของคุณมีลิงก์ถัดไปและก่อนหน้าแล้ว คุณอาจต้องการค้นหาบรรทัดที่มีฟังก์ชัน the_post_navigation() และลบออก

เพิ่มรหัสต่อไปนี้เพื่อแสดงลิงก์ถัดไปและก่อนหน้าที่กำหนดเองของคุณ

<?php wpb_posts_nav(); ?>

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

ตอนนี้ คุณอาจสังเกตเห็นว่าลิงก์เหล่านี้ดูไม่ค่อยสะอาดนัก

มาเปลี่ยนโดยเพิ่ม CSS ที่กำหนดเองเพื่อจัดรูปแบบ

.wpb-posts-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 50px;
    align-items: center;
    max-width: 1200px;
    margin: 100px auto;
}
 
.wpb-posts-nav a {
    display: grid;
    grid-gap: 20px;
    align-items: center;
}
 
.wpb-posts-nav h4,
.wpb-posts-nav strong {
    margin: 0;
}
 
.wpb-posts-nav a svg {
    display: inline-block;
    margin: 0;
    vertical-align: middle;
}
 
.wpb-posts-nav > div:nth-child(1) a {
    grid-template-columns: 100px 1fr;
    text-align: left;
}
 
.wpb-posts-nav > div:nth-child(2) a {
    grid-template-columns: 1fr 100px;
    text-align: right;
}
 
.wpb-posts-nav__thumbnail {
    display: block;
    margin: 0;
}
 
.wpb-posts-nav__thumbnail img {
    border-radius: 10px;
}

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

นี่คือลักษณะที่ปรากฏบนเว็บไซต์ทดสอบของเรา:

สำหรับรายละเอียดเพิ่มเติม คุณสามารถดูคำแนะนำของเราเกี่ยวกับวิธีเพิ่มภาพขนาดย่อในลิงก์โพสต์ก่อนหน้าและถัดไป

โบนัส: ลบลิงก์ถัดไปและก่อนหน้าใน WordPress

ผู้ใช้บางคนอาจต้องการลบลิงก์ถัดไปและก่อนหน้าใน WordPress

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

มีสองวิธีในการลบลิงก์ถัดไปและลิงก์ก่อนหน้าใน WordPress

วิธีที่ 1 ลบโค้ดในธีม WordPress ของคุณ

หากต้องการลบลิงก์ถัดไปและก่อนหน้าใน WordPress คุณจะต้องลบโค้ดที่แสดงลิงก์ในธีม WordPress ของคุณ

ปัญหาของวิธีนี้คือ ทันทีที่คุณอัปเดตธีม โค้ดที่ถูกลบจะกลับมา

เพื่อหลีกเลี่ยงปัญหานี้ คุณจะต้องสร้างธีมย่อย

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

โดยปกติแล้วจะพบได้ในเทมเพลต single.php หรือ content-single.php

โดยพื้นฐานแล้ว คุณจะต้องมองหาโค้ดที่มีฟังก์ชันต่อไปนี้

<?php the_post_navigation() ?> 

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

the_post_navigation(
				array(
					'prev_text' => '<span class="nav-subtitle">' . esc_html__( 'Previous:', 'mytheme' ) . '</span> <span class="nav-title">%title</span>',
					'next_text' => '<span class="nav-subtitle">' . esc_html__( 'Next:', 'mytheme' ) . '</span> <span class="nav-title">%title</span>',
				)
			);

หากคุณกำลังใช้ธีมลูก คุณต้องทำซ้ำเทมเพลตนี้ในธีมย่อยของคุณ จากนั้นลบบรรทัดที่ใช้แสดงลิงก์ถัดไปหรือก่อนหน้า

หากคุณต้องการเพียงแค่ลบมันในธีมหลักของคุณ คุณก็สามารถทำได้เช่นกัน

การลบรหัสจะหยุด WordPress ไม่ให้แสดงลิงก์ถัดไปและก่อนหน้า

วิธีที่ 2. ซ่อนลิงก์โพสต์ถัดไปและก่อนหน้า

วิธีนี้ไม่ได้ลบลิงก์ถัดไปและก่อนหน้าออกจริงๆ แต่มันทำให้ผู้อ่านมนุษย์มองไม่เห็น

เพียงเพิ่ม Custom CSS ต่อไปนี้ในธีม WordPress ของคุณ

nav.navigation.post-navigation {
    display: none;
}

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

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

หากคุณชอบบทความนี้ โปรดสมัครรับข้อมูลจากบทแนะนำวิดีโอ YouTube Channel สำหรับ WordPress คุณสามารถหาเราได้ที่ Twitter และ Facebook