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 usa 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 vuelve visible. La animación hace que el widget sea llamativo y notable, lo que aumenta significativamente la tasa de clics. En este artículo, le mostraremos cómo pasar al ú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, editará sus 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 el Bloc de notas. Luego guarde este archivo vacío como wpb_fadein_widget.js en su escritorio y pegue el siguiente código en él.
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 en este código es var sidebarElement = $('div#secondary');.
Esta es la identificación del div que contiene la barra lateral. Dado que cada tema puede usar diferentes divs de contenedor de barra lateral, debe averiguar el ID del contenedor utilizado por el tema para la barra lateral.
Puede averiguarlo utilizando la herramienta Verificar elementos en Google Chrome. Simplemente haga clic derecho en la barra lateral en Google Chrome, luego seleccione Inspeccionar elemento.
En el código fuente, podrá ver su contenedor de barra lateral div. Por ejemplo, se utiliza el tema predeterminado Twenty Twelve secondaryy Veinte Trece usos teritary como ID para el contenedor de la barra lateral. tienes que reemplazar secondary con el ID de su contenedor de barra lateral div.
A continuación, debe usar un cliente FTP para cargar este archivo en la carpeta js dentro del 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: agregue 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 correcto para agregar 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', true );
Eso es todo, ahora puede agregar un widget en la 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 fijo después del efecto de desvanecimiento
Una función deseada a menudo con el efecto de desvanecimiento es deslizar el último widget de la barra lateral a medida que el usuario se desplaza. Esto se llama widget flotante o widget fijo.
Si observa el código jQuery anterior, notará que hemos agregado un wpbstickywidget Clase CSS al widget después del efecto de desvanecimiento. Puede usar esta clase de CSS para hacer que su último widget sea fijo después de que se haya ido. Todo lo que tienes que hacer es pegar este CSS en la hoja de estilo de tu 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 que el widget destaque aún más. Si lo desea, también puede agregar un desplazamiento suave al efecto superior junto al último widget, lo que permitirá a los usuarios desplazarse rápidamente hacia atrás.
Esperamos que este artículo le haya ayudado a agregar un efecto de desvanecimiento al último widget en la barra lateral de WordPress. Para obtener más bondad de jQuery, consulte los mejores tutoriales de jQuery para WordPress.
Si te ha gustado este artículo, suscríbete al nuestro. canal de Youtube para tutoriales en vídeo de WordPress. También puedes encontrarnos en Gorjeo Y Google+.
Cómo disolver en el último widget de la barra lateral en WordPress usando jQuery
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 usa 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 vuelve visible. La animación hace que el widget sea llamativo y notable, lo que aumenta significativamente la tasa de clics. En este artículo, le mostraremos cómo pasar al ú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, editará sus 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 el Bloc de notas. Luego guarde este archivo vacío como wpb_fadein_widget.js en su escritorio y pegue el siguiente código en él.
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 en este código es var sidebarElement = $('div#secondary');.
Esta es la identificación del div que contiene la barra lateral. Dado que cada tema puede usar diferentes divs de contenedor de barra lateral, debe averiguar el ID del contenedor utilizado por el tema para la barra lateral.
Puede averiguarlo utilizando la herramienta Verificar elementos en Google Chrome. Simplemente haga clic derecho en la barra lateral en Google Chrome, luego seleccione Inspeccionar elemento.
En el código fuente, podrá ver su contenedor de barra lateral div. Por ejemplo, se utiliza el tema predeterminado Twenty Twelve secondaryy Veinte Trece usos teritary como ID para el contenedor de la barra lateral. tienes que reemplazar secondary con el ID de su contenedor de barra lateral div.
A continuación, debe usar un cliente FTP para cargar este archivo en la carpeta js dentro del 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: agregue 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 correcto para agregar 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', true );
Eso es todo, ahora puede agregar un widget en la 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 fijo después del efecto de desvanecimiento
Una función deseada a menudo con el efecto de desvanecimiento es deslizar el último widget de la barra lateral a medida que el usuario se desplaza. Esto se llama widget flotante o widget fijo.
Si observa el código jQuery anterior, notará que hemos agregado un wpbstickywidget Clase CSS al widget después del efecto de desvanecimiento. Puede usar esta clase de CSS para hacer que su último widget sea fijo después de que se haya ido. Todo lo que tienes que hacer es pegar este CSS en la hoja de estilo de tu 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 que el widget destaque aún más. Si lo desea, también puede agregar un desplazamiento suave al efecto superior junto al último widget, lo que permitirá a los usuarios desplazarse rápidamente hacia atrás.
Esperamos que este artículo le haya ayudado a agregar un efecto de desvanecimiento al último widget en la barra lateral de WordPress. Para obtener más bondad de jQuery, consulte los mejores tutoriales de jQuery para WordPress.
Si te ha gustado este artículo, suscríbete al nuestro. canal de Youtube para tutoriales en vídeo de WordPress. También puedes encontrarnos en Gorjeo Y Google+.
