[Las copias de seguridad en la nube se simplifican: Duplicator Cloud elimina el almacenamiento de terceros
Joella Dunn
Joella Dunn
John Turner
John Turner
¿Alguna vez has mirado tu sitio de WordPress pensando: "Está tan cerca de ser perfecto, pero ese botón tiene el tono de azul equivocado", o "me gustaría poder hacer ese texto un poco más grande"?
Los temas de WordPress vienen con opciones de personalización, pero a veces no cubren todo lo que podrías querer cambiar.
Ahí es donde entra en juego el CSS: es como tener una varita mágica que te permite ajustar la apariencia de tu sitio exactamente como quieres.
En esta guía, te mostraré qué es CSS, cómo añadir tus propios estilos personalizados y algunos ejemplos prácticos para empezar.
Al final, se sentirá más cómodo haciendo esos ajustes visuales que llevan a su sitio de "casi allí" a "exactamente correcto".
Piense en su sitio web WordPress como si fuera una casa. El código HTML forma la estructura: las paredes, las habitaciones y los cimientos. CSS (Cascading Style Sheets) son todos los elementos de diseño interior: los colores de la pintura, la disposición de los muebles, la iluminación y los toques decorativos.
CSS le dice a tu navegador cómo mostrar el contenido de tu página. ¿Quieres que todo el texto de los párrafos sea azul? CSS puede hacerlo.
¿Necesitas más espacio entre el encabezamiento y el párrafo? CSS también se encarga de ello.
La estructura básica de CSS sigue este patrón:
selector { property: value; }
El selector se dirige a elementos específicos de su página, y los pares propiedad-valor definen el aspecto que deben tener esos elementos.
Por ejemplo:
p { color: blue; }
Esta simple línea le dice al navegador que muestre todo el texto de los párrafos en azul. Eso es todo.
Aunque simple en su concepto, CSS se vuelve poderoso cuando empiezas a combinar diferentes selectores y propiedades para crear reglas de estilo precisas para tu sitio.
El CSS en WordPress no está en un solo lugar - está en capas por todo tu sitio, por eso se llama "en cascada". Entender esta jerarquía te ayudará a saber dónde hacer los cambios.
El archivo style.css de tu tema es la base. Contiene todas las reglas básicas de estilo que dan a tu tema su aspecto característico. Piensa en él como el paquete de diseño de interiores por defecto.
El personalizador de WordPress ofrece una sección específica de "CSS adicional" en la que puede añadir sus propios estilos de forma segura. Estos anulan los valores predeterminados del tema y sobreviven a las actualizaciones del tema.
Si vas a hacer cambios sustanciales, un tema hijo es tu mejor opción. Su archivo style.css hereda todo del tema principal, pero los estilos que añadas tienen prioridad.
Algunos plugins traen su propio CSS para dar estilo a sus características específicas. Normalmente se cargan después de los estilos del tema.
El Editor de bloques (Gutenberg) y el Editor de sitio completo introducen nuevas formas de añadir CSS, lo que permite aplicar estilo a bloques o secciones específicos sin afectar a todo el sitio.
En ocasiones, verás CSS en línea, es decir, estilos aplicados directamente a elementos HTML mediante el atributo style. En general, se desaconseja este enfoque para el estilo de todo el sitio porque es más difícil de mantener.
Entender esta cascada es importante porque cuando los estilos entran en conflicto, gana el CSS más específico o de carga más tardía. Por eso puedes anular el estilo de tu tema con CSS personalizado.
Aprender CSS te da un control que las opciones del tema por sí solas no pueden proporcionar.
Muchos usuarios de WordPress se topan con un muro de frustración cuando no pueden cambiar algo de la apariencia de su sitio. El selector de color no tiene el tono adecuado. El espaciado entre elementos no es el adecuado. El tamaño de la fuente necesita ser un poco más grande.
Incluso con conocimientos básicos de CSS, usted mismo puede realizar estos ajustes precisos.
CSS te permite hacer que tu sitio sea realmente único. Sin él, estarás limitado a las opciones de personalización que el desarrollador del tema haya pensado incluir. Con CSS, puedes liberarte de esas restricciones.
Cuando aparecen fallos visuales (y aparecerán), entender CSS te ayuda a solucionarlos rápidamente. Puede que la actualización de un plugin haya provocado que el texto se superponga o que la actualización de un tema haya cambiado el estilo de los botones. Unas pocas líneas de CSS pueden resolver estos problemas inmediatamente.
Y lo que es más importante, aprender CSS sienta las bases para entender cómo funcionan los temas de WordPress. Una vez que comprendas cómo CSS controla la apariencia, entenderás mejor por qué las cosas se ven como se ven - haciendo que la solución de problemas sea mucho más rápida.
Existen multitud de recursos accesibles para aprender CSS, muchos de ellos gratuitos.
Mozilla Developer Network (MDN) Web Docs es un gran recurso para las tecnologías web, incluido CSS. Sus tutoriales dividen los conceptos en partes digeribles con ejemplos prácticos.
W3Schools ofrece lecciones de CSS para principiantes con ejemplos interactivos en los que se puede probar el código directamente en el navegador. Este enfoque práctico hace que el aprendizaje sea menos abstracto.
YouTube está lleno de tutoriales específicos para WordPress CSS. Ver a alguien haciendo cambios en tiempo real puede ayudar a que los conceptos encajen cuando las explicaciones de texto no son suficientes.
Muchas plataformas de cursos como Coursera y Udemy ofrecen cursos de CSS gratuitos (o muy asequibles). Algunos se centran específicamente en WordPress, mostrándote exactamente cómo orientar los elementos del tema.
El aprendizaje más eficaz se produce cuando se practica. Cree un sitio de prueba (¡no experimente en su sitio real!) e intente hacer pequeños cambios. Observa qué ocurre cuando ajustas propiedades como los colores, los márgenes o el tamaño de las fuentes.
Recuerda que no necesitas memorizar todas las propiedades CSS. Incluso los desarrolladores profesionales consultan cosas a menudo. Lo importante es entender los conceptos básicos.
WordPress ofrece varias formas de añadir CSS personalizado. Cada una tiene sus ventajas dependiendo de tus necesidades y nivel de comodidad.
El Personalizador de WordPress es el lugar más seguro para añadir fácilmente CSS a WordPress.
Vaya a Apariencia " Personalizar " CSS adicional en el panel de control de WordPress.
Verás un editor de código donde puedes escribir o pegar tu CSS.
Puedes previsualizar tus cambios en tiempo real antes de publicarlos. Si algo no le parece bien, ajuste su código y vea inmediatamente los resultados.
El Personalizador es perfecto para pequeñas o medianas cantidades de CSS. Si te encuentras añadiendo cientos de líneas de código, es posible que desees considerar uno de los otros métodos.
WPCode (antes Insert Headers and Footers) es un popular plugin de fragmentos de código. Proporciona una forma más organizada de gestionar tu CSS personalizado.
Después de instalar el plugin, vaya a Fragmentos de código " Añadir fragmento. Pase el ratón sobre Añadir su código personalizado y haga clic en Añadir fragmento personalizado.
Elige CSS Snippet como tipo de código, dale un nombre descriptivo y añade tu código CSS.
WPCode ofrece varias ventajas sobre el Personalizador. Puedes crear múltiples fragmentos de CSS, lo que facilita su gestión en comparación con un gran bloque de código.
También puedes controlar con precisión dónde y cuándo se ejecutan los fragmentos. ¿Necesitas CSS que sólo se aplique a las entradas de tu blog? WPCode puede manejar esa carga condicional.
El plugin incluye funciones de prevención de errores que ayudan a detectar los errores de sintaxis antes de que afecten a su sitio web, una red de seguridad muy útil cuando está aprendiendo.
Si utilizas un tema en bloque, tendrás acceso al Editor del sitio completo en lugar del Personalizador. Sin embargo, aún puedes añadir CSS personalizado a tu sitio.
Navegue hasta esta URL, ajustándola con el dominio de su sitio: https://example.com/wp-admin/customize.php
Esto abrirá una versión limitada de FSE. Verás que tiene una sección CSS adicional, igual que el Personalizador.
Para personalizaciones extensas, es posible que tenga que editar CSS en los archivos de tema de WordPress directamente.
En su panel de control, puede ir a Apariencia " Editor de archivos de temay editar el archivo style.css.
Sin embargo, esto viene con una advertencia importante: Yo no recomendaría modificar los archivos de un tema padre directamente.
En su lugar, crea un tema hijo. Un tema hijo hereda toda la funcionalidad y el estilo del tema padre, a la vez que te permite realizar cambios de forma segura que no se sobrescribirán durante las actualizaciones.
Una vez que tengas un tema hijo activado, puedes editar los archivos CSS en el editor de archivos de tu tema de WordPress. También puedes acceder a los archivos del tema mediante FTP o el gestor de archivos de tu proveedor de alojamiento.
Veamos algunos ejemplos prácticos de CSS personalizado sencillo que resuelven necesidades comunes de personalización de WordPress.
¿Quieres que tus bloques de citas destaquen más? Puedes orientarlos con CSS:
.wp-block-quote {
background-color: #f9f9f9;
border-left: 4px solid #0073aa;
padding: 20px;
}De este modo, los bloques de citas tienen un fondo gris claro, un borde izquierdo azul y algo de relleno para darles un respiro.
Puede que tus widgets de la barra lateral necesiten algo de separación visual. Puedes añadir espacio y bordes entre ellos:
.widget {
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 1px solid #eaeaea;
}Cada widget tendrá ahora más espacio debajo y una sutil línea divisoria.
Los menús de navegación suelen necesitar ajustes de estilo para adaptarse al diseño de su sitio web:
.main-navigation li a {
color: #333333;
font-weight: 500;
text-transform: uppercase;
}
.main-navigation li a:hover {
color: #0073aa;
}Esto hace que los enlaces del menú sean de color gris oscuro, ligeramente en negrita, todo en mayúsculas y azules cuando se pasa el ratón por encima.
La tipografía tiene un gran impacto en la personalidad de tu sitio. Aquí tienes un ejemplo de cómo personalizar las fuentes con CSS:
body {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
line-height: 1.6;
}
h1, h2, h3 {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
}Recuerda que si utilizas fuentes no estándar, tendrás que importarlas primero utilizando @font-face o enlazando a Google Fonts.
Cambiar los colores es una de las tareas CSS más comunes. Estas pocas líneas cambian el fondo de tu sitio a gris claro y hacen que los enlaces se vuelvan rosas con un tono más oscuro al pasar el ratón por encima:
body {
background-color: #f5f5f5;
}
a {
color: #e94c89;
}
a:hover {
color: #c13872;
}El espacio alrededor y dentro de los elementos (margen y relleno) afecta significativamente a la legibilidad. Añade espacio debajo de los párrafos y crea un relleno alrededor del área de contenido principal:
.entry-content p {
margin-bottom: 20px;
}
.site-content {
padding: 40px 20px;
}Los formularios suelen necesitar ayuda para adaptarse al diseño de su sitio web. Estos estilos crean campos de formulario limpios con un botón de envío destacado:
input[type="text"],
input[type="email"],
textarea {
border: 1px solid #ddd;
padding: 10px;
border-radius: 4px;
}
input[type="submit"] {
background-color: #0073aa;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
}Incluso los desarrolladores experimentados se encuentran con problemas de CSS. He aquí algunos problemas comunes y cómo resolverlos.
Has añadido nuevo CSS, pero tu sitio tiene exactamente el mismo aspecto. Antes de que cunda el pánico, esto suele deberse al almacenamiento en caché del navegador.
Los navegadores guardan (almacenan en caché) los archivos CSS para cargar los sitios más rápidamente. Esto significa que podrían mostrarte CSS antiguo en lugar de tus nuevos cambios.
Prueba a actualizar el navegador pulsando Ctrl+F5 (Windows) o Cmd+Shift+R (Mac). Esto obliga a tu navegador a obtener copias frescas de todos los archivos en lugar de utilizar las versiones almacenadas en caché.
Si usas un plugin de caché como WP Super Cache o W3 Total Cache, tendrás que borrar esa caché también cuando hagas cambios en CSS.
Busque el botón Borrar caché en la configuración de su plugin de caché.
Hasta que no borre esta caché, es posible que sus cambios sólo sean visibles para usted (cuando haya iniciado sesión), pero no para los visitantes habituales.
Cuando tu CSS no funciona, el problema suele estar en el selector: estás apuntando al elemento equivocado.
CSS sigue una jerarquía de especificidad. Los selectores más específicos anulan a los generales. Por ejemplo, #sidebar p (un ID más un elemento) anulará los estilos establecidos sólo para p (un elemento).
Las faltas de ortografía son fáciles de pasar por alto. ¿Era .sidebar o .side-bar? Un guión marca la diferencia.
Las herramientas de desarrollo de tu navegador son muy útiles para solucionar problemas. Haz clic con el botón derecho del ratón en el elemento al que quieres aplicar estilo y selecciona Inspeccionar. Verás todos los estilos aplicados actualmente y cuáles están siendo anulados.
En !important obliga a aplicar un estilo independientemente de la especificidad:
p { color: blue !important; }
Aunque es tentador cuando te sientes frustrado, !important crea dolores de cabeza a largo plazo. Rompe la cascada natural de CSS y conduce a "guerras de especificidad" en las que acabas necesitando múltiples declaraciones !important.
En su lugar, haga que sus selectores sean más específicos. Si .content p no funciona, pruebe con .content .entry-content p para ser más precisos.
Su sitio debe verse bien en todas partes. Lo que funciona en el portátil puede fallar en la pantalla del móvil.
Utiliza las herramientas de desarrollo de tu navegador para simular distintos tamaños de pantalla. En Chrome, haz clic con el botón derecho, selecciona Inspeccionar y busca el icono de alternancia de dispositivos.
Antes de realizar cambios en el CSS, especialmente si son extensos, haz una copia de seguridad de tu sitio. No es sólo un buen consejo: es una protección crucial.
Herramientas como Duplicator hacen que las copias de seguridad sean sencillas. Basta con crear una nueva copia de seguridad y elegir la opción Sitio completo.
Para una mayor protección contra errores específicos del sitio, siempre envío las copias de seguridad a la nube. Al crear la copia de seguridad, elige una de las muchas integraciones de almacenamiento en la nube.
Disponer de esta red de seguridad significa que puedes experimentar con más libertad, sabiendo que puedes restaurarlo todo si algo sale mal.
Una copia de seguridad de cinco minutos puede ahorrarte horas de resolución de problemas. Si detectas un error de CSS, ve a esta copia de seguridad y pulsa Restaurar.
Incluso si su copia de seguridad está en la nube, Duplicator la descargará y la restaurará. ¡Será como si ese error nunca hubiera ocurrido!
El CSS viene incorporado en tu tema de WordPress. Puedes añadir tu propio CSS personalizado a través del Personalizador(Apariencia " Personalizar " CSS adicional), con un plugin de código de WordPress como WPCode, o creando un tema hijo y editando su archivo style.css.
WordPress utiliza ambos. El HTML crea la estructura de tus páginas y entradas, mientras que el CSS controla el aspecto de esa estructura. WordPress genera el HTML automáticamente basándose en tu contenido, y tu tema proporciona el CSS que le da estilo.
He aquí algunos ejemplos sencillos de CSS personalizado para WordPress:
p { font-size: 18px; }.button { background-color: #ff6b6b; }.wp-block-image { margin-bottom: 30px; }.element-to-hide { display: none; }.special-text { font-weight: 700; }No necesitas aprender CSS si estás satisfecho con las opciones integradas de tu tema. Sin embargo, aprender incluso CSS básico te da mucho más control sobre la apariencia de tu sitio y la capacidad de solucionar problemas visuales sin tener que esperar a actualizaciones del tema o pagar a un desarrollador.
Sí, CSS es una de las tecnologías básicas que utilizan todos los desarrolladores web front-end, junto con HTML y JavaScript. Es una habilidad esencial para cualquiera que construya sitios web profesionalmente.
CSS no es un código misterioso que sólo puedan entender los desarrolladores profesionales. Es una herramienta práctica que te permite controlar con precisión el aspecto de tu sitio de WordPress.
Empezar poco a poco es la clave: cambia un color aquí, ajusta el espaciado allá. A medida que te sientas más cómodo, podrás hacer ajustes más complejos.
Recuerda que todos los desarrolladores profesionales de WordPress empezaron exactamente donde tú estás ahora. Aprendieron experimentando, cometiendo errores y desarrollando gradualmente sus habilidades.
Cuando empieces, ten a mano una copia de seguridad con Duplicator. Si algo no funciona, siempre puedes revertir los cambios e intentarlo de nuevo.
Ya que estás aquí, creo que te gustarán estas otras guías de WordPress:
Divulgación: Nuestro contenido está apoyado por los lectores. Esto significa que si hace clic en algunos de nuestros enlaces, es posible que ganemos una comisión. Sólo recomendamos productos que creemos que aportarán valor a nuestros lectores.
