WordPress [at] mimpikami . com | WordPress plugin, theme, tutorial, tip, review, dan berbagai info terkait.

Mengubah Kode Template Menjadi Widget

November 6, 2007 – 12:06 pm | Posted in Tutorial, Widget |

Pada WordPress template yg mendukung Widget, sangat mudah jika kita hendak mengatur tampilan dari sidebar, karena kita cukup drag n drop Widget yg ada ke sidebar kita. Recent Post, Recent Comments, dsb bisa kita atur posisinya sesuai dg keinginan kita.

Sayangnya, ga semua informasi yg kita inginkan ada dalam bentuk Widget, sehingga sering kali kita tetap harus mengedit sidebar template dan menambahkan informasi yg diinginkan secara manual. Informasi ini dapat berupa RSS Feed links, Technorati dan berbagai social media links, Adsense, Links ke blog directory, pengumuman sebuah acara, dan lain sebagainya.

Kali ini saya akan memberikan langkah demi langkah cara untuk mengubah semua itu menjadi Widget, dg tujuan akhir untuk memudahkan kita mengatur tampilan dari sidebar kita.

Studi kasusnya dari blog ini aja ya Ok begini, saya mempunyai account WidgetBucks, dan untuk menampilkannya pada sidebar, saya menggunakan kode HTML berikut ini:

1
2
3
4
5

  <li><h2>Sponsor Ads</h2>  
    <ul>   
        <!-- START CUSTOM WIDGETBUCKS CODE --><script src="http://images.widgetbucks.com/script/widgetMagic.js" type="text/javascript"></script><div id="container_5CFikiA7IgoFRcyF" class="wbtw160x600">WidgetBucks - Trend Watch - WidgetBucks.com</div><script type="text/javascript">writeWBStyles("images.widgetbucks.com")setTimeout(function(){var day = "" + new Date().getMonth() + new Date().getDate() + new Date().getYear()var widget = new mpireWidget("http://images.widgetbucks.com/widgets/wbtw160x600.swf?uid=5CFikiA7IgoFRcyF&apiURL=http://www.widgetbucks.com&day="+day,"5CFikiA7IgoFRcyF")widget.write("container_5CFikiA7IgoFRcyF")},Math.floor((Math.random() * 150) - (-(Math.random() * 150))) - (-200))</script><!-- END CUSTOM WIDGETBUCKS CODE -->     
    </ul>
  </li>

Untuk mengubah kode diatas menjadi sebuah Widget, dan tampil di halaman admin Presentation » Widget, yg harus saya lakukan ialah:

1. Saya buka folder template saya, cek apakah ada file functions.php atau tidak? kalau tidak, maka saya bikin sebuah file baru dg nama functions.php, jika sudah ada, maka file ini akan saya buka dan edit.
2. Saya tambahkan sebuah fungsi baru disana dg nama WidgetBucks, yg berisi kode php seperti ini:

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

   < ?php   function WidgetBucks(){ ?> <li><h2>Sponsor Ads</h2> <ul> <!-- START CUSTOM WIDGETBUCKS CODE --><script src="http://images.widgetbucks.com/script/widgetMagic.js" type="text/javascript"></script><div id="container_5CFikiA7IgoFRcyF" class="wbtw160x600">WidgetBucks - Trend Watch - WidgetBucks.com</div><script type="text/javascript">writeWBStyles("images.widgetbucks.com");setTimeout(function(){var day = "" + new Date().getMonth() + new Date().getDate() + new Date().getYear();var widget = new mpireWidget("http://images.widgetbucks.com/widgets/wbtw160x600.swf?uid=5CFikiA7IgoFRcyF&apiURL=http://www.widgetbucks.com&day="+day,"5CFikiA7IgoFRcyF");widget.write("container_5CFikiA7IgoFRcyF");},Math.floor((Math.random() * 150) - (-(Math.random() * 150))) - (-200))</script><!-- END CUSTOM WIDGETBUCKS CODE --> </ul> </li> < ?php }   if (function_exists('register_sidebar_widget')){ register_sidebar_widget('Widget Bucks','WidgetBucks'); }   ?>

3. Saya masuk ke halaman Presentation » Widgets, dan disana saya akan menemukan sebuah Widget baru dg nama Widget Bucks yg bisa saya letakkan di sidebar sesuka saya.
   

Kalau mau nambah Widget lainnya gimana? Gampang aja,

1. Copy paste line 3-11, mungkin ke posisi di line 12 atau 16 atau tempat lain yg diinginkan.
2. Ganti kata “WidgetBucks” di baris ke-3 dg nama fungsi yg diinginkan, mis:

   3	function TechnoratiLinks(){

3. Ganti kata “Sponsor Ads” di baris ke-5 dg judul yg akan tampil di Sidebar.
4. Ganti baris ke-7 dg kode yg hendak di letakkan di Sidebar kita, baik itu kode Adsense, daftar RSS links atau Technorati links, dan sebagainya.
5. Tambahkan register untuk fungsi tadi ke baris ke-14, sehingga jadi seperti ini:

   14 15 16 17

   if (function_exists('register_sidebar_widget')){ register_sidebar_widget('Widget Bucks','WidgetBucks'); register_sidebar_widget('Technorati Links','TechnoratiLinks'); }

6. Masih ada lagi? Ga kok, sekarang kita udah punya Widget baru bernama Technorati Links di halaman Widgets kita.

Gimana, gampang kan? Kita bisa menambahkan sebanyak apapun Widget sesuai dg keperluan kita, dan lain kali ketika kita mengganti Theme, cukup copy file functions.php ini ke folder template yg baru, and it’s done!

Kalau theme yg bersangkutan sudah punya file functions.php, yaa.. tinggal edit n copas lagi kode yg udah kita buat ini hehehe… I love WordPress

If you enjoyed this post, please subscribe to my blog RSS feed, and thanks for stopping by :)