Agregar clases al primer y último elemento del menú

Una de las nuevas funcionalidades de WordPress a partir de su versión 3 es la creación de menús personalizados que permiten incluir secciones de menú dentro de un tema para que los usuarios desde el panel de administración creen y editen sus propios menús.

El código generado en html incluye elementos para personalizar el diseño, la clase ‘menu-item’ para los menús de usuario generado por la función wp_nav_menu y la clase ‘page-item’ para los menús de páginas generados por wp_page_menu que se utiliza por ejemplo en el tema Twenty Eleven como menú de la página de Inicio.

En algunas ocasiones resulta útil agregar clases particulares al primero y último elemento del menú. Para esto agregamos el siguiente código al archivo functions.php de nuestro tema, el mismo modifica el html que generan las funciones de menú para incluir las clases ‘first-menu-item’ y ‘last-menu-item’ para menús de usuario; ‘first-page-item’ y ‘last-page-item’ para menús de páginas.

function add_first_and_last($output) {
	if(strpos($output, 'menu-item')){
		$output = preg_replace('/class="menu-item/', 'class="first-menu-item menu-item', $output, 1);
		$output = substr_replace($output, 'class="last-menu-item menu-item', strripos($output, 'class="menu-item'), strlen('class="menu-item'));
	}
	else{
		$output = preg_replace('/<li class="/', '<li class="first-page-item ', $output, 1);
		$output = substr_replace($output, '<li class="last-page-item ', strripos($output, '<li class="'), strlen('<li class="'));
	}
		return $output;
}
add_filter('wp_nav_menu', 'add_first_and_last');
add_filter('wp_page_menu', 'add_first_and_last');

Para modificar el diseño entonces, en el css incluimos reglas como:

li.first-menu-item{
    border-left: 1px solid #bbb;
}

Y de esta misma manera con las demás clases dependiendo del diseño que queramos darle.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.