Cara Menampilkan WordPress Loop Atau The Loop. Loop adalah kode PHP yang berfungsi untuk menampilkan sejumlah posting WordPress. WordPress Loop dipergunakan di dalam sebuah tema WordPress untuk menampilkan daftar postingan di halaman web.
Loop WordPress dapat dikatakan menjadi salah satu aspek terpenting dari sejumlah kode WordPress dan menjadi inti dari sebagian besar kueri. Di dalam loop tersebut terdapat beberapa fungsi yang dijalankan secara default untuk menampilkan postingan.
Pengguna atau webmaster dapat mengubah atau mencustom loop agar bisa menampilan sejumlah informasi atau fungsi yang diperlukan.
The Loop pada umumnya akan menampilkan informasi berikut secara default untuk setiap posting .
- Judul Post(the_title())
- Waktu(the_time())
- Kategori(the_category()).
- Konten(the_content()).
- Gambar (the_thumbnail()).
Cara Menampilkan WordPress Loop
Berikut ini kami beri salah satu contoh bentuk wordpress loop. Kode ini bisa dicustom lagi menyesuaikan kebutuhan.
Beberapa waktu yang lalu ada salah satu pengunjung yang mengirim lewat komentar yang bertanya tentang cara menempatkan judul artikel di atas foto featured image. Maka dalam panduan ini maka kami sertakan susunan kode yang judul berada di atas gambar. Apabila ingin diubah maka tinggal diubah saja kodenya sesuai yang diinginkan.
NB: kami menggunakan tambahan CSS dari bootstrap.
Menampilkan Loop Tanpa Pagination
Untuk penjelasan yang ada tanda “//” dihapus saja
<?php
query_posts( array(
'showposts' => '3', // jumlah post yang ditampilkan
'cat' => '9', // ID kategori
) );
echo '<div class="row m-0">';
if( have_posts() ) : while( have_posts() ) : the_post();
?>
<div class="col-12 col-sm-6 col-md-4 p-2">
// Menampilkan Judul
<div class="title"><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></div>
// Menampilkan Gambar
<div class="thumbnail">
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<?php if ( has_post_thumbnail() ) : ?>
<?php the_post_thumbnail('medium'); ?>
<?php else: ?>
<?php endif; ?>
</a>
</div>
// Menampilkan Waktu
<div class="time"><?php the_time('j F Y'); ?></div>
// Menampilkan Ringkasan Konten
<div class="content">
<?php
$content = get_the_content();
$trimmed_content = wp_trim_words( $content, 10 );
echo $trimmed_content;
?>
</div>
</div>
<?php endwhile;
else :
_e( '<div class="no-post col-12 p-2">Belum ada post.</div>' );
endif;
echo '</div>';
wp_reset_query ();
?>
Untuk tampilannya kurang lebih akan seperti ini
Menampilkan Loop Dengan Pagination
Untuk penjelasan yang ada tanda “//” dihapus saja
<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$vkgs=array('paged' =>$paged,
'posts_per_page' => '6', // jumlah post yang ditampilkan per halaman
'cat' => '9', // ID kategori
);
$vkquery = new WP_Query($vkgs);
echo '<div class="row m-0">';
if( $vkquery -> have_posts() ) : while( $vkquery -> have_posts() ) : $vkquery -> the_post();
?>
<div class="col-12 col-sm-6 col-md-4 p-2">
// Menampilkan Judul
<div class="title"><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></div>
// Menampilkan Gambar
<div class="thumbnail">
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<?php if ( has_post_thumbnail() ) : ?>
<?php the_post_thumbnail('medium'); ?>
<?php else: ?>
<?php endif; ?>
</a>
</div>
// Menampilkan Waktu
<div class="time"><?php the_time('j F Y'); ?></div>
// Menampilkan Ringkasan Konten
<div class="content">
<?php
$content = get_the_content();
$trimmed_content = wp_trim_words( $content, 10 );
echo $trimmed_content;
?>
</div>
</div>
<?php endwhile;
// Menampilkan Ringkasan Konten
global $wp_query;
echo '<div class="ast-pagination">';
$big = 999999999; // need an unlikely integer
echo "<nav class='pagination'>". paginate_links( array(
'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
'format' => '?paged=%#%',
'current' => max( 1, get_query_var('paged') ),
'total' => $vkquery->max_num_pages) ) ."
</nav>";
echo '</div>';
else :
_e( '<div class="no-post col-12 p-2">Belum ada post.</div>' );
endif;
echo '</div>';
wp_reset_query ();
?>
Untuk tampilannya kurang lebih akan seperti ini
Terima kasih telah mengunjungi website kami.
Share jika bermanfaat, jika ada kritik, tambahan dan saran silakan hubungi kami atau silakan isi di kolom komentar.
Komentar