Tampilkan Tag Dalam Bentuk Dropdown

by Tarqy™ on 17 June 2009 · 6 comments

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.

{ 6 comments… read them below or add one }

1 Nauval June 17, 2009 at 13:17

Wah,,mantap nie.. Mksh ya..

Reply

2 maskuncoro June 17, 2009 at 15:12

thx telah berbagi ilmu… :)

Reply

3 faza June 17, 2009 at 19:48

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

Reply

4 H-riez June 17, 2009 at 20:34

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

Reply

5 Cara Bua Web June 18, 2009 at 11:23

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

Reply

6 suryana March 2, 2010 at 19:35

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

Reply

Leave a Comment

CommentLuv Enabled

Previous post:

Next post: