flapa, el blog de humor

Hasta el momento los desarrolladores en WordPress teníamos ligeros problemas para mostrar el menú de navegación de nuestros blogs. Con la llegada de WordPress 2.7 (y superiores) también llegaron varias funciones que nos facilitaban la vida, en la medida de lo posible. Una de ellas es wp_page_menu.

¿Para qué sirve wp_page_menu?

Básicamente muestra un listado de páginas a modo de enlaces y además, y he aquí lo novedoso, nos da la oportunidad de incluir una opción de “Inicio” para acceder a la portada de nuestra página, algo que hasta ahora teníamos que realizarlo casi manualmente, en mi caso utilizando una función en function.php.

¿Cómo la utilizo?

La sintaxis es la siguiente:

<?php wp_page_menu( $args ); ?>

Los parámetros los podéis encontrar en el Codex de WordPress, donde además os ponen algunos ejemplos para que os vayáis familiarizando con esta reciente función.

¿Y tanto bombo para tanto?

No seas impaciente, que ya que estamos picando código, vamos a enseñarte cómo maquetar un menú horizontal de dos niveles de profundidad utilizando únicamente CSS, algo sencillo y para newbies (que nos vamos a poner serios en flapa, pero no tanto joder).

Lo primero es generar nuestro menú. Antes realmente habría que crear una estructura de páginas, de dos niveles de profundidad como máximo. En nuestro ejemplo las páginas serán: Portada, Seccion1 (subpagina1,subpagina2), Seccion3 (subpagina3,subpagina4).

Para generar el menú utilizaremos la función wp_page_menu que os mostramos antes. En nuestro caso, ordenaremos mediante el orden impuesto a la página. Además, pondremos el nombre “Portada” al enlace que lleve a la home de nuestro blog y le daremos la clase “horizontal-menu” a la estructura HTML generada:

<?php wp_page_menu( array( 'show_home' => 'Portada', 'sort_column' => 'menu_order', 'menu_class' => 'horizontal-menu' ) ); ?>

Esto generaría un menú parecido al siguiente:

<div class="horizontal-menu">
  <ul>
    <li class="current_page_item">
      <a href="http://urldetublog">Portada</a>
    </li>
    <li class="page_item page_item_1">
      <a href="http://urldetublog/seccion1">Seccion1</a>
      <ul>
        <li class="page_item page_item_2">
          <a href="http://urldetublog/seccion1/subpagina1">subpagina1</a>
        </li>
        <li class="page_item page_item_3">
          <a href="http://urldetublog/seccion2/subpagina2">subpagina2</a>
        </li>
      </ul>
    <li class="page_item page_item_4">
      <a href="http://urldetublog/seccion1">Seccion1</a>
      <ul>
        <li class="page_item page_item_5">
          <a href="http://urldetublog/seccion1/subpagina1">subpagina1</a>
        </li>
        <li class="page_item page_item_6">
          <a href="http://urldetublog/seccion2/subpagina2">subpagina2</a>
        </li>
      </ul>
    </li>
  </ul>
</div>

Toma ya. ¿Ya hora qué?

Pues vamos a maquetar. Y aquí viene la bola extra y el por qué mola tanto wp_page_menu. Nos crea clases muy útiles en cada elemento li y que nos ayudan a maquetar. Por ejemplo, cada vez que hago click sobre un enlace, al li que lo contiene le pone la clase current_page_item. Si se trataba de una subpágina, al li de la página padre le aplica las clases current_page_antecesor y current_page_parent.

Ahora viene la magia:

.horizontal-menu ul li{
  display: inline;
  float: left;
  margin-left: 5px; /* cambiar este margen para aumentar la separación entre las opciones de 1er nivel */
  width: 200px; /* os recomiendo poner un ancho fijo, el motivo lo explico después */
}

/* para controlar el estilo de los enlaces de primer nivel */
.horizontal-menu ul li a{
  display:block;
  padding:10px 13px;
  text-decoration:none;
  cursor:pointer;
}

/* para controlar los li de segundo nivel */
.horizontal-menu li ul li{
  margin: 0;
  float: none;
  display: block;
  background-color: #CCC;
}

/* para controlar el estilo de los enlaces de segundo nivel */
.horizontal-menu li ul a{
  padding: 5px 10px 5px 10px;
}

.horizontal-menu li ul{
  display: none;
  position: absolute;
}

.horizontal-menu li:hover ul{
  display: block;
}

/* para controlar el color de las opciones sobre las que paso el ratón */
.horizontal-menu li:hover{
  background-color: #AAA;
}

/* para controlar el color de los li seleccionados, sobre los que paso el ratón,
los li padres y los li padres sobre los que paso el ratón */
.horizontal-menu .current_page_item,
.horizontal-menu .current_page_item:hover,
.horizontal-menu .current_page_parent,
.horizontal-menu .current_page_parent:hover{
  background-color: #FFBD25;
}

/* para controlar el color de los li de segundo nivel seleccionados */
.horizontal-menu .current_page_parent .current_page_item{
  background-color: #CCC;
}                    

/* para controlar el color de los li de segundo nivel seleccionados
sobre los que paso el ratón */
.horizontal-menu .current_page_parent .current_page_item:hover{
  background-color: #AAA;
}

Pues hasta aquí todo por hoy y para siempre jamás. ¿A que mola? Pues ahora viene lo divertido: La verdad es que no mola nada. Es decir, para blogs con poca profundidad en su arquitectura de información esta opción no es para nada recomendable. ¿Por qué? Porque ocultar información no es una buena práctica desde el punto de vista de la experiencia de usuario. Obligamos a que el usuario tenga que situar el ratón sobre un elemento en cuestión para descubrir qué se oculta detrás, y se convierte en algo bastante tedioso.

Dejando que esto sea un blog de… a sí, humor, que ya se me había olvidado… pues espero que algunos os resulte útil. O no.