Mostrar el último widget de la barra lateral en WordPress con jQuery

 

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

Mostrar el último widget de la barra lateral en WordPress

En este tutorial, modificará sus archivos de temas. Se recomienda que guarde su tema antes de continuar.

Paso 1: agregar JavaScript para el efecto de desvanecimiento

Primero, debe agregar el código jQuery a su tema de WordPress como un archivo JavaScript separado. Primero, abra 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.

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 su barra lateral. Dado que cada tema puede usar diferentes divisiones de contenedor en la barra lateral, debe determinar el ID de contenedor que usa su tema para la barra lateral.

Puede averiguarlo utilizando la herramienta Inspeccionar elemento en Google Chrome. Simplemente haga clic con el botón derecho en la barra lateral en Google Chrome y luego elija Verificar elemento.

Busque el ID del contenedor de la barra lateral en el código fuente

En el código fuente puede ver el div del contenedor de la barra lateral. Por ejemplo, se usa el tema estándar «Twenty Twelve» secondaryy 23 usados teritary como ID para el contenedor de la barra lateral. Necesitas reemplazar secondary con el ID de su div contenedor de la barra lateral.

A continuación, deberá usar un cliente FTP para cargar este archivo en la carpeta js en su directorio de temas de WordPress. Si su directorio de temas no tiene una carpeta js, deberá crearla haciendo clic con el botón derecho y seleccionando «Crear nuevo directorio» en su cliente FTP.

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

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

Paso 3: pegue el último widget después de que se haya mostrado

Una característica solicitada con frecuencia con el efecto difuminado es desplazarse por el último widget de la barra lateral mientras el usuario se desplaza. Esto se conoce como un widget flotante o un widget fijo.

Si observa el código jQuery anterior, verá que agregamos un wpbstickywidget Clase CSS para el widget después de que se haya mostrado. Esta clase de CSS es una excelente manera de hacer que su último widget sea pegajoso después de que aparezca. Todo lo que tienes que hacer es pegar este CSS en la hoja de estilo de tu tema.

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

Puede adaptar el CSS a sus requisitos en cualquier momento. Puede cambiar el color de fondo o las fuentes para que el widget se destaque aún más. Si lo desea, incluso puede agregar un desplazamiento suave al efecto superior junto a su último widget, lo que permite a los usuarios retroceder rápidamente.

Esperamos que este artículo le haya ayudado a agregar un efecto de aparición gradual al widget final en su barra lateral de WordPress. Para obtener más información sobre jQuery, consulte los mejores tutoriales de jQuery para WordPress.