Menambahkan First & Last Class pada Menu UL LI

Salah satu yang menarik perhatian di WordPress 3 adalah penambahan fitur untuk pengaturan menu. Sama seperti wp_page_menu, fungsi wp_nav_menu akan menghasilkan menu dalam bentuk list (ul/li). Untuk keperluan styling CSS, saya ingin menambahkan property first & last di dalam class untuk li yang pertama dan yang terakhir.

Perubahan ini diperlukan supaya styling CSS dengan mudah menandakan menu pertama dan menu terkahir. Meskipun dapat dengan mudah untuk mengatur menu, sayangnya fitur ini tidak membedakan property class tiap menunya. Mungkin diversi berikutnya.

Ini hasil keluaran fungsi wp_nav_menu:

<ul id="main_nav" class="menu">
<li id="menu-item-1" class="menu-item-type-post_type"><a href="#">Menu 1</a></li>
<li id="menu-item-2" class="menu-item-type-post_type"><a href="#">Menu 2</a></li>
<li id="menu-item-3" class="menu-item-type-post_type"><a href="#">Menu 3</a></li>
<li id="menu-item-4" class="menu-item-type-post_type"><a href="#">Menu 4</a></li>
</ul>

Tujuannya untuk merubah seperti berikut:

<ul id="main_nav" class="menu">
<li id="menu-item-1" class="first menu-item-type-post_type"><a href="#">Menu 1</a></li>
<li id="menu-item-2" class="menu-item-type-post_type"><a href="#">Menu 2</a></li>
<li id="menu-item-3" class="menu-item-type-post_type"><a href="#">Menu 3</a></li>
<li id="menu-item-4" class="last menu-item-type-post_type"><a href="#">Menu 4</a></li>
</ul>

Penambahan class=”first dan class=”last ini dapat dilakukan oleh proses preg_replace. Berikut contoh sederhana script PHP dan penggunaannya.

function add_li_first_last($str, $echo=TRUE, $ul=TRUE)
{
  $str = str_replace("\r\n", "", $str);

  //strip ul
  preg_match('/<ul(.*?)>/i', $str, $matches);
  $inul = $matches[1];
  $str = preg_replace('/<ul(.*?)>/i', '', $str);
  $str = str_replace("</ul>", "", $str);

  //insert first
  $str = preg_replace('/^<li(.*?)class=\"/i', '$0first ', $str);
  //insert last
  $str = preg_replace('/<li(.*)class=\"(.*)$/i', '<li$1class="last $2', $str);

  $str = str_replace("</li>", "</li>\r\n", $str);

  if ($ul)
    $str = '<ul '.$inul.' >'.$str.'</ul>';

  if ($echo)
    echo $str;
  else
    return $str;
}

add_li_first_last(wp_nav_menu($args), TRUE);

Fungsi ini perlu ditest beberapa kali untuk hasil outout wp_nav_menu yang berbeda-beda. CMIIW – Demo.