Connect with us

Tips Membuat Custom Wp Query, Rancangan Wp Theme Lanjutan

Technology

Tips Membuat Custom Wp Query, Rancangan Wp Theme Lanjutan

Tips Membuat Custom Wp Query, Rancangan Wp Theme Lanjutan – Custom WP Query selaku perhiasan desain WP Theme.

Dalam merancang penampilan atau tema wordpress, biar interaksi dalam website berbasis wordpress lebih interaktif, kita tidak bisa cuma mengandalkan query standart dari wordpress. Sebelum melangkah lebih jauh, bila temen-sobat belum mengerti apa itu query, coba saya jelaskan dengan singkat. Query bisa di katakan proses pengerjaan data dari database untuk di tampilkan kepada user menurut undangan (request) URL. Jika kita mengklik suatu link atau mempastekan sederetan URL maka komputer server (dalam hal ini servernya 30menit.com ya) akan melakukan query menurut seruan yakni mengambil data dari data base lalu menampilkannya di halaman utama. Yang di tampilkan dalam halaman utama yakni postingan-postingan terbaru. Akan tetapi bila di halaman utama kita tambahkan custom query menurut klasifikasi misalnya maka yg tampil tidak hanya postingan-artikel terbaru, akan ditampilkan juga postingan-postingan menurut klasifikasi tersebut.

Untuk menciptakan custom query, mari kita manfaatkan fungsi WP_Query(). Fungsi tersebut sudah ditawarkan oleh wordpress. Tinggal kita menyertakan variable yang dibutuhkan menurut keinginan. Fungsi WP_Query() akan melaksanakan query berdasarkan variable dan menunjukkan hasil data. Data ditampilkan dengan pengulangan while. Sebagai acuan mari kita buat custom query di bawah query utama wordpress di halaman utama. Kita buat dua custom query menurut kategori dan tag. Sebelum ke fungsi phpnya kita buat kerangka htmlnya apalagi dahulu.

<br/><div class=”row”><br/><div class=”col-md-6″><br/><div class=”card border-primary”><br/><div class=”card-header text-primary”>Judul</div><br/><div class=”card-body text-primary”><br/><ul><br/><li>Test</li><br/></ul><br/></div><br/></div><br/></div><br/><div class=”col-md-6″><br/><div class=”card border-primary”><br/><div class=”card-header text-primary”>Judul 2</div><br/><div class=”card-body text-primary”><br/><ul><br/><li>Test 2</li><br/></ul><br/></div><br/></div><br/></div><br/></div>


12345678910111213141516171819202122
<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 alasannya cuma link judul postingan selaku output query. Mari buat fungsi php nya. Kita letakkan sebelum tag div dengan class card-header alasannya adalah natinya ada fungsi query judul kategori yg mempergunakan fungsi php custom query. Silakan tambahkan kode berikut :

<br/><?php $cat_id= 77;<br/>$the_query_cat= new WP_Query(<br/>array(<br/>’cat’=> $cat_id,<br/>’posts_per_page’=> 5,<br/>’orderby’=> ‘rand’,<br/>)); ?>


1234567
$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 dipakai untuk menampung hasil dari fungsi WP_Query dimana fungsi tersebut memerlukan data array. Dalam pola di atas, ‘cat’ mempunyai arti laksanakan query berdasarkan kategori dengan id mengikuti variable $cat_id, kemudian ‘posts_per_page’ menginstruksikan untuk mengquery 5 posting saja dengan data random menurut perintah ‘orderby’. Agar hasil dari fungsi WP_Query yang di simpan pada variable $the_query_cat mampu 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

mirip di bawah :

<br/><?php while ($the_query_cat->have_posts()) : $the_query_cat->the_post(); ?><br/><li><a href=”<?php the_permalink(); ?>” title=”<?php the_title(); ?>”><?php the_title(); ?></a></li><br/><?php endwhile; ?>


123
while ($the_query_cat->have_posts()) : $the_query_cat->the_post(); ?><li><a href=” the_permalink(); ?>” title=” the_title(); ?>”> the_title(); ?></a></li>endwhile; ?>

Di sini ‘while’ akan melaksanakan perulangan dengan fungsi ‘have_posts()’ dan ‘the_post()’ menurut data variable $the_query_cat dan ditampilkan dalam bentuk link judul artikel dengan format list item.  Oya ada yang ketinggalan, di tag div dengan class card-header juga perlu di adaptasi untuk memperlihatkan judul pembagian terstruktur mengenai berdasarkan id nya. Modif menjadi berikut :

<br/><div class=”card-header text-primary”>Post dalam pembagian terstruktur mengenai <?php echo get_the_category_by_id($cat_id); ?></div>


1
<div class=”card-header text-primary”>Post dalam penjabaran 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 :

<br/><div class=”row”><br/><div class=”col-md-6″><br/><div class=”card border-primary”><br/><?php $cat_id= 77;<br/>$the_query_cat= new WP_Query(<br/>array(<br/>’cat’=> $cat_id,<br/>’posts_per_page’=> 5,<br/>’orderby’=> ‘rand’,<br/>)); ?><br/><div class=”card-header text-primary”>Post dalam pembagian terstruktur mengenai <?php echo get_the_category_by_id($cat_id); ?></div><br/><div class=”card-body text-primary”><br/><ul><br/><?php while ($the_query_cat->have_posts()) : $the_query_cat->the_post(); ?><br/><li><a href=”<?php the_permalink(); ?>” title=”<?php the_title(); ?>”><?php the_title(); ?></a></li><br/><?php endwhile; ?><br/></ul><br/></div><br/></div><br/></div><br/><div class=”col-md-6″><br/><div class=”card border-primary”><br/><?php $tag_id= 87;<br/>$the_query_tag= new WP_Query(<br/>array(<br/>’tag_id’=> $tag_id,<br/>’posts_per_page’=> 5,<br/>’orderby’=> ‘rand’,<br/>)); ?><br/><div class=”card-header text-primary”>Post memakai tag <?php echo get_tag($tag_id)->name; ?></div><br/><div class=”card-body text-primary”><br/><ul><br/><?php while ($the_query_tag->have_posts()) : $the_query_tag->the_post(); ?><br/><li><a href=”<?php the_permalink(); ?>” title=”<?php the_title(); ?>”><?php the_title(); ?></a></li><br/><?php endwhile; ?><br/></ul><br/></div><br/></div><br/></div><br/></div>


12345678910111213141516171819202122232425262728293031323334353637383940
<div class=”row”><div class=”col-md-6″><div class=”card border-primary”>$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 klasifikasi echo get_the_category_by_id($cat_id); ?></div><div class=”card-body text-primary”><ul>while ($the_query_cat->have_posts()) : $the_query_cat->the_post(); ?><li><a href=” the_permalink(); ?>” title=” the_title(); ?>”> the_title(); ?></a></li>endwhile; ?></ul></div></div></div><div class=”col-md-6″><div class=”card border-primary”>$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 memakai tag echo get_tag($tag_id)->name; ?></div><div class=”card-body text-primary”><ul>while ($the_query_tag->have_posts()) : $the_query_tag->the_post(); ?><li><a href=” the_permalink(); ?>” title=” the_title(); ?>”> the_title(); ?></a></li>endwhile; ?></ul></div></div></div></div>

Untuk referensi dan pengembangan lanjutan silakan datangi WordPress Documentation https://codex.wordpress.org/Class_Reference/WP_Query

Click to comment

Leave a Reply

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

More in Technology

To Top