Cara Membuat Pagination Kueri Kustom Di WordPress Dengan Contoh
Diterbitkan: 2020-02-24
Membuat pagination kueri khusus di WordPress adalah salah satu solusi pagination yang paling banyak diurutkan untuk posting blog dan jenis posting kustom. Jika Anda ingin membuat pagination kueri khusus di blog WordPress Anda, posting ini akan memandu Anda. Idealnya, paginasi kueri khusus melibatkan penggunaan parameter kueri yang berbeda untuk membangun paginasi posting WordPress yang didasarkan pada kueri ini.
Dalam tutorial sebelumnya, saya menjelaskan secara rinci bagaimana Anda dapat menambahkan pagination numerik di WordPress serta cara membuat thumbnail pagination posting sebelumnya dan berikutnya, dan cara membagi posting menjadi beberapa halaman menggunakan pagination. Saya juga membagikan sejumlah kode pagination WordPress yang dapat Anda gunakan di blog Anda untuk menambahkan opsi pagination pilihan Anda. Dalam posting ini, saya akan menjelaskan tentang cara membangun dan mengimplementasikan pagination kueri kustom di situs WordPress Anda.
Paginasi Kueri Kustom
Seperti yang telah saya sebutkan di pendahuluan, paginasi kueri kustom terdiri dari tiga bagian yang meliputi: kueri kustom, kode untuk menampilkan paginasi, dan beberapa gaya untuk membuat paginasi terlihat bagus. Kami akan memecah kode pagination kueri khusus ini menjadi tiga langkah berikut:
Buat Kueri Kustom untuk Posting atau Posting Kustom
Langkah pertama adalah membuat kueri yang pada dasarnya adalah larik argumen yang ingin kita gunakan dalam kueri kustom.
Untuk menampilkan paginasi kueri kustom ini, mari kita mulai dengan membuat templat halaman kustom di mana kita akan menambahkan kode untuk paginasi kueri kustom.
Berikut adalah contoh template halaman kustom dengan kode kueri kustom:
<?php
/**
* Nama Template: CQ Pagination
*
*/
get_header();
// Langkah 1: Buat Kueri Kustom
$paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ): 1;
$args = array(
'posts_per_page' => 2,// kueri 5 postingan terakhir
'paged' => $paged
);
$customQuery = new WP_Query($args);Kode ini hanya membuat template halaman kustom yang dapat Anda lihat di bawah atribut halaman seperti yang ditunjukkan pada gambar di bawah ini:
Kueri dapat memiliki beberapa argumen tetapi dalam kasus ini, kami hanya terbatas pada 'posts_per_page' yang merupakan jumlah posting yang ingin kami tampilkan di halaman.
Kami juga dapat menentukan jenis posting menggunakan 'post_type', orderby, author dan banyak lagi. Berikut ini adalah contoh kueri lain untuk jenis kiriman khusus bernama 'buku':
//Dapatkan penulis saat ini untuk digunakan dalam kueri $current_author = ( isset($_GET ) ) ? get_user_by( 'siput', $author_name ) : get_userdata( intval( $author ) ); /* mengatur argumen untuk kueri $args = array( 'post_type' => array( 'tujuan' ), 'orderby' => 'tanggal', 'pesan' => 'desc', 'posts_per_page' => 10, 'paged' => get_query_var( 'halaman') ? get_query_var( 'halaman'): 1, 'penulis' => $current_author->ID ); // Instansiasi kueri $query = new WP_Query( $args );
Setelah kita membangun $args dan membuat instance kueri, sekarang kita siap untuk menampilkan posting di loop dan menambahkan kueri kustom di langkah berikutnya.
Tampilkan Posting yang Ditanyakan dalam Templat Halaman Kustom
Untuk menampilkan posting yang ditanyakan kode telah ditambahkan ke kode template kustom asli dan kode lengkapnya adalah sebagai berikut:
<?php
/**
* Nama Template: CQ Pagination
*
*/
get_header();
// Langkah 1: Buat Kueri Kustom
$paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ): 1;
$args = array(
'posts_per_page' => 2,// kueri 5 postingan terakhir
'paged' => $paged
);
$customQuery = new WP_Query($args);
?>
<!-- Langkah 2: Tampilkan Postingan yang Kita Kueri pada Langkah 1 -->
<div class="bungkus">
<div id="utama" class="content-area">
<main id="main" class="site-main" role="main">
<?php
if($customQuery->have_posts() ):
while($customQuery->have_posts()) :
$customQuery->the_post();
global $postingan;
?>
<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> <!-- akhiri entri blog -->
<?php akhir;
berakhir jika;
wp_reset_query();Buat Fungsi Pagination
Pada langkah terakhir ini, kita perlu membuat fungsi pagination yang akan kita gunakan pada template halaman kustom di atas untuk menampilkan paginasi kueri kustom. Untuk membuat fungsi pagination kita perlu menambahkan kode berikut ke file functions.php:
// Fungsi penomoran halaman khusus
fungsi cq_pagination($pages = '', $range = 4)
{
$showitems = ($kisaran * 2)+1;
halaman $ global;
if(empty($paged)) $paged = 1;
if($halaman == '')
{
global $wp_query;
$halaman = $wp_query->max_num_pages;
jika(!$halaman)
{
$halaman = 1;
}
}
jika(1 != $halaman)
{
echo "<nav aria-label='Contoh navigasi halaman'> <ul class='pagination'> <span>Halaman ".$paged." dari ".$pages."</span>";
if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<a href='".get_pagenum_link(1)."'>« Pertama</a>";
if($paged > 1 && $showitems < $pages) echo "<a href='".get_pagenum_link($paged - 1)."'>‹ Sebelumnya</a>";
untuk ($i=1; $i <= $halaman; $i++)
{
if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
{
echo ($halaman == $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";
}
}
Panggil Fungsi Pagination di Template Kustom
Langkah terakhir adalah memanggil fungsi yang kita tambahkan di atas di template sehingga pagination ditampilkan. Untuk memanggil fungsi ini kita harus menggunakan kode berikut:
// Langkah 3: Panggil Fungsi Pagination Di Sini
if (function_exists("cq_pagination")) {
cq_pagination($customQuery->max_num_pages);
}Kode akhir yang membuat template halaman kustom dengan fungsi pagination ini harus sebagai berikut:
<?php
/**
* Nama Template: CQ Pagination
*
*/
get_header();
// Langkah 1: Buat Kueri Kustom
$paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ): 1;
$args = array(
'posts_per_page' => 2,// kueri 5 postingan terakhir
'paged' => $paged
);
$customQuery = new WP_Query($args);
?>
<!-- Langkah 2: Tampilkan Postingan yang Kita Kueri pada Langkah 1 -->
<div class="bungkus">
<div id="utama" class="content-area">
<main id="main" class="site-main" role="main">
<?php
if($customQuery->have_posts() ):
while($customQuery->have_posts()) :
$customQuery->the_post();
global $postingan;
?>
<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> <!-- akhiri entri blog -->
<?php akhir;
berakhir jika;
wp_reset_query();
// Langkah 3: Panggil Fungsi Pagination Di Sini
if (function_exists("cq_pagination")) {
cq_pagination($customQuery->max_num_pages);
}
?>
</main><!-- #main -->
</div><!-- #primer -->
</div><!-- .wrap -->
<!----akhir halaman-------->
<?php get_footer(); ?>Jika Anda mengikuti setiap langkah dengan cara yang benar, Anda akan memiliki pagination seperti yang terlihat pada gambar di bawah ini:
Gaya Pagination Kueri Kustom
Langkah terakhir adalah menambahkan gaya ke pagination khusus agar cocok dengan gaya dan desain tema. Berikut ini adalah gaya CSS yang harus Anda tambahkan ke lembar gaya untuk menata halaman kustom ini:
/**
* Gaya Pagination CQ
* @penulis Joe Njenga
*/
.paginasi {
jelas: keduanya;
posisi: relatif;
ukuran font:16px;
tinggi garis:13px;
mengapung:kanan;
list-style-type:none;
lebar: 100%;
}
.pagination span, .pagination a {
tampilan: blok;
mengapung: kiri;
margin: 2px 2px 2px 0;
bantalan:6px 9px 5px 9px;
dekorasi teks: tidak ada;
lebar: otomatis;
warna:#ff;
latar belakang: #237697;
}
.pagination a:hover{
warna:#ff;
latar belakang: #000;
}
.pagination .current{
bantalan:6px 9px 5px 9px;
latar belakang: #999;
warna:#ff;
}Setelah Anda menambahkan gaya pagination ini, tampilan akhir dari pagination khusus harus seperti yang ditunjukkan pada gambar di bawah ini:
Pikiran Akhir
Dalam posting ini, kami telah menguraikan cara langkah demi langkah untuk menambahkan pagination kueri khusus ke blog WordPress Anda. Langkah-langkah ini meliputi; membuat kueri, membuat templat halaman kustom untuk menampilkan posting kueri kustom dengan pagination dan menambahkan fungsi pagination ke file functions.php. Terakhir, jangan lupa untuk memanggil fungsi pagination dan menambahkan gaya yang sesuai dengan desain tema WordPress Anda.