Creación de menús usando las páginas estáticas

En WordPress disponemos de un “template tag” muy útil cuando estamos creando un tema y necesitamos listar nuestras páginas estáticas como parte o totalidad del menú del encabezado de nuestro site.

En vez de crear la lista manualmente (y tener que editarla más tarde en los templates ante cualquier cambio), podremos desde un principio usar wp_page_menu como método para imprimir nuestra lista de páginas:

<?php wp_page_menu('exclude=24,27,28&menu_class=menu menu-de-contacto'); ?>
<?php wp_page_menu('include=24,27,28&menu_class=menu menu-principal'); ?>

Aquí se nos crearían por lo pronto dos menús con sus links preparados: el primero incluye todas nuestras páginas salvo tres, y el segundo sólo esas tres páginas. Podríamos usarlos de distinta manera, por ejemplo, uno que ocupara el 100% de la anchura de la página, y otro, más arriba, al lado de nuestro logo.

HTML de ejemplo:

<div id="encabezado">

	<div id="logo">
		<img src="<?php bloginfo('template_directory'); ?>/imagenes/logo.png">
	</div>

	<div id="menu-de-contacto">
		<?php wp_page_menu('include=24,27,28&menu_class=menu menu-de-contacto'); ?>
	</div>

	<div id="menu-principal">
		<?php wp_page_menu('exclude=24,27,28&menu_class=menu menu-principal'); ?>
	</div>

</div>

Recordemos que la ID numérica de cada página la sabremos poniendo el cursor sobre el nombre de la página en cuestión en el panel de administración, y viendo cuál es el número que llevan en su URL.

Ambos template tags nos devolverán una lista (ul, unordered list), que deberemos luego trabajar con CSS para posicionarla y crear los gráficos necesarios.

Un ejemplo de CSS para nuestro caso:

#encabezado{
	width:960px;
	margin: 0 auto;
	background:#fff
	}

#logo,#menu-de-contacto{
	width:50%;
	height:120px;
	margin-top:18px;
	float:left
	}

#menu-de-contacto li{
	list-style-type:none;
	display:inline;
	margin-right:18px;
	}

#menu-de-contacto li a{
	padding:5px;
	background:#EEE;
	color:#999
	}

#menu-principal{
	width:100%;
	height:3em;
	line-height:3em;
	margin-top:18px;
	color:#555
	}

#menu-principal li{
	list-style-type:none;
	display:inline-block;
	background:#111;
	padding: 0 9px;
	border-right: 1px solid #555
	}
Comentarios
  1. Luchosar

    El WP es como el Photoshop, cada dia nos tropezamos con cosas nuevas…ni idea de esto de “template tag”, podrian colocar imagenes para una mejor ilustracion. Gracias

    Escrito el29/01/2010
  2. Hola Luchosar, por ejemplo, aquí en Todo WordPress no recuerdo como lo tenemos, pero el resultado es como en el menú de arriba de todo.

    Es decir, que abrimos header.php, y copiamos/pegamos el pequeño código que propongo (sólo que con los números adecuados de cada página). Saludos.

    PS: próximament… más imágenes en los posts prometido !

    Escrito el29/01/2010
  3. mbt

    easy

    Escrito el04/02/2012

DEJA TU COMENTARIO