Dynamic Menu Highlighting adalah sebuah cara yang sudah banyak digunakan oleh banyak desainer theme WordPress — untuk menambahkan class secara dinamis pada navigasi blog WordPress. Gunanya untuk memberi semacam informasi kepada pembaca mengenai halaman apa yang sedang dilihat.

Seperti fungsinya, halaman yang sedang dibuka mempunyai class yang berbeda dengan halaman-halaman lain yang tidak dibuka. Sebagai contoh bisa kita lihat di blog ini, dimana tab home akan ter-highlight saat kita membuka halaman depan, sedangkan yang lain seperti about dan contact tidak ter-highlight. Begitu juga apabila halaman contact dibuka maka hanya tab contact-lah yang ter-highlight sedangkan yang lainnya tidak.

Untuk membuat highlight menu navigasi yang dinamis seperti itu tentu saja kita harus mengaplikasikan WordPress Conditional Tags. Ada beberapa metode conditional tags yang bisa dipakai.

<ul class="menu">
	<li class="<?php if ( is_home() or is_archive() or is_single() or is_paged() or is_search() or (function_exists('is_tag') and is_tag()) ) { ?>current_page_item<?php } else { ?>page_item<?php } ?>"><a href="<?php echo get_settings('home'); ?>" title="<?php _e('Home'); ?>"><?php _e('Home'); ?></a></li>
	<?php wp_list_pages('sort_column=post_title&depth=1&title_li='); ?>
	<?php wp_register('<li>','</li>'); ?>
</ul>

Kode di atas adalah kode sederhana yang saya pakai untuk dynamic highlight menu blog ini. Kode tersebut menambahkan class="current_page_item" pada tab halaman yang sedang dibuka, dan class="page_item" pada tab halaman lainnya. Kode tersebut cocok digunakan untuk navigasi blog yang hanya menggunakan dua class yang membedakan halaman yang sedang dibuka dan yang tidak.

Terus bagaimana caranya membuat dynamic menu highlighting untuk navigasi yang tiap li tab halamannya mempunyai class sendiri-sendiri?

Salah satu contoh bagus dalam penggunaan class berbeda pada tiap halaman bisa kita lihat pada sistem navigasi dinamis Pearsonified. Pada tab navigasinya, ada empat menu yang dipakai, yang tiap menu merujuk pada halaman tertentu: home, archives, themes, dan about.

Apabila kita membuka salah satu halaman dan melihat kode sumbernya, maka kita akan tahu bahwa ada class yang ditambahkan pada header. Kita ambil contoh kode sumber home ↓

<div id="header" class="home">
	<div id="logo">
		<a href="http://www.pearsonified.com"></a>
	</div>
	<ul id="nav">
		<li id="home"><a href="http://www.pearsonified.com">home</a></li>
		<li id="archives"><a href="http://www.pearsonified.com/archives/">archives</a></li>
		<li id="themes"><a href="http://www.pearsonified.com/themes/">WordPress themes</a></li>
		<li id="about" class="last"><a href="http://www.pearsonified.com/about/">about</a></li>
	</ul>
</div>

Class home pada baris pertama merupakan class yang dipakai pada homepage. Sedangkan halaman archives, themes, dan about mempunyai class tersendiri: archives, themes, dan about.

Sekarang kita tahu bahwa keempat class tersebut sifatnya kondisional, penambahannya tergantung pada halaman yang dibuka. Bagaimana cara membuatnya? Tentu saja dengan Conditional Tags

<?php if (is_home()) { ?>
<div id="header" class="home">
<?php } elseif ( is_search() || is_single() || is_attachment() || is_date() || is_tag() || is_author()) { ?>
<div id="header" class="archive">
<?php } elseif (is_page('Themes')) { ?>
<div id="header" class="themes">
<?php } elseif (is_page('About')) { ?>
<div id="header" class="about">
<?php } else { ?>
<div class="archive">
<?php } ?>
	<ul id="nav">
		<li id="home"><a href="http://www.pearsonified.com">home</a></li>
		<li id="archives"><a href="http://www.pearsonified.com/archives/">archives</a></li>
		<li id="themes"><a href="http://www.pearsonified.com/themes/">WordPress themes</a></li>
		<li id="about" class="last"><a href="http://www.pearsonified.com/about/">about</a></li>
	</ul>
</div>

Kode Conditional Tags di atas (baris 1-11) akan memilih class yang sesuai untuk setiap halaman — home untuk homepage, archives untuk halaman pencarian, single post, dan arsip; themes untuk themes, dan about untuk about.

Sedikit kode CSS diperlukan untuk menyempurnakan dynamic menu highlighting ini ↓

ul#nav {
	list-style:none;
	width:332px;
	height:30px;
	margin:6px 0 0 0;
	background:url('images/nav_menu.gif') 0 0 no-repeat;
	float:left
}
ul#nav li {
	width:80px;
	height:30px;
	padding:0 4px 0 0;
	text-indent:-9999px;
	float:left
}
ul#nav li.last {padding:0}
ul#nav li a, ul#nav li a:visited, ul#nav li a:hover {
	display:block;
	width:80px;
	height:30px;
	background:transparent url('images/nav_menu.gif') no-repeat;
	outline:none
}
ul#nav li#home a,
ul#nav li#home a:visited {background-position:0 0}
ul#nav li#archives a,
ul#nav li#archives a:visited {background-position:-84px 0}
ul#nav li#themes a,
ul#nav li#themes a:visited {background-position:-168px 0}
ul#nav li#about a,
ul#nav li#about a:visited {background-position:-252px 0}
ul#nav li#home a:hover {background-position:0 -30px}
ul#nav li#archives a:hover {background-position:-84px -30px}
ul#nav li#themes a:hover {background-position:-168px -30px}
ul#nav li#about a:hover {background-position:-252px -30px}
.home ul#nav li#home a,
.home ul#nav li#home a:visited,
.home ul#nav li#home a:hover {
	background-position:0 -60px;
	cursor:default
}
.archive ul#nav li#archives a,
.archive ul#nav li#archives a:visited,
.archive ul#nav li#archives a:hover {
	background-position:-84px -60px;
	cursor:default
}
.themes ul#nav li#themes a,
.themes ul#nav li#themes a:visited,
.themes ul#nav li#themes a:hover {
	background-position:-168px -60px;
	cursor:default
}
.about ul#nav li#about a,
.about ul#nav li#about a:visited,
.about ul#nav li#about a:hover {
	background-position:-252px -60px;
	cursor:default
}

Pemakaian conditional tags tergantung pada theme yang dipakai dan halaman yang dibuat, tetapi semuanya tetap menggunakan konsep conditional statement if-else seperti contoh tadi. Ingin mencoba membuat highlight menu dinamis? Silakan buat beberapa file HTML (untuk beberapa class berbeda), tambahkan kode sumber HTML navigasi dan CSS di atas, dan gambar ini sebagai backgroundnya.