¿Cómo usar CSS personalizado en WordPress?

Añadir CSS personalizado en WordPress te permite modificar la apariencia de tu sitio (colores, fuentes, espaciado, layouts específicos) sin alterar los archivos principales del tema. Te muestro las formas más comunes y seguras de hacerlo, destacando las opciones para temas de bloques con FSE:

1. A través del Editor de sitios (para temas de bloques con FSE):

Esta es la forma principal de añadir CSS personalizado si utilizas un tema de bloques compatible con FSE.

• Ve a «Apariencia» > «Editor» en tu panel de administración.
• En la barra lateral derecha del Editor de sitios, haz clic en el icono de «Estilos» (el círculo con un medio punto, generalmente).
• Dentro de «Estilos», busca y haz clic en «CSS Adicional» (o en algunos temas, puede estar bajo «Personalizaciones»).
• Aquí puedes escribir tu código CSS. Los cambios se aplicarán en tiempo real en la previsualización.
• Haz clic en «Guardar» para aplicar los cambios a todo el sitio.
• Ventaja: El CSS se aplica globalmente y se guarda de forma segura en la base de datos sin necesidad de un tema hijo para CSS sencillo.

2. A través del Personalizador de WordPress (para temas clásicos o híbridos):

Esta sigue siendo la forma principal para temas clásicos y temas híbridos que no utilizan FSE al 100% para todo el CSS.

• Ve a «Apariencia» > «Personalizar» en tu panel de administración.
• Busca la sección «CSS Adicional».
• Escribe tu código CSS y haz clic en «Publicar».

3. Utilizando un plugin de CSS personalizado:

Si prefieres una interfaz más avanzada, necesitas organizar tu CSS en múltiples archivos o buscas control de versiones para tu CSS, un plugin dedicado sigue siendo una opción.

• Instala y activa un plugin como «Simple Custom CSS» o «Code Snippets» (aunque este es más para PHP, algunos lo usan para CSS también).
• Te proporcionará un editor donde añadir tu código CSS.

4. En un tema hijo (para personalizaciones profundas y desarrollo):

Para personalizaciones de CSS extensas que requieran sobrescribir muchos estilos o modificar cómo se cargan, usar un tema hijo sigue siendo la mejor práctica, especialmente para temas clásicos. En temas FSE, su uso se limita más a modificaciones de plantillas de bloques o funciones PHP.

• Crea un archivo style.css dentro de la carpeta de tu tema hijo.
• Asegúrate de que tu tema hijo esté configurado correctamente para cargar el style.css del tema padre (generalmente a través de functions.php).
• Escribe tu CSS personalizado en este archivo style.css de tu tema hijo.

5. A través de las opciones del tema o maquetador visual:

Muchos temas premium y constructores visuales (Elementor, Divi) tienen sus propias secciones o módulos para añadir CSS personalizado, ya sea a nivel global del sitio o para elementos específicos.

Al usar CSS personalizado, utiliza el inspector de elementos de tu navegador (clic derecho > «Inspeccionar») para identificar las clases o IDs de los elementos que quieres modificar y aplicar los estilos con precisión.

¿Necesitas ayuda para identificar qué selectores CSS usar en tu sitio o quieres ejemplos de código para una personalización específica?