¿Quieres agregar una barra de desplazamiento personalizada en WordPress? Cambiar el aspecto 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. Te vamos a mostrar dos soluciones y puedes elegir la que más te convenga.
Problemas con los colores de la barra de desplazamiento personalizada
De forma predeterminada, CSS no viene con un conjunto de reglas que le permitan cambiar las propiedades de la barra de desplazamiento. Hay algunas sugerencias para agregarlo, pero no son compatibles con la mayoría de los navegadores en este momento. Para superar esto, los diseñadores y desarrolladores utilizan elementos pseduo o JavaScript específicos del navegador para anular la apariencia de la barra de desplazamiento predeterminada. Te mostraremos ambas técnicas. Sin embargo, tenga en cuenta que debe probar su sitio con diferentes navegadores y dispositivos para asegurarse de que funcione bien en todos los navegadores. Dicho esto, veamos cómo agregar colores de barra de desplazamiento personalizados en WordPress.
Método 1. Agregue una barra de desplazamiento personalizada en WordPress con un plugin
Este método es más simple y recomendado para la mayoría de usuarios. Sin embargo, no es compatible con navegadores móviles. En primer lugar, debe instalar y activar el plugin Advanced Scrollbar. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un plugin de WordPress. Al activar, debes ir a Configuración »Configuración del control deslizante de color personalizado página para configurar el plugin.
Desde aquí puede cambiar el color de la barra de desplazamiento y los colores de fondo del riel de la barra de desplazamiento. A continuación, puede seleccionar el paso de desplazamiento del mouse, que es la velocidad de desplazamiento de la rueda del mouse. También puede optar por ocultar automáticamente la barra de desplazamiento o mostrarla siempre. Tiene la opción de elegir la opción «Solo cursor», que mostrará el riel de la barra de desplazamiento, pero no el botón.
Debajo encontrará opciones para establecer la velocidad de desplazamiento, cambiar la alineación de los rieles (izquierda o derecha) y habilitar el comportamiento táctil. Recuerde hacer clic en el botón Guardar cambios para guardar su configuración. Ahora puede visitar su sitio web para ver los colores de su 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 utilizan el motor de renderizado WebKit como Google Chrome, Safari, Opera, etc. No tendrá ningún efecto en los navegadores móviles o Firefox y Edge en los equipos de escritorio. Deberá agregar el siguiente CSS personalizado a su tema de WordPress. :: – barra de desplazamiento de webkit {-appearance-webkit: none; } :: – barra de desplazamiento de webkit {ancho: 10px; } :: – webkit-scrollbar-track {fondo: # ffb400; borde: 1px sólido #ccc; } :: – webkit-scrollbar-thumb {fondo: # cc00ff; borde: 1px sólido #eee; altura: 100px; radio del borde: 5px; } :: – webkit-scrollbar-thumb: hover {fondo: azul; } No dude en cambiar los colores y otras propiedades CSS. Una vez que esté satisfecho, no olvide guardar sus cambios. Después de eso, puede obtener una vista previa en un navegador compatible. Así es como se ve en nuestro sitio web de demostración cuando se ve 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 personalizado de WordPress sin escribir ningún código. 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 Facebook.
