Crear menús de navegación con HTML, CSS y PHP

Mientras esperamos el lanzamiento oficial de WordPress 3.0 y sus nuevas funcionalidades, vamos a tener tiempo para empezar a explorar la versión beta, que ya podemos descargar de la página oficial.

Las nuevas funcionalidades que llegan con esta versión y que tienen que ver con los menús nos permitirán seleccionar qué elementos dinámicos incluiremos en la navegación de nuestra web, como tags, categorías o links, desde la misma Administración. Hemos pensado que sería interesante acercarnos a la creación de menús para tenerla fresca a la hora de implementar las nuevas posibilidades que WordPress nos ofrece en su última versión.

Recordemos que la más típica forma de crear un menú es usando elementos de lista, “floteados” a la izquierda o dispuestos como “inline”, y sin list-style-type, aunque en HTML5 (que está aún en proyecto) tendremos una forma más rapida para crearlos, con el tag “nav”.

Vamos a usar la forma convencional con HTML4 y a suponer que estamos creando desde cero un tema de WordPress para nuestra web. En style.css, podríamos usar el siguiente CSS:


/*
tipografía
*/

#mi_menu{
	font-family:Arial,sans-serif;
	font-size:10px;
	}

/*
formatear el marco de lista
*/

#mi_menu ul{
	margin:0;
	padding:0;
	list-style-type:none;
	}

/*
cada elemento de lista, con float:left para que cree lista horizontal
*/
#mi_menu li{
	float:left;
	height:18px;
	line-height:18px;
	text-align:center;
	background: #eee;
	}

/*
los enlaces de la lista, en display:block para que ocupen todo el espacio y sea fácil clicarlos
*/

#mi_menu li a{
	display:block;
	padding: 9px 24px;
	background: #eee;
	color:#111;
	text-decoration:none;
	border-right: 1px solid #ddd;
	}

/*
un efecto de color a escoger, cuando el mouse sobrevuela cada elemento
*/

#mi_menu li a:hover{
	background: #555;
	color:#eee
	}

Veamos ahora cómo debería estar dispuesta la lista en HTML:

	<div id="mi_menu">
	<ul>
		<li><a href="#">Elemento Uno</a>
		</li>
		<li><a href="#">Elemento Dos</a>
		</li>
		<li><a href="#">Elemento Tres</a>
		</li>
		<li><a href="#">Elemento Cuatro</a>
		</li>
		<li><a href="#">Elemento Cinco</a>
		</li>
		<li><a href="#">Elemento Seis</a>
		</li>
		<li><a href="#">Elemento Siete</a>
		</li>
		<li><a href="#">Elemento Ocho</a>
		</li>
	</ul>
	</div>
Ejemplo

Pero en vez de crearla elemento a elemento, lo interesante será que dinámicamente se nos creen los elementos de lista: por ejemplo, a través de algunas de nuestras páginas y de nuestras categorías, que en ese caso enlazarían a una página de archivo.

Nuestra lista

Son dos “template tags” en concreto las que nos lo permitirán: wp_list_pages y wp_list_categories.

Normalmente los listaríamos así:

<ul>
<?php wp_list_pages(); ?>
<?php wp_list_categories(); ?>
</ul>

Pero habrá, por supuesto, que considerar que no vamos simplemente a necesitar todas las páginas creadas, ni todas las categorías, ni un orden puramente alfabético.

Por tanto, ¿cómo “matizar” ambas llamadas a la base de datos? Echemos un vistazo a las posibilidades que ambos recursos nos ofrecen.

Antes de nuestra lista: variables para listar páginas

Antes de escribir el código para nuestra lista con ambas llamadas, tendremos que pegar dos conjuntos de variables que afectarán, el primero, a wp_list_pages, y el segundo a wp_list_categories. Empecemos por el primero.

<?php $paginas = array(
    'depth'        => 0,
	//un valor de 0 lista páginas, y si tienen sub-páginas, las añade como sub-listas también
	//esto nos va bién cuando queremos crear un submenú.
	//un valor de -1 lista TODAS las páginas, en una lista simple
	//un valor de 1 lista páginas madre &uacute:nicamente
	//un valor de 2, 3, etc lista páginas sólo a ése nivel de profundidad

	//Podemos hacer que una página pertenezca a otra como subpágina en nuestra Administración
	//(cuando vamos a clicar para que se publique)

    'show_date'    => ,
	//si delante de la coma escribimos por ejemplo: created
	//se nos listará la fecha de publicación de la página

    'date_format'  => get_option('date_format'),
	//si queremos fecha, aquí usaremos el formato que se puede especificar en la Admin

    'child_of'     => 0,
	//ahora está a 0, es decir, inactivo
	//si escribimos ahí la ID numérica de una página nos devolverá las sub-páginas que ésta tuviera
	//en vez de la pagina directamente

    'exclude'      => ,
	//lugar para escribir la ID de las paginas que queremos excluír -separadas por comas-

    'include'      => ,
	//SOLAMENTE tráeme estas IDs (una manera potente de pedir determinadas páginas de entre todas las que tengamos)

    'title_li'     => ,
	//lugar para especificar si queremos un título genérico para las páginas
					//en los menús horizontales, no es habitual, en los verticales sí

    'echo'         => 1,
	//muestro o guardo como PHP?
	//1 significa muestro (imprimo), 0 significa guardo (para trabajar con PHP más tarde)

    'authors'      => ,
	//ID numéricas de páginas creadas por tal o cual autor sólamente

    'sort_column'  => 'menu_order, post_title',
	//en la Administració, a cada pagina se le puede dar un valor para ordenarla
	//hay que buscar el campo adecuado para ello cuando estamos editando la página
	//será el orden en que salgan en nuestra lista
	//aquí, si la opción está desetimada, tenemos un "fallback" para ordenarlas por título
	//otras opciones son: post_title, post_date, post_modified, ID, post_author, post_name

    'link_before'  => ,
	//algo para poner delante del nombre de la página
	//por ejemplo, el signo +
    'link_after'   => ,
	//algo para poner después del nombre de la página
	//por ejemplo, de nuevo el signo +

    'meta_key'  => ,
	//sólo las páginas que tengan activado cierto campo personalizado

    'meta_value'   => ,
	//sólo las páginas que tengan activado cierto VALOR de campo personalizado

    'exclude_tree' =>
	//añadir aquí la ID de una pagina y sus sub-páginas para excluír al grupo entero

	); ?>

