Cómo desvanecerse en el último widget de Sidebar en WordPress usando jQuery

Recientemente uno de nuestros usuarios nos preguntó cómo añadir un efecto de fundido para 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 llamativo, 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 usando jQuery.

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

En este tutorial, usted estará modificando sus archivos de tema. Se recomienda realizar una copia de seguridad del tema antes de continuar.

Paso 1: Añadir JavaScript para el efecto Fadein

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. A continuación, guarde este archivo en blanco como wpb_fadein_widget.js en su escritorio y pegue el siguiente código en su interior.

12345678910111213141415161717181920212223242526272829303132333435jQuery(document).ready(function($) {/*** Configuración* El contenedor de la barra lateral, por ejemplo, aside, #sidebar etc.*/ varsidebarElement = $(‘div#secondary’); // Compruebe si la barra lateral existeif($(sidebarElement).length> 0) { // Obtener el último widget en la barra lateral, y su posición en la pantalla varwidgetDisplayed = false;varlastWidget = $(‘.widget:lastchild’, $(sidebarElement));varlastWidgetOffset = $(lastWidget).offset().top -100; // Ocultar el último widget$(lastWidget).hide(); // Verificar si el scroll del usuario ha llegado a la parte superior del último widget y mostrarlo$(document).scroll(function() { // Si el widget ha sido mostrado, no es necesario seguir haciendo una verificación. if(!widgetDisplayed) {if($(esto).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 utilizar diferentes divs de contenedor de la barra lateral, debe averiguar el Id. de contenedor que el tema está utilizando 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 la barra lateral de Google Chrome y, a continuación, selecciona Inspeccionar elemento.

En el código fuente, podrás ver tu contenedor de la barra lateral div. Por ejemplo, el tema predeterminado Veintidós utiliza secundario y Veintitrés utiliza teritary como ID para el contenedor de la barra lateral. Necesita reemplazar secundario con el ID de su div de contenedor de la barra lateral.

A continuación, debe utilizar un Cliente FTP para subir este archivo a la carpeta js dentro del directorio temático de WordPress. Si su directorio temático no tiene una carpeta js, deberá crearla haciendo clic con el botón derecho del ratón y seleccionando «Crear nuevo directorio» en su cliente FTP.

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

Ahora que su script jQuery está listo, es el momento de agregarlo a su tema. Usaremos el método apropiado para agregar el javascript en su tema, así que simplemente pegue el siguiente código en el archivo functions.php de su tema.

1wp_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 quede pegajoso después del efecto de fundido

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 denomina widget flotante o widget pegajoso.

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

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

Siéntase libre de modificar el CSS para satisfacer sus necesidades. Puede cambiar el color de fondo o las fuentes para que el widget sea aún más prominente. Si lo desea, puede incluso añadir un suave efecto de desplazamiento hacia arriba junto a su último widget, lo que permitirá a los usuarios retroceder rápidamente.

Esperamos que este artículo le haya ayudado a añadir un fundido en efecto al último widget de su barra lateral de WordPress. Para más información sobre jQuery goodness, consulte los mejores tutoriales de jQuery para WordPress.

Si te ha gustado este artículo, suscríbete a nuestros tutoriales de vídeo de YouTube Channel for WordPress. También puede encontrarnos en Twitter y Google+.

Deja un comentario