¿Quieres agregar una barra de desplazamiento personalizada en WordPress? Cambiar la apariencia de la barra de desplazamiento puede ayudarlo a destacar especialmente al crear un tema personalizado para su sitio web.
En este artículo, le mostraremos cómo agregar fácilmente una barra de desplazamiento personalizada en WordPress. Le mostraremos dos soluciones y puede elegir la que mejor se adapte a sus necesidades.
Problemas con los colores personalizados de la barra de desplazamiento
De forma predeterminada, CSS no viene con un conjunto de reglas que le permita cambiar las propiedades de la barra de desplazamiento. Hay algunas propuestas para agregar esto, pero no son compatibles con la mayoría de los navegadores en este momento.
Para superar esto, los diseñadores y desarrolladores usan elementos pseduo específicos del navegador o JavaScript para anular la apariencia predeterminada de la barra de desplazamiento.
Te mostraremos ambas técnicas. Sin embargo, tenga en cuenta que debe probar su sitio con diferentes navegadores y dispositivos para asegurarse de que funciona correctamente en todos los navegadores.
Dicho esto, echemos un vistazo a cómo agregar colores de barra de desplazamiento personalizados en WordPress.
Método 1. Agregue una barra de desplazamiento personalizada en WordPress con un complemento
Este método es más fácil y recomendado para la mayoría de los usuarios. Sin embargo, no es compatible con navegadores móviles.
Primero, lo que debe hacer es instalar y activar el Barra de desplazamiento avanzada enchufar. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.
Tras la activación, debe dirigirse a Configuración » Configuración personalizada de la barra de desplazamiento de colores página para configurar el complemento.
Desde aquí, puede cambiar el color de la barra de desplazamiento y los colores de fondo del riel de la barra de desplazamiento. Luego puede seleccionar el paso de desplazamiento del mouse, que es la velocidad de desplazamiento de la rueda del mouse.
También puede seleccionar si desea ocultar automáticamente la barra de desplazamiento o mostrarla siempre.
Tiene la opción de elegir la opción ‘Solo cursor’ que mostraría el riel de la barra de desplazamiento pero no el botón.
Debajo de eso, encontrará opciones para configurar la velocidad de desplazamiento, cambiar la alineación de los rieles (izquierda o derecha) y habilitar el comportamiento táctil.
No olvide hacer clic en el botón Guardar cambios para almacenar su configuración.
Ahora puede visitar su sitio web para ver los colores de la barra de desplazamiento personalizada en acción.
Método 2. Agregue colores de barra de desplazamiento personalizados en WordPress usando CSS
Este método usa CSS para diseñar su barra de desplazamiento, que es más rápido que usar jQuery.
Sin embargo, solo funciona en navegadores de escritorio que usan el motor de renderizado WebKit como Google Chrome, Safari, Opera y más.
No tendrá ningún efecto en los navegadores móviles o Firefox y Edge en las computadoras de escritorio.
Deberá agregar el siguiente CSS personalizado a su tema de WordPress.
::-webkit-scrollbar {
-webkit-appearance: none;
}
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #ffb400;
border:1px solid #ccc;
}
::-webkit-scrollbar-thumb {
background: #cc00ff;
border:1px solid #eee;
height:100px;
border-radius:5px;
}
::-webkit-scrollbar-thumb:hover {
background: blue;
}
Siéntase libre de cambiar los colores y otras propiedades de CSS.
Una vez que esté satisfecho, no olvide guardar los cambios. Después de eso, puede obtener una vista previa en un navegador compatible.
Así es como se veía en nuestro sitio web de demostración mientras se veía en Google Chrome en una computadora Mac.
Esperamos que este artículo le haya ayudado a aprender cómo agregar una barra de desplazamiento personalizada en WordPress. También puede consultar nuestra guía sobre cómo crear fácilmente un tema de WordPress personalizado sin escribir ningún código.
.