วิธีใช้ 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 เพื่อให้คุณสามารถปรับแต่งโพสต์ ย่อให้สั้นลง และช่วยปรับปรุงประสบการณ์ผู้ใช้ในกระบวนการ ต่อไปนี้คือสาเหตุบางประการที่การแบ่งหน้ามีความสำคัญและเหตุใดจึงจำเป็นสำหรับเว็บไซต์ของคุณ
- ดูสะอาดตา: จากการแบ่งหน้า คุณควรจะทำให้โพสต์สั้นลงได้ และในกระบวนการนี้ ให้หน้าแรกของคุณไม่รก ซึ่งจะทำให้คุณสามารถนำเสนอลูกค้าของคุณด้วยรูปลักษณ์ที่สะอาดตา
นอกจากนี้ เมื่อโพสต์ถูกตัดให้สั้นลง คุณควรจะสามารถใช้พื้นที่สีขาวได้อย่างมีกลยุทธ์และดึงความสนใจของผู้ใช้ไปยังส่วนที่เกี่ยวข้องของเว็บไซต์ของคุณ อาจเป็นการเรียกร้องให้ดำเนินการเพื่อให้พวกเขาสามารถคลิกได้
- การตลาด: ด้วยการแบ่งหน้า คุณควรจะสามารถตัดความยาวของโพสต์ลงและปรับให้เหมาะสมในกระบวนการได้เช่นกัน
ด้วยปลั๊กอินนี้ คุณสามารถเลือกได้ว่าต้องการตัดโพสต์ใดให้สั้นลง หรือแม้แต่ปรับแต่งโพสต์ เพื่อให้ผู้ใช้ปลายทางดูน่าสนใจยิ่งขึ้น
ด้วยเหตุนี้ การเข้าชมของคุณควรเพิ่มขึ้นและในกระบวนการนี้ คุณควรจะสามารถมีส่วนร่วมกับผู้ใช้ของคุณได้มากกว่าเมื่อก่อน
- การมีส่วนร่วมของผู้ใช้: ไม่มีผู้ใช้คนใดต้องการอ่านบทความยาวๆ ที่หน้าแรก จึงจำเป็นสำหรับคุณที่จะใช้การแบ่งหน้าเพื่อให้โพสต์สั้น
ผู้ใช้จะประทับใจกับรูปลักษณ์ที่ไม่เกะกะ หน้าโหลดเร็ว และด้วยเหตุนี้ คุณน่าจะมีส่วนร่วมกับพวกเขามากขึ้น
เมื่อมีการใช้การแบ่งหน้า คุณควรสามารถรักษาอัตราตีกลับให้อยู่ในระดับที่เหมาะสม ทำให้ผู้ชมของคุณสนใจเพียงพอ และที่สำคัญกว่านั้น เพิ่มการดูหน้าเว็บบนเว็บไซต์ของคุณ
ด้วยเหตุนี้ คุณจะต้องเพิ่มอันดับของคุณรวมทั้งเพิ่มอัตราการแปลงออนไลน์ของคุณด้วย
นี่คือสาเหตุบางประการที่ทำให้คุณต้องมีการแบ่งหน้าในเว็บไซต์ของคุณ เนื่องจากจะช่วยให้เว็บไซต์ของคุณทำงานได้ดีขึ้นกว่าเดิม
คุณสามารถตัดสินใจได้ว่าต้องการให้โพสต์สั้นแค่ไหน และการแบ่งหน้า คุณควรกำหนดความยาวและรูปลักษณ์ของโพสต์ได้ด้วยการแบ่งหน้า ด้วยคุณลักษณะนี้ คุณควรจะสามารถมอบประสบการณ์การใช้งานที่ดีขึ้นแก่ผู้ใช้ของคุณ
