¿Alguna vez has intentado cambiar un color u ocultar algo en tu sitio de WordPress, sólo para descubrir que no hay ninguna opción para ello? A mí también me ha pasado. 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 conocí el CSS personalizado. Es una forma rápida de arreglar pequeños problemas visuales en tu sitio, sin editar los archivos del tema ni contratar a un desarrollador.
Si eres nuevo en esto, no te preocupes. No hace falta que sepas programar ni que entiendas cómo funcionan los sitios web.
En esta guía, te mostraré formas sencillas de añadir CSS personalizado a WordPress. También te guiaré a través de mi herramienta favorita para el trabajo, 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 su sitio WordPress.
Por ejemplo, este fragmento de CSS cambia el color de un encabezado a rojo:
h1 {
color: red;
}Y éste oculta un elemento de la página:
.hidden {
display: none;
}No necesitas escribir código como éste desde cero. La mayoría de las veces, bastará con copiarlo y pegarlo en el lugar adecuado.
La clave es saber dónde poner 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 poco de espacio extra, y tu tema no te ofrece una forma de hacerlo.
Ahí es donde entra en juego el CSS personalizado. Te da el control sobre los pequeños detalles de diseño que hacen que tu sitio se vea y se sienta a la perfección.
Con CSS, no tienes que limitarte a la configuración predeterminada del tema de WordPress. Puedes ajustar el diseño, el estilo y el espaciado sin cambiar de tema ni instalar plugins adicionales de WordPress.
Recuerda: El CSS ayuda a ajustar el diseño, pero no soluciona los errores visuales más graves que el CSS personalizado no puede corregir, como los diseños desordenados o la navegación deficiente.
Entonces, ¿cómo se añade CSS personalizado en WordPress?
Hay varias formas de hacerlo, pero voy a empezar por la que yo utilizo más a menudo y la que recomiendo si quieres un control total sin complicaciones.
1. Añadir CSS personalizado con SeedProd (Mi manera favorita)
Si nunca has usado SeedProd, es un constructor de WordPress de arrastrar y soltar que hace que personalizar tu sitio sea superfácil, incluso si no eres desarrollador.
Yo lo uso todo el tiempo porque puedo construir 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 su 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 de WordPress personalizado sin código
- Cómo crear una página de destino en WordPress
Una vez que hayas construido una página de destino o tema con SeedProd, estás listo para añadir tu propio CSS personalizado. Vamos a empezar con la forma de hacerlo en una sola página de destino.
Cómo añadir CSS a una página de destino en SeedProd
Para empezar, abra su panel de WordPress y vaya a SeedProd " Páginas de destino.
Busque la página de destino que desea editar y haga clic en el enlace Editar situado junto a ella.
Esto abrirá el constructor de páginas SeedProd. En la esquina inferior izquierda, haga clic en el icono de engranaje para abrir la configuración global.
En la barra lateral izquierda, haga clic en la pestaña CSS personalizado.
Ahora pega tu CSS. Por ejemplo, aquí hay uno que los estilos de su texto de párrafo:
p {
font-style: italic;
color: #444;
}
Pulse el botón Guardar en la esquina superior derecha.
A continuación, puede previsualizar su página para ver los cambios guardados en directo en su sitio web.
Cómo añadir CSS global con el Theme Builder de SeedProd
Si utiliza el Theme Builder de SeedProd para diseñar todo su sitio, puede aplicar CSS personalizado que funcione en todas las páginas.
Para empezar, abra su panel de WordPress y vaya a SeedProd " Theme Builder.
Busque la plantilla llamada CSS Global y haga clic en Editar Diseño.
Dentro del constructor, haga clic en el icono de engranaje de la esquina inferior izquierda para abrir la Configuración global.
En la barra lateral izquierda, haga clic en la pestaña CSS personalizado.
Haga clic en el botón Editar CSS Personalizado. Esto abre el Personalizador de WordPress en una nueva ventana.
En el Personalizador, haga clic en CSS adicional y, a continuación, pegue el código.
Por ejemplo:
p {
font-style: italic;
}Esto hará que todos los párrafos de texto de su sitio aparezcan en cursiva.
Haga clic en Publicar para guardar los cambios y aplicarlos a 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 fuente, espaciado y retoques de color.
2. Añadir CSS personalizado en WordPress sin un constructor de páginas
Si no estás usando un constructor de páginas como SeedProd, todavía 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 antigua herramienta de personalización y suelen basarse en widgets y plantillas de página. Los temas de bloques, por el contrario, utilizan el nuevo Editor de Sitios, que permite diseñar todo el sitio con bloques.
Empecemos por los temas clásicos.
Utilizar el personalizador de WordPress (temas clásicos)
En el panel de control de WordPress, vaya a Apariencia " Personalizar.
En el menú Personalizador, haga clic en CSS adicional.
Aparecerá un cuadro de texto en el que podrá pegar su código personalizado. Por ejemplo
p {
color: #0073aa;
}Esto cambia todo el texto de los párrafos de su sitio a un tono azul.
Verás una vista previa en directo de tus cambios a la derecha mientras escribes.
Cuando esté satisfecho con su aspecto, haga clic en el botón Publicar para guardar los cambios.
Este método funciona bien con temas antiguos compatibles con el personalizador y no requiere ningún plugin de WordPress.
Utilizar el Editor de Sitios (Temas en Bloque)
Si su sitio de WordPress utiliza un tema de bloque, gestionará su diseño utilizando el Editor del sitio completo en lugar del Personalizador.
Para empezar, vaya a Apariencia " Editor en su panel de WordPress.
En la barra lateral izquierda, haz clic en el icono Estilos. Parece una media luna o una paleta de pintura.
A continuación, haga clic en el icono del lápiz pequeño etiquetado 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.
Pegue su código personalizado en la casilla. Por ejemplo
p {
color: #0073aa;
}Esto cambiará el color del texto del párrafo en todo su sitio.
Haga clic en Guardar en la esquina superior derecha para aplicar los cambios.
⚠️ Si no ves el panel CSS adicional, es posible que tu tema de bloques no lo admita. En ese caso, puedes utilizar un plugin como WPCode o cambiar a un constructor como SeedProd.
3. Utilizar un plugin CSS personalizado
Si tu tema no es compatible con el Personalizador o el Editor del Sitio, o si simplemente quieres una forma limpia de gestionar tu CSS en un solo lugar, te recomiendo que utilices un plugin como WPCode.
WPCode es un ligero plugin para WordPress que te permite añadir de forma segura fragmentos de código personalizados, como CSS, HTML, JavaScript o PHP, sin necesidad de editar los archivos de tu tema.
Una vez que haya instalado y activado WPCode, vaya a Fragmentos de código " + Añadir fragmento en su panel de WordPress.
Haga clic en el cuadro que dice Añada su código personalizado (Nuevo fragmento) y dele un nombre a su fragmento, como Estilos CSS personalizados.
En Tipo de código, seleccione Fragmento CSS en el menú desplegable.
Ahora pega tu CSS en la caja de código. Por ejemplo:
p {
color: #0073aa;
}Desplácese hacia abajo y elija Insertar automáticamente para aplicar el CSS en todo el sitio.
A continuación, haga clic en Guardar fragmento y cambie el interruptor de la parte superior a Activo.
Ya está. Tus estilos personalizados ya están activos en todo tu sitio, y puedes volver a este fragmento en cualquier momento para hacer cambios.
4. Editar los archivos del tema (no recomendado)
Este método sólo funciona si está utilizando un tema clásico. Los temas en bloque no incluyen acceso al Editor de archivos de temas en el panel de WordPress.
Si utiliza un tema clásico y se siente cómodo editando código, puede añadir CSS personalizado directamente a la sección de su tema style.css archivo. Pero no recomiendo esto a menos que sepas lo que estás haciendo.
Si editas directamente los archivos del tema, los cambios pueden perderse durante las actualizaciones. Tampoco verás una vista previa en vivo, e incluso un pequeño error tipográfico puede romper el diseño.
Dicho esto, si utilizas un tema hijo o sabes cómo restaurar tu sitio si algo va mal, aquí tienes cómo hacerlo.
Vaya a Apariencia " Editor de archivos de tema en su panel de WordPress.
En la lista de archivos de la derecha, haga clic en style.css.
Desplácese hasta la parte inferior del archivo y pegue su CSS. Por ejemplo:
p {
color: #0073aa;
}Haga clic en Actualizar archivo para guardar los cambios.
⚠️ Haga esto sólo si utiliza un tema hijo o si sabe cómo restaurar su sitio de forma segura. Para la mayoría de los usuarios, herramientas como SeedProd o WPCode son opciones mucho más seguras.
Bonificación: Destinar CSS personalizado a páginas o bloques
A veces no quieres que tu CSS afecte a todo el sitio, sólo quieres que se aplique a una página o a un único bloque. Para ello, puedes utilizar ID de página o clases CSS personalizadas.
Uso de identificadores de página en WordPress
Cada página de WordPress tiene un ID único, y puede utilizarlo para seleccionar estilos sólo para esa página.
Para encontrar el ID de página, visite la página en su navegador, haga clic con el botón derecho del ratón en cualquier lugar y seleccione Inspeccionar.
En el código, busque <body> etiqueta. Incluirá una clase como page-id-37.
A continuación, puede utilizarlo en su CSS de la siguiente manera:
.page-id-37 p {
color: green;
}
Esto sólo cambiará el color del texto del párrafo en esa página específica.
Uso de la configuración de bloques de SeedProd
Si utiliza SeedProd, puede seleccionar bloques específicos añadiendo un nombre de clase personalizado.
Abra su página en el constructor de SeedProd y haga clic en el bloque que desea estilizar. En mi caso, quiero dar estilo a un bloque de encabezado específico.
En el panel de la izquierda, vaya a la pestaña Avanzado, busque la opción Atributos y expándala.
Busque el campo Clase CSS y añada un nombre de clase como my-special-style.
A continuación, en el cuadro CSS personalizado global o a nivel de página, añada algo como esto:
.my-special-style {
background-color: #fff7e6;
border-radius: 10px;
}
Después de guardar y previsualizar la página, verá los cambios en ese bloque específico sin afectar al resto de su sitio.
Preguntas frecuentes sobre la adición de CSS personalizado en WordPress
.page-id-123 p {color: red; }O, si utiliza SeedProd o WPCode, puede crear una clase CSS personalizada y aplicarla manualmente a un bloque o sección.
¿Está listo para personalizar su sitio WordPress?
Como has visto, hay varias formas sencillas de añadir CSS personalizado en WordPress, incluso si no eres desarrollador.
Puedes dar estilo a bloques individuales, modificar todo el tema o hacer pequeños cambios que ayuden a que tu sitio tenga exactamente el aspecto que deseas. Tanto si prefieres utilizar SeedProd, WPCode o alguna de las herramientas integradas en WordPress, lo importante es que no te sientas atascado con los valores predeterminados de tu tema.
Si desea un mayor control sin necesidad de editar los archivos del tema, SeedProd es la forma más sencilla de crear y dar estilo a sus páginas, sin necesidad de código.
¿Quieres seguir personalizando tu sitio WordPress? Aquí tienes algunas guías que te recomiendo a continuación:
- Cómo editar la página de inicio de WordPress
- Cómo personalizar las cabeceras en WordPress
- Cómo añadir testimonios a las páginas de WordPress
- Cómo crear una página 404 personalizada en WordPress
- Cómo añadir un formulario de contacto en WordPress
