วิธีสร้างการแบ่งหน้าแบบสอบถามแบบกำหนดเองใน WordPress ด้วยตัวอย่าง
เผยแพร่แล้ว: 2020-02-24
การสร้างการแบ่งหน้าแบบสอบถามที่กำหนดเองใน WordPress เป็นหนึ่งในโซลูชันการเรียงลำดับหน้ามากที่สุดสำหรับโพสต์ในบล็อกและประเภทโพสต์ที่กำหนดเอง หากคุณต้องการสร้างการแบ่งหน้าแบบสอบถามแบบกำหนดเองในบล็อก WordPress ของคุณ โพสต์นี้จะแนะนำคุณ ตามหลักการแล้วการแบ่งหน้าแบบสอบถามที่กำหนดเองนั้นเกี่ยวข้องกับการใช้พารามิเตอร์การสืบค้นที่แตกต่างกันเพื่อสร้างการแบ่งหน้าของโพสต์ WordPress ที่ยึดตามการสืบค้นนี้
ในบทช่วยสอนก่อนหน้านี้ ฉันได้อธิบายรายละเอียดเกี่ยวกับวิธีการเพิ่มเลขหน้าใน WordPress รวมถึงวิธีสร้างภาพย่อหน้าก่อนหน้าและถัดไปของบทความ และวิธีแบ่งบทความออกเป็นหลายหน้าโดยใช้การแบ่งหน้า ฉันยังแชร์รหัสการแบ่งหน้าของ WordPress จำนวนหนึ่งที่คุณสามารถใช้ในบล็อกของคุณเพื่อเพิ่มตัวเลือกการแบ่งหน้าที่คุณต้องการ ในบทความนี้ ผมจะอธิบายเกี่ยวกับวิธีสร้างและใช้การแบ่งหน้าแบบสอบถามแบบกำหนดเองบนไซต์ WordPress ของคุณ
การแบ่งหน้าแบบสอบถามแบบกำหนดเอง
ดังที่ฉันได้กล่าวไว้ในบทนำ การแบ่งหน้าแบบสอบถามแบบกำหนดเองประกอบด้วยสามส่วน ได้แก่: การสืบค้นแบบกำหนดเอง โค้ดสำหรับแสดงการแบ่งหน้า และรูปแบบบางอย่างเพื่อทำให้การแบ่งหน้าดูดี เราจะแบ่งรหัสการแบ่งหน้าแบบสอบถามที่กำหนดเองออกเป็นสามขั้นตอนเหล่านี้:
สร้างแบบสอบถามที่กำหนดเองของโพสต์หรือโพสต์ที่กำหนดเอง
ขั้นตอนแรกคือการสร้างคิวรีที่โดยทั่วไปแล้วจะเป็นอาร์เรย์ของอาร์กิวเมนต์ที่เราตั้งใจจะใช้ในคิวรีแบบกำหนดเอง
ในการแสดงการแบ่งหน้าแบบสอบถามแบบกำหนดเองนี้ ให้เราเริ่มต้นด้วยการสร้างเทมเพลตของหน้าแบบกำหนดเอง ซึ่งเราจะเพิ่มรหัสสำหรับการแบ่งหน้าแบบสอบถามแบบกำหนดเอง
ต่อไปนี้คือตัวอย่างเทมเพลตของเพจแบบกำหนดเองที่มีโค้ดการสืบค้นแบบกำหนดเอง:
<?php
/**
* ชื่อเทมเพลต: การแบ่งหน้า CQ
*
*/
get_header();
// ขั้นตอนที่ 1: สร้างคิวรีแบบกำหนดเอง
$paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'เพจ' ) : 1;
$args = อาร์เรย์ (
'posts_per_page' => 2,// สืบค้นข้อมูล 5 โพสต์ล่าสุด
'paged' => $paged
);
$customQuery = ใหม่ WP_Query($args);โค้ดนี้สร้างเทมเพลตเพจแบบกำหนดเองที่คุณสามารถดูได้ภายใต้แอตทริบิวต์ของเพจดังที่แสดงในภาพด้านล่าง:
แบบสอบถามสามารถมีอาร์กิวเมนต์ได้หลายแบบ แต่ในกรณีนี้ เราจำกัดเฉพาะ 'posts_per_page' ซึ่งเป็นจำนวนโพสต์ที่เราต้องการแสดงบนเพจ
นอกจากนี้เรายังสามารถระบุประเภทโพสต์โดยใช้ 'post_type', orderby, ผู้แต่ง และอื่นๆ อีกมากมาย ต่อไปนี้คือตัวอย่างของข้อความค้นหาอื่นสำหรับประเภทโพสต์แบบกำหนดเองที่ชื่อ 'book':
//รับผู้เขียนปัจจุบันเพื่อใช้ในแบบสอบถาม $current_author = ( isset($_GET ) ) ? get_user_by( 'slug', $author_name ) : get_userdata( intval( $author ) ); /* ตั้งค่าอาร์กิวเมนต์สำหรับแบบสอบถาม $args = อาร์เรย์ ( 'post_type' => array( 'เป้าหมาย' ), 'orderby' => 'วันที่', 'order' => 'desc', 'posts_per_page' => 10, 'paged' => get_query_var( 'หน้า' ) ? get_query_var( 'หน้า' ): 1, 'ผู้เขียน' => $current_author->ID ); // ยกตัวอย่างคำถาม $query = ใหม่ WP_Query( $args );
หลังจากที่เราสร้าง $args และสร้างอินสแตนซ์ของแบบสอบถามแล้ว ตอนนี้เราก็พร้อมที่จะแสดงโพสต์ในลูปและเพิ่มการสืบค้นข้อมูลที่กำหนดเองในขั้นตอนต่อไป
แสดงโพสต์ที่สอบถามใน Custom Page Template
ในการแสดงโพสต์ที่สอบถาม ได้เพิ่มโค้ดลงในโค้ดเทมเพลตที่กำหนดเองดั้งเดิมแล้ว และโค้ดแบบเต็มมีดังนี้:
<?php
/**
* ชื่อเทมเพลต: การแบ่งหน้า CQ
*
*/
get_header();
// ขั้นตอนที่ 1: สร้างคิวรีแบบกำหนดเอง
$paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'เพจ' ) : 1;
$args = อาร์เรย์ (
'posts_per_page' => 2,// สืบค้นข้อมูล 5 โพสต์ล่าสุด
'paged' => $paged
);
$customQuery = ใหม่ WP_Query($args);
?>
<!-- ขั้นตอนที่ 2: แสดงโพสต์ที่เราสอบถามในขั้นตอนที่ 1 -->
<div class="wrap">
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<?php
if($customQuery->have_posts() ):
ในขณะที่($customQuery->have_posts()):
$customQuery->the_post();
โพสต์ $ ทั่วโลก;
?>
<div class ="inner-content-wrap">
<ul class ="cq-posts-list">
<li>
<h3 class ="cq-h3"><a href="<?php the_permalink(); ?>" ><?php the_title(); ?></a></h3>
<div>
<ul>
<div>
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('thumbnail'); ?></a>
</div>
</ul>
<ul>
<p><?php echo the_content(); ?></p>
</ul>
</div>
</li>
</ul>
</div> <!-- สิ้นสุดการโพสต์บล็อก -->
<?php เมื่อสิ้นสุด;
เอนดิฟ;
wp_reset_query();สร้างฟังก์ชันการแบ่งหน้า
ในขั้นตอนสุดท้ายนี้ เราจำเป็นต้องสร้างฟังก์ชันการแบ่งหน้าที่เราจะใช้ในเทมเพลตหน้าแบบกำหนดเองด้านบนเพื่อแสดงการแบ่งหน้าแบบสอบถามแบบกำหนดเอง ในการสร้างฟังก์ชันการแบ่งหน้า เราจำเป็นต้องเพิ่มโค้ดต่อไปนี้ในไฟล์ functions.php:
// ฟังก์ชั่นการแบ่งหน้าแบบกำหนดเอง
ฟังก์ชัน cq_pagination($pages = '', $range = 4)
{
$showitems = ($ช่วง * 2)+1;
เพจ $ ทั่วโลก;
ถ้า(ว่าง($เพจ)) $เพจ = 1;
ถ้า($หน้า == '')
{
โกลบอล $wp_query;
$pages = $wp_query->max_num_pages;
ถ้า(!$หน้า)
{
$pages = 1;
}
}
ถ้า (1 != $pages)
{
echo "<nav aria-label='Page navigation example'> <ul 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)? "<li class=\"page-item active\"><a class='page-link'>".$i."</a></li>":"<li class='page-item' > <a href='".get_pagenum_link($i)."' class=\"page-link\">".$i."</a></li>";
}
}
if ($paged < $pages && $showitems < $pages) echo " <li class='page-item'><a class='page-link' href=\"".get_pagenum_link($paged + 1)" \">i class='flaticon flaticon-back'></i></a></li>";
if ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages) echo " <li class='page-item'><a class='page-link' href=' ".get_pagenum_link($pages)."'><i class='flaticon flaticon-arrow'></i></a></li>";
echo </ul></nav>\n";
}
}
เรียกใช้ฟังก์ชันการแบ่งหน้าในเทมเพลตที่กำหนดเอง
ขั้นตอนสุดท้ายคือการเรียกใช้ฟังก์ชันที่เราเพิ่มไว้ด้านบนในเทมเพลตเพื่อให้แสดงการแบ่งหน้า ในการเรียกใช้ฟังก์ชันนี้ เราควรใช้รหัสต่อไปนี้:
// ขั้นตอนที่ 3: เรียกฟังก์ชันการแบ่งหน้าที่นี่
ถ้า (function_exists("cq_pagination")) {
cq_pagination($customQuery->max_num_pages);
}โค้ดสุดท้ายที่สร้างเทมเพลตเพจแบบกำหนดเองด้วยฟังก์ชันการแบ่งหน้าควรเป็นดังนี้:
<?php
/**
* ชื่อเทมเพลต: การแบ่งหน้า CQ
*
*/
get_header();
// ขั้นตอนที่ 1: สร้างคิวรีแบบกำหนดเอง
$paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'เพจ' ) : 1;
$args = อาร์เรย์ (
'posts_per_page' => 2,// สืบค้นข้อมูล 5 โพสต์ล่าสุด
'paged' => $paged
);
$customQuery = ใหม่ WP_Query($args);
?>
<!-- ขั้นตอนที่ 2: แสดงโพสต์ที่เราสอบถามในขั้นตอนที่ 1 -->
<div class="wrap">
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<?php
if($customQuery->have_posts() ):
ในขณะที่($customQuery->have_posts()):
$customQuery->the_post();
โพสต์ $ ทั่วโลก;
?>
<div class ="inner-content-wrap">
<ul class ="cq-posts-list">
<li>
<h3 class ="cq-h3"><a href="<?php the_permalink(); ?>" ><?php the_title(); ?></a></h3>
<div>
<ul>
<div>
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('thumbnail'); ?></a>
</div>
</ul>
<ul>
<p><?php echo the_content(); ?></p>
</ul>
</div>
</li>
</ul>
</div> <!-- สิ้นสุดการโพสต์บล็อก -->
<?php เมื่อสิ้นสุด;
เอนดิฟ;
wp_reset_query();
// ขั้นตอนที่ 3: เรียกฟังก์ชันการแบ่งหน้าที่นี่
ถ้า (function_exists("cq_pagination")) {
cq_pagination($customQuery->max_num_pages);
}
?>
</main><!-- #main -->
</div><!-- #primary -->
</div><!-- .wrap -->
<!---- จบหน้า -------->
<?php get_footer(); ?>หากคุณปฏิบัติตามทุกขั้นตอนอย่างถูกต้อง คุณควรมีการแบ่งหน้าตามภาพด้านล่าง:
จัดรูปแบบการแบ่งหน้าคิวรีแบบกำหนดเอง
ขั้นตอนสุดท้ายคือการเพิ่มสไตล์ให้กับการแบ่งหน้าแบบกำหนดเองเพื่อให้เข้ากับสไตล์และการออกแบบของธีม ต่อไปนี้เป็นสไตล์ CSS ที่คุณควรเพิ่มในสไตล์ชีตเพื่อกำหนดรูปแบบการแบ่งหน้าแบบกำหนดเอง:
/**
* รูปแบบการแบ่งหน้า CQ
* @ผู้เขียน Joe Njenga
*/
.การแบ่งหน้า {
ชัดเจน:ทั้งสอง;
ตำแหน่ง:ญาติ;
ขนาดตัวอักษร:16px;
ความสูงของบรรทัด:13px;
ลอย:ขวา;
รายการสไตล์ประเภท:ไม่มี;
ความกว้าง:100%;
}
.pagination span, .pagination a {
แสดง:บล็อก;
ลอย:ซ้าย;
ระยะขอบ: 2px 2px 2px 0;
ช่องว่างภายใน:6px 9px 5px 9px;
ข้อความตกแต่ง:ไม่มี;
ความกว้าง:อัตโนมัติ;
สี:#fff;
พื้นหลัง: #237697;
}
.pagination a: โฮเวอร์{
สี:#fff;
พื้นหลัง: #000;
}
.การแบ่งหน้า .current{
ช่องว่างภายใน:6px 9px 5px 9px;
พื้นหลัง: #999;
สี:#fff;
}หลังจากที่คุณเพิ่มรูปแบบการแบ่งหน้าเหล่านี้แล้ว รูปลักษณ์สุดท้ายของการแบ่งหน้าแบบกำหนดเองควรเป็นดังที่แสดงในภาพด้านล่าง:
ความคิดสุดท้าย
ในบทความนี้ เราได้สรุปวิธีการทีละขั้นตอนในการเพิ่มการแบ่งหน้าแบบสอบถามที่กำหนดเองลงในบล็อก WordPress ของคุณ ขั้นตอนเหล่านี้รวมถึง สร้างแบบสอบถาม สร้างเทมเพลตหน้าแบบกำหนดเองเพื่อแสดงโพสต์ที่สอบถามแบบกำหนดเองพร้อมการแบ่งหน้า และเพิ่มฟังก์ชันการแบ่งหน้าในไฟล์ functions.php สุดท้ายนี้อย่าลืมเรียกใช้ฟังก์ชันการแบ่งหน้าและเพิ่มสไตล์ที่เหมาะสมกับการออกแบบธีม WordPress ของคุณ