วิธีเพิ่มการแบ่งหน้าตัวเลขในธีม WordPress ของคุณ

คุณต้องการเพิ่มการแบ่งหน้าตัวเลขในธีม WordPress ของคุณหรือไม่?

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

ในบทความนี้ เราจะแสดงวิธีเพิ่มเลขหน้าในธีม WordPress ของคุณ

เหตุใดจึงเพิ่มการแบ่งหน้าเป็นตัวเลขในธีม WordPress ของคุณ

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

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

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

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

นั่นคือที่มาของการแบ่งหน้าตัวเลข

แทนที่จะแสดงลิงก์ 'เก่ากว่า' และ 'ใหม่กว่า' การแบ่งหน้าแบบตัวเลขจะแสดงชุดตัวเลขที่ช่วยให้ผู้เยี่ยมชมข้ามไปยังหน้าเฉพาะในที่เก็บถาวรได้

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

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

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

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

หากธีม WordPress ของคุณมีการแบ่งหน้าเป็น 'เก่ากว่า' และ 'ใหม่กว่า' เราขอแนะนำให้แทนที่ด้วยการแบ่งหน้าเป็นตัวเลขเสมอ

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

• วิธีที่ 1. วิธีเพิ่มการแบ่งหน้าตัวเลขใน WordPress โดยใช้ WP-PageNavi

• วิธีที่ 2. วิธีเพิ่มการแบ่งหน้าตัวเลขในธีม WordPress ของคุณด้วยตนเอง

วิธีที่ 1. วิธีเพิ่มการแบ่งหน้าตัวเลขใน WordPress โดยใช้ WP-PageNavi

วิธีที่ง่ายที่สุดในการเพิ่มการแบ่งหน้าตัวเลขใน WordPress คือการใช้ปลั๊กอิน WP-PageNavi

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

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

หลังจากเปิดใช้งานปลั๊กอินแล้ว ให้ไปที่ การตั้งค่า » PageNavi เพื่อกำหนดการตั้งค่าปลั๊กอิน

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

คุณยังสามารถปรับแต่งลิงค์การแบ่งหน้าตัวเลขได้

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

ค่านี้ตั้งไว้ที่ 5 ตามค่าเริ่มต้น ซึ่งหมายความว่า WP-PageNavi จะแสดงลิงก์โดยตรงไปยัง 5 หน้า

ดังที่คุณเห็นในภาพหน้าจอด้านล่าง หากคุณอยู่ในหน้าที่ 4 คุณจะเห็นลิงก์ไปยังหน้าที่ 2, 3, 4, 5 และ 6

คุณอาจต้องการแสดงหน้ามากขึ้นหรือน้อยลง หากต้องการเปลี่ยนแปลง เพียงพิมพ์หมายเลขใหม่ลงในช่อง "จำนวนหน้าที่จะแสดง"

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

ตามค่าเริ่มต้น ปลั๊กอินจะแสดงตัวเลขที่ใหญ่กว่าสามตัวซึ่งเพิ่มขึ้นทีละ 10 ในแต่ละครั้ง ตัวอย่างเช่น 10, 20 และ 30

ต้องการใช้ช่วงเวลาอื่น เช่น 5 หรือ 20 หรือไม่ จากนั้นเพียงพิมพ์ช่วงเวลาใหม่ลงในช่อง "แสดงหมายเลขหน้าใหญ่ขึ้นในหลายรายการ"

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

หากคุณได้ทำการเปลี่ยนแปลงการตั้งค่า WP-PageNavi อย่าลืมเลื่อนไปที่ด้านล่างของหน้าและคลิกที่ปุ่มบันทึกการเปลี่ยนแปลง

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

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

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

เมื่อคุณเชื่อมต่อกับบัญชีโฮสติ้ง WordPress ผ่าน FTP คุณก็พร้อมที่จะแก้ไขโค้ดธีม WordPress ของคุณแล้ว

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

เพียงเปิดไฟล์เหล่านี้แล้วค้นหาแท็ก Previous_posts_link และ next_posts_link

หากคุณพบแท็กเหล่านี้ ให้แทนที่แท็กเหล่านั้นด้วยข้อมูลโค้ดต่อไปนี้:

<?php wp_pagenavi(); ?>

บางธีมอาจไม่มีแท็ก Previous_posts_link หรือ next_posts_link

หากคุณไม่พบแท็กเหล่านี้ในธีมของคุณ ให้มองหา the_posts_navigation แทน ตัวอย่างเช่น คุณจะพบสิ่งต่อไปนี้ในไฟล์ archive.php ของธีม Twenty Twenty-One:

<?php /*twenty_twenty_one_the_posts_navigation();*/ 

จากนั้นคุณสามารถแทนที่บรรทัดนี้ด้วยข้อมูลโค้ดต่อไปนี้:

<?php wp_pagenavi(); ?>

