Contenido

Menú desplegable/deslizante para tu WordPress

3 May

+ 8

Hace unas semanas recibí un par de mails solicitandome información acerca de como conseguir un menú desplegable, o deslizante, para el sidebar del WordPress, y hoy via Digg he encontrado un artículo que te permite hacerlo de forma tan fácil que no me he podido resistir a postearlo.

wp_enqueue_script();

Una de las nuevas funcionalidades de WordPress 2.1, fue la integración de prototype como librería javascript para la ejecución de efectos, mediante esta función podremos invocar el script en cualquier lugar que deseemos, sin necesidad de tener que subir a tu servidor la pesada la librería.

toggle();

Esta función, archiconocida, se encarga de hacer que nuestros elementos aparezcan/desaparezcan mediante un mismo evento. Esto nos facilita la creación de la funcionalidad que deseamos conseguir.

Fusionando

Lo primero que hemos de hacer para poder conseguir nuestro propósito es llamar a la librería en nuestro <head></head>. Para ello añadiremos la llamada pertinenete entre los los tags de la cabecera.

<head>
....
<?php wp_enqueue_script("prototype"); ?>
....
</head>

 Una vez cargado el script ya podremos cargar los eventos que harán posible nuestro deslizamiento, o desapariciones, para ello veamos un ejemplo de como debería quedar.

 <li>
   <h2 onclick="$('archives').toggle();" style="cursor: pointer"><?php _e('Archives'); ?></h2>
   <ul id="archives" style="display:none;">
     <?php wp_get_archives('type=monthly'); ?>
   </ul>
 </li>
   

Como podemos ver en el ejemplo, usando el evento onclick de h2 (no me gusta, pero ilustra el ejemplo), estamos lanzando la función toggle() que se encarga de ocultar/mostrar el elemento con id archives.

Para hacer esto de una forma más eficiente, podríamos hacer algo asi.

//Javascript
var toggles = $('sidebar').getElementsByClassName('wpToggle');

toggles.each(function(i){
	i.onclick = function() {
		i.next().toggle();
	};

});
//HTML
<li>
   <h2 class="wpToggle"><?php _e('Archives'); ?></h2>
   <ul id="archives">
     <?php wp_get_archives('type=monthly'); ?>
   </ul>
 </li>
//CSS
#wpToggle { cursor:pointer; }

Si alguien puede probarlo y comentar si funciona me haría un favor, ahora mismo me es imposible y lo he hecho sobre el editor, para ilustrar el post.

  • ya lo probe tu primer ejemplo arriba si funciona el ultimo no me sale este mensaje en FireBug

    $("sidebar") has no properties
    [Break on this error] var toggles = $("sidebar").getElementsByClassName("wpToggle");

    Ojo ya carge el prototype el Script en java

    //Javascript
    var toggles = $(’sidebar’).getElementsByClassName(’wpToggle’);

    toggles.each(function(i){
    i.onclick = function() {
    i.next().toggle();
    };

    });

    esta despues de la llamada del prototype
    mi sidebar esta
    si quieres ver detallada mente ve mi pagina web

  • eso esta geniaaal… chin.. lastima que todabia sigo usando la version 2.0.4… mas que nada por la version de mysql!!… pero creo que ya la cambiaron jeje… ahora que recuerdo.. jeje voy a preguntar.. jeje saludos andres!!

  • hola, tengo una pregunta:

    como puedo lograr que una subpagina tenga dos paginas padre diferentes?.

    Normalmente esto lo hago en atributtes, pero aqui no me da la opcion…
    gracias de antemano por responder.

    PD: Existe algun pluggin para esto?

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.