Membuat News Ticker WordPress Tanpa Plugin

Kalau Anda sering melihat acara TV, seringkali Anda melihat tulisan berjalan dari kanan ke kiri di sebelah bawah layar. Biasanya berisi berita-berita singkat dengan background warna biru atau merah. Inilah yang dimaksud dengan news ticker.

Kita bisa juga memasangnya untuk tampilan di blog WordPress (self hosted). Ada berbagai macam plugin untuk menampilkan news ticker dari WordPress, namun kali ini kita akan membuatnya secara manual. Isi dari tulisan yang berjalan adalah sepuluh judul tulisan terakhir dari blog kita.

Adapun script php untuk memanggil recent post dari WordPress adalah sebagai berikut.
<?php wp_get_archives('title_li=&type=postbypost&limit=10'); ?>
Angka 10 bisa diubah menjadi 5 untuk membuat 5 post terakhir saja yang ditampilkan.

Selanjutnya kita bisa memberikan tag list dari script tersebut agar membuatnya berurutan dalam bentuk list
<ul><li> <?php wp_get_archives('title_li=&type=postbypost&limit=10'); ?> </li></ul>


Untuk membuat efek berjalan, kita bisa menggunakan tag marquee. Tapi jika Anda ingin coding halaman Anda tetap valid, Anda dapat menggunakan javascript. Menggunakan marquee cukup simple, karena tinggal memberikan tag berikut di list recent post.
<marquee></marquee>

Terakhir, beri style untuk menampilkan teks berjalan tersebut dengan CSS.

Berikut ini codingan lengkap news ticker. Kode ini dipasang di template WP. Untuk peletakannya bisa di footer.php dan di atas tag body dengan tulisan seperti ini

</body>

Berikut ini adalah box yang berisi list 10 tulisan terakhir dari blog.
<div id="navigation"> <marquee><div align="center"> <ul id="navmenu"><li>LATEST BLOG POST:</li> <?php wp_get_archives('title_li=&type=postbypost&limit=10'); ?> </ul> </div> </marquee> </div>

Kemudian ini style-nya. Pasang di stylesheet themes.
#navigation {
width: 100%;
height:4%;
padding-top:10px;
margin-left:auto;
margin-right:auto;
background: #CDF4C7;
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 1000;
}

#navmenu {
margin: 0 auto;
position: relative;
z-index: 10;
}

#navmenu li {
display: inline;
padding: 0 5px;
margin:0 5px;
background:#006600;
}

#navmenu a {
text-transform:uppercase;
text-align: center;
color: #fff;
white-space: nowrap;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
}

#navmenu a:focus, #navmenu a:hover, #navmenu a:active {
-moz-box-shadow: 0 0 3px #000;
-webkit-box-shadow: 0 0 3px #000;
box-shadow: 0 0 3px #000;
background:#003300;
}

Untuk live demo, bisa lihat halaman depan blog ini 😀