Cómo personalizar los colores de un tema de WordPress
Publicado en Marketing, WordPress por WP Engine
Última actualización el 23 de diciembre, 2020
Una de las mejores partes de usar WordPress es que tienes acceso a miles de temas que puedes usar para personalizar el estilo de tu sitio. Sin embargo, a veces se encuentra el tema perfecto, sólo para darse cuenta de que no cuenta con un esquema de color que le gusta.
Esto puede ser frustrante, pero no tiene que descarrilar sus planes. Con un poco de trabajo, puede cambiar las opciones de color de su tema, y hacer que su sitio web se vea justo como usted quiere.
En este artículo, vamos a explorar dos maneras de personalizar los colores de un tema de WordPress, incluyendo un enfoque manual y un método de plugin. Comencemos!
Cómo cambiar los colores del tema de WordPress
En esta sección, vamos a mostrarte cómo cambiar los colores de tu tema de WordPress de forma manual. Para hacer esto, querrás usar un ‘tema hijo’, para no perder ninguno de los cambios que hagas cuando el tema ‘padre’ se actualice.
Es más, configurar un tema hijo es casi siempre una idea inteligente si planeas hacer cualquier cambio personalizado en el marco de tu sitio. Vamos a hablar de cómo hacer el trabajo.
Paso 1: Crear un tema hijo
Un tema hijo es una copia de un tema padre, que hereda los mismos estilos. Puedes hacer cambios en su código sin afectar al padre, y no se sobrescribirán cuando necesites actualizar el tema. Este enfoque le permite editar el estilo de su sitio de forma segura, de modo que si comete algún error, puede volver al tema principal y empezar de nuevo.
Cuando se trata de crear un tema hijo, hay dos maneras de hacerlo. En primer lugar, puede seguir el enfoque manual, que cubrimos en este artículo y puede resumir en cuatro pasos:
- Conéctese a su sitio web a través del Protocolo de Transferencia de Archivos (FTP), utilizando un cliente como FileZilla.
- Navegue a su carpeta de Temas de WordPress.
- Crea una nueva carpeta para tu tema hijo.
- Crea un archivo style.css para tu tema hijo.
Sin embargo, puedes optar por utilizar un plugin si no te sientes cómodo editando los archivos de WordPress manualmente. Para este escenario, recomendamos Child Theme Configurator. Con este plugin, puedes generar un tema hijo y configurar sus ajustes mediante un sencillo menú.
Por supuesto, eres libre de utilizar el método que prefieras. Cuando tu tema hijo esté configurado, puedes activarlo y pasar al siguiente paso.
Paso 2: Iniciar sesión en WordPress y abrir el personalizador
Antes de poder cambiar los colores de tu tema de WordPress, tendrás que iniciar sesión en tu panel de control. Una vez allí, navega hasta la pestaña Apariencia > Editor:
Allí, encontrarás un sencillo editor de texto que te permite modificar los archivos de tu tema hijo. Ten en cuenta que también puedes hacer esto usando FTP y tu editor de texto favorito, pero los resultados serán los mismos de cualquier manera.
Si prefieres previsualizar los cambios que hagas en vivo, también puedes editar los colores de tu tema usando el Personalizador de WordPress. Para ello, vaya a la pestaña Apariencia > Personalizar, y luego abra la sección CSS adicional:
En cualquier caso, tendrá que utilizar las hojas de estilo en cascada (CSS) para modificar los colores de su tema. Ahí es donde entra nuestro último paso.
Paso 3: Cambiar los colores de su tema de WordPress
Este paso es bastante sencillo si ya está familiarizado con CSS. Cada elemento dentro de su tema tiene su propio nombre o ‘clase’, a la que puede dirigirse utilizando el código CSS. Tendrá que saber cuál es la clase correspondiente y, a continuación, utilizar los códigos de color HEX para cambiarla.
Por ejemplo, si desea cambiar el color de fondo de su tema, puede añadir un fragmento de CSS como éste a su tema hijo (utilizando cualquiera de los métodos de la última sección):
background-color: #XXXXXX;
La primera parte de ese código apunta a la clase correcta para el elemento que desea modificar. A continuación, sólo tendrá que especificar el color HEX que desea utilizar. Una vez que hayas terminado, no olvides guardar los cambios en la hoja de estilos de tu tema.
Por suerte, como estás usando un tema hijo, puedes experimentar libremente sin preocuparte de romper nada en tu sitio. Si eres nuevo en el uso de CSS, echa un vistazo a esta guía sobre cómo identificar los elementos de tu sitio. Luego, puedes jugar con los códigos de color HEX hasta que encuentres una combinación que te guste.
Plugins que cambian los colores del tema de WordPress
Si prefieres usar plugins en lugar de CSS, te alegrará saber que hay varias opciones que puedes usar para personalizar los colores del tema de WordPress. Repasemos dos de nuestras herramientas favoritas.
Plugin 1: Child Theme Configurator
Child Theme Configurator es nuestra mejor opción, porque le permite tanto crear un tema hijo como personalizar su esquema de colores. Esto significa que puedes saltarte muchos de los pasos que hemos cubierto antes, y empezar a experimentar con las paletas de colores mucho más rápido. Con este plugin, podrás cambiar los colores de las fuentes, los tonos de fondo y mucho más.
Plugin 2: Central Color Pallete
Como su nombre indica, Central Color Pallete te permite cambiar la paleta de colores de tu tema. Este plugin se integra bien con muchos temas y plugins populares, y le permite saltarse el proceso de usar el editor de WordPress para elegir y cambiar los colores. Dos de los plugins con los que Central Color Palette funciona sin problemas son Beaver Builder y Elementor.
Actualice su experiencia digital en WordPress con WP Engine
Independientemente del tema que elija, necesitará un alojamiento web que le proporcione la estabilidad y el rendimiento que necesitará para ejecutar y personalizar su sitio. Con WP Engine, usted obtiene ambas características, y el acceso a un equipo de apoyo estelar.
Si usted es más del tipo de persona «hágalo usted mismo» (DIY), también publicamos una gran cantidad de tutoriales que puede utilizar para solucionar problemas o hacer cambios en su sitio web. Echa un vistazo a nuestros planes y danos una oportunidad!