¿Quieres intentar editar el CSS de WordPress, pero no tienes idea de por dónde empezar? Con el estilo CSS, puedes editar la apariencia de tu sitio globalmente o en ciertas páginas. Agrega colores, espacia ciertos elementos, diseña un diseño y básicamente cambia el aspecto de cualquier cosa en tu tema de WordPress.
Si quieres familiarizarte más con el entorno de desarrollo de WordPress, o simplemente tener un control más fino sobre la apariencia de tu sitio web, necesitarás saber cómo añadir CSS en WordPress (además de cómo cambiar lo que ya está allí).
Al editar tu tema e incluir tu propio CSS adicional, podrás optimizar todos y cada uno de los elementos visuales de tu sitio. Hoy, lo veremos más de cerca.
¿Listo para empezar? ¡Hagámoslo!
¿Qué es la edición en CSS?
CSS significa Hojas de Estilo en Cascada y es el lenguaje web más popular además del HTML. Los dos van de la mano, ya que CSS se utiliza para estilizar elementos HTML. HTML establece la base de la apariencia de un sitio web y el CSS se utiliza para mejorar el estilo.
El CSS te da la posibilidad de hacer que un sitio web responda, añadir colores, cambiar las fuentes, modificar el diseño y, en general, afinar la presentación visual de un sitio web. Al igual que el HTML y el JavaScript, el CSS es un lenguaje del lado del cliente, lo que significa que se ejecuta en el extremo del usuario, en lugar de en el servidor de fondo.
Al sumergirse en el desarrollo de WordPress, HTML, CSS, JavaScript, y PHP son los lenguajes que necesitarás saber. De esta manera se construye el núcleo del CMS , así como sus muchos temas y plugins.
Pero incluso si no eres un diseñador o desarrollador web, es bueno tomar un poco de CSS, ya que puedes usarlo para mover o dar estilo a los elementos de tu sitio web, o hacer pequeños cambios estéticos en tu tema para que se adapte mejor a ti.
WordPress y CSS
Dentro de WordPress, el CSS es un poco diferente. Está controlado por temas, que se componen de archivos plantilla, etiquetas de plantilla, y por supuesto la hoja de estilos CSS. Aunque generados por tu tema, todos ellos son editables por ti.
Los archivos plantilla dividen partes de tu sitio web en secciones (como header.php o archive.php), y las etiquetas plantilla se utilizan para llamarlas y otros contenidos de su base de datos. Estos archivos están compuestos principalmente por PHP y HTML, aunque puedes añadir CSS si lo necesitas.
Lo que realmente buscas es la hoja de estilo, o style.css. Para cambiar el aspecto de tu sitio web, deberás aprender a agregar y editar código en este archivo.
¿Cómo personalizar tu tema de WordPress con CSS?
Si quieres personalizar tu tema y cambiar el aspecto de tu sitio con CSS, tendrás que añadir tu propio código o editar lo que ya está ahí. Hay formas de agregar CSS sin necesidad de tocar ningún archivo de tema, pero para cambiar el código de tema existente, tendrás que acceder a la hoja de estilos de tu sitio.
Mientras realizas estos cambios, hay algo que debes saber: cuando tu tema se actualice, cualquier edición que hayas hecho en style.css, functions.php, u otros archivos plantilla de temas se borrará. En general, no deberías hacer cambios directos en tu sitio web en el editor sin usar un tema secundario.
La hoja de estilos es como una «lista de instrucciones» para tu sitio web, estableciendo exactamente cómo se diseña y cómo se maneja el código CSS. Aquí es donde harás la mayor parte de la edición, pero también te mostraremos cómo acceder a otros archivos plantilla de temas, como header.php y footer.php.
Hay dos maneras de acceder a la hoja de estilos de tu sitio web de WordPress: a través del panel de control de WordPress o a través de un cliente FTP. Cubriremos ambas.
¿No te sientes cómodo haciendo esto tú mismo? Considera la posibilidad de contratar a un desarrollador de WordPress para que se encargue de ese paso.
Editar el CSS de WordPress en el panel de control
La forma más fácil y conveniente de acceder a tu hoja de estilos CSS es justo en el panel de control de WordPress. No hay necesidad de instalar programas FTP o editores de código. Puedes editar directamente cualquier archivo con resaltado de sintaxis y documentación de funciones incorporada.
Antes de hacer cualquier edición importante en los archivos centrales, siempre debes hacer una copia de seguridad de tu sitio de WordPress. Es muy fácil cometer accidentalmente un error que podría romper la apariencia de tu sitio si eres nuevo en CSS, y podría ser difícil averiguar cómo revertir tus cambios.
Una vez que hayas hecho una copia de seguridad y un tema secundario, entra en tu backend. Puedes encontrar el editor yendo al menú y haciendo clic en Apariencia > Editor de temas.
Deberías ver un popup que te advierte de que no hagas ediciones directas en estos archivos. No te preocupes, sólo haz clic en «Yo entiendo». Es sólo una advertencia para usar un tema secundario y hacer una copia de seguridad de tu sitio web antes de hacer cualquier cambio importante. Sigue estos pasos y será seguro editarlo.
¡Y ahora estás dentro! Deberías estar en la hoja de estilos por defecto, pero mira el menú de la derecha para ver tus archivos de temas si no es así.
Además de style.css, también tendrás acceso a archivos plantilla como functions.php, header.php y single.php. Todos ellos afectan a la forma en que actúan ciertas páginas de tu sitio.
Pero deberías familiarizarte con PHP antes de sumergirte en estos archivos en particular
Sólo recuerda: la mayoría de los cambios en el CSS que hagas aquí serán globales. Por ejemplo, si cambias tus encabezados H1 a una determinada fuente, tendrá efecto para cada una de las páginas de tu sitio. Tendrás que usar una sintaxis especial para personalizar el estilo de las páginas específicas.
Editar archivos de temas directamente
¿Qué pasa si no puedes acceder al Editor de Temas o prefieres hacer tu trabajo por FTP? Es más fácil usar el editor backend, pero algunos temas o plugins pueden desactivarlo. Si ese es el caso, necesitarás conectarte a tu sitio web a través de FTP.
El FTP, o Protocolo de Transferencia de Archivos, le permite acceder y modificar remotamente los archivos de un sitio web. Lo primero que tendrás que hacer es descargar FileZilla o cualquier otro cliente FTP.
A continuación, debes ponerse en contacto con tu host y pedirle tus credenciales de FTP (host, puerto y nombre de usuario/contraseña si corresponde). Si tu host tiene un panel de control, puede que puedas encontrarlos iniciando sesión.
Las credenciales de los usuarios de Kinsta se encuentran en el panel de control de MyKinsta en Sitios > SFTP/SSH.
Una vez que los tengas, lanza tu cliente FTP e introduce esa información. Si no funciona, intenta poner «sftp://» antes del URL en la sección de Host.
Una vez dentro, puedes encontrar tu archivo style.css haciendo clic en la carpeta de contenido wp para abrirlo, luego en la carpeta de tu tema (como el tema Twenty Twenty), y luego desplazándote hasta que veas style.css.
Haz doble clic para abrirlo (o haz clic con el botón derecho del ratón y selecciona Ver/Editar) y haz tus modificaciones. Recuerda guardar y volver a subir al servidor.
Si necesitas editar otros archivos plantilla como home.php, single.php, archive.php, puedes encontrarlos en la misma carpeta que style.css.
La edición de los archivos de temas, ya sea a través de FTP o del panel de control, no siempre es necesaria. De hecho, es mejor evitar hacerlo si sólo estás añadiendo algún código extra.
Para pequeñas adiciones, aquí está la mejor manera de añadir CSS a tu sitio de WordPress.
¿Cómo añadir un CSS personalizado en WordPress?
Si no estás buscando editar el código CSS existente, y sólo quieres añadir tu propio estilo en su lugar, se sugiere encarecidamente utilizar uno de los siguientes métodos: WordPress Customizer o usar un plugin dedicado.
Para empezar, el código CSS añadido a través de uno de estos métodos es mucho más fácil de acceder y usar. No tienes que preocuparte por poner tu nuevo CSS en el lugar equivocado u olvidarte de dónde lo has añadido si quieres hacer modificaciones más tarde.
Además, el CSS añadido a través de uno de estos métodos no se perderá cuando se actualice el tema (aunque aún puede desaparecer si cambias de tema).
Esto significa que no necesitas usar un tema secundario, y si algo se rompe, todo lo que tienes que hacer es quitar el CSS que acabas de añadir.
Ten en cuenta que debes mantener una copia de seguridad de tu sitio web, ya que algunas personas han informado de la pérdida ocasional de su CSS durante las actualizaciones importantes. Aún así, este método es mucho más confiable que la edición directa de los archivos de temas.
Si bien puedes agregar código a style.css y darlo por terminado, si no quieres crear un tema secundario, hacer ediciones importantes a los CSS existentes en tu tema, y potencialmente terminar con todo tu trabajo borrado, es mejor usar la opción de CSS adicional en el personalizador de WordPress o instalar un plugin.
1. Edición de CSS a través del WordPress Customizer
En lugar de usar el Editor de Temas, prueba esto. Inicia sesión en tu backend de WordPress y haz clic en Apariencia > Personalizar para abrir la pantalla de personalización de temas. Verás una vista previa en vivo de tu sitio web, con opciones a la izquierda para personalizar elementos como los colores, los menús u otros widgets.
En la parte inferior de este menú, deberías encontrar la caja de CSS adicional.
Haz clic para abrirlo. Se le llevará a una nueva pantalla con un cuadro de entrada de código y algunas instrucciones. La pantalla de CSS adicional incluye resaltado de sintaxis, al igual que el Editor de temas, junto con una validación que te permite saber si tu código es incorrecto.
Cualquier código que escribas aparece automáticamente en el área de vista previa de la derecha, a menos que tenga un error (aunque puedes elegir publicarlo de todas formas).
Cuando termines de trabajar, puedes publicar tu código, programar cuándo entrará en vigor, o guardarlo como un borrador para trabajar más tarde. Incluso puedes obtener un enlace de vista previa para compartir con otros.
Como puedes ver, la página de CSS adicional es en muchos sentidos más potente que el Editor de temas, y mucho más adecuada para añadir código que para jugar con los archivos centrales.
El código CSS que escribes aquí sobrescribe el estilo por defecto de tu tema y no desaparece cuando el tema se actualiza. Si no puedes verlo «en directo» en tu vista previa, comprueba que estás usando los selectores correctos en tu código CSS.
Al igual que con el Editor de Temas, el CSS es global por defecto, pero puedes escribir código que apunta a páginas específicas.
La única desventaja es que, si cambias de tema, todo lo que hayas escrito será borrado. Asegúrate de hacer una copia de seguridad de tu CSS antes de cambiar de tema o podrías terminar perdiendo mucho trabajo.
Si tienes dificultades para usar esta opción, o si quieres una solución que funcione en todos los temas y que pueda dirigirse más fácilmente a determinadas páginas, deberías probar un plugin.
2. Agregar CSS personalizado a WordPress usando plugins
Hay algunas razones por las que podrías querer usar un plugin para añadir CSS a WordPress. Aunque la función es similar al menú de CSS adicional, los estilos normalmente se mantendrán aunque cambies/actualices los temas.
También puedes disfrutar más de tu UI, o te gustan las funciones adicionales como el autocompletado. Algunos plugins incluso te permiten construir CSS a través de menús desplegables, en lugar de tener que escribirlo tú mismo.
Simple Custom CSS
Simple Custom CSS es el plugin de edición de CSS más popular, debido a su facilidad de uso, interfaz mínima y backend ligero. En resumen, es un plugin de WordPress muy pequeño que tiene un gran impacto.
El montaje es pan comido y no verás ningún impacto negativo en el rendimiento. Funciona en cualquier tema e incluye resaltado de sintaxis y comprobación de errores.
Simple Custom CSS and JS
Simple Custom CSS and JS es una buena alternativa. También te permite apuntar al encabezado, al pie de página, al frontend, o incluso al backend de administración.
SiteOrigin CSS
SiteOrigin CSS es otra opción que también incluye un editor CSS tradicional. Puedes cambiar entre él y el editor visual en cualquier momento.
WP Add Custom CSS
Si tienes dificultades para añadir CSS a páginas específicas, WP Add Custom CSS añade un cuadro de CSS personalizado a la pantalla de edición, y también viene con un estilo global.
CSS Hero
También puedes considerar probar un editor visual de CSS. Este toma toda la codificación complicada y la convierte en una serie de campos de entrada y menús desplegables fáciles de usar que manejan toda la programación por ti.
CSS Hero es un plugin de edición visual de primera calidad con algunas características muy potentes (animación, ediciones específicas para cada dispositivo y edición no destructiva, entre otras).
¿Dónde aprender CSS?
¿Listo para sumergirte en el CSS por ti mismo? Estos tutoriales para principiantes establecerán los fundamentos y te enseñarán la sintaxis que necesitarás saber para escribir tu propio código CSS funcional.
Puede ser desalentador, pero a menos que estés tratando de hacer algo realmente avanzado, el CSS no es demasiado difícil! Cosas simples como cambiar el color de fondo o establecer el estilo de la fuente son bastante fáciles, y hay muchos ejemplos en línea.
La mayoría de los tutoriales de programación que encontrarás en Internet también son completamente gratuitos. Hay mucha información por ahí sin costo alguno.
Aquí hay algunos ejemplos que cubren los mejores tutoriales de CSS para principiantes.
- Tutorial de CSS de W3Schools: Hay un montón de información que se puede encontrar aquí: tutoriales en profundidad, ejemplos y referencias para que trabajes con ellos. Los tutoriales de W3Schools son tan simples y fáciles de seguir como sea posible, así que incluso si eres un principiante total, este es un gran lugar para empezar.
- Codeacademy Aprende CSS: A través de seis lecciones prácticas gratuitas, aprenderás los fundamentos del CSS. No se trata de un simple video tutorial, sino de una lección interactiva que te hace trabajar con código real. Con la versión pro, también obtendrás pruebas y proyectos de forma libre para trabajar en ellos.
- Aprende CSS en una hora: Mucha gente quiere aprender un nuevo lenguaje de programación, pero no tienen tiempo para dedicarse. Pero si puedes dedicar sólo una hora, puedes aprender CSS con este curso gratuito de 20 partes. Incluso si no eres un maestro al final, deberías tener una buena comprensión de los fundamentos.
- Introducción a HTML y CSS básico para usuarios de WordPress: ¿Buscando algo específico para WordPress? Si siempre has luchado con la escritura de HTML y CSS, este curso es perfecto para ti. Es pagado, pero viene con 52 conferencias y cinco horas de video para aprender.
Resumen
Como usuario de WordPress, saltar al CSS puede ser confuso al principio. Pero una vez que sepas cómo editar tus archivos de temas y dónde agregarle estilo, no deberías tener más problemas.
Los archivos de temas pueden ser editados ya sea desde tu backend o a través de FTP para cambiar la apariencia de tu sitio, pero esto generalmente debe ser evitado a menos que necesites editar el código existente.
Si sólo quieres añadir tu propio CSS, utiliza la página de CSS adicional en Apariencia > Personalizar, o prueba un plugin si necesitas algo más potente.
Los cambios en tu hoja de estilo se perderán al actualizar el tema, a menos que uses un tema secundario. No ocurre lo mismo con el CSS adicional. Tu código está a salvo de las actualizaciones, pero no lo olvides: sólo un plugin conservará el CSS cuando cambies de tema.
Sea cual sea el método que elijas, siempre debes mantener copias de seguridad regulares de tu sitio web, incluyendo la hoja de estilos y el código personalizado que hayas añadido. Ahora es el momento de repasar los fundamentos de CSS con los recursos que te proporcionamos.
¡Feliz estilización!
Editor en jefe de Kinsta y consultor de marketing de contenidos para desarrolladores de plugins de WordPress. Conéctese con Matteo en Twitter.
Deja una respuesta