Home » Ask (Forum) » Cara Membuat Related Post Tanpa plugin di WP?

Question

Hallo,

Om, gimana ya cara memasang related post ketika tanpa plugin ? Saya mau meminimalisir penggunaan plugin soalnya, biar lebih enteng

Aug 19, 2016 (4 months ago) - Posted by 1 Comment

One Answer

  1. Septi says:

    Hi,

    1. 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' );
    set_post_thumbnail_size( 150, 100, true );

    2. Tambahkan code berikut di file single.php

    <div class="relatedposts">
    <h3>Related posts</h3>
    <?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'=>4, // Jumlah related yang ditampilkan.
        'caller_get_posts'=>1
        );
         
        $my_query = new wp_query( $args );
     
        while( $my_query->have_posts() ) {
        $my_query->the_post();
        ?>
         
        <div class="relatedthumb">
            <a rel="external" href="<?php the_permalink()?>"><?php the_post_thumbnail(array(150,100)); ?><br />
            <?php the_title(); ?>
            </a>
        </div>
         
        <?php }
        }
        $post = $orig_post;
        wp_reset_query();
        ?>
    </div>

    *note : letakkan kode diatas di bawah the_content() dan anda bisa mengatur ukuran thumbnail di the_post_thumbnail(array(150,100))

    3. Tambahkan code css berikut di style.css theme anda

    /*thumbnail related */ .relatedposts {width: 100%; margin: 0 0 20px 0; float: left; font-size: 12px;} .relatedposts h3 {font-size: 20px; margin: 0 0 5px 0; } .relatedthumb {margin: 0 1px 0 1px; float: left; } .relatedthumb img {margin: 0 0 3px 0; padding: 0;} .relatedthumb a {color :#333; text-decoration: none; display:block; padding: 4px; width: 150px;} .relatedthumb a:hover {background-color: #ddd; color: #000;}
    Register Member

Your Answer

Your email address will not be published. Required fields are marked *