Download Now Download Themes Gratis WordPress Responsive!

Membuat Trending di WordPress Tanpa Plugin

Bagaimana cara membuat trending dari postingan seperti yang terlihat di header dari blog centerklik ini? yang menggunakan wordpress, sebenarnya banya plugins yang tersedia tapi kali ini saya akan mencoba membuatnya tanpa plugins, atau seperti website-website berita seperti pada umumnya.
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 }

berikut adalah tutorial untuk membuat trending sederhana pada wordpress tanpa plugin. selamat mencoba, dan jika ada pertanyaan silahkan tinggalkan komentar.

Anda Terbantu artikel ini? Silahkan bergabung dengan centerklik di Twitter dan Google+.

Daftar isi Tutorial Wordpress Terlengkap Gratis
10 top hosting!

Register Now: TOP 10 Hosting

Dapatkan Hosting Murah dengan Kualitas Terbaik. For Serious Blogger! View Deals

Bluehost Hosting

$2.95/Month Free Domain, Unlimited Space & Bandwidth Get Host

iPage Hosting

$1.99/Month Free Domain, Unlimited Space & Bandwidth Get Host

SiteGround Hosting

$3.45/Month Free Domain, Unlimited Space & Bandwidth Get Host

WebHostingPad

$1.99/Month Free Domain, Unlimited Space & Bandwidth Get Host

Hostgator

$3.95/Month Free Domain, Unlimited Space & Bandwidth Get Host

  • Muhammad Zaki Al-Aziz

    Mantap mas 🙂
    Saya coba ntar he

  • Hifhzil My Id

    Bisa mas, terima kasih buat tutorialnya. Tapi kalo saya ingin menampilkan trending menjadi 5 gimana caranya, sedangkan yang tampil hanya 5 item post yang jadi trending. Maksud saya agar lebarnya sesui theme.

    • cara nampilin 5 di script header diatas yang punya nilai 4 ganti dengan 5 gan. dan untuk panjang judul di script header baris 7, ada angka 24 itu dikurangi aja gan. disesuaikan. 🙂

      • Hifhzil My Id

        Tapi kok fungsinya setelah saya coba lebih mirip “recent post”, bukannya seperti trending/popular post. Apa saya yang salah menerapkan, atau ada yang salah dengan tema yang saya pakai. Mohon penjelasannya!

Must Read...!
Theme WordPress FruitFul Responsive Free

Template Fruitful adalah Template Wordpress Responsive Free yang di desain dengan tampilan yang bersih...

Theme WordPress Bigfoot Responsive Free

Bigfoot adalah Template Wordpress yang didesain dengan tampilan yang Full, Responsive, indah dengan slide...

Close