Obviamente podemos sólo especificar algunos de los elementos y ahorrarnos la larga lista de argumentos para simplemente poner…

<ul>
  <?php wp_list_pages('sort_column=menu_order&title_li='); ?>
</ul>

…que nos traería páginas por orden de menú, y sin título genérico de lista.

Segundo conjunto de variables: listando categorías

Con las categorías tenemos que hacer lo mismo y pegar y editar lo siguiente:

<?php $categorias = array(

    'show_option_all'    => ,
		//un valor otro que nulo, añade un link que diga "hacia todoas las categorías"

    'orderby'            => 'name',
		//ID
		//name
		//slug
		//count
		//term_group
		//(a escoger, lo típico es name)

    'order'              => 'ASC',
		//ASC -desplegar de A a Z- o DESC -desplegar de Z a A-

    'show_last_update'   => 0,
		//un valor de 1 nos da el tiempo en que el último post de ésa categoría fue escrito

    'style'              => 'list',
		//la alternativa es 'none', que separa los items con <br> tags

    'show_count'         => 0,
		//mostrar si o no (1 o 0) cuántos posts hay en cada categoría

    'hide_empty'         => 1,
		//1 esconde las categorías vacías, 0 las muestra

    'use_desc_for_title' => 1,
		//añadir la eventual descripción al atributo alt de cada link

    'child_of'           => 0,
		//una ID de categoría listará sólo sub-categorías en vez de la categoría principal, 0 es inactivo

    'feed'               => ,
		//un valor de RSS nos da links al feed de cada categoría, además de ésta

    'feed_type'          => ,
		//

    'feed_image'         => ,
		//

    'exclude'            => ,
		//ID a excluír, muy útil

    'exclude_tree'       => ,
		//olvidarse de sub-categorías o no, por defecto es mostrarlas, como aquí

	'include'            => ,
		//sólo incluír ciertas IDs

    'current_category'   => 0,
		//dar la clase current-cat (para dar css específicos) a la ID de la categoría que se escriba

    'hierarchical'       => true,
		//false nos da una lista simple, sin árbol

    'title_li'           => ,
		//lo mejor es dejarlo vacío, si queremos dar un título genérico a la lista, añadir esto __( 'Categories' )

    'number'             => NULL,
		//limitar a base de PHP las categorías retornadas, aquí lo tenemos desactivado y nos da todas las que hayan sido filtradas

    'echo'               => 1,
		//un valor de cero nos guarda los resultados para eventuales operaciones en PHP posteriores

    'depth'              => 0
		//0 : todas las cats y subcats
		//-1 : idem, pero sin distinguir (lista 'plana', sin sub-lista)
		//1 : sólo categorías pariente
		//n : 2, 3 etc, número de niveles a tener en cuenta

	);
	?>

El menú, finalmente

Una vez hayamos especificado los valores que nos interesen para páginas y categorías, podemos escribir debajo los dos template tags que nos traerán esos resultados entre la apertura y cierre de la lista:

	<ul>
		<?php wp_list_pages( $paginas ); ?>
		<?php wp_list_categories( $categorias ); ?>
	</ul>

Esperamos que esta mirada en detalle a estos dos template tags os sea útil para construir adecuadamente vuestros menús de navegación.

Comentarios
  1. Te pasastes con esta men, agregare este menu de navegacion en mi pagina. 100000 pts. felicitaciones ppor la pagina, esta muy buena.

    Escrito el24/11/2010
  2. solmetal

    mm muy bueno gracias resolvieron mi problema de crear un menu xDD gracias sigan asi q este sitio si es muy recomendado par aqeullos q se pierden en crear aki lo resuelve la duda gracias y suerte

    Escrito el04/06/2011
  3. Hola, Ha sido Gran ayuda. :) Buscando horas algo así.. Graciaaass… Como dice Henrik, La página esta muy buena.. super buena…

    Saludos..

    José luis.

    Escrito el08/08/2011
  4. Tonalixco

    Me parese bastante conciso y muy muy practico excelente

    Escrito el02/11/2011
  5. Orlando CH

    Muy bueno y practico.
    Me sirvio de mucho.
    Gracias por el aporte

    Como se colocaría submenus?

    Saludos…

    Escrito el09/11/2011
  6. mbt

    Como se colocaría submenus?

    Escrito el04/02/2012

DEJA TU COMENTARIO