Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Copa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Cómo cambiar el color de selección de texto por defecto en WordPress

¿Quieres cambiar el color de selección de texto por defecto en WordPress?

A veces, es posible que desee que el color por defecto de la sección de texto contraste más con el color de fondo. De esta manera, los usuarios pueden ver exactamente lo que se está resaltando en el contenido.

En este artículo, le mostraremos cómo cambiar el color de selección de texto por defecto en su tema de WordPress.

How to change the default text selection color in WordPress

¿Por qué cambiar el color de selección de texto por defecto en WordPress?

El color de selección de texto se refiere al color que aparece cuando se resalta un fragmento de texto dentro de un contenido. Así:

An example of the default text selection color in WordPress

En algunos casos, es posible que desee cambiar este color porque no se ve bien con el diseño de su sitio web de WordPress. El esquema de color juega un perfil importante para que su sitio se vea bien y mantener una experiencia de marca consistente.

Si tienes un blog en WordPress, también puedes cambiar el color de selección de texto por defecto si crees que no destaca lo suficiente del resto del contenido, dificultando su lectura.

Dicho esto, veamos cómo puedes cambiar el color de selección de texto por defecto en WordPress. Sólo tiene que utilizar los siguientes enlaces para saltar al método que desea utilizar:

Método 1: Usar los ajustes del tema de WordPress (Fácil)

Algunos temas de WordPress permiten cambiar los ajustes de la tipografía y las fuentes, incluido el color de selección de texto por defecto. Para comprobar si este es el caso de tu tema, tienes que ir a Apariencia ” Personalizar.

Nota: Si está utilizando un tema de bloque, entonces no tendrá esta opción y tendrá que ir al Método 2 para cambiar el color de selección de texto.

Opening the WordPress theme customizer

Aquí, busque los ajustes etiquetados como ‘Colores’.

Si ve una pestaña “General”, “Global” o similar, suele contener los ajustes de color del tema.

Por ejemplo, si utiliza el popular tema Astra de WordPress, deberá seleccionar la pestaña “Global”.

Changing the default text selection color using the theme settings

A continuación, haga clic en “Colores” para ver todos los colores que componen este tema de WordPress.

A continuación, debe hacer clic en “Acento”.

Changing the accent color in the WordPress theme settings

Esto abre un selector de color donde puede elegir un nuevo color de selección de texto.

A medida que realice cambios, la vista previa se actualizará automáticamente. Así, puedes probar diferentes ajustes para ver cuál es el que mejor se adapta a tu sitio web en WordPress.

Changing the text selection color using the WordPress Theme Customizer

Cuando estés satisfecho con los cambios, haz clic en “Publicar” para activarlos.

Después de eso, usted verá el nuevo color de selección de texto en vivo en su blog de WordPress o sitio web.

Changing the text highlight color in WordPress

Incluso si usted no ve ningún ajuste de color en el Personalizador de temas de WordPress, todavía vale la pena comprobar la documentación de su tema para ver si hay una manera de cambiar el color de selección de texto por defecto.

Incluso puedes pedir ayuda al desarrollador del tema. Para obtener más información, consulta nuestra guía sobre cómo solicitar correctamente el soporte de WordPress y conseguirlo.

Método 2: Usar código para cambiar el color de la selección de texto (funciona con todos los temas)

Si no puede ver la forma de cambiar el color de selección de texto en el Personalizador de temas, otra opción es utilizar código CSS.

A menudo, encontrará fragmentos de código CSS en tutoriales de WordPress con instrucciones para añadirlos al archivo functions. php de su tema.

El mayor problema es que incluso un pequeño error en el fragmento de código puede romper por completo su sitio de WordPress. Por no 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 hace que sea fácil añadir código personalizado a WordPress sin causar ningún error o hacer que su sitio inaccesible.

WPCode - Best WordPress Code Snippets Plugin

Lo primero que tienes que 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.

Una vez activado, diríjase a Fragmentos de código ” Añadir fragmento en su escritorio de administrador de WordPress.

Changing the text selection color using WPCode

Aquí, sólo tiene que pasar el ratón por encima de “Añada su código personalizado”.

Cuando aparezca, haga clic en el botón “Usar fragmento de código”.

Adding custom code snippets to WordPress using WPCode

Para empezar, escriba un título para el fragmento de código personalizado. Puede ser cualquier cosa que le ayude a identificar el fragmento en el escritorio de WordPress más adelante, como “Cambiar el color de selección de texto”.

A continuación, abra el menú desplegable “Tipo de código” y seleccione “Fragmento de código CSS”.

Changing the WordPress text selection color using code

