Cara Membuat Trending Recent Di Wordpress Tanpa Plugin

Selamat datang di blog tutorial sederhana bantoel.com , kali ini saya akan berbagi tips cara membuat trending recent di wordpress tanpa plugin, trending recent ini bisa di letakan dimana saja terutama di bagian bawah menu navigasi.

contoh penampakanya seperti ini


Ok lansung saja ke TKP ,

1. Copy script di bawah ini dan letakan di fuction.php

/*----------------------------------------*/
/*  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; }
}

 2 Kemudian copy Script di bawah ini di mana saja sesuai keinginan ana, kalau saya saranin 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>

3. Simpan CSS di bawah ini di style theme 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 }

Untuk mempercantik silahkan anda kreasikan sendiri dengan theme website anda,
semoga tips saya bermanfaat terimakasih.

KOMENTAR DISINI

ARTIKEL TERBARU: