WP desde cero (15): menús I

En esta entrada veremos cómo se prepara un menú sencillo en WordPress.

Roy Lichtenstein

archivado en: WordPress / 11 enero, 2013 / taller:

Seguimos con la serie de WordPress. En esta entrada empezaremos a ver cómo se preparan los menús, es decir, las barras de navegación. Es un tema de complejidad creciente. En la primera parte veremos cómo hacer menús sencillos y en la segunda cómo hacerlos más sofisticados, para lo que se necesita, claro está, una programación más compleja.

Lo primero es registrar en el archivo functions.php los menús que se vayan a usar. Para el tema que estamos preparando vamos a hacer dos que irán en paralelo, como en este blog. El superior será sencillo y el inferior ya más complejo.

Para registrar uno o más menús hay que usar la función register_nav_menus(), a la que se le pasa un array asociativo formado por el slug, el nombre que se usará luego, del menú y el nombre con que se mostrará en el back-end, el cual se indica con la notación __('nombre', 'nombre del tema') para la traducción.

  • register_nav_menus( array (
  • 'principal' => __( 'barra principal', 'mmfilesi-bones' ),
  • 'secundaria'=>__( 'barra secundaria', 'mmfilesi-bones' )
  • ));

Con esto ya tendríamos los dos menús listos para ser definidos en el back-end

[singlepic id=62 w=304 h=267 float=center]

Ahora solo falta colocarlos en el front-end mediante la función wp_nav_menu(), a la que por lo menos conviene pasar los siguientes parámetros en un array:

  1. container: el tag que englobará el menú. Por defecto es div, pero se puede poner también nav, que es más apropiado. Para que no ponga ninguno hay que escribir false.
  2. items_wrap: una especie de segundo contenedor. Como genera una lista desordenada, conviene poner aquí un ul encorchetando la expresión %3$s, que será la que luego se traducirá en los elementos del menú (%1$s sirve para generar un id automático y %2$s para una clase dinámica, pero es mejor indicar estos dos valores directamente).
  3. theme_location: el slug del menú.

Así, por ejemplo, en nuestro tema, podemos ir reemplazando la expresión «<nav>Aquí irá la barra de navegación</nav>» del archivo header.php por este código:

  • <?php wp_nav_menu(
  • array(
  • 'container' => 'nav',
  • 'items_wrap' => '<ul id="menu_principal">%3$s</ul>',
  • 'theme_location' => 'principal'
  • )); ?>

Un poco de CSS

Para ir viendo qué estamos haciendo, vamos a añadir tres opciones a un menú que llamaremos a y que pondremos en el lugar del menú principal.

[singlepic id=63 w=350 h=158 float=center]

Ahora si vamos al front-end y le damos a inspeccionar código, nos encontramos con algo parecido a esto:

  1. <nav class="menu-a-container">
  2. <ul id="menu_principal">
  3. <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-76" id="menu-item-76">
  4. <a href="http://a">opción 1</a>
  5. </li>
  6. <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-86" id="menu-item-86">
  7. <a href="http://a">opción 2</a>
  8. </li>
  9. <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-87" id="menu-item-87">
  10. <a href="http://c">opción 3</a>
  11. </li>
  12. </ul>
  13. </nav>

Es decir, WordPress ha generado de forma automática una lista desordenada con las tres opciones y la ha situado dentro del contenedor nav que habíamos indicado. Menos el id de la lista, que habíamos indicado en el array de wp_nav_menu(), las demás clases e ids se han generado dinámicamente siguiendo la jerga wordpressiana, que de momento no nos interesa. El resultado es un menú rematadamente feo en el que las opciones se despliegan en vertical.

  • opción 1
  • opción 2
  • opción 3

Como los menús suelen ir en horizontal, vamos a aplicar un par de estilos para arreglarlo: le quitamos márgenes y bolinches a la lista y flotamos los elementos <li> a la izquierda (además le damos un overflow:hidden para que los elementos flotados pesen como un bloque).

  • #menu_principal {
  • list-style-type: none;
  • margin: 0;
  • padding:0;
  • overflow: hidden;
  • }
  • #menu_principal li {
  • float:left;
  • margin-right: 1em;
  • }

Con esto basta para tener un menú horizontal, pero podemos hacer algo más sofisticado añadiendo bordes, algún fondo, efectos de roll-over... Dejo, sin embargo, tal cual ese menú en el tema base para tener una referencia lo más limpia posible. El segundo menú ya sí será más complejo.

|| Tags: , ,

valoración de los lectores sobre WP desde cero (15): menús I

  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración negativa
  • 4.4 sobre 5 (7 votos)

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

2 respuestas a “WP desde cero (15): menús I

  1. Bueno en principio me he vuelto un poco loco…

    Realmente no aparece como tu dices hasta que no activo uno de los menús en el back-end… es decir estas explicando muy bien como programar… pero no exactamente los pasos que hay que seguir en el back-end, para que todo esto funcione…

    ¿como me creo las opciones en el menú?

  2. marcos el dijo:

    : ) Sí, es que no es un curso sobre manejo de WordPress. Sobre eso hay mucha información en Internet. Solo sobre la programación interna, que es más rara de encontrar en español.