Cómo fundirse en el último widget de barra lateral en WordPress usando jQuery

Recientemente, uno de nuestros usuarios nos preguntó cómo agregar un efecto de atenuación para el último widget en la barra lateral. Este popular efecto 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 de la barra lateral se desvanece y se vuelve visible. La animación hace que el widget sea llamativo y notable, lo que aumenta considerablemente la tasa de clics. En este artículo, le mostraremos cómo fundirse en el último widget de barra lateral en WordPress usando jQuery.

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

En este tutorial, editará sus archivos de tema. Se recomienda hacer una copia de seguridad de su tema antes de continuar.

Paso 1: agregar JavaScript para el efecto Fadein

Primero, debe 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 vacío como wpb_fadein_widget.js en su escritorio y pegue el siguiente código en é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 de este código es var sidebarElement = $('div#secondary');.

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

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

En el código fuente, podrá ver el div del contenedor de la barra lateral. Por ejemplo, el tema predeterminado Twenty Twelve usa secondaryy veinte trece usos teritary como ID del contenedor de la barra lateral. Tienes que reemplazar secondary con el ID del contenedor de la barra lateral div.

A continuación, debe usar un cliente FTP para cargar este archivo en la carpeta js dentro del directorio de temas de WordPress. Si el directorio de temas no tiene una carpeta js, debe crearlo haciendo clic derecho y seleccionando «Crear nuevo directorio» en el cliente FTP.

Paso 2: poner en cola JavaScript en el tema de WordPress

Ahora que su script jQuery está listo, es hora de agregarlo a su tema. Usaremos el método correcto para agregar el javascript a 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 puede agregar un widget en la barra lateral que desea que aparezca con el efecto de desvanecimiento y luego visitar su sitio web para verlo en acción.

Paso 3: haga que el último widget sea pegajoso después del efecto de fundido

Una característica que a menudo se desea con el efecto de atenuación es desplazar el último widget de la barra lateral a medida que el usuario se desplaza. Esto se denomina widget flotante o widget fijo.

Si observa el código jQuery anterior, notará que hemos agregado un archivo wpbstickywidget Clase CSS al widget después del efecto de fundido. Puede usar esta clase de CSS para hacer que su último widget sea fijo después de que se haya ido. Todo lo que necesita hacer es pegar este CSS en la hoja de estilo de su tema.

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

No dude en modificar el CSS para adaptarlo a sus necesidades. Puede cambiar el color de fondo o las fuentes para hacer que el widget sea aún más visible. Si lo desea, también puede agregar un desplazamiento suave al efecto superior junto a su último widget, lo que permitirá a los usuarios retroceder rápidamente.

Esperamos que este artículo le haya ayudado a agregar un efecto de desvanecimiento al último widget en la barra lateral de WordPress. Para obtener más bondad de jQuery, consulte los mejores tutoriales de jQuery para WordPress.