Cómo añadir una barra de desplazamiento personalizada en WordPress

¿Quieres añadir una barra de desplazamiento personalizada en WordPress? Cambiar la apariencia de la barra de desplazamiento puede ayudarte a destacar especialmente al hacer un tema personalizado para tu sitio web.

En este artículo, te mostraremos cómo añadir fácilmente una barra de desplazamiento personalizada en WordPress. Te mostraremos dos soluciones y podrás elegir la que mejor se adapte a ti.

Problemas con los colores personalizados de la barra de desplazamiento

Por defecto, CSS no viene con un conjunto de reglas que te permita cambiar las propiedades de la barra de desplazamiento. Hay algunas propuestas para añadir esto, pero no son soportadas por la mayoría de los navegadores por el momento.

Para superar esto, los diseñadores y desarrolladores utilizan elementos pseduo específicos del navegador o JavaScript para anular la apariencia predeterminada de la barra de desplazamiento.

Le 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, veamos cómo añadir colores personalizados a la barra de desplazamiento en WordPress.

Método 1. Añadir una barra de desplazamiento personalizada en WordPress con un plugin

Este método es más fácil y recomendado para la mayoría de los usuarios. Sin embargo, no es compatible con los navegadores móviles.

Lo primero que tienes que hacer es instalar y activar el plugin de la barra de desplazamiento avanzada. Para obtener más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Una vez activada, debes ir a la página de configuración " Custom Color Scrollbar Settings para configurar el plugin.

Desde aquí, puedes cambiar el color de la barra de desplazamiento y los colores de fondo de la barra de desplazamiento. A continuación, puedes seleccionar el paso de desplazamiento del ratón, que es la velocidad de desplazamiento de la rueda del ratón.

También puede seleccionar si desea ocultar automáticamente la barra de desplazamiento o mostrarla siempre.

Tienes la opción de elegir la opción "Sólo Cursor" que mostraría la barra de desplazamiento pero no el botón.

A continuación, encontrarás opciones para establecer la velocidad de desplazamiento, cambiar la alineación de los rieles (izquierda o derecha) y habilitar el comportamiento de toque.

No te olvides de hacer clic en el botón de guardar cambios para almacenar tus ajustes.

Ahora puedes visitar tu sitio web para ver los colores personalizados de tu barra de desplazamiento en acción.

Método 2. Añadir colores personalizados de la barra de desplazamiento en WordPress usando CSS

Este método utiliza CSS para dar estilo a tu barra de desplazamiento, lo cual es más rápido que el uso de jQuery.

Sin embargo, sólo funciona en los navegadores de escritorio que utilizan el motor de renderizado WebKit como Google Chrome, Safari, Opera y más.

No tendrá ningún efecto en los navegadores móviles o en Firefox y Edge en los ordenadores de sobremesa.

Tendrás que añadir el siguiente CSS personalizado a tu tema de WordPress.

12345678910111213141516171819202122::-webkit-scrollbar { -webkit-aparición: ninguna;}::-webkit-scrollbar { ancho: 10px;} ::-webkit-scrollbar-track { fondo: #ffb400; borde:1pxsólido#ccc;} ::-webkit-scrollbar-pulgar { fondo: #cc00ff; borde:1pxsólido#eee; altura:100px; borde-radio:5px;} ::-webkit-barra de desplazamiento-pulgar:hover { fondo: azul; }

Siéntete libre de cambiar los colores y otras propiedades CSS.

Una vez que estés satisfecho, no olvides guardar tus cambios. Después de eso, puedes previsualizarlo 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 te haya ayudado a aprender cómo añadir una barra de desplazamiento personalizada en WordPress. También puedes ver nuestra guía sobre cómo crear fácilmente un tema personalizado de WordPress sin escribir ningún código.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para ver los video tutoriales de WordPress. También puedes encontrarnos en Twitter y Facebook.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir