Membuat Custom WP Query, Desain WP Theme Lanjutan #wp_advance
30menit.com – Custom WP Query sebagai tambahan desain WP Theme. #wp_advance
Dalam mendesain tampilan atau tema wordpress, agar interaksi dalam website berbasis wordpress lebih interaktif, kita tidak bisa hanya mengandalkan query standart dari wordpress. Sebelum melangkah lebih jauh, jika temen-teman belum memahami apa itu query, coba saya jelaskan dengan singkat. Query bisa di katakan proses pengolahan data dari database untuk di tampilkan kepada user berdasarkan permintaan (request) URL. Jika kita mengklik sebuah link atau mempastekan sederetan URL ex : https://www.30menit.com maka komputer server (dalam hal ini servernya 30menit.com ya) akan melakukan query berdasarkan permintaan yaitu mengambil data dari data base kemudian menampilkannya di halaman utama. Yang di tampilkan dalam halaman utama adalah postingan-postingan terbaru. Akan tetapi jika di halaman utama kita tambahkan custom query berdasarkan kategori misalnya maka yg tampil tidak hanya postingan-postingan terbaru, akan ditampilkan juga postingan-postingan berdasarkan kategori tersebut.
Untuk membuat custom query, mari kita manfaatkan fungsi WP_Query(). Fungsi tersebut sudah disediakan oleh wordpress. Tinggal kita menambahkan variable yang dibutuhkan berdasarkan keinginan. Fungsi WP_Query() akan melakukan query berdasarkan variable dan memberikan hasil data. Data ditampilkan dengan pengulangan while. Sebagai contoh mari kita buat custom query di bawah query utama wordpress di halaman utama. Kita buat dua custom query berdasarkan kategori dan tag. Sebelum ke fungsi phpnya kita buat kerangka htmlnya terlebih dahulu.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<div class="row"> <div class="col-md-6"> <div class="card border-primary"> <div class="card-header text-primary">Judul</div> <div class="card-body text-primary"> <ul> <li>Test</li> </ul> </div> </div> </div> <div class="col-md-6"> <div class="card border-primary"> <div class="card-header text-primary">Judul 2</div> <div class="card-body text-primary"> <ul> <li>Test 2</li> </ul> </div> </div> </div> </div> |
Karena custom querynya ada dua, kita tampung kedua query dalam dua kolom. Kita manfaatkan system grid bootstrap 4. Sedangkan data hasil query ditampilkan dalam bentuk list item karena hanya link judul postingan sebagai output query. Mari buat fungsi php nya. Kita letakkan sebelum tag div dengan class card-header karena natinya ada fungsi query judul kategori yg memanfaatkan fungsi php custom query. Silakan tambahkan kode berikut :
|
1 2 3 4 5 6 7 |
<?php $cat_id = 77; $the_query_cat = new WP_Query( array( 'cat' => $cat_id, 'posts_per_page' => 5, 'orderby' => 'rand', )); ?> |
Variable $cat_id disini digunakan untuk menampung id dari kategori yang di query kan. Sedangkan variable $the_query_cat digunakan untuk menampung hasil dari fungsi WP_Query dimana fungsi tersebut membutuhkan data array. Dalam contoh di atas, ‘cat’ berarti lakukan query berdasarkan kategori dengan id mengikuti variable $cat_id, kemudian ‘posts_per_page’ menginstruksikan untuk mengquery 5 posting saja dengan data random berdasarkan perintah ‘orderby’. Agar hasil dari fungsi WP_Query yang di simpan pada variable $the_query_cat dapat tampil perlu di perintahkan untuk ditampilkan dengan perulangan while. Kenapa harus menggunakan perulangan? Karena jumlah datangan lebih dari satu. Di atas sudah di instruksikan mengquery 5 postingan, jadi perlu du ulang sebanyak data yang ada. Silakan modifikasi kerangka htmlnya diantara tag <ul> s/d </ul> seperti di bawah :
|
1 2 3 |
<?php while ($the_query_cat->have_posts()) : $the_query_cat->the_post(); ?> <li><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></li> <?php endwhile; ?> |
Di sini ‘while’ akan melakukan perulangan dengan fungsi ‘have_posts()’ dan ‘the_post()’ berdasarkan data variable $the_query_cat dan ditampilkan dalam bentuk link judul postingan dengan format list item. Oya ada yang ketinggalan, di tag div dengan class card-header juga perlu di modifikasi untuk menampilkan judul kategori berdasarkan id nya. Modif menjadi berikut :
|
1 |
<div class="card-header text-primary">Post dalam kategori <?php echo get_the_category_by_id($cat_id); ?></div> |
echo get_the_category_by_id($cat_id); merupakan fungsi untuk menampilkan nama kategori berdasarkan id atau berdasarkan variable $cat_id. Sedangkan untuk custom query yang ke dua yaitu berdasarkan tag kurang lebihnya sama dengan query berdasarkan kategori. Hanya tinggal menyesuaikan. Variable $cat_id modif menjadi $tag_id, var $the_query_cat menjadi $the_query_tag, kemudian data array nya jika kategori menggunakan ‘cat’ maka untuk tag yang digunakan adalah ‘tag_id’. Oya untuk memanggil judul nama tag sedikit berbeda dengan kategori yaitu digunakan fungsi echo get_tag($tag_id)->name;. Untuk kode lengkapnya silakan lihat dibawah :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<div class="row"> <div class="col-md-6"> <div class="card border-primary"> <?php $cat_id = 77; $the_query_cat = new WP_Query( array( 'cat' => $cat_id, 'posts_per_page' => 5, 'orderby' => 'rand', )); ?> <div class="card-header text-primary">Post dalam kategori <?php echo get_the_category_by_id($cat_id); ?></div> <div class="card-body text-primary"> <ul> <?php while ($the_query_cat->have_posts()) : $the_query_cat->the_post(); ?> <li><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></li> <?php endwhile; ?> </ul> </div> </div> </div> <div class="col-md-6"> <div class="card border-primary"> <?php $tag_id = 87; $the_query_tag = new WP_Query( array( 'tag_id' => $tag_id, 'posts_per_page' => 5, 'orderby' => 'rand', )); ?> <div class="card-header text-primary">Post menggunakan tag <?php echo get_tag($tag_id)->name; ?></div> <div class="card-body text-primary"> <ul> <?php while ($the_query_tag->have_posts()) : $the_query_tag->the_post(); ?> <li><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></li> <?php endwhile; ?> </ul> </div> </div> </div> </div> |
Untuk referensi dan pengembangan lanjutan silakan kunjungi WordPress Documentation https://codex.wordpress.org/Class_Reference/WP_Query
Untuk memahami lebih detai bisa juga simak video berikut :
- Bagikan
-
-
-
-
-
-
Tulisan Terkait
Masyhuri Jamil
Tidak memiliki kompetensi di bidang coding. Tapi selalu semangat terus belajar html, css, php, mysql, java script (jquery). Suka oprek-oprek android juga dan yang pasti suka jalan-jalan (treveling).
