Editar Estilo CSS de Tema desde Personalizador en WordPress

Editar Estilo CSS de Tema desde Personalizador en WordPress

En el mundo del WordPress hay muchos temas disponibles, tanto gratuitos como de pago, de los cuales puedes elegir el que más te guste en su estilo y presentación del contenido, pero siempre habrá algo que quieras modificar en el estilo, sea un color, un margen o un tipo de fuente. WordPress te permite hacer cambios en el estilo y sobreescribir los valor preterminados de forma fácil. Hoy te mostraremos cómo editar estilo css de tu tema a partir del personalizador.

¿Qué es Personalizador de WordPress?

El personalizador, como dice su nombre, es una sección que WordPress incluye en el menú Apariencia » Personalizar, y desde el cual puedes controlar varios aspectos que básicamente tienen que ver con la apariencia y presentación de widgets, menús, identidad del sitio, logo, editor CSS, entre otros.

La función primordial del personalizador de WordPress es permitir hacer cambios en la estructura y diseño de la página y al mismo tiempo mirar los cambios realizados en directo, antes de guardar los cambios realizados, como reordenar widgets, cambiar el color de fondo de pantalla, modificar la descripción de la página…

Es una aplicación que permite ver cualquier cambio realizado en directo y personalizar varios aspectos del tema y también del sitio web. Algunos temas y plugins de WordPress añaden sus propias funciones al personalizador, así que, es probable que vea secciones que no existen en una instalación virgen de WordPress.

Editar Estilo CSS desde Personalizador

visualizar los cambios al editar estilo css del tema de WordPress

Ahora que sabes cuál es el personalizador de WordPress y sus funciones báscias, te mostramos cómo editar CSS y visualizar los cambios antes de guardarlos. Primero te diriges a la sección CSS adicional en el personalizador ubicado en Apariencia » Personalizar. Cuando das clic aparece un pequeño editor de CSS con un comentario que dice

/*
Puedes añadir tu propio CSS aquí.

Haz clic en el icono de ayuda de arriba para averiguar más.
*/

Después del comentario empiezas a editar estilo predeterminado del tema activo que utilizas en tu sitio web. Para eso debes saber cuál es el nombre de la .clase o #id que quieres sobreescribir con los valores nuevos.

Tomamos como ejemplo del tema predeterminado de WordPress de Twentyseventeen, para editar estilo y cambiar el color de fondo de pantalla y vistualizar los cambios antes de guardarlos finalmente.

.site-content {
    background: yellow;
}

Lo que hacemos es cambiar el fondo de pantalla de su color predeterminado, que por cierto es blanco, a un color más llamativo, que es el amarillo que aplicamos a la clase .site-content que trae consigo el tema. No es una combinación bonita de colores, pero sí que funciona, y cambia de color como se ve en la imagen.

Lo interesante de el personalizador de CSS es que al editar estilo del fondo de pantalla, o cualquier otro elemento del tema, es sólo aplicable al tema activo, o sea cuando se cambia el tema, desaparece el cambio del personalizador, pero cuando vuelves a activar el tema, la estilización vuelve otra vez, ya que queda almacenada en la base de datos, y relacionada con ese tema en particular.

Final

Esta es una forma práctica de editar estilo CSS en tu tema para darle una apariencia más adecuada y cumpla con tus gustos y necesidades. De las otras formas más recomendables es crear un tema hijo para hacer todos los cambios, que afectarán sólo al tema hijo, y no tocas nada del tema principal.

Por favor comparte este artículo si te gusta, y síguenos por nuestra página en Facebook, o la cuenta de Twitter. También disponemos de una página en Google+ donde publicamos toda la actualidad sobre seguridad y optimización de WordPress.

DEJAR COMENTARIO

Favor escribir tu comentario!
Favor ingresar tu nombre aquí