Home » Ask (Forum) » Cara Membuat Trending di WordPress?

Question

Hi,

Saya ingin menambahkan kolom trending di wordpress ? Kalo bisa sih tanpa plugin ya biar agak ringan nantinya.

mohon bantuannya

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

One Answer

  1. angga says:

    Hi,

    Mencoba menjawab.
    Buat script untuk Function terlebih dahulu seperti dibawah ini dan letakkan di fungtion.php template wordpress yang anda gunakan, script dibawah ini digunakan untuk memotong title :

    /*----------------------------------------*/
    /*  Post Title Pendek
    /*----------------------------------------*/
    function mts_short_title($after = '', $length){
        $mytitle = get_the_title();
        if ( strlen($mytitle) > $length ){
            $mytitle = substr($mytitle,0,$length);
            echo $mytitle . $after;
        }
        else { echo $mytitle; }
    }

    Setelah itu tambahkan script dibawah ini di header saya meletakkan code dibawah ini dibawah body jika di theme twenty fourteen, jika di template saya ini saya letakkan di header.php

    <div class="trending-articles">
                    <ul>
                        <li class="firstlink"><?php _e('Trending','nama_template_anda'); ?>:</li>
                        <?php $i = 1; $my_query = new wp_query( 'cat='.'&posts_per_page=4&ignore_sticky_posts=1' ); ?>
                        <?php if ($my_query->have_posts()) : while ($my_query->have_posts()) : $my_query->the_post(); ?>
                            <li class="trending <?php if($i % 4 == 0){echo 'last';} ?>">
                                <a href="<?php the_permalink() ?>" title="<?php the_title(); ?>" rel="bookmark"><?php mts_short_title('...', 24); ?></a>
                            </li>
                        <?php $i++; endwhile; endif;?>
                    </ul>
                </div>

    untuk mempercantik tampilan tambahkan code css dibawah ini atau anda tambahkan sendiri code CSS sesuai dengan desain anda sendiri untuk template anda.

    .trending-articles {
        background: #2a2a2a;
        border-bottom: 1px solid #000;
        float: left;
        width: 100%;
        position: relative;
        z-index: 100;
    }
    .trending-articles ul { list-style: none }
    .trending-articles li {
        border-right: 1px solid #7D7D7D;
        color: #fff;
        float: left;
        font-size: 12px;
        font-weight: 400;
        line-height: 1.2em;
        margin: 10px 0 9px;
        padding: 0 13px;
        text-transform: none;
    }
    .trending-articles li.firstlink {
        border: none;
        padding-left: 20px;
    }
    .trending-articles li.last { border: none }
    .trending-articles li a {
        color: #00c0ad;
        display: block;
    }
    .trending-articles li a:hover { color: #fff }
    Register Member

Your Answer

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