Cómo hacer que el último widget de la barra lateral aparezca gradualmente en WordPress usando jQuery

Recientemente, uno de nuestros usuarios nos preguntó cómo agregar un efecto de aparición gradual para el último widget en la barra lateral. Este popular efecto de jQuery se utiliza en muchos sitios web y blogs conocidos. A medida que el usuario se desplaza hacia abajo en la página, el último widget en la barra lateral aparece gradualmente y se vuelve visible. La animación hace que el widget sea llamativo y notable, lo que aumenta drásticamente la tasa de clics. En este artículo, le mostraremos cómo hacer que el último widget de la barra lateral aparezca gradualmente 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: Agregar JavaScript para el efecto de aparición gradual

Primero, necesita agregar el código jQuery a su tema de WordPress como un archivo JavaScript separado. Comience abriendo un archivo en blanco en un editor de texto como el Bloc de notas. Luego, 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($) {
/**
* Configuration
* The container for your sidebar e.g. aside, #sidebar etc.
*/

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


// Check if the sidebar exists
if ($(sidebarElement).length > 0) {

// Get the last widget in the sidebar, and its position on screen

var widgetDisplayed = false;
var lastWidget = $('.widget:last-child', $(sidebarElement));
var lastWidgetOffset = $(lastWidget).offset().top -100;
	
// Hide the last widget
$(lastWidget).hide();
	
// Check if user scroll have reached the top of the last widget and display it
$(document).scroll(function() {

// If the widget has been displayed, we don't need to keep doing a check.

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

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

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

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

En el código fuente, podrás ver el div del contenedor de tu barra lateral. Por ejemplo, el tema predeterminado Twenty Twelve usa secondary, y Twenty Thirteen usa tertiary como el ID para el contenedor de la barra lateral. Necesitas reemplazar secondary con el ID de tu div contenedor de barra lateral.

A continuación, necesitas usar un Cliente FTP para subir este archivo a la carpeta js dentro de tu directorio de tema de WordPress. Si tu directorio de tema no tiene una carpeta js, entonces necesitas crearla haciendo clic derecho y seleccionando ‘Crear Nuevo Directorio’ en tu cliente FTP.

Paso 2: Poner en cola tu JavaScript en el tema de WordPress

Ahora que tu script de jQuery está listo, es hora de agregarlo a tu tema. Usaremos el método adecuado para agregar el javascript en tu tema, así que simplemente pega el siguiente código en el archivo functions.php de tu 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 agregar un widget en tu barra lateral que quieras que aparezca con el efecto de desvanecimiento y luego visita 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 que a menudo se desea con el efecto de desvanecimiento 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 de jQuery de arriba, notarás que agregamos 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 necesitas hacer es pegar este CSS en la hoja de estilos de tu tema.

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

Siéntete libre de modificar el CSS para satisfacer tus necesidades. Puedes cambiar el color de fondo o las fuentes para hacer el widget aún más prominente. Si quieres, incluso puedes agregar un efecto de desplazamiento suave hacia arriba junto a tu último widget, lo que permitirá a los usuarios desplazarse rápidamente hacia atrás.

Esperamos que este artículo te haya ayudado a agregar un efecto de aparición gradual al último widget en la barra lateral de tu WordPress. Para más bondades de jQuery, consulta los mejores tutoriales de jQuery para WordPress.

Si le gustó este artículo, suscríbase a nuestro Canal de YouTube para ver tutoriales en video de WordPress. También puede encontrarnos en Twitter y Google+.