Creando un theme para wordpress III

Creando un theme para wordpress III

Mi objetivo hoy es abordar el tema de los menús en wordpress. No es dificil hacer que el menú de nuestra página web sea dinámico, y éste cms pone a tu disposición todas las herramientas que te harán falta para conseguirlo de una manera fácil.

A pesar de todo, no está de más tener a mano el codex de wordpress para hacer las consultas que sean necesarias.

Recordarás, que en nuestro fichero header.php teníamos el código de nuestra página web incluido el menú principal. Obvio que podrás crear más menús -todos los que quieras- en cualquier parte de la página. Yo, por motivos de simplicidad y didácticos me limitaré al menú principal ubicado en éste fichero php.

El código que tenemos es el que copiamos de la página de bootstrap. Cierto es que tu puedes crearte tu própio menu, pero hacerlo de ésta manera es más fácil.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
 <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

A mi lo que me interesa es el div con el identificador navbarSupportedContent. Entre éstos divs será donde situemos nuestro menu dinámico, que podremos configurar en wordpress como mejor necesitemos. Veamos cómo nos quedaría el código y, después iremos explicando un poco lo que he hecho.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  
<div class="row">

          <?php wp_nav_menu ( array ( 

              'theme_location' => 'superior',
              'container' => 'div',
              'container_class' => 'collapse navbar-collapse',
              'container_id' => 'navbarSupportedContent',
              'items_wrap' => '<ul class="navbar-nav mr-auto">%3$s</ul>',
              'menu_class' => 'nav-item'

           ) ); ?>

        </div>

</nav>

El procedimiento wp_nav_menu será el encargado de colocar el menú en la posición de la página web que le estamos indicando. Este procedimiento tiene un solo argumento: un array que contendrá una serie de parejas clave valor, como veremos a continuación.

La primera clave theme_location, identificará al menú que queremos situar en ésta parte de la página web. Esta identificación es única y se establecerá en el fichero functions.php, como veremos más adelante.

Como hemos visto en el código anterior, el menú -las etiquetas ul/li- las teniamos encerradas entre dos etiquetas div. Para indicar ésta circunstancia, utilizaremos el par clave/valor: container => div.

Este div contenia un identificador y una serie de clases. Para indicarle a wordpress ésto, utilizaremos las claves: container_class y container_id.

El siguiente paso es indicarle las etiquetas html <ul></ul> y las clases que contiene ésta etiqueta. Para ello la clave items_wrap.

Nos falta por hacer dos cositas: incluir la clase de cada etiqueta <li> y la clase de la etiqueta <a>. La primera será un par clave/valor menu_class/nav_item. Para lo segundo, lo haremos en el fichero functions.php. Es necesario escribir éste código:

add_filter ( 'nav_menu_link_attributes', 'clase_menu_enlace', 10, 3 );

function clase_menu_enlace ( $atts, $item, $args ) {

	$class = 'nav-link';
	$atts['class'] = $class;

	return $atts;

}

Para terminar, y que el menú que estamos intentando poner en forma dinámica en wordpress funcione, habrá que escribir en el fichero function el siguiente código:

f ( function_exists('register_nav_menus') ) {

	register_nav_menus ( array ('superior' => 'Menu Principal Superior'));

}

Ni que decir tiene que se poner en wordpress todos los menus que sean necesarios, no está limitado a uno solo.

¿Que más queda por hacer?. Pues en el panel de administración de wordpress, buscaremos el menú apariencia, y dentro de él veremos que nos aparece ahora la opción menus. Tan sólo nos quedará entrar alli, seleccionar el menú con el nombre que le indicamos en el código, personalizarlo con las opciones que necesitemos y pulsar en el botón guardar. Y ya hemos terminado.

Como siempre, agradezco todos los comentarios y aportaciones que sirvan para entriquecer éste tema.

No Comments

Post a Comment