SummArg | Cursos y recursos para webmasters

14/10/2009

Agregá tu menú “dropdown” en WordPress con tan solo un plugin

Los menús dropdown son ideales para hacer entrar varias categorías y páginas anidadas, que por obvia falta de espacio en un menú común se nos puede complicar.

Hacer un menú dropdown no es muy difícil, y tenemos muchos menús bonitos disponibles para que utilices su código. Pero hoy quería comentar un poco sobre este plugin “salvador”, para los novatos y no tan novatos, desarrollado por pixopoint.com. El Multi Level Navigation Plugin se inserta en tu theme el siguiente código:

<?php if (function_exists('pixopoint_menu')) {pixopoint_menu();} ?>

Generalmente el menú se encuentra en el archivo “header.php” de nuestro theme, y lo que podemos hacer es reemplazar la navbar que tenemos por esta nueva.

Configurar páginas, categorías, y botones personalizados.

Primero vayamos a la sección contenidos del menú y acomodemos un poco las cosas. Veremos que tenemos ítems ya aplicados por defecto y podemos cambiarlos por alguno que sea conveniente. Si necesitás excluir categorías o páginas por defecto, podés hacerlo sin necesidad de un custom, tal como nos indica un poco más abajo. Pero si no encontramos lo que necesitamos, podemos definir un custom y fabricar el código nosotros mismos.

Los códigos “Custom” (personalizados) se pegan más abajo en esa misma sección respetando el siguiente formato:

<li><a href="">Categorias</a>
<ul>
<li><a href="http://tusitio.com/category/casas/">Casas</a></li>
<li><a href="http://tusitio.com/category/perros/">Perros</a></li>
<li><a href="http://tusitio.com/category/gatos/">Gatos</a></li>
</ul>

Cuando obtengamos los ítems que necesitamos y podamos ir comprobando que funcionan bien en el theme, pasaremos al siguiente paso.

Dando estilo desde el CSS

Para agilizar más las cosas, ingresá al generador de estilos de pixopoint y comenzá a elegir de entre los menús preestablecidos, modificándoles los colores, tipografías, etc. Con el botón “submit design” podemos ir viendo cómo va quedando nuestro menú, y cuando ya tengamos exactamente lo que necesitamos, hagamos scroll en esa página hasta llegar al recuadro en donde nos ofrece el código CSS.

Copiá y pegá en la solapa Aspecto de tu plugin en WordPress. ¡Voilá!

Usando dos menús con estilos diferentes

Este plugin soporta dos menús interactuando, cada uno con sus contenidos y con su propio CSS. Para insertar el segundo menú en cualquier parte de tu theme, tenés que utilizar la siguiente línea:


<?php if (function_exists('pixopoint_menu')) {pixopoint_menu(2);} ?>

Las funciones de cada ítem se configurarán desde el segundo recuadro de la sección “Contenidos del Menú” en tu panel de administrador, en la sección de opciones del “Multi-Level Navigation plugin”.
Generamos el estilo para este segundo menú pero tendremos que tomar algún programa como notepad++ para reemplazar todos los #suckerfishnav por #suckerfishnav_2, de modo que se apliquen a nuestro segundo menú. Añadiremos todo este nuevo CSS al final del primero que ya teníamos.

De tener este código CSS:

#suckerfishnav {
    background:#9C1F1B url("../multi-level-navigation-plugin/images/suckerfish_red.png") repeat-x;
    font-size:18px;
    font-family:verdana,sans-serif;
    font-weight:bold;
    width:100%;
    }

Deberemos pasar a tener este otro:

#suckerfishnav_2 {
    background:#9C1F1B url("../multi-level-navigation-plugin/images/suckerfish_red.png") repeat-x;
    font-size:18px;
    font-family:verdana,sans-serif;
    font-weight:bold;
    width:100%;
    }

De este modo diferenciará el CSS de cada menú y los podremos manejar independientemente.

¡Espero que te resulte facil!

Dejar un comentario

  1. […] here:  Agregá tu menú "dropdown" en WordPress con tan solo un plugin Related […]

  2. Muy buen tutorial, lo que no consigo y no encuentro como hacerlo es como poner un submenu en alguna de las opciones del menú que ya tenemos puesto.

    Saludos.

Dejar un comentario