Cómo hacer desaparecer el último widget de la barra lateral en WordPress con jQuery

Recientemente, uno de nuestros usuarios nos preguntó cómo añadir un efecto de desvanecimiento para el último widget de la barra lateral. Este popular efecto de jQuery se utiliza en muchos sitios web y blogs conocidos. Cuando 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 notable, lo que aumenta drásticamente la tasa de clics. En este artículo, te mostraremos cómo desvanecer el último widget de la barra lateral en WordPress utilizando jQuery.

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

En este tutorial, modificarás los archivos de tu tema. Se recomienda que hagas una copia de seguridad de tu 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 independiente. Empieza abriendo un archivo en blanco en un editor de texto como el Bloc de notas. A continuación, guarda este archivo en blanco como wpb_fadein_widget.js en tu escritorio y pega en él el siguiente código

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 de este código es var sidebarElement = $('div#secondary');

Este es el id del div que contiene tu barra lateral. Como cada tema puede utilizar diferentes divs contenedores de la barra lateral, debes averiguar el id del contenedor que tu tema utiliza para la barra lateral

Puedes averiguarlo utilizando la herramienta de inspección de elementos de Google Chrome. Simplemente haz clic con el botón derecho del ratón en tu barra lateral en Google Chrome, y luego selecciona Inspeccionar elemento

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

A continuación tienes que utilizar un cliente FTP para subir este archivo a la carpeta js dentro del directorio de tu tema de WordPress. Si el directorio de tu tema no tiene una carpeta js, tienes que crearla haciendo clic con el botón derecho y seleccionando "Crear nuevo directorio" en tu cliente FTP

Paso 2: Encargar tu JavaScript en el tema de WordPress

Ahora que tu script jQuery está listo, es el momento de añadirlo en tu tema. Utilizaremos el método adecuado para añadir 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() . 'https://cdn3.wpbeginner.com/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 deseada a menudo 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 pegajoso.

Si miras el código jQuery de arriba, te darás cuenta de que hemos añadido un wpbstickywidget Al widget después del efecto de desvanecimiento. Puedes utilizar esta clase CSS para hacer que tu último widget se quede pegado después del fundido. Todo lo que tienes que 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 los tipos de letra para que el widget destaque aún más. Si quieres, puedes incluso añadir un efecto de desplazamiento suave hacia arriba junto a tu ú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. Si quieres saber más sobre jQuery, consulta los mejores tutoriales de jQuery para WordPress

Si te ha gustado este artículo, suscríbete a nuestro Canal de YouTube para los videotutoriales de WordPress. También puedes encontrarnos en Twitter y Google+.