Membuat Masonry Bootstrap 4 untuk WordPress

September 19, 2018 Artikel,Snippets,WordPress Kholis Muhaimin

Singkatnya, dengan masonry tampilan engga acak-acakan. Walapun konten maupun gambar tidak sama lebar dan tingginya, jika kamu sedang membuat custom theme WordPress. Artikel ini bisa jadi solusi kamu :D, perhatikan script di bawah ini.

  <div class="container masonry">
<div class="card-columns">
<?php $the_query = new WP_Query( 'posts_per_page=6' ); ?>`
<?php while ($the_query -> have_posts()) : $the_query -> the_post(); ?>
<div class="card">

<a href="<?php the_permalink(); ?>">
<?php 
if ( has_post_thumbnail() ) { 
the_post_thumbnail('full', array('class' => 'img-fluid card-img-top'));; 
} 
else {
echo '<img class="img-fluid" src="' . get_bloginfo( 'stylesheet_directory' ) . '/images/thumb.jpg" alt="<?php the_title(); ?>" />';
}
?></a>
<div class="card-body">
<h5 class="card-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h5>
<p class="card-text"><?php echo kholisnet_get_the_catcharacter_excerpt(); ?>...</p>
</div>
</div>
<?php
endwhile;
wp_reset_postdata();
?> 
</div>
</div>

 

 

Script di atas digunakan pada custom template, makanya menggunakan WP_Query. Script ini menampilkan 6 artikel terbaru, kamu bisa rubah nilai nya disini posts_per_page=6.

112 total views, 1 views today

Facebooktwittergoogle_plusredditpinterestlinkedinmail