¿Has notado cómo se ve el texto cuando los visitantes lo resaltan en tu sitio web? A veces tenemos que actualizar el color de selección de texto en los sitios web en los que trabajamos para que coincida con los colores de la marca, y muchos usuarios han preguntado cómo hacerlo.
La buena noticia es que es más fácil de lo que piensas personalizar este elemento de diseño a menudo pasado por alto. Ya sea que desees que coincida con los colores de tu marca o mejorar la legibilidad, cambiar el color de selección de texto puede mejorar la experiencia de usuario de tu sitio web.
En esta guía, te mostraremos exactamente cómo cambiar el color de selección de texto predeterminado en WordPress.
¿Por qué cambiar el color de selección de texto predeterminado en WordPress?
El color de selección de texto se refiere al color de la fuente en WordPress que aparece cuando resaltas un fragmento de texto dentro de un contenido. Como esto:
En algunos casos, es posible que desees cambiar este color porque no se ve bien con el diseño de tu sitio web de WordPress. El esquema de color juega un papel importante en hacer que tu sitio se vea bien y mantenga una experiencia de marca consistente.
Si tienes un blog de WordPress, entonces también es posible que desees cambiar el color de selección de texto predeterminado si crees que no resalta lo suficiente del resto del contenido, lo que dificulta su lectura.
Dicho esto, veamos cómo puedes cambiar el color de fuente para la selección de texto en WordPress. Simplemente usa los enlaces de abajo para saltar al método que deseas utilizar:
- Método 1: Usar código para cambiar el color de selección de texto (funciona con todos los temas)
- Method 2: Using the WordPress Theme Settings (Varies by the Classic Theme)
Método 1: Usar código para cambiar el color de selección de texto (funciona con todos los temas)
Algunos temas de WordPress ofrecen una función integrada para cambiar el color de selección de texto, pero no todos lo hacen. Es por eso que recomendamos usar código CSS personalizado, ya que el método es mucho más universal.
A menudo, encontrarás fragmentos de código CSS en tutoriales de WordPress con instrucciones para agregarlos al archivo functions.php de tu tema.
El mayor problema es que incluso un pequeño error en el fragmento de código puede dañar por completo tu sitio de WordPress. Sin mencionar que perderás todo tu código personalizado cuando actualices el tema de WordPress.
Ahí es donde entra WPCode. Este plugin de fragmentos de código facilita agregar código personalizado a WordPress sin causar errores ni hacer que tu sitio sea inaccesible.
Lo primero que necesitas hacer es instalar y activar el plugin gratuito WPCode. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Al activarlo, dirígete a Fragmentos de código » Agregar fragmento en tu panel de administración de WordPress.
Aquí, simplemente pasa el cursor del mouse sobre ‘Agregar tu código personalizado (Nuevo fragmento)’.
Cuando aparezca, haz clic en el botón ‘+ Agregar fragmento personalizado’.
Luego, debes elegir un tipo de código de la lista de opciones que aparecen en la pantalla.
Para este tutorial, selecciona ‘Fragmento de CSS’.
En la siguiente página, escribe un título para el fragmento de código personalizado.
Puede ser cualquier cosa que te ayude a identificar el fragmento en el panel de WordPress más adelante, como ‘Cambiar color de selección de texto’.
Luego puedes agregar el siguiente CSS en el cuadro de vista previa del código:
/* Customizing text selection for Firefox */
::-moz-selection {
/* Background color when text is selected in Firefox */
background-color: #008000; /* Green color */
/* Text color when text is selected in Firefox */
color: #fff;
}
/* Customizing text selection for other browsers */
::selection {
/* Background color when text is selected in other browsers */
background-color: #008000; /* Green color */
/* Text color when text is selected in other browsers */
color: #fff;
}
Observa que agregamos dos estilos. El selector CSS ::moz-selection funciona con el navegador Firefox, y el selector CSS ::selection funciona con otros navegadores populares como Google Chrome, Safari, IE9+ y Opera.
En el ejemplo anterior, el código hexadecimal # cambiará el color del enlace a verde, por lo que deberá cambiar background-color: #008000 al color que desee usar para el texto resaltado.
Si no está seguro de qué código hexadecimal usar, puede explorar diferentes colores y obtener sus códigos en el sitio web HTML Color Codes .
Cuando esté satisfecho con el aspecto de su código, simplemente haga clic en el interruptor 'Inactivo' para que muestre 'Activo' en su lugar.
Luego, haga clic en 'Guardar fragmento' para que el fragmento CSS esté activo.
Ahora puede visitar su sitio web para ver los cambios en acción.
Así es como se veía en nuestro sitio web de demostración.
Método 2: Usar la configuración del tema de WordPress (varía según el tema clásico)
Algunos temas de WordPress le permiten cambiar la configuración de su tipografía y fuentes, incluido el color del texto seleccionado. Para verificar si este es el caso de su tema, debe ir a Apariencia » Personalizar.
Nota: Este método no es aplicable para temas de bloques.
Aquí, busque cualquier configuración etiquetada como 'Colores'.
Si ve una pestaña 'General', 'Global' o similar, a menudo contendrá la configuración de color del tema.
Por ejemplo, si está utilizando el tema de WordPress Astra, deberá seleccionar la pestaña 'Global'.
Después de eso, haga clic en 'Colores' para ver todos los diferentes colores que componen este tema de WordPress.
A continuación, debe hacer clic en 'Acento'.
Esto abre un selector de color donde puede elegir un nuevo color de selección de texto.
Ahora puedes ver cómo cambia el color de la fuente, ya que la vista previa en vivo se actualizará automáticamente. Así, puedes probar diferentes configuraciones para ver cuál se ve mejor para tu sitio web de WordPress.
Cuando estés satisfecho con tus cambios, simplemente haz clic en ‘Publicar’ para hacerlos efectivos.
Después de eso, verás el nuevo color de selección de texto en vivo en tu blog o sitio web de WordPress.
Incluso si no ves ninguna configuración de color en el personalizador de temas de WordPress, aún vale la pena revisar la documentación de tu tema para ver si hay alguna forma de cambiar el color de selección de texto predeterminado.
Incluso puedes contactar al desarrollador del tema para obtener ayuda. Para más información, consulta nuestra guía sobre cómo solicitar soporte de WordPress correctamente y obtenerlo.
Descubre más consejos y trucos de tipografía para WordPress
¿Quieres personalizar las fuentes de tu sitio web de WordPress, pero no sabes cómo? Consulta estas guías para empezar:
- Los Mejores Plugins de Tipografía de WordPress para Mejorar tu Diseño
- Cómo cambiar fácilmente el tamaño de fuente en WordPress
- ¿Qué es una Fuente Web Segura + Las Mejores Fuentes Web Seguras (Guía para Principiantes)
- Cómo agregar fácilmente fuentes de iconos en tu tema de WordPress
- Cómo agregar letras capitales en las entradas de WordPress
Esperamos que este tutorial te haya ayudado a aprender cómo cambiar el color de selección de texto predeterminado en WordPress. También te puede interesar ver nuestra guía sobre los mejores constructores de páginas de arrastrar y soltar para WordPress y cómo vender fuentes en línea con WordPress.
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.
Jiří Vaněk
Recientemente, usé tu artículo para cambiar el color del encabezado en el navegador Chrome en dispositivos móviles. Este es otro pequeño detalle que puede personalizar enormemente un sitio web. Sé que estos son solo ajustes menores, pero me encanta cómo, gracias a tus guías, puedo perfeccionar gradualmente todos estos pequeños detalles. Porque, en mi opinión, la belleza está en los detalles. Gracias por el gran tutorial y el fragmento que lo hizo realmente fácil.
Michael
¡Muchas gracias por tu publicación! Clara y útil.
Soporte de WPBeginner
Glad you found our content helpful
Administrador
Lynne Clay
¿Hay alguna forma de cambiar solo el color de los títulos de mis publicaciones sin tener que cambiar el código? No entiendo nada de codificación y no quiero meterme con eso de todos modos.
Soporte de WPBeginner
Aunque requiere codificación, si quisieras personalizaciones sin necesidad de entender el código, podrías considerar un plugin como CSS Hero, que hemos revisado aquí:
https://www.wpbeginner.com/plugins/css-hero-review-wordpress-design-customization-made-easy/
Administrador
Samar Jamil
Gracias por esta publicación increíble.
Soporte de WPBeginner
You’re welcome
Administrador
KrishnaChaitanya
Muchas gracias, su servicio fue excelente. Mucho que aprender de ustedes.
Soporte de WPBeginner
Glad our tutorial was helpful
Administrador
Adrian Wallis
Gracias, me funcionó muy bien en un Twenty Fourteen Child. Espero que ese sea el último verde predeterminado que desaparezca de la plantilla.
Michele
Intenté esto pero no funcionó... ¿Estoy usando Thesis, eso hace alguna diferencia?
Personal editorial
Que sepamos no, porque es un cambio básico de CSS. Lo único que se nos ocurre es que Thesis esté sobrescribiendo tus estilos, ¿quizás?
Administrador
Marvin
Hola,
Acabo de copiar tu código en mi tema hijo Genesis eleven40 pero no está funcionando.
Gracias
Personal editorial
Debería funcionar bien a menos que eleven40 tenga sus propios estilos predefinidos. En ese caso, necesitarías sobrescribirlos agregando un valor !important en los tuyos.
Administrador
Lauren
Dios mío. He estado buscando incansablemente por todo internet la solución a este problema, pero sin éxito. ¡Pero esta respuesta a la pregunta de Marvin lo resolvió! Tan simple. ¡¡¡Muchísimas gracias!!!!!
David Abramson
Truco genial. Estoy trabajando en un sitio web en Genesis y como dice mi técnico de soporte, "es tan fácil como beber un vaso de agua".
¡Gracias!
-David
Brad Dalton
Chris Coyier publicó esto en css-tricks.com en 2009 http://css-tricks.com/snippets/css/change-text-selection-color/
Personal editorial
Ah bueno, no lo sabía hasta que lo vimos en el sitio de Brian.
Administrador
Keith Davis
Sí, lo vi en el sitio de Brian Gardner.
Nunca supe que se podían cambiar los colores de selección hasta que leí su artículo.
No estoy seguro si alguna vez lo usaría, pero es bueno saber que se puede hacer.
Josh McCarty
Esta es una de esas cosas sencillas que mucha gente probablemente no notará, pero es un buen "extra" para agregar a un sitio web. Lo vi por primera vez en HTML5 Boilerplate y lo uso con frecuencia en los sitios que construyo.
bungeshea
De hecho, puedes combinarlos, así:
::selection,
::-moz-selection {
background-color: #ff6200;
color: #fff;
}
Personal editorial
Vimos este tutorial en el sitio de Brian. Él sugiere que combinarlos no funcionará (no está seguro en qué entorno no funcionó). Pero nos quedaremos con lo que sabemos que funciona.
Administrador
Clean Digital
Buena publicación. ¡Acabamos de actualizar nuestro sitio con un bonito fondo rojo! ¡Saludos!
Gautam Doddamani
genesis has a nice text selection color. your site’s is orange which is cool
p.d. Hablando de apariencias del sitio, yoast.com también recibió una mejora, ¡él también está usando ahora el framework Genesis, felicitaciones por eso!
Personal editorial
Sí, Genesis es un muy buen framework para construir tu sitio.
Administrador