Incluir un menu dinámico con wordpress

Incluir un menu dinámico con wordpress

Trabajando con wordpress necesitarás un menú dinámico que puedas controlar y actualizar desde tu panel de administración de tu CMS WordPress. Es muy fácil hacerlo. Aqui te dejaré el código necesario para incluir uno en tu página web.

Tomaremos como básico el código que podemos copiar desde la página oficial de bootstrap 4 -particularmente de la sección componentes/navbar– y que incluirás en tu fichero header.php de tu página web. El código al que hago referencia tendrá el siguiente aspecto:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <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="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

Para concretar un poco más, las líneas de código html que vamos a reemplazar por código php van a ser las siguientes:

<div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <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="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>

Puesto que estamos creando -imagino- nuestro primer theme desde cero, en el panel de administración de wordpress, en la sección rotulada como apariencia, no aparecerá la opción menu. Tenemos que conseguir que aparezca y lo vamos a hacer del siguiente modo: nos dirigiremos ahora al fichero functions.php de nuestro theme y escribiremos las siguientes líneas de código php:

if ( !function_exists ( 'cdw_menus' ) {
  function cdw_menus () {
    register_nav_menus ( array ( 'superior' => __('Menu Principal Superior') ));
  }

add_action ( 'init', 'cdw_mnus' );
}

Comprobarás como ahora si que en la sección de Apariencia de tu panel de administración de wordpress aparece la opción Menu. Una vez conseguido esto, pasaremos a nuestro fichero header para sustituir el código html que copiamos de la página de bootstrap por codigo php. Es así de fácil como podemos apreciar a continuación:

<?php
   wp_nav_menu ( array (
      'theme_location' => 'superior',
      'container' => 'div',
      'container_class' => 'collapse navbar-collapse',
      'container_id' => 'navbarNav',
      'items_wrap' => '<ul class="navbar-nav ml-auto">%3$s</ul>',
      'menu_class' => 'nav-item'
   ));
?>

Como ves llamamos a una función de wordpress: wp_nav_menu al que se le pasa como argumento un menu asociativo. Existen muchos argumentos que pueden uarse en éste array y que puedes encontrar en la página oficial de wordpress.

En mi caso usaré los siguientes argumentos. El primero será el theme_location que hace referencia al nombre que le dimos a nuestro menu en el fichero functions.php ¿te acuerdas?.

En el código html que pretendemos sustituir, hay un div que incluye todas las opciones.  Eso es lo que le indicamos con la entrada container. En contanier_class y container_id, copiaremos y pegaremos las clases y el id de éste div que hace referencia al correspondiente código CSS3.

Lo siguiente que tememos que tener en cuenta son los item_wrap, esto es, copiar entera la etiqueta ul tal y como puedes ver en el código. Por último, cada etiqueta li tiene una clase que también deberás incluir con la entrada menu_class.

Te parecerá mentira, pero ya has creado tu primer menú dinámico en wordpress. Puedes crear más si lo consideras oportuno. Ahora tan sólo tendrás que dirigirte a apariencia/menu, crear un menu, incluir las páginas que vayas a necesitar como opciones del menu, asociarlo a la ubicación adecuada y ¡listo!, ya has terminado.

Espero vuestros consejos, aportaciones y comentarios en la sección de comentarios de mi blog. Una oportunidad única para aprender y compartir conocimientos con la comunidad wordpress.

No Comments

Post a Comment