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

Recientemente, uno de nuestros usuarios nos preguntó cómo agregar un desvanecimiento para el último widget en la barra lateral. Este popular efecto jQuery se usa en muchos sitios web y blogs conocidos. A medida que el usuario se desplaza por la página, el último widget en la barra lateral se difumina y se vuelve visible. La animación hace que el widget sea llamativo y perceptible, lo que aumenta considerablemente la tasa de clics. En este artículo, le mostraremos cómo desaparecer en 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:

En este tutorial, estarás modificando tus archivos de tema. Se recomienda que haga 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 Notepad. 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.

 jQuery (document) .ready (function ($) / ** * Configuration * El contenedor para su barra lateral, por ejemplo, #sidebar, etc. * / var sidebarElement = $ ('div # secondary'); // Compruebe si la barra lateral existe si ($ (sidebarElement) .length> 0) // Obtenga el último widget en la barra lateral y su posición en la pantalla var widgetDisplayed = false; var lastWidget = $ ('. widget: last-child', $ (sidebarElement )); var lastWidgetOffset = $ (lastWidget) .offset (). top -100; // Oculta el último widget $ (lastWidget) .hide (); // Comprueba si el desplazamiento del usuario ha alcanzado la parte superior del último widget y se muestra it $ (document) .scroll (function () // Si se ha mostrado el widget, no necesitamos seguir haciendo una comprobación. 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 tu barra lateral. Debido a que cada tema puede usar diferentes divs de contenedor de barra lateral, debe averiguar la identificación del contenedor que su 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 su barra lateral en Google Chrome y luego seleccione Inspeccionar elemento.

En el código fuente, podrá ver su div de contenedor de barra lateral. Por ejemplo, el tema Twenty Twelve predeterminado usa secundario, y veinte trece usos teritario como el ID del contenedor de la barra lateral. Necesitas reemplazar secundario con el ID de tu sidebar container div.

Luego, debe usar un Cliente FTP para cargar este archivo en la carpeta js dentro de su directorio de tema de WordPress. Si su directorio de temas no tiene una carpeta js, debe crearlo haciendo clic derecho y seleccionando 'Crear nuevo directorio' en su cliente FTP.

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

Ahora que su script jQuery está listo, es hora de agregarlo a su tema. Usaremos el método adecuado para agregar el javascript en 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 fadein y luego visitar su sitio web para verlo en acción..

Paso 3: hacer que el último widget sea pegajoso después del desvanecimiento en efecto

Una característica a menudo deseada con el fundido en efecto es hacer que el último widget de barra lateral se desplace a medida que el usuario se desplaza. Esto se llama widget flotante o widget adhesivo.

Si observa el código de jQuery anterior, notará que agregamos un wpbstickywidget Clase CSS para el widget después del desvanecimiento en efecto. Puedes usar esta clase de CSS para hacer que tu último widget quede 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 posición: fijo; arriba: 0px;  

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

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

Si le ha gustado este artículo, suscríbase a nuestros tutoriales en video del Canal de YouTube para WordPress. También puedes encontrarnos en Twitter y Google.+.