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.
Via http://feeds.todowp.org/~r/todowordpress/~3/FZXu7k1Kiig/