Cómo desvanecer en la última barra lateral widget en WordPress usando jQuery

Recientemente uno de nuestros usuarios nos preguntó acerca de cómo añadir un efecto de fundido en el último widget de la barra lateral. Este popular efecto jQuery se utiliza en muchos sitios web y blogs conocidos. A medida que el usuario se desplaza por la página, el último widget de la barra lateral se desvanece y se hace visible. La animación hace que el widget sea llamativo y visible, lo que aumenta drásticamente la tasa de clics. En este artículo, le mostraremos cómo desvanecer el último widget de la barra lateral en WordPress usando jQuery.

A continuación se muestra una demostración de cómo se vería:

En este tutorial, modificará los archivos de su tema. Se recomienda que haga una copia de seguridad de su tema antes de continuar.

Paso 1: Añadir JavaScript para el efecto Fadein

Lo primero que tienes que añadir es el código jQuery a tu tema de WordPress como un archivo JavaScript separado. Comience por abrir un archivo en blanco en un editor de texto como el Bloc de notas. A continuación, guarde este archivo en blanco como wpb_fadein_widget.js en su escritorio y pegue el siguiente código dentro de él.

jQuery(document).ready(function($) {
/**
* Configuración
* El contenedor para tu barra lateral por ejemplo minientrada, #sidebar etc.
*/

var sidebarElement = $('div#secondary');


// Comprobar si la barra lateral existe
if ($(sidebarElement).length > 0) {

// Obtener el último widget de la barra lateral, y su posición en pantalla

var widgetDisplayed = false;
var lastWidget = $('.widget:last-child', $(sidebarElement));
var lastWidgetOffset = $(lastWidget).offset().top -100;
	
// Ocultar el último widget
$(lastWidget).ocultar();
	
// Comprobar si el desplazamiento del usuario ha alcanzado la parte superior del último widget y mostrarlo
$(document).desplazamiento(function() {

// Si el widget ha sido mostrado, no necesitamos seguir marcando / comprobando.

if (!widgetDisplayed) {
if($(this).scrollTop() > lastWidgetOffset) {
$(lastWidget).fadeIn('slow').addClass('wpbstickywidget');
widgetDisplayed = true;  
}
}
});
}
});

La línea más importante de este código es var sidebarElement = $('div#secondary');.

Este es el id del div que contiene tu barra lateral. Dado que cada tema puede utilizar diferentes divs contenedores de la barra lateral, es necesario averiguar el id del contenedor que su tema está utilizando para la barra lateral.

Puede averiguarlo utilizando la herramienta de inspección de elementos de Google Chrome. Simplemente haga clic derecho en la barra lateral en Google Chrome y, a continuación, seleccione Inspeccionar elemento.

En el código fuente, podrás ver el div contenedor de tu barra lateral. Por ejemplo, el tema por defecto Twenty Twelve utiliza secondary, y Twenty Thirteen utiliza teritary como ID para el contenedor de la barra lateral. Debe sustituir secondary por el ID de su div contenedor de barra lateral.

Lo siguiente es usar un cliente FTP para subir este archivo a la carpeta js dentro del directorio de temas de WordPress. Si el directorio de su tema no tiene una carpeta js, entonces necesita crearla haciendo clic con el botón derecho y seleccionando ‘Crear Nuevo Directorio’ en su cliente FTP.

Paso 2: Colocar su JavaScript en el tema de WordPress

Ahora que su script jQuery está listo, es hora de añadirlo en su tema. Usaremos el método apropiado para añadir el JavaScript en su tema, así que simplemente pegue el siguiente código en el archivo functions.php de su tema.

wp_enqueue_script( 'stickywidget', get_template_directory_uri() . '/js/wpb-fadein-widget.js', array('jquery'), '1.0.0', true );

Eso es todo, ahora puedes añadir un widget en tu barra lateral que quieras que aparezca con el efecto fadein y luego visitar tu sitio web para verlo en acción.

Paso 3: Hacer que el último widget sea fijo después del efecto de desvanecimiento

Una característica a menudo deseada con el efecto de fundido es hacer que el último widget de la barra lateral se desplace a medida que el usuario se desplaza. Esto se llama widget flotante o widget fijo.

Si miras el código jQuery de arriba, verás que hemos añadido una clase CSS wpbstickywidget al widget después del efecto de desvanecimiento. Puedes usar esta clase CSS para hacer que tu último widget sea fijo después de que se desvanezca. Todo lo que tienes que hacer es pegar este CSS en la hoja de estilos de tu tema.

.wpbstickywidget { 
position:fixed;
top:0px; 
}

No dudes en modificar el CSS para adaptarlo a tus necesidades. Puedes cambiar el color de fondo o las fuentes para que el widget destaque aún más. Si lo deseas, puedes añadir un efecto de desplazamiento suave a la parte superior junto al último widget, que permitirá a los usuarios retroceder rápidamente.

Esperamos que este artículo te haya ayudado a añadir un efecto de desvanecimiento al último widget de tu barra lateral de WordPress. Para más información sobre jQuery, comprobar los mejores tutoriales de jQuery para WordPress.

Si te ha gustado este artículo, suscríbete a nuestro canal de YouTube para ver tutoriales en vídeo sobre WordPress. También puedes encontrarnos en Twitter y Google+.