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 por la página, aparece el último widget de la barra lateral 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 integrarse en el último widget de barra lateral de WordPress usando jQuery. Aquí hay una demostración de cómo se vería:
En este tutorial, editará los archivos de su tema. Se recomienda que guarde su tema antes de continuar.
Paso 1: agregue JavaScript para el efecto Fadein
Contents
Primero debe agregar el código jQuery a su tema de WordPress como un archivo JavaScript separado. Comience abriendo un archivo vacío en un editor de texto como el Bloc de notas. Luego guarde este archivo vacío con el nombre wpb_fadein_widget.js en su escritorio y pegue el siguiente código dentro. jQuery (document) .ready (function ($) {/ ** * Configuración * Su contenedor de barra lateral, por ejemplo, barra lateral, etc. * / var sidebarElement = $ (‘div # secundaria’); // Compruebe si la barra lateral existe if ( $ (sidebarElement) .length> 0) {// Obtenga el último widget de la barra lateral y su posición en pantalla var widgetDisplayed = false; var lastWidget = $ (‘. widget: last-child’, $ (sidebarElement)); var lastWidgetOffset = $ (lastWidget) .offset (). top -100; // Ocultar el último widget $ (lastWidget) .hide (); // Verificar si el desplazamiento del usuario ha ido a la parte superior del último widget y mostrarlo $ (documento) .scroll (function () {// Si se ha mostrado el widget, no necesitamos seguir comprobando. if (! widgetDisplayed) {if ($ (this) .scrollTop ()> lastWidgetOffset) {$ (lastWidget) .fadeIn ( ‘lento’). addClass (‘wpbstickywidget’); widgetDisplayed = true;}}});}}); La línea más importante de este código es var sidebarElement = $ (‘div # secundaria’) ;. Esta es la identificación del div que contiene su barra lateral. Dado que cada tema puede usar diferentes divs de contenedor de la barra lateral, debe encontrar el ID de contenedor que su tema usa para la barra lateral. Puede averiguarlo utilizando la herramienta de inspección de artículos en Google Chrome. Simplemente haga clic con el botón derecho en la barra lateral en Google Chrome y 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 secundario y Twenty Thirteen usa teritario como el ID del contenedor de la barra lateral. Debe reemplazar el secundario con la identificación de su div contenedor de la barra lateral. Luego, debe usar un cliente FTP para cargar este archivo en la carpeta js de su directorio de temas de WordPress. Si su directorio de temas no tiene una carpeta js, debe crearla haciendo clic derecho y seleccionando «Crear nuevo directorio» en su cliente FTP.
Paso 2: ponga en cola su JavaScript en el tema de WordPress
Ahora que tiene listo su script jQuery, es hora de agregarlo a su tema. Usaremos el método adecuado 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’, verdadero); Eso es todo, ahora puede agregar un widget en su 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 desvanecimiento
Una característica que a menudo se desea con el efecto de atenuación es desplazarse hasta el último widget de la barra lateral cuando el usuario se desplaza. Esto se denomina widget flotante o widget fijo. Si observa el código jQuery anterior, notará que hemos agregado una clase CSS wpbstickywidget al widget después del efecto de fundido. Puede usar esta clase CSS para hacer que su último widget se quede fijo después de que se desvanezca. Todo lo que tienes que hacer es pegar este CSS en la hoja de estilo de tu tema. .wpbstickywidget {posición: fija; alto: 0px; } No dude en 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 visible. Si lo desea, incluso puede agregar un efecto de desplazamiento hacia arriba suave junto a su último widget, lo que permitirá a los usuarios desplazarse rápidamente. Esperamos que este artículo le haya ayudado a agregar un efecto de atenuación a su último widget de barra lateral de WordPress. Para obtener más bondad de jQuery, consulte los mejores tutoriales de jQuery para WordPress. Si le gustó este artículo, suscríbase a nuestro canal de YouTube para ver tutoriales en video de WordPress. También puede encontrarnos en Twitter y Google+.
Originally posted 2021-02-24 20:50:32.
