Recientemente, uno de nuestros usuarios nos preguntó cómo agregar un efecto de desvanecimiento 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 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 drásticamente la tasa de clics. En este artículo, le mostraremos cómo desvanecerse 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, modificará los archivos de su tema. Se recomienda que haga una copia de seguridad de su tema antes de continuar.
Paso 1: agregar JavaScript para efecto de desvanecimiento
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. 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 * 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');
.
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 averiguar la identificación del contenedor que su tema está usando 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 de 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 secondary
, y veinte trece usos teritary
como ID del contenedor de la barra lateral. Necesitas reemplazar secondary
con el ID de su div contenedor de la barra lateral.
A continuación, debe usar un cliente FTP para cargar este archivo en la carpeta js dentro de su directorio de temas de WordPress. Si su directorio de temas no tiene una carpeta js, entonces debe crearlo haciendo clic derecho 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 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 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: Hacer 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 hacer que el último widget de la barra lateral se desplace a medida que el usuario se desplaza. Esto se llama widget flotante o widget fijo.
Si observa el código jQuery anterior, notará que agregamos un wpbstickywidget
Clase CSS al widget después del efecto de fundido. Puede usar esta clase de CSS para hacer que su último widget sea pegajoso después de que se desvanezca. Todo lo que necesita hacer es pegar este CSS en la hoja de estilo de su tema.
.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 hacer que el widget sea aún más prominente. Si lo desea, incluso puede agregar un efecto de desplazamiento suave a la parte 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 su barra lateral de WordPress. Para obtener más bondad de jQuery, consulte los mejores tutoriales de jQuery para WordPress.