วิธีใช้ 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 &amp;&amp;( !($i &gt;= $paged+$range+1 || $i &lt;= $paged-$range-1) || $pages &lt;= $showitems ) )

{

เสียงสะท้อน ($paged == $i)? "&lt;span class=\"current\"&gt;".$i."&lt;/span&gt;":"&lt;a href='".get_pagenum_link($i)."' class=\"inactive\" &gt;".$i."&lt;/a&gt;";

}

}
if ($paged &lt; $pages &amp;&amp; $showitems &lt; $pages) echo "&lt;a href=\"".get_pagenum_link($paged + 1)."\"&gt;Next ›&lt;/a&gt; ";

if ($paged &lt; $pages-1 &amp;&amp; $paged+$range-1 &lt; $pages &amp;&amp; $showitems &lt; $pages) echo "&lt;a href='".get_pagenum_link($pages) ."'&gt;Last »&lt;/a&gt;";

echo "&lt;/div&gt;\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 เพื่อให้คุณสามารถปรับแต่งโพสต์ ย่อให้สั้นลง และช่วยปรับปรุงประสบการณ์ผู้ใช้ในกระบวนการ ต่อไปนี้คือสาเหตุบางประการที่การแบ่งหน้ามีความสำคัญและเหตุใดจึงจำเป็นสำหรับเว็บไซต์ของคุณ

  • ดูสะอาดตา: จากการแบ่งหน้า คุณควรจะทำให้โพสต์สั้นลงได้ และในกระบวนการนี้ ให้หน้าแรกของคุณไม่รก ซึ่งจะทำให้คุณสามารถนำเสนอลูกค้าของคุณด้วยรูปลักษณ์ที่สะอาดตา

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

  • การตลาด: ด้วยการแบ่งหน้า คุณควรจะสามารถตัดความยาวของโพสต์ลงและปรับให้เหมาะสมในกระบวนการได้เช่นกัน

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

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

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

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

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

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

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

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