Tampilkan Tag Dalam Bentuk Dropdown

Written by Tarqy™

Topics: Tip & Trik, Wordpress


Tag adalah elemen kecil dalam sebuah posting blog yang merupakan beberapa kata kunci dari posting. Terkadang tag ini jarang diperhatikan, lebih berfokus pada kategori. Kategori mengelompokkan posting berdasarkan tema sedangkan tag memberikan kata kunci pada isi posting. Misalkan sebuah posting yang berisi tentang informasi tentang pemilu presiden, dapat dimasukkan dalam kategori Politik dan dapat ditambahkan tag seperti pilpres, sby, jk, mega, pemilu dan lain-lain.

Untuk menampilkan tag dari posting-posting yang ada dapat menambahkan widget tag pada sidebar, dan bentuknya biasanya urutan tag yang disajikan dalam karakter dengan ukuran yang bervariasi. Bagaimana mengubah tampilan tag dalam bentuk dropdown (menu tarik ulur) seperti kategori?. Caranya adalah menambahkan skrip berikut pada file function.php (khusus Wordpress selfhost) :

<?php
function dropdown_tag_cloud( $args = '' ) {
	$defaults = array(
		'smallest' => 8, 'largest' => 22, 'unit' => 'pt', 'number' => 45,
		'format' => 'flat', 'orderby' => 'name', 'order' => 'ASC',
		'exclude' => '', 'include' => ''
	);
	$args = wp_parse_args( $args, $defaults );

	$tags = get_tags( array_merge($args, array('orderby' => 'count', 'order' => 'DESC')) ); // Always query top tags

	if ( empty($tags) )
		return;

	$return = dropdown_generate_tag_cloud( $tags, $args ); // Here's where those top tags get sorted according to $args
	if ( is_wp_error( $return ) )
		return false;
	else
		echo apply_filters( 'dropdown_tag_cloud', $return, $args );
}

function dropdown_generate_tag_cloud( $tags, $args = '' ) {
	global $wp_rewrite;
	$defaults = array(
		'smallest' => 8, 'largest' => 22, 'unit' => 'pt', 'number' => 45,
		'format' => 'flat', 'orderby' => 'name', 'order' => 'ASC'
	);
	$args = wp_parse_args( $args, $defaults );
	extract($args);

	if ( !$tags )
		return;
	$counts = $tag_links = array();
	foreach ( (array) $tags as $tag ) {
		$counts[$tag->name] = $tag->count;
		$tag_links[$tag->name] = get_tag_link( $tag->term_id );
		if ( is_wp_error( $tag_links[$tag->name] ) )
			return $tag_links[$tag->name];
		$tag_ids[$tag->name] = $tag->term_id;
	}

	$min_count = min($counts);
	$spread = max($counts) - $min_count;
	if ( $spread <= 0 )
		$spread = 1;
	$font_spread = $largest - $smallest;
	if ( $font_spread <= 0 )
		$font_spread = 1;
	$font_step = $font_spread / $spread;

	// SQL cannot save you; this is a second (potentially different) sort on a subset of data.
	if ( 'name' == $orderby )
		uksort($counts, 'strnatcasecmp');
	else
		asort($counts);

	if ( 'DESC' == $order )
		$counts = array_reverse( $counts, true );

	$a = array();

	$rel = ( is_object($wp_rewrite) && $wp_rewrite->using_permalinks() ) ? ' rel="tag"' : '';

	foreach ( $counts as $tag => $count ) {
		$tag_id = $tag_ids[$tag];
		$tag_link = clean_url($tag_links[$tag]);
		$tag = str_replace(' ', '&nbsp;', wp_specialchars( $tag ));
		$a[] = "\t<option value='$tag_link'>$tag ($count)</option>";
	}

	switch ( $format ) :
	case 'array' :
		$return =& $a;
		break;
	case 'list' :
		$return = "<ul class='wp-tag-cloud'>\n\t<li>";
		$return .= join("</li>\n\t<li>", $a);
		$return .= "</li>\n</ul>\n";
		break;
	default :
		$return = join("\n", $a);
		break;
	endswitch;

	return apply_filters( 'dropdown_generate_tag_cloud', $return, $tags, $args );
}
?>

Setelah itu simpanlah. Untuk menampilkannya cukup menambahkan skrip dibawah ini di komponen layout yang ada biasanya di sidebar.php (letak ditentukan sendiri).

<select name="tag-dropdown" onchange="document.location.href=this.options[this.selectedIndex].value;">
	<option value="#">Liste d'auteurs</option>
	<?php dropdown_tag_cloud('number=0&order=asc'); ?>
</select>

Inspirasi dari WPRecipes dan WPHack.

Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • Furl
  • StumbleUpon
  • Technorati
  • TwitThis

6 Comments Comments For This Post I'd Love to Hear Yours!

  1. Nauval says:

    Wah,,mantap nie.. Mksh ya..

  2. maskuncoro says:

    thx telah berbagi ilmu… :)

  3. faza says:

    mantap neh posting nya
    tq dah berbagi ilmu, bermanfaat banget tuh
    di tunggu postingan selanjutnya
    c u :)
    faza´s last blog ..Cita-cita, Setinggi langit or Almari? My ComLuv Profile

  4. H-riez says:

    matur tengkyu ilmu & informasinya Pa..
    H-riez´s last blog ....malam ini.. My ComLuv Profile

  5. Cara Bua Web says:

    Terima kasih sudah berbagi ilmu, mantap banger postingannya, ini sangat bermanfaat, jadi makin yahut deh, sukses ya!

  6. suryana says:

    ini baru mantap, terima kasih tulisannya bermanfaat sekali pas lagi aku butuh nih…. salam kenal

Leave a Comment Here's Your Chance to Be Heard!

CommentLuv Enabled

Switch to our mobile site