WordPress le permite crear un sitio web funcional y atractivo sin conocimientos técnicos. Sin embargo, si desea aprovechar al máximo su sitio, aprender un poco sobre la codificación puede ser muy útil. Una de las formas más rápidas en que puede comenzar a realizar cambios significativos en su sitio es aprender a usar CSS en WordPress.
Las hojas de estilo en cascada (CSS) son uno de los lenguajes más importantes en el diseño web. Hacer ajustes de CSS en su sitio le permite personalizar su apariencia, diseño, fuentes, colores y más. CSS ofrece un control más completo sobre la apariencia de su sitio que su tema, y no es tan difícil trabajar con él.
Qué es CSS (y cómo funciona)
Primero, retrocedamos un poco y hablemos sobre el lenguaje de marcado de hipertexto (HTML) . Este es el idioma principal utilizado para crear su sitio web de WordPress y es de naturaleza descriptiva. El código HTML informa a los navegadores web sobre los diversos elementos de su contenido. Por ejemplo, indica qué texto es parte de un encabezado y cuál es parte de un párrafo del cuerpo.
Si alguna vez revisó la pestaña Texto en el editor de WordPress, habrá visto HTML en funcionamiento:
También puede usar HTML para dictar el estilo de su sitio web de alguna manera. Sin embargo, esta es una forma difícil de manejar para hacer el trabajo. Por ejemplo, si desea que todos los títulos de sus publicaciones sean de color púrpura, deberá agregar un código HTML que contenga la misma instrucción para cada encabezado individualmente.
Ahí es donde las hojas de estilo en cascada (CSS) vienen al rescate. Este lenguaje se utiliza para dictar cómo aparecen los elementos HTML , incluidos sus tamaños, diseños, colores, fuentes, etc. Por ejemplo, puede cambiar el color de todos los encabezados de su sitio utilizando unas pocas líneas de código con CSS, sin alterar el HTML de su contenido.
Mantener la estructura y el estilo separados de esta manera le brinda un control total sobre la apariencia de su sitio y le permite realizar cambios fácilmente cuando lo desee. También significa que puede comenzar a usar CSS personalizado básico en WordPress sin saber nada de HTML (aunque comprender los conceptos básicos de HTML ayuda a acelerar el proceso).
Dónde agregar CSS personalizado en WordPress
Si bien puede agregar CSS directamente a la hoja de estilo de su tema de WordPress, no recomendamos este método porque es fácil cometer errores y cualquier cambio que realice se sobrescribirá cuando actualice su tema ( a menos que use un tema secundario ) .
Afortunadamente, hay una solución más fácil. Para agregar CSS a WordPress, solo necesita:
- Vaya a Apariencia > Personalizar en su panel de control de WordPress para abrir el Personalizador de WordPress
- Seleccione la opción CSS adicional del menú de la izquierda en la interfaz del personalizador de WordPress :
El editor (actualmente) vacío en esta área le permite escribir líneas de código CSS, sin tener que revisar la hoja de estilo existente. Puede agregar tanto CSS aquí como desee, solo incluya cada fragmento nuevo en su propia línea. Además, puede ver que sus cambios surtan efecto en la vista previa en vivo. De esa forma, sabrá si se ven bien antes de publicarlos en su sitio.
Además, este editor lo ayudará a «validar» su CSS, que es una forma elegante de decir que le advertirá si comete errores obvios.
Si tiene curiosidad acerca de qué tipos de ajustes de CSS puede hacer aquí, no se preocupe. Permanezca en esta página en su tablero y exploraremos algunas formas de comenzar a personalizar la apariencia de su sitio con CSS.
Cómo comenzar a personalizar su sitio de WordPress con CSS
Como mencionamos anteriormente, puede cambiar casi cualquier aspecto de la apariencia de su sitio usando CSS en WordPress. El cielo realmente es el límite aquí. Por ahora, sin embargo, mantendremos las cosas simples y veremos algunos ajustes básicos de CSS que puede hacer.
Ya mencionamos la alteración del color del texto, así que empecemos por ahí. Si realmente desea que sus publicaciones de WordPress capten la atención de sus visitantes, puede experimentar cambiando el color del título de cada publicación. Así es como se ve una publicación básica en el tema de WordPress de Twenty Seventeen :
Ahora, agregue este código al cuadro CSS adicional en el Personalizador:
h1 {
color: purple;
}
Como puede ver, el color del título de la publicación ha cambiado de negro a morado:
Este mismo ajuste también se aplicará a todas las demás publicaciones de su sitio. En lugar de simplemente nombrar un color, también puede usar códigos hexadecimales para obtener el tono correcto. Simplemente reemplace el púrpura con #9C33FF (o cualquier color que desee usar). Cuando esté satisfecho con el nuevo tono, seleccione Publicar en la parte superior de la pantalla para realizar sus cambios en vivo.
A continuación, ¿qué sucede si desea realizar algunas modificaciones en el cuerpo del texto? Editemos su familia de fuentes y tamaño , agregando este código en una nueva línea:
p {
font-family: Georgia;
font-size: 20px;
}
Nuevamente, puede ver los resultados de inmediato en el Personalizador:
Finalmente, hagamos que la barra lateral se destaque un poco más, agregando un fondo azul claro y un poco de relleno. En una nueva línea, pegue este CSS:
.widget {
background: #B9EBFA;
padding: 25px;
}
Esto coloca un fondo simple detrás de la barra lateral:
Tenga en cuenta que este código afectará a todas las áreas de sus widgets , incluido el pie de página. También puede realizar cambios en widgets específicos si lo prefiere. Por ejemplo, podría agregar un fondo solo al widget de búsqueda, reemplazando .widgetel código anterior con .widget_search:
En este punto, es posible que esté comenzando a comprender cómo funciona CSS bajo el capó. La primera línea de un fragmento de CSS especifica qué elemento está modificando, como los títulos de las publicaciones ( h1 ), el texto contenido en los párrafos ( p ) o las áreas de su widget ( widget ). Las siguientes líneas, entre paréntesis, contienen instrucciones específicas sobre lo que debe cambiarse.
Dónde aprender más sobre CSS
Hay muchas guías útiles en línea que lo ayudarán a aprender más sobre CSS y los elementos más comunes que puede afectar. Hasta entonces, si tiene dificultades para averiguar qué código necesita para realizar un cambio en particular, una simple búsqueda en Google generalmente lo llevará a la respuesta. Los recursos como los documentos web de MDN de Mozilla generalmente ocupan un lugar destacado en Google y hacen un gran trabajo al explicar varios aspectos de CSS.
Con un poco de práctica, se encontrará agregando CSS con facilidad en muy poco tiempo.
Conclusión
Trabajar con el código de su sitio web puede parecer intimidante si es un principiante. Sin embargo, muchos de los idiomas en los que se basa su sitio son sorprendentemente fáciles de usar cuando se trata de realizar ajustes básicos. Aprender a usar CSS personalizado en WordPress de manera efectiva puede llevar un poco de tiempo, pero le proporcionará un nivel de control sin precedentes sobre la apariencia y el diseño de su sitio.
En lugar de realizar cambios directamente en la hoja de estilo CSS de su tema, debe usar el Personalizador de WordPress para agregar el código CSS de forma rápida y segura. Este proceso le permite modificar los colores, tamaños, fuentes y ubicaciones de varios elementos, sin afectar de forma permanente el código central de su tema activo . Además, podrá ver sus cambios en vivo, para saber exactamente qué efecto tendrán.