หลังจากทำการเปลี่ยนแปลงเหล่านี้แล้ว ให้บันทึกแล้วปิดไฟล์ธีม WordPress ที่เปิดอยู่

ตอนนี้ หากคุณเยี่ยมชมหน้าเก็บถาวร WordPress ของคุณ คุณจะเห็นการแบ่งหน้าตัวเลขใหม่บนเว็บไซต์ของคุณ

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

คุณสามารถทำได้โดยแก้ไขโค้ดของปลั๊กอิน

อย่างไรก็ตาม เราขอแนะนำให้วางโค้ด WP-PageNavi ลงในไฟล์ style.css ของธีมของคุณ จากนั้นทำการเปลี่ยนแปลงภายในไฟล์ธีม ซึ่งหมายความว่าคุณจะไม่สูญเสียการปรับแต่งของคุณเมื่อคุณอัปเดตปลั๊กอิน WP-PageNavi

หากต้องการคัดลอกโค้ดปลั๊กอินของคุณ ให้ไปที่ การตั้งค่า » PageNavi จากนั้นคุณจะพบส่วน "ใช้ pagenavi-css.css" และคลิกที่ปุ่มตัวเลือก "ไม่" ข้างๆ

อย่าลืมคลิกที่ปุ่ม "บันทึกการเปลี่ยนแปลง" เพื่อบันทึกการเปลี่ยนแปลงของคุณ

จากนั้นไปที่ ปลั๊กอิน » ตัวแก้ไขไฟล์ปลั๊กอิน

จากนั้นคุณสามารถเปิดเมนูแบบเลื่อนลง 'เลือกปลั๊กอินเพื่อแก้ไข' และเลือก 'WP-Page Navi' หลังจากนั้น คุณพร้อมที่จะคลิกที่ 'เลือก'

ในเมนูด้านขวามือ ให้คลิกที่ไฟล์ pagenavi-css.css

จากนั้นคัดลอกโค้ดทั้งหมดในไฟล์นี้ได้เลย

จากนั้น เพียงไปที่ ลักษณะที่ปรากฏ » ตัวแก้ไขไฟล์ธีม

ในเมนูด้านขวามือ คลิกไฟล์ style.css ของธีมของคุณ

ตอนนี้คุณสามารถวางโค้ด pagenavi-css.css ลงในไฟล์ style.css ของธีม และเริ่มทำการเปลี่ยนแปลงได้

ลองดูตัวอย่าง. นี่คือรหัสการแบ่งหน้าตัวเลขเวอร์ชันแก้ไขที่คุณสามารถเพิ่มลงในไฟล์ style.css ของธีมของคุณได้:

wp-pagenavi {
    clear: both;
}
 
.wp-pagenavi a, .wp-pagenavi span {
    color: #FFF;
    text-decoration: none;
    background-color:#6FB7E9;
    border: 1px solid #B2D1E5;
    padding: 5px 5px;
    margin: 2px;
}
 
.wp-pagenavi a:hover, .wp-pagenavi span.current {
    border-color: #E9F2F9;
    background-color:#6FB7E9;
}
 
.wp-pagenavi span.current {
    font-weight: bold;
    background-color:#3C8DC5;
}

ในภาพต่อไปนี้ คุณจะเห็นว่าการแบ่งหน้าแบบตัวเลขนี้จะมีลักษณะอย่างไรในไซต์ของคุณ

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

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

วิธีที่ 2. วิธีเพิ่มการแบ่งหน้าตัวเลขในธีม WordPress ของคุณด้วยตนเอง

อีกทางเลือกหนึ่งคือการเพิ่มการแบ่งหน้าตัวเลขในธีม WordPress ของคุณด้วยตนเองโดยใช้โค้ด

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

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

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

เมื่อคุณเชื่อมต่อกับเว็บไซต์ของคุณสำเร็จแล้ว ให้เปิดไฟล์ function.php และเพิ่มโค้ดต่อไปนี้:

