Añade una descripción a los links del menú

Beware: This post was published 8 years ago and its content may be outdated.

Menú con descripción

En algunas páginas webs los links del menú principal tienen una descripción añadida, algo como “Inicio – Vuelve al inicio de la web”, y además de ser un detalle más, puede ayudar al visitante a conocer por encima el contenido de cada página de tu web.

Hay muchas plantillas para diversos CMS (sobretodo para Joomla) que permiten añadir una descripción a los elementos de cada menú, pero aún no he visto ninguna que lo permita en WordPress, y he decidido redactar un tutorial para explicar cómo añadir estas descripciones a nuestro theme.

En primer lugar, explicaré el proceso que usaremos para añadir estas descripciones a los links del menú:

WordPress genera el menú de forma automática: crea una lista de las páginas del blog. Cada página puede tener campos personalizados, y utilizaremos uno de estos para almacenar las descripciones. Así que editaremos cada página del blog y le añadiremos el campo personalizado subtitle, y le daremos un valor que describa el contenido de la página.

Añadiendo el campo personalizado

Lo siguiente que haremos será crear una función que edite el listado de páginas del blog y a cada página le asigne la descripción que le corresponde, para luego pasar a mostrar el listado de páginas con descripciones.

Esta función estará definida en functions.php, así que abrimos el archivo, nos situamos al final y añadimos el siguiente código:

function create_main_menu() {
$pages = wp_list_pages('echo=0');
$pages = explode('<ul>', $pages);
$pages = explode('</ul>', $pages[1]);
$pages_array = explode('</li>', $pages[0]);
foreach ($pages_array as $value) {
$value_2 = explode('page-item-', $value);
$value_2 = explode('"><a href="', $value_2[1]);
$value_2 = str_replace('current_page_item', '', $value_2[0]);
$meta = get_post_meta($value_2[0], 'subtitle', true);
$value = str_replace('</a>', ' <span class="subtitle">'. $meta .'</span></a>', $value);
echo $value;
}
}

¿Qué hace el código? Bien, lo explico línea a lína:

  1. Comienza la definición de la función create_main_menu
  2. Se crea la variable pages, que contiene el código HTML que devuelve la función wp_list_pages (la que crea el menú en WordPress)
  3. Se le da una nuevo valor a pages, esta vez en forma de matriz que contiene los diversos trozos resultantes de dividir la variable pages original cada vez que aparece un elemento <ul>
  4. Se le da de nuevo un nuevo valor a pages, en forma de matriz que contiene los diversos trozos resultantes de dividir el trozo 1 de la varible pages anterior cada vez que aparece un elemento </ul>
    Estas dos líneas nos permiten centrarnos en el contenido que hay entre el <ul> y </ul>, es decir, en la lista de links del menú en sí
  5. Se crea la variable pages_array, en forma de matriz, que contiene en cada índice un link del menú. Se usa las etiquetas </li> para distinguir cuando acaba un link del menú
  6. Comienza un bucle foreach, en el que la variable pages_array pasa a ser la variable value
  7. Se crea la variable value_2, fruto de descomponer en trozos cada link del menú usando de separador page-item-, el texto que hay antes de la ID de la página del link en cuestión
  8. Se le da un nuevo valor a la varaible value_2, de nuevo es fruto de dividir en trozos la parte 1 de la separación anterior, esta vez usamos de separador “><a href=”, el texto que hay inmediatamente después de la ID de la página del link
  9. Le damos un nuevo valor a value_2, esta vez eliminamos el texto current_page_item, que aparece después de la ID de la página del link que se está visitando en cada momento
    Las tres líneas anteriores nos dejan aislado la ID de cada página, de modo que ahora tenemos el link y la ID de la página del link
  10. Se crea la variable meta, que almacena la descripción del link. Si os dijáis, se usa la función get_post_meta, que tiene 3 parámetros: el primero es la ID de la cual busca los campos personalizados, el segundo es el nombre del campo y el tercero es para elegir entre que la función devuelva un único elemento o una matriz con varios elementos
  11. Se modifica el contenido de la variable value, añadiendo antes del final del link la descripción de la página
  12. En esta línea se muestra cada link
  13. Ahora se cierra el bucle foreach
  14. Y por último se da por definida la función

Ahora en nuestro theme debemos sustituir la función wp_list_pages por create_main_menu y ya tendremos un menú con descripciones.

Nota: Faltaría el código CSS para hacer que el menú quede como en la imagen del comienzo del artículo, pero el problema es que los themes que vienen por defecto en WordPress no tienen un menú apto para añadir esta descripción del modo que aparece en la imagen.