ทำตัวแบ่งหน้า Pagination สำหรับธีม WordPress

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

ดังนั้นในทาง User Experience เราจึงมีแนวคิดว่า เห้ย ต่อไปนะ ถ้าบทความเราเยอะขนาดนี้ก็ให้ทำการแบ่งเป็นหน้าๆ เช่น หน้าละ 10 เรื่อง ถ้าจะดูเรื่องที่ 11 เป็นต้นไปก็คลิกหน้าถัดไป การทำแบบนี้จะทำให้เว็บเราดูเป็นระเบียบมากขึ้น และเป็นมิตรกับผู้ใช้งานด้วย เพราะว่าผู้ใช้งานจะได้หาได้ง่าย (โดยส่วนตัวผมไม่ชอบเว็บที่ infinity scrolling เพราะเนื้อหามันโหลดต่อไปเรื่อยๆ ค้นหาลำบาก รีเฟรชหนึ่งทีต้องกลับมาเริ่มต้นใหม่)

สำหรับการใช้ WordPress ทำตัวแบ่งหน้านั้นมีหลายวิธีครับ เลือกเอาแบบที่สะดวก ซึ่งก็มีทั้งแบบใช้ Plugin ตัวที่ผมแนะนำคับ wp_pagenai ครับ ดีมากๆ การันตีด้วยยอดดาวน์โหลดที่ทะลุ 4 ล้านครั้งไปแล้ว! ผมเองก็ใช้อยู่นะครับ ง่ายดี ไม่ต้องคิดเยอะ ปรับแต่งแป็บเดียวเสร็จ ฮ่าๆ

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

http://codex.wordpress.org/Function_Reference/paginate_links

โดยวิธีการใช้งานทั้งหลายในเว็บ codex อธิบายไว้ละเอียดอยู่แล้วลองอ่านกันดูนะครับ แต่ผมเองก็เจอปัญหาครับ นั่นจึงเป็นที่มาที่ไปของการเขียนบทความนี้

นั่นก็คือเมื่อเขียน Custom Query กำหนดจำนวนโพสต์ที่อยากให้แสดงในแต่ละหน้าเอง ปรากฎว่า มันไม่เวิร์ครับ คลิกแล้วแสดงหน้า 404 Page Not Found บ้าง อะไรบ้าง ผมก็ต่อกรกับมันถึงหนึ่งวันเต็มๆ ก็แก้ไม่ได้ สิโรราบไปก่อน วันต่อมาก็กลับมานั่งวิเคราะห์ทีละจุดว่าต้องเขียนปรับแต่งอย่างไร และก็พบทางสว่าง (สำหรับเคสของผม) และนี่คือสิ่งที่ผมจะมาแบ่งปันนั่นเอง

<?php 


  $paged = ( get_query_var('page') ) ? get_query_var('page') : 1;
  
  $query_args = array(
      'post_type' => 'post',
      'posts_per_page' => 2,
      'paged' => $paged,
      'page' => $paged
    );

  $the_query = new WP_Query( $query_args ); ?>

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

<?php if ( $the_query->have_posts() ) : ?>
   
    <!-- the loop -->
    <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
      <article class="loop">
        <h3><?php the_title(); ?></h3>
        <div class="content">
          <?php the_excerpt(); ?>
        </div>
      </article>
    <?php endwhile; ?>
    <!-- end of the loop -->

แล้วจากนั้นก็จะทำการเอาตัวแบงหน้ามาต่อท้ายครับ ด้วยคำสั่งนี้

<?php
 global $wp_query;
 $url = home_url();

$big = 999999999; // need an unlikely integer

echo paginate_links( array(
	'base' => $url.'/?page=%#%',
	'format' => '?page=%#%',
    'current' => max( 1, get_query_var('paged') ),
    'total' => $the_query->max_num_pages
) );
?>

สิ่งสำคัญที่เป็น Keyword น่าสนใจในกรณีของผมคือ ผมทำการก็อบปี้โค้ดจากเว็บ codex มาใช้งานแต่มันคลิกไปหน้า 2,3,4 ไม่ได้ คือตัวแบ่งหน้าแสดง แต่คลิกแล้วข้อมูลไม่ขึ้น ผมเลยทำการแก้ ‘base’ ใหม่ครับ ให้เป็นไปตามรูปแบบของ url เว็บของผม ยกตัวอย่างเช่น เว็บผมถ้าคลิกหน้าต่อไปมันจะเป็น https://buksohn.com?page=2 แบบนี้ ผมก็แก้ใหม่ให้เป็น
‘base’ => $url.’/?page=”%#%’, ครับ โดย $url เป็นตัวแปรที่ผมสร้างขึ้นมาเก็บตำแหน่งเว็บไซต์ไว้ นั่นก็คือมาจาก $url = home_url(); นั่นเอง

โค้ดทั้งหมด ได้แบบนี้นะครับ

<?php 

  $paged = ( get_query_var('page') ) ? get_query_var('page') : 1;
  
  $query_args = array(
      'post_type' => 'post',
      'posts_per_page' => 3,
      'paged' => $paged,
      'page' => $paged
    );

  $the_query = new WP_Query( $query_args ); ?>
 
  <?php if ( $the_query->have_posts() ) : ?>
   
    <!-- the loop -->
    <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
      <article class="loop">
        <h3><?php the_title(); ?></h3>
        <div class="content">
          <?php the_excerpt(); ?>
        </div>
      </article>
    <?php endwhile; ?>
    <!-- end of the loop -->
 
    <?php
 global $wp_query;
 $wp_query = $the_query;
 $url = home_url();

$big = 999999999; // need an unlikely integer

echo paginate_links( array(
	'base' => $url.'/?page=%#%',
	'format' => '?page=%#%',
    'current' => max( 1, get_query_var('paged') ),
    'total' => $the_query->max_num_pages
) );
?>
 
  <?php wp_reset_postdata(); ?>
 
  <?php else:  ?>
    <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
  <?php endif; ?>

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

• Facebook
• Twitter
• Line