¿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.
Si eres nuevo en esto, no te preocupes. No necesitas saber programar ni entender cómo funcionan los sitios web por dentro.
En esta guía, te mostraré formas sencillas para principiantes de añadir CSS personalizado a WordPress. También te guiaré a través de mi herramienta favorita para esta tarea, SeedProd, que hace que todo el proceso sea mucho más fácil.
Métodos para añadir CSS personalizado en WordPress:
¿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 usado, 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.
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.
Empecemos con los temas clásicos.
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.
⚠️ Si no ves el panel de CSS adicional, es posible que tu tema de bloques no lo admita. En ese caso, puedes usar un plugin como WPCode o cambiar a un constructor como SeedProd.
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 de forma segura, como CSS, HTML, JavaScript o PHP, 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.
⚠️ Haz esto solo si estás utilizando un tema hijo o sabes cómo restaurar tu sitio de forma segura. Para la mayoría de los usuarios, herramientas como SeedProd o WPCode son opciones mucho más seguras.
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 dirigir 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
.page-id-123 p {color: red; }Or, if you’re using SeedProd or WPCode, you can create a custom CSS class and apply it to a block or section manually.
¿Listo para personalizar tu sitio de WordPress?
Como has visto, hay varias formas sencillas de añadir CSS personalizado en WordPress, incluso si no eres desarrollador.
Puedes estilizar bloques individuales, ajustar todo tu tema o hacer pequeños cambios que ayuden a que tu sitio se vea exactamente como quieres. Ya sea que prefieras usar SeedProd, WPCode o una de las herramientas integradas de WordPress, lo importante es que no necesitas sentirte atascado con los valores predeterminados de tu tema.
Si quieres más control sin editar los archivos del tema, SeedProd es la forma más fácil de construir y estilizar tus páginas, sin necesidad de código.
¿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
- Cómo añadir un formulario de contacto en WordPress