function wpbeginner_numeric_posts_nav() {
 
    if( is_singular() )
        return;
 
    global $wp_query;
 
    /** Stop execution if there's only 1 page */
    if( $wp_query->max_num_pages <= 1 )
        return;
 
    $paged = get_query_var( 'paged' ) ? absint( get_query_var( 'paged' ) ) : 1;
    $max   = intval( $wp_query->max_num_pages );
 
    /** Add current page to the array */
    if ( $paged >= 1 )
        $links[] = $paged;
 
    /** Add the pages around the current page to the array */
    if ( $paged >= 3 ) {
        $links[] = $paged - 1;
        $links[] = $paged - 2;
    }
 
    if ( ( $paged + 2 ) <= $max ) {
        $links[] = $paged + 2;
        $links[] = $paged + 1;
    }
 
    echo '<div class="navigation"><ul>' . "\n";
 
    /** Previous Post Link */
    if ( get_previous_posts_link() )
        printf( '<li>%s</li>' . "\n", get_previous_posts_link() );
 
    /** Link to first page, plus ellipses if necessary */
    if ( ! in_array( 1, $links ) ) {
        $class = 1 == $paged ? ' class="active"' : '';
 
        printf( '<li%s><a href="%s">%s</a></li>' . "\n", $class, esc_url( get_pagenum_link( 1 ) ), '1' );
 
        if ( ! in_array( 2, $links ) )
            echo '<li>…</li>';
    }
 
    /** Link to current page, plus 2 pages in either direction if necessary */
    sort( $links );
    foreach ( (array) $links as $link ) {
        $class = $paged == $link ? ' class="active"' : '';
        printf( '<li%s><a href="%s">%s</a></li>' . "\n", $class, esc_url( get_pagenum_link( $link ) ), $link );
    }
 
    /** Link to last page, plus ellipses if necessary */
    if ( ! in_array( $max, $links ) ) {
        if ( ! in_array( $max - 1, $links ) )
            echo '<li>…</li>' . "\n";
 
        $class = $paged == $max ? ' class="active"' : '';
        printf( '<li%s><a href="%s">%s</a></li>' . "\n", $class, esc_url( get_pagenum_link( $max ) ), $max );
    }
 
    /** Next Post Link */
    if ( get_next_posts_link() )
        printf( '<li>%s</li>' . "\n", get_next_posts_link() );
 
    echo '</ul></div>' . "\n";
 
}

โค้ดนี้แสดงจำนวนหน้า พร้อมให้คุณแสดงในธีม WordPress ของคุณ

ขั้นตอนต่อไปจะแตกต่างกันไปขึ้นอยู่กับธีมของคุณ

หากธีมของคุณไม่มีรูปแบบการแบ่งหน้าเริ่มต้นอยู่แล้ว คุณสามารถเพิ่มแท็กเทมเพลตต่อไปนี้ใน index.php, archive.php, category.php หรือหน้าอื่นๆ ที่คุณต้องการแสดงการแบ่งหน้าเป็นตัวเลข .

<?php wpbeginner_numeric_posts_nav(); ?>

โปรดทราบว่าตำแหน่งที่คุณเพิ่มโค้ดนี้จะส่งผลต่อตำแหน่งที่แสดงเลขหน้าบนเว็บไซต์ของคุณ

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

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

ในกรณีนี้ คุณจะต้องค้นหาโค้ดการแบ่งหน้าและแทนที่ด้วยโค้ดข้างต้น

ตัวอย่างเช่น Ashe เป็นหนึ่งในธีมบล็อก WordPress ฟรีที่ดีที่สุดและเพิ่มลิงก์การแบ่งหน้า 'หน้าแรก' และ 'หน้าสุดท้าย' ไปยังหน้าเก็บถาวรของคุณแล้ว

หากต้องการแทนที่ลิงก์ในตัวเหล่านี้ด้วยการแบ่งหน้าเป็นตัวเลข คุณต้องแก้ไขไฟล์ templates/grid.php และ templates/blog-pagination.php ของธีม

ในแต่ละไฟล์เหล่านี้ เพียงค้นหาส่วนต่อไปนี้:

<?php get_template_part( 'templates/grid/blog', 'pagination' ); ?>

จากนั้นคุณสามารถแทนที่บรรทัดนี้ด้วยข้อมูลโค้ดต่อไปนี้:

<?php wpbeginner_numeric_posts_nav(); ?>

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

ขั้นตอนต่อไปคือการกำหนดสไตล์ให้กับการแบ่งหน้าตัวเลขที่คุณกำหนดเอง

เพื่อช่วยผู้เยี่ยมชมไปยังส่วนต่างๆ ของไฟล์เก็บถาวร เราจะไฮไลต์หมายเลขหน้าปัจจุบันด้วยสีอื่น ในการดำเนินการนี้ ให้เปิดไฟล์ style.css ของธีมของคุณ จากนั้นวางโค้ดต่อไปนี้ลงในไฟล์นี้:

.navigation li a,
.navigation li a:hover,
.navigation li.active a,
.navigation li.disabled {
    color: #fff;
    text-decoration:none;
}
 
.navigation li {
    display: inline;
}
 
.navigation li a,
.navigation li a:hover,
.navigation li.active a,
.navigation li.disabled {
    background-color: #6FB7E9;
    border-radius: 3px;
    cursor: pointer;
    padding: 12px;
    padding: 0.75rem;
}
 
.navigation li a:hover,
.navigation li.active a {
    background-color: #3C8DC5;
}

หลังจากนั้น เพียงบันทึกการเปลี่ยนแปลงของคุณโดยคลิกที่ปุ่มอัปเดตไฟล์

ตอนนี้หากคุณไปที่หน้าเก็บถาวร คุณจะเห็นการแบ่งหน้าตัวเลขบนเว็บไซต์ของคุณ

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

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