Related Post Thumbnail untuk WordPress

Salah satu keuntungan besar menggunakan WordPress adalah adanya plugin. Dengan adanya plugin anda bisa membuat website yang anda inginkan.

Namun jika terlalu banyak menggunakan plugin itu bisa mengakibatkan website wordpress anda menjadi lambat. Bahkan beberapa plugin ada yang tidak support pada theme yang anda gunakan sehingga website anda tidak jalan.

Dan ada beberapa plugin yang populer dan tentunya sering digunakan oleh banyak blogger, yaitu plugin untuk memunculkan related post atau post terkait di bawah postingan.

Related Post Thumbnail untuk WordPress
Dagruel

Langsung saja cara membuat related post thumbnail untuk wordpress tanpa plugin, cek dibawah.

Mengatur Thumbnail

Aktifkan fitur thumbnail dan masukkan ukuran thumbnail sesuai keinginan anda di wordpress dengan memasukkan code berikut di function.php theme anda.

add_theme_support( 'post-thumbnails' );

add_image_size( 'related-dagruel', 250, 167, true ); // Related Thumbnail

Menambahkan related Post

Letakkan kode berikut di single.php atau di content-single.php

<div class="relatedposts">
<h3>Related posts</h3>
		<ul>
<?php
    $orig_post = $post;
    global $post;
    $tags = wp_get_post_tags($post->ID);

    if ($tags) {
        $tag_ids = array();
        foreach ($tags as $individual_tag) {
            $tag_ids[] = $individual_tag->term_id;
        }
        $args=array(
    'tag__in' => $tag_ids,
    'post__not_in' => array($post->ID),
    'posts_per_page'=>6, // Jumlah related yang ditampilkan.
    'caller_get_posts'=>1
    );

        $my_query = new wp_query($args);

        while ($my_query->have_posts()) {
            $my_query->the_post(); ?>
    <li><div class="relatedthumb">
		<div class='dag-thumb'>
		<a rel="external" href="<?php the_permalink()?>"><?php the_post_thumbnail('related-dagruel', array( 'sizes' => '(max-width:320px), (max-width:425px)' )); ?></a>
		</div>
        <div class='dag-text'>
			<a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a>
		</div>
		</div></li>

    <?php
        }
    }
    $post = $orig_post;
    wp_reset_query();
    ?>
		</ul>
</div>
Dalam single.php letakkan kode nya dibawah the_content() (versi CenterKlik), Dan dalam content-single.php letakkan dibawah </footer> , </div> (versi Saya untuk template Sparkling) seperti gambar dibawah.

Related Post Thumbnail untuk WordPress 2
Dagruel

Mempercantik Tampilan Related Post

Tambahkan CSS dibawah kedalam style.css tema wordpress anda.

/* =Related Post with Thumbnail - Dagruel
----------------------------------------------- */
.relatedposts{
font-weight:600;
margin-top:30px;
line-height:1.5rem
}
.relatedposts h3{
text-transform:capitalize;
}
.relatedposts ul{
display:grid;
grid-gap:20px;
grid-template-columns:repeat(3, 1fr);
margin:0px;
padding:0px;
height:auto;
position:relative;
}
.relatedposts ul li{
background-color: #fff;
list-style:none;
border-radius:7px;
transition:all .2s ease;
}
.relatedposts a{
color: #000;
}
.relatedposts a:hover{
color: #DA4453;
}
.relatedposts .dag-thumb{
overflow:hidden;
line-height:0px;
border-radius:7px 7px 0px 0px;
}
.relatedposts .dag-thumb img{
width:100%;
transition:all .2s ease;
}
.relatedposts .dag-thumb img:hover, .relatedposts .dag-thumb:hover img{
transform:scale(1.1);
filter:brightness(80%);
-webkit-filter:brightness(80%);
}
.relatedposts .dag-text{
padding:15px;
}
.relatedposts .dag-text a{
display:block;
}

@media screen and (max-width:640px){
	.relatedposts ul{
		grid-gap:15px;
		grid-template-columns:repeat(2, 1fr);
	}
}

@media screen and (max-width:320px){
	.relatedposts ul{
		grid-template-columns:repeat(1, 1fr);
		grid-gap:10px;
	}
}

Kode diatas saya dapat dari web CenterKlik dan saya rombak kode nya css nya pun saya ambil dari template Blogger Igniplex. Intinya karena saya senang bereksperimen apapun itu akan saya gabungkan. Untuk Demo Liat Related Post Dibawah.

Sekian Postingan saya kali ini semoga bermanfaat, dan jika ada yang ingin di tanyakan silahkan berkomentar dibawah. Sampai jumpa dipostingan selanjutnya Terima Kasih.

https://www.centerklik.com/membuat-related-post-wordpress-tanpa-plugin > Kode PHP nya
https://igniplex.blogspot.com > Kode CSS nya

Comments