Widget tag cloud (awan tag) adalah sebuah fitur WordPress yang cukup sering dipakai di blog-blog berbasis WordPress. Fitur ini sudah ada sejak WordPress versi 2.3.
Tampilan Tag Cloud standar
Fitur ini menurut saya memiliki beberapa kekurangan, diantaranya adalah:
- Unit font size default-nya memakai pt (point) yang sudah jarang sekali dipakai di desain modern
- Jumlah tag yang tampil secara default adalah 45 (kecuali jumlah tag dalam blog kurang dari 45), menurut saya itu terlalu banyak dan sayangnya tidak ada pengaturannya dalam opsi widget
- Tag yang tampil diurutkan berdasarkan nama secara alfabetik, menurut saya lebih baik kalau tag yang tampil diurutkan dari yang paling populer dan acak (seperti awan yang selalu berubah bentuk)
Untuk desain blog sendiri sih bisa saja kita masukkan fungsi tag cloud secara manual dengan memasukkan kode PHP <?php wp_tag_cloud(' '); ?> di bagian tertentu, biasanya di sidebar. Tapi kalau kita ingin membuat theme untuk publik atau klien menurut saya ini kurang baik karena mengurangi fleksibilitas end-user (pemakai) untuk mengatur layout blognya, tidak semua orang ingin menampilkan awan tag kan? Cara yang lebih baik adalah dengan mengubah pengaturan default widget awan tag default WordPress dengan membuat fungsi di functions.php.
Langkah Pertama adalah dengan melihat fungsi wp_tag_cloud di direktori WordPress, fungsi ini terletak di folder wp_includes/category-template.php. Jangan mengedit file core WordPress karena berisiko instalasi wordpress rusak, selain itu file yang telah diedit juga akan tertimpa file baru ketika WordPress di-upgrade. Cukup copy saja baris kode berikut ini dari file tersebut ke functions.php :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | function wp_tag_cloud( $args = '' ) { $defaults = array( 'smallest' => 8, 'largest' => 22, 'unit' => 'pt', 'number' => 45, 'format' => 'flat', 'separator' => "\n", 'orderby' => 'name', 'order' => 'ASC', 'exclude' => '', 'include' => '', 'link' => 'view', 'taxonomy' => 'post_tag', 'echo' => true ); $args = wp_parse_args( $args, $defaults ); $tags = get_terms( $args['taxonomy'], array_merge( $args, array( 'orderby' => 'count', 'order' => 'DESC' ) ) ); // Always query top tags if ( empty( $tags ) ) return; foreach ( $tags as $key => $tag ) { if ( 'edit' == $args['link'] ) $link = get_edit_tag_link( $tag->term_id, $args['taxonomy'] ); else $link = get_term_link( intval($tag->term_id), $args['taxonomy'] ); if ( is_wp_error( $link ) ) return false; $tags[ $key ]->link = $link; $tags[ $key ]->id = $tag->term_id; } $return = wp_generate_tag_cloud( $tags, $args ); // Here's where those top tags get sorted according to $args $return = apply_filters( 'wp_tag_cloud', $return, $args ); if ( 'array' == $args['format'] || empty($args['echo']) ) return $return; echo $return; } |
Selanjutnya ganti nama fungsi wp_tag_cloud di baris pertama dengan nama yang lain, misalnya saja custom_tag_cloud.
1 | function custom_tag_cloud( $args = '' ) { |
Ganti juga wp_tag_cloud di baris 28 dengan custom_tag_cloud.
28 | $return = apply_filters( 'custom_tag_cloud', $return, $args ); |
Jika ingin mengubah ukuran dan unit font-size, jumlah tag yang tampil dan susunan tampilannya, edit baris ke 3 dan 4. Sebagai contoh saya mengubah ukuran default font-size menjadi 13px sebagai yang terkecil dan 20px sebagai yang terbesar, selain itu saya juga mengatur agar hanya 15 terpopuler yang tampil dan ditampilkan secara acak. Kodenya menjadi seperti ini:
3 4 | 'smallest' => 13, 'largest' => 20, 'unit' => 'px', 'number' => 15, 'format' => 'flat', 'separator' => "\n", 'orderby' => 'count', 'order' => 'RAND', |
Langkah terakhir adalah membuat perintah agar WordPress menerapkan fungsi yang kita buat. Masukkan kode ini di bagian terbawah kode yang kita buat:
35 36 | remove_filter('wp_tag_cloud', 'custom_tag_cloud'); add_filter('wp_tag_cloud', 'custom_tag_cloud'); |
Hasil akhir dari fungsi custom_tag_cloud adalah seperti ini:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | function custom_tag_cloud( $args = '' ) { $defaults = array( 'smallest' => 13, 'largest' => 20, 'unit' => 'px', 'number' => 15, 'format' => 'flat', 'separator' => "\n", 'orderby' => 'count', 'order' => 'RAND', 'exclude' => '', 'include' => '', 'link' => 'view', 'taxonomy' => 'post_tag', 'echo' => true ); $args = wp_parse_args( $args, $defaults ); $tags = get_terms( $args['taxonomy'], array_merge( $args, array( 'orderby' => 'count', 'order' => 'DESC' ) ) ); // Always query top tags if ( empty( $tags ) ) return; foreach ( $tags as $key => $tag ) { if ( 'edit' == $args['link'] ) $link = get_edit_tag_link( $tag->term_id, $args['taxonomy'] ); else $link = get_term_link( intval($tag->term_id), $args['taxonomy'] ); if ( is_wp_error( $link ) ) return false; $tags[ $key ]->link = $link; $tags[ $key ]->id = $tag->term_id; } $return = wp_generate_tag_cloud( $tags, $args ); // Here's where those top tags get sorted according to $args $return = apply_filters( 'custom_tag_cloud', $return, $args ); if ( 'array' == $args['format'] || empty($args['echo']) ) return $return; echo $return; } remove_filter('wp_tag_cloud', 'custom_tag_cloud'); add_filter('wp_tag_cloud', 'custom_tag_cloud'); |
Selanjutnya kita tinggal mengatur tampilannya dengan CSS sesuai selera, misalnya saja seperti ini:
#wp_tag_cloud a { background:#000; color:#f0f0f0; float:left; margin:5px 3px; padding:5px; border-radius:5px; -moz-border-radius:5px; }
Selamat mencoba ;)
Hey, ini yah yang waktu itu saya tanyakan :D
Thanks ya :)
Baru sempat posting sekarang :D. Tips ini memang cocoknya bagi theme developer saja sih
hehe, kan lumyan buat di terapkan di theme :mrgreen:
Wah ternyata bisa diedit juga to mas…
Mantebb deh, thanx mas Aris..
WordPress adalah Open Source, kita bisa mengedit semua fiturnya.
Sementara ini saya memilih mencopotnya dulu. Saya ingin mengoptimalkan menu posting terbaru, posting pilihan, related post, serta menu arsip.
Btw, tampilan blog ini dalam mode disable image ternyata putih polos yach :P
hehehe saya pakai background bertekstur Pak. Kalau dalam mode disable image selain polos logonya juga hilang, tapi masih aksesibel kan?
gak aksesibel juga yg penting masih bisa di baca postingannya. Kan yg penting konten :mrgreen:
Masih aksesibel kok. Yang penting konten tetap mudah terbaca dengan jelas. Peduli amat masalah judul/logo blog nggak keliatan :) Oya, jangan panggil saya Pak. Ketuaan kayaknya. Pake mas aja kali ya ^-^
Saya biasanya memanggil orang yang lebih tua dengan sebutan Pak, anda kalau saya panggil mas rasanya kemudaan :D
wah, kalau saya masih alami saja mas.
Tag Cloud is dead!
Yeah, saya lihat lebih cenderung pada unsur dekorasi daripada fungsi.
Haha. Ada benarnya juga sih. Tapi kadang tetap berguna, terutama untuk memberi gambaran pada pengunjung mengenai topik dominan yang ada di web/blog tersebut.
Tapi itu dengan catatan jika terlihat sangat menonjol atau pas penempatannya. Jika sudah ada menu/navigasi lain yang dianggap lebih menarik bagi pengunjung, maka tag Cloud ini benar-benar akan tidak berfungsi.
@Ardianzzz: memang fungsinya hanya dekorasi, tapi saya lihat pemakainya masih cukup banyak. Saya sendiri sudah tidak memakainya lagi.
@Mas Is: Setuju dengan anda, satu-satunya fungsi tag cloud, selain sebagai dekorasi, juga memperlihatkan topik yang sering dibahas di blog itu.
Salam blo, br bljr jg nih blo..
mo nanya….klo tag cloud kluar dari template, solusinya gmn ya??
sy dbuatkan sm teman template pk artisteer, trus tag cloud blog sy kluar dr pinggir template.
mohon solusi dong blo….. makasih blo !
Thanks postingnya sangat membantu…!
Manteps gan, makasih tutorialnya ane coba dikit-dikit sambil belajar wp..