Theme WordPress Inclusivo 7: Menú de Navegación

En el último capítulo insertamos el logo, en esta ocasión insertaremos el menú principal en el lugar destinado a tal efecto. Recordemos que estábamos trabajando en header.php, y habíamos dejado el código del modo siguiente:

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <title>Nombre del sitio web</title>
  </head>
  <body>
    <header>
      <div id="logo">
        <figure>
          <img src="<?php echo get_template_directory_uri();?>/img/logo.svg" 
               alt="Descripción #alttext">
        </figure>
      </div>
      <nav aria-label="Menu Principal">
        <!--Aqui el menú de navegación-->
      </nav>
    </header>

El código crece, así que vamos a empezar a trabajar con secciones del código, y además lo haré de forma habitual, para evitar repetir código kilométrico varias veces sólo para variar unas pocas líneas, concretamente, hoy nos centraremos en este bloque:

...
<nav aria-label="Menu Principal">
  <!--Aquí el menú de navegación-->
</nav>
...

Los puntos suspensivos representan que encima y debajo hay más código, pero esos puntos no forman parte de este.

Concretando, vamos a hacer hoy que wordpress muestre el menú principal, que habremos creado en Apariencia / Menú… pero claro, por defecto wordpress no aporta funcionalidad de menú al tema, hay que indicarselo, veamos cómo.

Declaración de Menús

Como decíamos, wordpress no activa por defecto la opción de menús, sino que nos exige definirlos primero, para ello hemos de comprender que wordpress realiza esto mediante funciones, que se incluyen en un fichero functions.php y que estas funciones son puestas a disposición de todo el tema, será el lugar donde creemos aquellas funcionalidades específicas que requiera nuestra creación.

Creamos por tanto functions.php y escribimos en el el siguiente código:

<?php
  // Menus de Navegacion
  function metsu7_menus() {
    register_nav_menus(
      array(
        'desktop-nav'  => esc_html__( 'Desktop', 'Metsu7' )
      )
    );	
  }	
  add_action("init","metsu7_menus");

Veamos este código y su funcionamiento, empiezo por el final ¿porqué esa instruccion add_action?

Bien, WordPress funciona de un modo curioso, usa lo que se denominan hooks, hay miles de ellos de las más diversas índoles, pero todos ellos se basan en un principio muy simple: son funciones que se llaman en momentos concretos del procesamiento de la página… ¿y qué hacen esas funciones? ejecutar código de WordPress y funciones que se agregan por parte de terceros (en esta ocasión nosotros que necesitamos que wordpress reciba la información de los menús que deseamos). Realmente no tiene mas complicacion.

Por tanto ese código sencillamente le indica a WordPress que, cuando procese la parte “init” de la página, tenga en cuenta la ejecución de nuestra función, en la que , a su vez, definiremos los menús que queremos tenga nuestro Theme.

La función declarativa en sí

El primer aspecto que hemos de tomar en consideración es el prefijo de la función en la que se van a definir los menús, en este caso es “metsu7”, pero en el tuyo será el que corresponda con tu tema. Recomiendo usar el mismo Text Domain que definimos en el fichero styles.css, ¿por qué se hace esto? porque WordPress no funcionará bien si existen dos funciones con el mismo nombre, y por otro lado es imposible que tengamos control sobre el 100% de las funciones de WordPress, y de los plugins de terceros, por ello se recomienda usar un prefijo único en las funciones que escribamos, para evitar este solapamiento.

Una vez dicho esto, el nombre en sí es discrecional, pero se recomienda que tenga que ver con el hecho de que estamos definiendo menús, veamos el contenido de la función, sencillamente hay una instrucción register_nav_menus que se encarga de configurar, mediante un array, que menús debe tomar en cuenta WordPress.

¿Que contiene cada elemento del array? básicamente el identificador interno como índice del array, en nuestro ejemplo “desktop-nav” (pretendo incorporar un “mobile-nav” más adelante para poder estructurar cada menú del modo apropiado para el entorno en que se mostrarán).

Como valor, el texto que aparecerá en el interfaz de usuario, pasado por “esc_html__(” para evitar posibles inyecciones de código malicioso y con la gestión correcta respecto a las traducciones de texto para el tema (se pasa como segundo parámetro el Text Domain para permitir a WordPress marcar la cadena como perteneciente al tema), y ya, con esto deberíamos ver las opciones de configuración en Apariencia / Menús.

Dibujando el menú en pantalla.

Bien, una vez que nuestro menú está declarado y hemos agregado las entradas correspondientes en la configuración, pintarlo en pantalla es realmente sencillo, abrimos header.php nuevamente, y en el segmento destinado al menú que habíamos definido anteriormente, colocamos el código siguiente:

...
<nav role="navigation" class="main-menu">
  <?php
    $args = array(
      "theme_location"=>"desktop-nav",
      "container"=>""
    );
    wp_nav_menu($args);
  ?>
</nav>
...

y nuestro menú debería aparecer en pantalla sin mayor problema. ¿Qué hace este código?, bien, simplemente usar a función de WordPress wp_nav_menu pasándole un array con la información del menú que queremos obtener (¿recuerdan el identificador que usamos para crearlo?). WordPress se encargará del resto. Esta función tiene varios parámetros disponibles con los que pueden jugar más adelante, pero esto, es lo básico.

Aprovechen para ver qué más tiene WordPress que ofrecer estudiando el Codex, ¡se sorprenderán de la de cuestiones que ya vienen resueltas de serie!

Quizá te interese ...

Dejar una Respuesta

XHTML: Usted puede usar las siguientes etiquetas: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>