A continuación, puede añadir el siguiente CSS en el cuadro 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;
}

Fíjate en que hemos añadido 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 tendrá que cambiar el color de fondo: #008000 al color que desea utilizar para el texto resaltado.

Si no está seguro de qué código hexadecimal utilizar, puede explorar diferentes colores y obtener sus códigos en el sitio web HTML Color Codes.

Cuando estés satisfecho con el aspecto de tu código, haz clic en el conmutador “Inactivo” para que aparezca “Activo”.

A continuación, haga clic en “Guardar fragmento” para activar el fragmento de código CSS.

Inserting the default text selection color CSS code in WPCode

Ahora puede visitar su sitio web para ver los cambios en acción.

Así se veía en nuestro sitio web de demostración.

Example of the new default text selection color, created with WPCode

Descubra más consejos y trucos sobre tipografía en WordPress

¿Quieres personalizar las fuentes de tu sitio web en WordPress, pero no sabes cómo? Marque / compruebe estas guías para empezar:

Esperamos que este tutorial te haya ayudado a aprender cómo cambiar el color de selección de texto por defecto en WordPress. Puede que también quieras ver nuestra guía sobre los mejores editores de arrastrar y soltar páginas para WordPress y cómo vender fuentes online con WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Descargo: Nuestro contenido está apoyado por los lectores. Esto significa que si hace clic en algunos de nuestros enlaces, podemos ganar una comisión. Vea cómo se financia WPBeginner , por qué es importante, y cómo puede apoyarnos. Aquí está nuestro proceso editorial .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

El último kit de herramientas de WordPress

Obtenga acceso GRATUITO a nuestro kit de herramientas - una colección de productos y recursos relacionados con WordPress que todo profesional debería tener!

Reader Interactions

25 comentariosDeja una respuesta

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Michael

    Thank you so much for your post ! Clear and useful.

    • WPBeginner Support

      Glad you found our content helpful :)

      Administrador

  3. Lynne Clay

    Is there a way to change just my posts titles color without having to change the coding? I don’t understand anything about coding and don’t want to mess with that anyway.

  4. Samar Jamil

    Thanks for this awesome post.

    • WPBeginner Support

      You’re welcome :)

      Administrador

  5. KrishnaChaitanya

    Thank you very much, your service was excellent. Lot to learn from you.

    • WPBeginner Support

      Glad our tutorial was helpful :)

      Administrador

  6. Adrian Wallis

    Thanks, it worked great for me in a Twenty Fourteen Child. Hopefully that is the last of the default green gone from template

  7. Michele

    I tried this but it didn’t work… I’m using Thesis, does that make a difference?

    • Editorial Staff

      Not that we know of because it is a basic CSS change. The only thing we can think of is that thesis is overriding your styles maybe?

      Administrador

  8. Marvin

    Hello there,

    I just copied your code in my Genesis eleven40 child theme but it is not working.

    Thank You

    • Editorial Staff

      It should work just fine unless eleven40 has it’s own styles pre-defined. In which case you would need to override them by adding an !important value in yours.

      Administrador

      • Lauren

        Oh my gosh. I have been searching tirelessly all over the internet for the solution to this problem, but to no avail. But this response to Marvin’s question solved it! So simple. Thanks so much!!!!!

  9. David Abramson

    Cool trick. I am working on a website in Genesis and like my tech support guy says, “it’s as easy as drinking a glass of water”

    Thanks!
    -David

      • Keith Davis

        Yes I saw it on Brian Gardner’s site.
        Never knew you could change the selection colours until I read his article.
        Not sure if I would ever use it, but nice to know it can be done.

  10. Josh McCarty

    This is one of those simple things that many people probably won’t notice, but it’s a nice “extra” to add to a website. I first saw it in HTML5 Boilerplate and use it frequently on sites that I build.

  11. bungeshea

    You actually can combine them, like this:

    ::selection,
    ::-moz-selection {
    background-color: #ff6200;
    color: #fff;
    }

    • Editorial Staff

      We saw this tutorial on Brian’s site. He suggests that combining them will not work (not sure which environment it was not working). But we’d stick with what we know works.

      Administrador

  12. Gautam Doddamani

    genesis has a nice text selection color. your site’s is orange which is cool :)

    p.s. speaking about site appearances, yoast.com got an upgrade too, he is also now using the genesis framework kudos to that!

Deja tu comentario

Gracias por elegir dejar un comentario. Tenga en cuenta que todos los comentarios son moderados de acuerdo con nuestros política de comentarios, y su dirección de correo electrónico NO será publicada. Por favor, NO utilice palabras clave en el campo de nombre. Tengamos una conversación personal y significativa.