วิธีใช้ WP_Query เพื่อสร้างการแบ่งหน้าใน WordPress
เผยแพร่แล้ว: 2021-08-31วิธีหนึ่งที่มีประสิทธิผลในการเพิ่มการดูหน้าเว็บของเว็บไซต์ของคุณให้มีอัตราตีกลับที่เหมาะสมที่สุดคือการใช้ WP_Query เพื่อสร้างการแบ่งหน้าใน WordPress
ในบทช่วยสอนนี้ เราจะแนะนำคุณผ่านคำแนะนำที่ง่ายต่อการปฏิบัติตามเพื่อเพิ่มวนรอบ WordPress แบบกำหนดเองพร้อมการแบ่งหน้า
WP_Query คืออะไร?
WP_Query เป็นหนึ่งในคลาสที่สำคัญที่สุดใน WordPress เนื่องจากเป็นสิ่งที่ช่วยให้คุณเข้าถึงบันทึก โพสต์ หน้า และประเภทโพสต์ที่กำหนดเองในฐานข้อมูล
ในขณะเดียวกัน นักพัฒนาไม่จำเป็นต้องเขียนคำสั่ง SQL ที่ซับซ้อนกับฐานข้อมูล เพื่อรับข้อมูลที่จำเป็นเกี่ยวกับโพสต์ หน้า หรือประเภทโพสต์ที่กำหนดเอง เพราะ WP_Query จะทำทุกอย่างเพื่อเรา
การแบ่งหน้าใน WordPress คืออะไรและทำไมคุณถึงต้องการ
การแบ่งหน้าเป็นหนึ่งในคุณสมบัติหลักที่ผู้ใช้ WordPress สามารถใช้เพื่อวัตถุประสงค์ที่หลากหลาย การแยกโพสต์ยาวๆ ออกเป็นหลายๆ ส่วนเป็นแนวทางปฏิบัติที่ดี และนำเสนอแต่ละโพสต์ด้วยหน้าใหม่
หากคุณกำลังใช้ธีม WordPress ที่มีการเข้ารหัสอย่างดี มีความเป็นไปได้ที่การใช้แท็กในโพสต์ของคุณจะถูกเพิ่มทุกที่ที่คุณต้องการให้โพสต์สิ้นสุดและเริ่มต้นในหน้าถัดไปจะช่วยคุณได้
ไม่ยากเลยที่จะเดาว่าโพสต์ที่ยาวจะใช้เวลานานในการโหลดและจะไม่สะดวกสำหรับแขกของเว็บไซต์หรือผู้ติดตามบล็อกที่จะอ่าน
การแบ่งบทความหรือคำอธิบายยาวๆ ออกเป็นหลายๆ หน้าตามที่เห็นสมควรจะทำให้ผู้อ่านเข้าใจข้อมูลทั้งหมดได้ง่ายขึ้นโดยไม่รู้สึกรำคาญ
หากคุณเป็นผู้ดูแลเว็บ WordPress หรือเจ้าของเว็บไซต์ WordPress เรามั่นใจว่าคุณรู้เกี่ยวกับฟังก์ชันการแบ่งหน้าในตัวของ WP ซึ่งคุณสามารถใช้กับลิงก์หรือการแบ่งหน้าเป็นตัวเลขเพื่อแยกบทความยาวๆ ออกเป็นส่วนต่างๆ ได้มากเท่าที่จำเป็น และแสดงไว้ในหน้าก่อนหน้าและหน้าถัดไป ตามนั้น
นอกจากการทำให้บทความและโพสต์ของคุณง่ายต่อการติดตามและอ่านง่ายแล้ว การแบ่งหน้ายังมีประโยชน์อื่นๆ อีกด้วย
มันจะทำให้รูปลักษณ์โดยรวมของไซต์ของคุณมีความแม่นยำและกระชับมากขึ้น เพิ่มการดูหน้าเว็บของไซต์ ช่วยลดอัตราตีกลับ มีส่วนในการจัดอันดับ SEO และให้หน้าเว็บเพิ่มเติมสำหรับวางโฆษณา และอื่นๆ แก่คุณ
อย่างไรก็ตาม วิธีนี้ใช้ไม่ได้ผลกับธีมและเทมเพลต WordPress ร่วมสมัยเสมอไป ดังนั้นเราจึงเสนอให้คุณใช้ WP_Query เพื่อสร้างการแบ่งหน้าใน WordPress
ก่อนที่เราจะเจาะลึกลงไปในกระบวนการที่มีรายละเอียดเกี่ยวกับวิธีใช้ WP_Query เพื่อสร้างการแบ่งหน้าใน WordPress เราขอแนะนำให้คุณทำความคุ้นเคยกับการอ้างอิงคลาส WP Query ใน WordPress Codex: https://codex.wordpress.org/Class_Reference/WP_Query#Usage .
ตอนนี้ เมื่อคุณมีแนวคิดทั่วไปเกี่ยวกับ WP_Query และการใช้งานแล้ว ให้เราแบ่งปันตัวอย่างคำถามกับคุณ
<?php /** * ชื่อเทมเพลต: หน้ากำหนดเอง */ get_header(); ?> <?php $paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'เพจ' ) : 1; $args = อาร์เรย์ ( 'posts_per_page' => 4, 'เพจ' => $paged ); $custom_query = ใหม่ WP_Query( $args ); ?> <!---เริ่ม -------> <div class="wrap"> <div class="content-area"> <main class="site-main" role="main"> <?php ในขณะที่($custom_query->have_posts()): $custom_query->the_post(); ?> <div> <ul> <li> <h3><a href="<?php the_permalink(); ?>" ><?php the_title(); ?></a></h3> <div> <ul> <div><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('ภาพขนาดย่อ'); ?></a></div> </ul> <ul> <p><?php echo the_content(); ?></p> </ul> </div> <div> </li> </ul> </div> <!-- สิ้นสุดการโพสต์บล็อก --> <?php เมื่อสิ้นสุด; ?> <?php ถ้า (function_exists("เลขหน้า")) { การแบ่งหน้า($custom_query->max_num_pages); } ?> </main><!-- #main --> </div><!-- #primary --> </div><!-- .wrap --> <!---จบ-------> <?php get_footer();
วิธีใช้ WP_Query เพื่อสร้างการแบ่งหน้าใน WordPress
รหัสสำหรับการแสดงเลขหน้า
สร้างไฟล์เทมเพลตชื่อ CustomPage.php ในโฟลเดอร์ธีม และเพิ่มโค้ดที่กล่าวถึงด้านล่างในหน้าสแตติกแบบกำหนดเอง
<?php ถ้า (function_exists("เลขหน้า")) { การแบ่งหน้า($custom_query->max_num_pages); } ?>
ไปที่แดชบอร์ดผู้ดูแลระบบเพื่อสร้างเพจและเลือกเพจที่กำหนดเองเป็นเทมเพลต
นอกจากนี้ คุณจะต้องใช้รหัสต่อไปนี้เพื่อให้การแบ่งหน้าแบบกำหนดเองทำงาน: คุณจะต้องเพิ่มรหัสนี้ใน functions.php (จะพบได้ในโฟลเดอร์ธีมของคุณ)
การแบ่งหน้าของฟังก์ชัน($pages = ”, $range = 4)
{ $showitems = ($ช่วง * 2)+1; เพจ $ ทั่วโลก; ถ้า(ว่าง($เพจ)) $เพจ = 1; ถ้า($หน้า == '') { โกลบอล $wp_query; $pages = $wp_query->max_num_pages; ถ้า(!$หน้า) { $pages = 1; } }
ถ้า (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>”;
สำหรับ ($i=1; $i <= $pages; $i++)
{ if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ) ) { เสียงสะท้อน ($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"; } }
ตอนนี้เราได้ใช้ WP_Query เพื่อสร้างการแบ่งหน้าใน WordPress แล้ว มาต่อกันที่ส่วนการจัดสไตล์กัน แน่นอนว่าตอนนี้เราจะต้องใช้ไฟล์ style.css แทน function.php
ค้นหา style.css ในโฟลเดอร์ธีมและเพิ่มโค้ดด้านล่างลงไป
/* การแบ่งหน้า */ .การแบ่งหน้า { ชัดเจน:ทั้งสอง; ตำแหน่ง:ญาติ; ขนาดตัวอักษร:11px; /* ขนาดตัวอักษรแบ่งหน้า */ ความสูงของบรรทัด:13px; ลอย:ขวา; /* ทิศทางลอยตัวของเลขหน้า */ }
.pagination span, .pagination a { แสดง:บล็อก; ลอย:ซ้าย; ระยะขอบ: 2px 2px 2px 0; ช่องว่างภายใน:6px 9px 5px 9px; ข้อความตกแต่ง:ไม่มี; ความกว้าง:อัตโนมัติ; สี:#fff; /* สีข้อความแบ่งหน้า */ พื้นหลัง: #555; /* การแบ่งหน้าสีพื้นหลังที่ไม่แอ็คทีฟ */ -webkit-transition: พื้นหลัง .15s เข้า - ออกได้ง่าย -moz-transition: พื้นหลัง .15s เข้า - ออกได้ง่าย -ms-transition: พื้นหลัง .15s เข้าออกได้ง่าย -o-transition: พื้นหลัง .15s เข้าออกได้ง่าย การเปลี่ยนแปลง: พื้นหลัง .15s เข้าออกง่าย; }
.pagination a: โฮเวอร์{ สี:#fff; พื้นหลัง: #6AAC70; /* พื้นหลังการแบ่งหน้าเมื่อโฮเวอร์ */ } .การแบ่งหน้า .current{ ช่องว่างภายใน:6px 9px 5px 9px; พื้นหลัง: #6AAC70; /* พื้นหลังของหน้าปัจจุบัน */ สี:#fff; }
แค่นั้นแหละ. เราหวังเป็นอย่างยิ่งว่าบทความของเราจะช่วยให้คุณใช้ WP_Query เพื่อสร้างการแบ่งหน้าใน WordPress โดยไม่มีปัญหา ในกรณีที่มีคำถามเกี่ยวกับบทช่วยสอนนี้หรือรหัสที่ใช้ร่วมกัน โปรดขอความช่วยเหลือจากเรา!
เมื่อคุณตั้งค่าเว็บไซต์ของคุณบน WordPress สิ่งหนึ่งที่คุณอาจต้องการพิจารณาคือการใช้ wp_query เพื่อสร้างการแบ่งหน้าใน WordPress
แน่นอน คุณจะต้องสงสัยว่าทำไมคุณจึงควรกังวลเกี่ยวกับการแบ่งหน้า แต่นี่คือเหตุผลที่การแบ่งหน้าเป็นส่วนสำคัญของเว็บไซต์ใดๆ
การแบ่งหน้าเป็นกระบวนการที่คุณสามารถแยกโพสต์ยาวๆ ออกเป็นโพสต์ที่สั้นลงได้ โดยจะมีส่วนของโพสต์ดั้งเดิมที่โพสต์บนหน้าอื่นๆ พร้อมลิงก์กลับไปยังโพสต์ต้นฉบับ
ซึ่งจะช่วยเพิ่มจำนวนการดูหน้าเว็บในเว็บไซต์ของคุณ และสามารถพิสูจน์ได้ว่ามีค่ามากเมื่อคำนึงถึง SEO และการจัดอันดับ
นี่คือเหตุผลที่คุณต้องใช้ wp_query เพื่อสร้างการแบ่งหน้าใน WordPress เพื่อให้คุณสามารถปรับแต่งโพสต์ ย่อให้สั้นลง และช่วยปรับปรุงประสบการณ์ผู้ใช้ในกระบวนการ ต่อไปนี้คือสาเหตุบางประการที่การแบ่งหน้ามีความสำคัญและเหตุใดจึงจำเป็นสำหรับเว็บไซต์ของคุณ
- ดูสะอาดตา: จากการแบ่งหน้า คุณควรจะทำให้โพสต์สั้นลงได้ และในกระบวนการนี้ ให้หน้าแรกของคุณไม่รก ซึ่งจะทำให้คุณสามารถนำเสนอลูกค้าของคุณด้วยรูปลักษณ์ที่สะอาดตา
นอกจากนี้ เมื่อโพสต์ถูกตัดให้สั้นลง คุณควรจะสามารถใช้พื้นที่สีขาวได้อย่างมีกลยุทธ์และดึงความสนใจของผู้ใช้ไปยังส่วนที่เกี่ยวข้องของเว็บไซต์ของคุณ อาจเป็นการเรียกร้องให้ดำเนินการเพื่อให้พวกเขาสามารถคลิกได้
- การตลาด: ด้วยการแบ่งหน้า คุณควรจะสามารถตัดความยาวของโพสต์ลงและปรับให้เหมาะสมในกระบวนการได้เช่นกัน
ด้วยปลั๊กอินนี้ คุณสามารถเลือกได้ว่าต้องการตัดโพสต์ใดให้สั้นลง หรือแม้แต่ปรับแต่งโพสต์ เพื่อให้ผู้ใช้ปลายทางดูน่าสนใจยิ่งขึ้น
ด้วยเหตุนี้ การเข้าชมของคุณควรเพิ่มขึ้นและในกระบวนการนี้ คุณควรจะสามารถมีส่วนร่วมกับผู้ใช้ของคุณได้มากกว่าเมื่อก่อน
- การมีส่วนร่วมของผู้ใช้: ไม่มีผู้ใช้คนใดต้องการอ่านบทความยาวๆ ที่หน้าแรก จึงจำเป็นสำหรับคุณที่จะใช้การแบ่งหน้าเพื่อให้โพสต์สั้น
ผู้ใช้จะประทับใจกับรูปลักษณ์ที่ไม่เกะกะ หน้าโหลดเร็ว และด้วยเหตุนี้ คุณน่าจะมีส่วนร่วมกับพวกเขามากขึ้น
เมื่อมีการใช้การแบ่งหน้า คุณควรสามารถรักษาอัตราตีกลับให้อยู่ในระดับที่เหมาะสม ทำให้ผู้ชมของคุณสนใจเพียงพอ และที่สำคัญกว่านั้น เพิ่มการดูหน้าเว็บบนเว็บไซต์ของคุณ
ด้วยเหตุนี้ คุณจะต้องเพิ่มอันดับของคุณรวมทั้งเพิ่มอัตราการแปลงออนไลน์ของคุณด้วย
นี่คือสาเหตุบางประการที่ทำให้คุณต้องมีการแบ่งหน้าในเว็บไซต์ของคุณ เนื่องจากจะช่วยให้เว็บไซต์ของคุณทำงานได้ดีขึ้นกว่าเดิม
คุณสามารถตัดสินใจได้ว่าต้องการให้โพสต์สั้นแค่ไหน และการแบ่งหน้า คุณควรกำหนดความยาวและรูปลักษณ์ของโพสต์ได้ด้วยการแบ่งหน้า ด้วยคุณลักษณะนี้ คุณควรจะสามารถมอบประสบการณ์การใช้งานที่ดีขึ้นแก่ผู้ใช้ของคุณ