Your cart is currently empty!
วิธีทำลิงค์ Pagination (หน้า 1, 2, 3) เองแบบไม่ต้องใช้ปลั๊กอินใน WordPress
การทำธีมทุกธีมจะต้องมีลิงค์หน้า 1, 2, 3 หรือที่เรียกกันว่า Pagination นั่นเองครับ แต่ Pagination แบบปกติของ WordPress จะมีลิงค์แค่ Newer Post, Older Post เท่านั้น ไม่มีแบ่งหน้าเป็น 1, 2, 3, … ที่เราต้องการ
ปกติจะใช้ปลั๊กอิน WP PageNavi มาช่วยครับ แต่วันนี้ตอนทำธีมอยู่ก็เลยอยากหาดูว่ามีวิธีที่ไม่ต้องใช้ปลั๊กอินช่วยเลยมั้ย เพราะต้องเอามาตกแต่ง HTML/CSS ตามที่เราเขียนมา ซึ่งทำให้เสียเวลาเข้าไปอีก
เลยเสิร์จมาเจอโค้ดของ SGWordPress กับ Kriesi (คนขายธีมอันดับ 1 ใน Themeforest) ซึ่งโค้ดต้นแบบเป็นของ Kriesi แต่ SGWordPress เอามาแก้ไขให้แสดงผลได้อลังการมากขึ้น
WordPress Pagination แบบ Minimal
สำหรับธีมที่ผมกำลังทำอยู่ใช้โค้ดง่าย ๆ ของ Kriesi พอครับ ซึ่งจะมีหน้าตาออกมาแบบนี้
หน้าตาโอเครับได้ครับ ซึ่งจริง ๆ ก็ต้องการแค่นี้แหละ มาดูโค้ดกันเลย (ใส่ใน functions.php)
function kriesi_pagination($pages = '', $range = 2) { $showitems = ($range * 2)+1; global $paged; if(empty($paged)) $paged = 1; if($pages == '') { global $wp_query; $pages = $wp_query->max_num_pages; if(!$pages) { $pages = 1; } } if(1 != $pages) { echo "<div class='pagination'>"; if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<a href='".get_pagenum_link(1)."'>«</a>"; if($paged > 1 && $showitems < $pages) echo "<a href='".get_pagenum_link($paged - 1)."'>‹</a>"; for ($i=1; $i <= $pages; $i++) { if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems )) { echo ($paged == $i)? "<span class='current'>".$i."</span>":"<a href='".get_pagenum_link($i)."' class='inactive' >".$i."</a>"; } } if ($paged < $pages && $showitems < $pages) echo "<a href='".get_pagenum_link($paged + 1)."'>›</a>"; if ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages) echo "<a href='".get_pagenum_link($pages)."'>»</a>"; echo "</div>\n"; } }
วิธีการใช้งานก็ไม่มีอะไรมากครับ ใส่โค้ดด้านล่างนี้เข้าไปในไฟล์ Template ที่เราต้องการแสดง (เช่น ผมใส่ใน home.php เพราะตั้งหน้า Post Page แล้วเทมเพลตนี้จะกลายเป็นหน้า Archive บลอคอัตโนมัติ)
<?php kriesi_pagination(); ?>
เท่านี้ก็จะได้ Pagination มาใส่ในหน้าเว็บแล้ว ถ้าอยากปรับแก้ HTML/CSS ก็แก้ได้ใน function ที่เราใส่ไปเลยครับ
WordPress Pagination แบบ Enhanced
ส่วนถ้าใครอยากได้หน้าตาแบบด้านล่าง คือมีพวก Page X of Y เข้ามาให้ด้วย
ก็ทำได้โดยใส่โค้ดนี้ใน functions.php แทน
function pagination($pages = '', $range = 4) { $showitems = ($range * 2)+1; global $paged; if(empty($paged)) $paged = 1; if($pages == '') { global $wp_query; $pages = $wp_query->max_num_pages; if(!$pages) { $pages = 1; } } if(1 != $pages) { echo "<div class=\"pagination\"><span>Page ".$paged." of ".$pages."</span>"; if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<a href='".get_pagenum_link(1)."'>« First</a>"; if($paged > 1 && $showitems < $pages) echo "<a href='".get_pagenum_link($paged - 1)."'>‹ Previous</a>"; for ($i=1; $i <= $pages; $i++) { if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems )) { echo ($paged == $i)? "<span class=\"current\">".$i."</span>":"<a href='".get_pagenum_link($i)."' class=\"inactive\">".$i."</a>"; } } if ($paged < $pages && $showitems < $pages) echo "<a href=\"".get_pagenum_link($paged + 1)."\">Next ›</a>"; if ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages) echo "<a href='".get_pagenum_link($pages)."'>Last »</a>"; echo "</div>\n"; } }
และตกแต่งด้วย CSS ด้านล่างนี้
.pagination { clear:both; padding:20px 0; position:relative; font-size:11px; line-height:13px; } .pagination span, .pagination a { display:block; float:left; margin: 2px 2px 2px 0; padding:6px 9px 5px 9px; text-decoration:none; width:auto; color:#fff; background: #555; } .pagination a:hover{ color:#fff; background: #3279BB; } .pagination .current{ padding:6px 9px 5px 9px; background: #3279BB; color:#fff; }
ส่วนการเรียกใช้ ก็ใส่โค้ดด้านล่างลงใน Template File ที่ต้องการ
<?php if (function_exists("pagination")) { pagination($additional_loop->max_num_pages); } ?>
Credit: SGWordPress, Kriesi
by
Tags:
Leave a Reply