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.


Via http://feeds.todowp.org/~r/todowordpress/~3/FZXu7k1Kiig/

Related Posts with Thumbnails
Tagged with:  

Comments are closed.

Premium WordPress Themes