Personalizar el theme menu links del phptemplate de drupal

Una de las tareas más comunes a la hora de diseñar el theme para drupal, es el desarrollo del menu principal, y muchas veces he visto por ahi la pregunta ¿ como poner el tag span en los items del menu de drupal ? o ¿como poner html en menú links del drupal? y la verdad es que a mí alguna vez tambien me hizo falta eso, ya que para diseñar menúes mas vistozos y flexibles, es necesario agregar más niveles a la estructura del menú, por lo general basta con un <span> adicional, pero en algunos casos se requiere de uno más, es por esto que despues de buscar algo de info por la web y halgo de ingenio logre darle una solucion bastante practica. Ya que por lo general para imrpimir el menu dentro del theme usamos una función similar a ésta :

<?php print theme('menu_links', $primary_links) ?> 

El ideal al momento de editar la maquetación del menú, es hacerlo desde el archivo template.php de nuestro theme, para asi no tener que mezclar el codigo php con la maquetacion propia del theme.

¿ Y cómo se hace esto ?

Pues simplemente agregando una funcion de la siguiente forma

function phptemplate_ menu_links($primary_links){
}

De ésta manera al momento de aplicar la funcion theme("menu_links",...) drupal usará nuestra funcion en lugar de la que hay por defecto.

Pero y ¿ ahora que hacemos ?

Pues primero copio el contenido de la variable $primary_links para no tener que tocarla más, luego aplicamos un foreach para recorrer cada item del menú, ya habiendo cogido los items es necesario cambiar su propiedad "html" a "true", ésto es muy importante ya que sino el resto de modificaciones que hagamos seran tratados como texto. Luego cogemos la propiedad "title" para nuestro caso estableceremos una jerarquia de tres niveles con lo cual creo yo que todo diseñador tiene más que suficiente para diagramar bien los botones de su menú. Ya que el menu por defecto muestra una etiqueta <a>, solo debemos agregar dos etiquetas <span> anidadas la una en la otra para generar los tres niveles, asignamos las clases respectivas para diferenciar cada span al momento de usar los selectores css y luego solo retornamos el $plinks en formato de $links agregando unas clases adicionales al <ul> contenedor para cogerlo con mayor facilidad con css, cosa que asi no tenemos que envolverlo en un div con algún id.

Y la función nos quedaría así :

 function phptemplate_menu_links($primary_links){
$plinks = $primary_links;
foreach ($plinks as $key => $link):
$plinks[$key]['html'] = true;
$plinks[$key]['title'] = '<span class="left"><span class="right">'.$link['title'].'</span></span>';
endforeach; 
return theme('links',$plinks, array('class' => 'links primary-links'));
}

Ahora que ya se tiene una buena estructuracion jerárquica, y habiendo definido bien las clases css, solo queda dedicarse de lleno al diseño y agregación de los selectores respectivos a su hoja de estilos.

Apoya al Blog

Inicio de sesión

A chatear

Dreamhost