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.
3 comentarios, 5 referencias
+
#