TL;DR: Cómo añadir CSS personalizado en WordPress
Dónde pegas tu CSS importa más que el propio CSS, porque cada lugar se comporta de manera diferente en el momento en que cambias de tema.
- SeedProd: un cuadro de CSS Personalizado en la Configuración Global del constructor, gratuito, con estilos que permanecen adjuntos a la página que construiste.
- El personalizador: Apariencia, Personalizar y, a continuación, CSS adicional, si utilizas un tema clásico.
- El editor del sitio: Estilos y, a continuación, el menú de tres puntos, si utilizas un tema de bloques.
- WPCode: un fragmento de CSS que sobrevive a cualquier cambio de tema.
- Archivos del tema: funcionan, pero la próxima actualización del tema borrará tus cambios.
- ¿No hay opción de CSS adicional? Es un permiso de tu cuenta, no de tu tema.
¿Alguna vez has intentado cambiar un color o ocultar algo en tu sitio de WordPress, solo para descubrir que no hay ninguna opción para ello? Yo también he pasado por eso. Recuerdo pasar demasiado tiempo buscando en la configuración de mi tema un simple ajuste de fuente que simplemente no era posible.
Fue entonces cuando aprendí sobre CSS personalizado. Es una forma rápida de solucionar pequeños problemas visuales en tu sitio, sin editar archivos de tema ni contratar a un desarrollador.
No necesitas saber programar para nada de esto. Hay cuatro lugares donde puedes añadir CSS personalizado en WordPress, y el que elijas decidirá si tus estilos sobreviven al próximo cambio de tema.
Métodos para añadir CSS personalizado en WordPress:
- 1. Añadir CSS personalizado con SeedProd
- 2. Añadir CSS personalizado sin un maquetador de páginas
- 3. Usar un plugin de CSS personalizado
- 4. Editar los archivos de tu tema (No recomendado)
- ¿Por qué falta la opción de CSS adicional?
- ¿Qué método deberías usar?
- Extra: Dirige CSS personalizado a páginas o bloques
¿Qué es el CSS personalizado?
CSS son las siglas de Cascading Style Sheets (Hojas de Estilo en Cascada). Es un lenguaje sencillo que controla el aspecto de tu sitio de WordPress.
Por ejemplo, este fragmento de CSS cambia el color de un encabezado a rojo:
h1 {
color: red;
}Y este oculta un elemento en la página:
.hidden {
display: none;
}No necesitas escribir código como este desde cero. La mayoría de las veces, solo tendrás que copiarlo y pegarlo en el lugar correcto.
La clave es saber dónde colocar tu CSS personalizado, y eso es exactamente lo que te mostraré a continuación.
¿Por qué añadir CSS personalizado en WordPress?
A veces quieres cambiar el color de un botón, centrar un encabezado o eliminar un espacio extra, y tu tema no te ofrece una forma de hacerlo.
Ahí es donde entra el CSS personalizado. Te da control sobre los pequeños detalles de diseño que hacen que tu sitio se vea y se sienta perfecto.
Con CSS, no estás limitado a la configuración predeterminada de tu tema de WordPress. Puedes ajustar tu diseño, estilo y espaciado sin cambiar de tema ni instalar plugins de WordPress adicionales.
Solo recuerda: el CSS ayuda a ajustar tu diseño, pero no solucionará errores visuales más grandes que el CSS personalizado no puede arreglar, como diseños desordenados o una navegación deficiente.
Entonces, ¿cómo se añade realmente CSS personalizado en WordPress?
Hay varias formas diferentes, pero empezaré con la que uso con más frecuencia y la que recomiendo si quieres control total sin complicaciones.
1. Añadir CSS personalizado con SeedProd (Mi forma favorita)
Si nunca has usado SeedProd antes, es un constructor de WordPress de arrastrar y soltar que hace que personalizar tu sitio sea súper fácil, incluso si no eres desarrollador.
Lo uso todo el tiempo porque puedo crear temas completos o páginas de destino sin tocar ningún código. Y cuando quiero añadir un poco de CSS, SeedProd me da un lugar sencillo para hacerlo.
Antes de entrar en los pasos, es útil tener SeedProd configurado en tu sitio.
Si aún no lo has utilizado, aquí tienes un par de tutoriales para principiantes que te ayudarán a empezar:
- Cómo crear un tema personalizado de WordPress sin código
- Cómo crear una página de destino en WordPress
Una vez que hayas creado una página de destino o un tema con SeedProd, estarás listo para añadir tu propio CSS personalizado. Empecemos por cómo hacerlo en una sola página de destino.
Cómo añadir CSS a una página de destino en SeedProd
Para empezar, abre tu panel de WordPress y ve a SeedProd » Páginas de destino.
Busca la página de destino que deseas editar y haz clic en el enlace Editar junto a ella.
Esto abrirá el constructor de páginas de SeedProd. En la esquina inferior izquierda, haz clic en el icono del engranaje para abrir la Configuración global.
En la barra lateral izquierda, haz clic en la pestaña CSS personalizado.
Ahora pega tu CSS. Por ejemplo, aquí tienes uno que da estilo al texto de tus párrafos:
p {
font-style: italic;
color: #444;
}
Haz clic en el botón Guardar en la esquina superior derecha.
Luego puedes previsualizar tu página para ver los cambios guardados en directo en tu sitio web.
Cómo añadir CSS global con el Theme Builder de SeedProd
Si estás utilizando el Theme Builder de SeedProd para diseñar todo tu sitio, puedes aplicar CSS personalizado que funcione en todas las páginas.
Para empezar, abre tu panel de WordPress y ve a SeedProd » Theme Builder.
Busca la plantilla llamada CSS global y haz clic en Editar diseño.
Dentro del constructor, haz clic en el icono del engranaje en la esquina inferior izquierda para abrir la Configuración global.
En la barra lateral izquierda, haz clic en la pestaña CSS personalizado.
Haz clic en el botón Editar CSS personalizado. Esto abrirá el Personalizador de WordPress en una nueva ventana.
En el Personalizador, haz clic en CSS adicional y luego pega tu código.
Por ejemplo:
p {
font-style: italic;
}Esto hará que todo el texto de los párrafos de tu sitio aparezca en cursiva.
Haz clic en Publicar para guardar tus cambios y aplicarlos en todo el sitio.
Ahora puedes actualizar tu página para ver la actualización en directo.
Este método es útil para realizar cambios de estilo globales como ajustes de fuentes, espaciado y cambios de color.
La ruta para todo el sitio es el propio panel de WordPress: el botón Editar CSS personalizado abre el personalizador, por lo que tus estilos globales se guardan en tu tema en lugar de dentro de SeedProd. El cuadro de la página de destino más arriba es la parte genuinamente de SeedProd y funciona en la versión gratuita, aunque Theme Builder en sí necesita un plan Plus o superior.
2. Añadir CSS personalizado en WordPress sin un constructor de páginas
Si no estás utilizando un constructor de páginas como SeedProd, aún puedes añadir CSS personalizado directamente en WordPress. Los pasos dependen del tipo de tema que estés utilizando, ya sea un tema clásico o un tema de bloques.
Los temas clásicos utilizan la herramienta Personalizador más antigua y a menudo dependen de widgets y plantillas de página. Los temas de bloques, por otro lado, utilizan el Editor de sitio más nuevo, que te permite diseñar todo tu sitio con bloques.
Ambos cuadros están integrados en WordPress, así que no hay nada que instalar. Los uso para cambios puntuales en lugar de para cualquier cosa que quiera conservar, porque WordPress archiva el CSS bajo el tema que esté activo en ese momento.
Usar el Personalizador de WordPress (Temas Clásicos)
En tu panel de WordPress, ve a Apariencia » Personalizar.
En el menú del Personalizador, haz clic en CSS adicional.
Aparecerá un cuadro de texto donde puedes pegar tu código personalizado. Por ejemplo:
p {
color: #0073aa;
}Esto cambia todo el texto de los párrafos de tu sitio a un tono de azul.
Verás una vista previa en vivo de tus cambios a la derecha mientras escribes.
Cuando estés contento con el resultado, haz clic en el botón Publicar para guardar tus cambios.
Este método funciona bien con temas antiguos que admiten el Personalizador y no requiere ningún plugin de WordPress.
Usa el Editor de Sitio (Temas de Bloques)
Si tu sitio de WordPress utiliza un tema de bloques, gestionarás tu diseño utilizando el Editor de Sitio completo en lugar del Personalizador.
Para empezar, ve a Apariencia » Editor en tu panel de WordPress.
En la barra lateral izquierda, haz clic en el icono de Estilos. Parece una media luna o una paleta de pintor.
Luego haz clic en el pequeño icono de lápiz etiquetado como Editar Estilos.
Ahora verás el editor de WordPress. En la esquina superior derecha de la pantalla, haz clic en el menú de tres puntos (⋮) y selecciona CSS adicional en el menú desplegable.
Pega tu código personalizado en el cuadro. Por ejemplo:
p {
color: #0073aa;
}Esto cambiará el color del texto de los párrafos en todo tu sitio.
Haz clic en Guardar en la esquina superior derecha para aplicar los cambios.
¿No hay opción de CSS adicional en ese menú? Casi nunca es tu tema. Se debe a un permiso en tu cuenta de usuario, y la sección de abajo explica cómo comprobarlo.
3. Usar un plugin de CSS personalizado
Si tu tema no admite el Personalizador o el Editor de Sitio, o si simplemente quieres una forma limpia de gestionar tu CSS en un solo lugar, te recomiendo usar un plugin como WPCode.
WPCode es un plugin ligero de WordPress que te permite añadir fragmentos de código personalizados, incluido CSS, sin editar los archivos de tu tema.
Una vez que hayas instalado y activado WPCode, ve a Fragmentos de Código » + Añadir Fragmento en tu panel de WordPress.
Haz clic en el cuadro que dice Añadir tu código personalizado (Nuevo fragmento) y dale un nombre a tu fragmento, como Estilos CSS personalizados.
En Tipo de código, selecciona Fragmento CSS en el menú desplegable.
Ahora pega tu CSS en el cuadro de código. Por ejemplo:
p {
color: #0073aa;
}Desplázate hacia abajo y elige Insertar automáticamente para aplicar el CSS en todo tu sitio.
Luego haz clic en Guardar fragmento y activa el interruptor en la parte superior a Activo.
¡Eso es todo! Tus estilos personalizados ya están en vivo en todo tu sitio, y puedes volver a este fragmento en cualquier momento para hacer cambios.
4. Editar los archivos de tu tema (No recomendado)
Este método solo funciona si estás utilizando un tema clásico. Los temas de bloques no incluyen acceso al Editor de Archivos del Tema en el panel de WordPress.
Si estás utilizando un tema clásico y te sientes cómodo editando código, puedes añadir CSS personalizado directamente al archivo style.css de tu tema. Pero no recomiendo esto a menos que sepas lo que estás haciendo.
Cuando editas archivos de tema directamente, tus cambios pueden perderse durante las actualizaciones. Tampoco verás una vista previa en vivo, e incluso un pequeño error tipográfico puede romper tu diseño.
Dicho esto, si estás utilizando un tema hijo o sabes cómo restaurar tu sitio si algo sale mal, aquí te explicamos cómo hacerlo.
Ve a Apariencia » Editor de Archivos del Tema en tu panel de WordPress.
De la lista de archivos de la derecha, haz clic en style.css.
Desplázate hasta el final del archivo y pega tu CSS. Por ejemplo:
p {
color: #0073aa;
}Haz clic en Actualizar archivo para guardar tus cambios.
Edita los archivos del tema solo detrás de un tema hijo: sin uno, la próxima actualización del tema sobrescribirá todo lo que hayas añadido. Si no estás seguro de cómo restaurar tu sitio cuando algo se rompe, usa SeedProd o WPCode en su lugar.
¿Por qué falta la opción de CSS adicional en WordPress?
WordPress oculta el CSS adicional a cualquier cuenta que carezca de un permiso llamado edit_css, por lo que cuando el cuadro desaparece, es el permiso el que ha desaparecido, no la función.
El tema parece el sospechoso obvio, y casi nunca lo es. WordPress ejecuta la misma comprobación de permisos para el cuadro del personalizador y el cuadro del editor del sitio, por lo que cambiar de tema no cambia nada.
Tres cosas desactivan ese permiso:
- Una configuración de seguridad en wp-config.php. Cuando
DISALLOW_UNFILTERED_HTMLse define en un sitio, WordPress quita la edición de CSS personalizado a todo el mundo, incluidos los administradores. - Multisitio. En una red de WordPress, solo el superadministrador que gestiona la red conserva el permiso, por lo que los administradores de sitios individuales pierden el cuadro.
- Un plugin de endurecimiento que lo elimina. El permiso
edit_cssse basa en uno más antiguo llamadounfiltered_html, y algunos plugins de seguridad eliminan este último, lo que se lleva consigo el cuadro de CSS.
Fui y leí esto en el propio código de WordPress 7.1 en lugar de repetir la explicación del tema, porque la opción no se basa en el soporte del tema en absoluto.
Si eres el único administrador y nada obvio debería impedirte, pregunta a tu proveedor de hosting o a quien haya configurado el sitio si DISALLOW_UNFILTERED_HTML está definido en tu archivo wp-config.php. Esa es la forma más rápida de descartarlo.
Si la configuración resulta ser deliberada, respétala y coloca tu CSS en un lugar que no pase por la misma comprobación. El cuadro de CSS personalizado de SeedProd se guarda a través de los propios permisos del constructor y WPCode utiliza su propio permiso de fragmento, por lo que la falta del panel de CSS adicional no impide que ninguno de ellos funcione.
¿Qué método deberías usar?
Elige según lo que quieras que suceda cuando cambies de tema, porque esa es la verdadera diferencia entre estos cuatro.
| M extasciitildeetodo | Mejor para | ¿Sobrevive a un cambio de tema? | ¿Necesita un plan de pago? |
|---|---|---|---|
| SeedProd | Estilismo de páginas de destino y plantillas que tú mismo has creado | Sí, el CSS se guarda con la página | No para una sola página, Plus para todo el sitio |
| Personalizador o Editor del Sitio | Un pequeño ajuste al tema que estás usando ahora | No, WordPress lo almacena por tema | No |
| WPCode | CSS que quieres conservar a través de cualquier cambio de tema | Sí | No |
| Archivos del tema | Nada, a menos que estés trabajando en un tema hijo | No, la próxima actualización lo sobrescribirá | No |
Si el CSS es para todo el sitio y quieres dejar de pensar en ello, usaría WPCode, porque es el único de los cuatro que ignora tu tema por completo. Si el estilo pertenece a una página que diseñaste, guárdalo en SeedProd con la página.
El Personalizador sigue estando bien para un pequeño ajuste que no extrañarías después de un rediseño. Solo ten en cuenta que eso es lo que estás eligiendo.
Extra: Dirige CSS personalizado a páginas o bloques
A veces no quieres que tu CSS afecte a todo el sitio, solo quieres que se aplique a una página o a un solo bloque. Puedes hacerlo usando IDs de página o clases CSS personalizadas.
Uso de IDs de página en WordPress
Cada página en WordPress tiene un ID único, y puedes usarlo para dirigir estilos solo para esa página.
Para encontrar el ID de la página, visita la página en tu navegador, haz clic derecho en cualquier lugar y elige Inspeccionar.
En el código, busca la etiqueta <body>. Incluirá una clase como page-id-37.
Luego puedes usar eso en tu CSS así:
.page-id-37 p {
color: green;
}
Esto solo cambiará el color del texto del párrafo en esa página específica.
Uso de la configuración de bloques de SeedProd
Si estás usando SeedProd, puedes apuntar a bloques específicos añadiendo un nombre de clase personalizado.
Abre tu página en el constructor de SeedProd y haz clic en el bloque que deseas estilizar. En mi caso, quiero estilizar un bloque de encabezado específico.
En el panel izquierdo, ve a la pestaña Avanzado, busca la opción Atributos y expándela.
Encuentra el campo etiquetado como Clase CSS y añade un nombre de clase como my-special-style.
Luego, en tu cuadro de CSS personalizado global o a nivel de página, añade algo como esto:
.my-special-style {
background-color: #fff7e6;
border-radius: 10px;
}
Después de guardar y previsualizar la página, verás tus cambios en ese bloque específico sin afectar al resto de tu sitio.
Preguntas frecuentes sobre cómo añadir CSS personalizado en WordPress
¿Cómo añado CSS a una página específica?
Puedes apuntar a una página con su ID de página único, como .page-id-123 p { color: red; }. Si estás usando SeedProd o WPCode, añade una clase CSS personalizada al bloque o sección que quieras estilizar y apunta a esa clase en su lugar.
¿Puedo usar HTML y CSS juntos?
Sí. Puedes añadir HTML dentro de bloques o widgets de WordPress y estilizarlo con CSS personalizado, siempre que tu CSS apunte al elemento o clase correctos.
¿Es seguro añadir CSS sin un desarrollador?
Sí, siempre que no toques los archivos de tu tema. El CSS solo cambia la apariencia, por lo que un error se muestra como una rareza visual en lugar de un sitio roto, y puedes eliminar la regla para deshacerla. Editar los archivos del tema directamente es la única parte de esto que conlleva un riesgo real.
¿Afectará la adición de CSS a WordPress a los dispositivos móviles?
Tu CSS se aplica a todos los tamaños de pantalla a menos que lo envuelvas en una consulta de medios. Si estás trabajando en SeedProd, puedes cambiar a la vista previa móvil en el constructor y ajustarla allí antes de publicar.
¿Por qué no funciona mi CSS personalizado?
Dos cosas causan esto la mayor parte del tiempo. O una regla en tu tema es más específica que la tuya, por lo que gana, o un plugin de caché todavía está sirviendo la hoja de estilos antigua. Borra tu caché primero, luego haz clic derecho en el elemento y elige Inspeccionar para ver qué regla se está aplicando realmente.
¿Dónde almacena WordPress mi CSS personalizado?
El CSS que añades en el Personalizador va a una publicación oculta que WordPress nombra según tu tema activo, por eso no te sigue cuando cambias. El Editor del Sitio guarda su CSS con los estilos globales de tu tema. SeedProd y WPCode guardan los suyos fuera del tema.
¿Listo para personalizar tu sitio de WordPress?
El CSS personalizado es la forma más rápida de superar un tema que no te permite cambiar algo, y nada de esto necesita un desarrollador.
No tienes que reconstruir nada ni aprender cómo funcionan las hojas de estilo para usarlo. Decide dónde debe vivir el CSS, pégalo y mira la página en tu navegador.
Si prefieres hacer el estilismo visualmente y mantenerlo adjunto a la página que construiste, SeedProd maneja ambos en el mismo lugar.
¿Quieres seguir personalizando tu sitio de WordPress?
Aquí tienes algunas guías que recomiendo a continuación:
- Cómo editar la página de inicio de tu WordPress
- Cómo personalizar encabezados en WordPress
- Cómo añadir testimonios a páginas de WordPress
- Cómo crear una página 404 personalizada en WordPress
¡Gracias por leer! Nos encantaría conocer tu opinión, así que únete a la conversación en YouTube, X y Facebook para obtener más consejos y contenido útil para hacer crecer tu negocio.
