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 ú: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.
Deja tu comentario