Código HTML para personalizar ítemes de menú

Amir

Actualizado

enero 16, 2013

WPML le permite crear vistosos menús de navegación, con su propio código HTML, para los ítems respectivos.

Comencemos con un ejemplo: supongamos que se desea agregar íconos y una descripción corta a la barra del menú principal, como se muestra en el ejemplo siguiente:

Lo que haremos será agregar campos personalizados a cada una de las páginas, los que contendrán los íconos y los textos descriptivos. Seguidamente, los enlazaremos a la función del menú y le indicaremos que utilice esos campos en los ítems del menú.

Paso 1) Agregar los Campos Personalizados a las páginas

Para que cada página disponga de su propio ícono y descripción, utilizaremos campos personalizados.

Paso 2) Crear la función de Tema que generará los ítems del menú

Necesitamos crear una función que genere código HTML para los ítems del menú. Por defecto, cada ítem tiene asignado el título de página. Esta función nos permitirá insertar código HTML propio dentro de los ítems del menú.

WPML todavía mantendrá la responsabilidad de generar el menú completo, incluyendo el efecto de despliegue, las secciones y todo lo que corresponda. Pero esta función nos permitirá controlar el contenido de cada ítem.

He aquí la función:

function text_for_menu($page_id, $menu_level){
  $ret = '';
  $icon = get_post_meta($page_id,'icon',true);
  $description = get_post_meta($page_id,'Description',true);
  if($menu_level==0){
    if ($icon) $ret .= '<img width="24" height="24" style="vertical-align: middle; margin:0 5px 0 5px;" src="'.$icon.'" alt="icon" />';
    $ret .= get_the_title($page_id);
    $ret .= '<br /><span>'.$description.'</span>';
  } else {
    if ($icon) $ret .= '<img width="16" height="16" style="vertical-align: middle; margin:0 5px 0 0;" src="'.$icon.'" alt="icon" />';
    $ret .= get_the_title($page_id);
  }
  return $ret;
}

Lo que realiza es:

1. Recupera el contenido de los campos personales denominados ‘icon’ y ‘Description’: get_post_meta($page_id,’icon’,true);
2. Verifica el nivel del ítem dentro del menú: la opción principal será ‘0’ y los ítems a desplegar ‘1’.
3. Para la opción principal, agregará un ícono de 24×24, luego el título de la página y, en última instancia, la descripción.
4. Para los ítems desplegables, incluirá un ícono de 16×16 y el título de la página.

Paso 3) Enlazar esta función a WPML

Por último, le indicamos a WPML que utilice esta función para generar los ítems del menú. Lo logramos agregando esta línea al archivo functions.php:

add_filter('icl_nav_page_html', 'text_for_menu', 1, 2);

Ésta le indica a WordPress que agregue una función denominada text_for_menu a la correspondiente icl_nav_page_html de WPML, un filtro estándar de WP que puede ser llamado varias veces para agregar más y más campos.