Hoy vamos a hablar acerca de los errores comunes de CSS en WordPress. Cada vez hay más y mejores temas disponibles en el repositorio de WordPress y éstos nos animan a experimentar con su apariencia e infinitas posibilidades de diseño. Por si fuera poco las empresas que comercializan plantillas Premium están llevando sus diseños predefinidos y sus editores visuales cada vez más lejos. Ahora customizar los diseños es cada vez más sencillo y esto es precisamente uno de los aspectos más potentes de WordPress. Además, estos temas tienen lugares donde puedes integrar tu CSS personalizado para llevar tus diseños aún más lejos. Esto ha llevado a mucha gente a experimentar y dejar volar su creatividad sin ser verdaderamente conocedores del lenguaje de estilos en cascada y esto es bueno, muy bueno. Para todos vosotros, inquietos, que queréis seguir probando a perfeccionar vuestro CSS os dejamos unos tips en forma de errores comunes para que os anime a seguir intentándolo.
Errores comunes de personalización en CSS
No cerrar correctamente las llaves y ;
Ya lo hemos comentado en otras entradas de seguridad informática y demás que los errores más comunes suelen ser en los básicos. Con CSS pasa lo mismo… si tu orden no funciona, lo primero que tienes que hacer es revisar que hayas cerrado correctamente las llaves, si! Aunque no lo parezca este es uno de los errores de CSS más comunes de CSS en WordPress.
Si tiene 4 líneas de código, ok. Es más o menos fácil comprobar que no te has saltado nada.
p{
text-align:center;
color:white;
}
Pero si tiene 6, 8 o más líneas la cosa se complica… A ver si cuanto tiempo tardas en descubrir el error :)
.font-app {
font-family: Helvetica, Arial, sans-serif;
font-style: normal;
font-weight: 600;
color: var(--gl-color-primary)
font-size: 16px;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
text-transform: none;
}
Escribir incorrectamente términos importantes de lectura
Otro error clásico de CSS. Estás empezando a controlar y crees que ya eres el rey del mambo. Cada vez escribes más rápido tus modificaciones y tu cabeza piensa a mil por hora…pero…espera! por qué no me coge esta órden! maldito ordenador! jijijiii
Si has terminado de comprobar que todas las { } y ; están bien colocados, ahora revisa los términos, porque escribirlos mal es otro error clásico de CSS en WordPress.
Por ejemplo escribir 10 y olvidarte de poner px, o directamente escribirlo mal y dejar «font-size: 10pc;». Este tipo de errores es muy común y la verdad es que programadores de todos los niveles lo cometen.
Ignorar o no saber cómo funcionan los selectores
Muchas veces se tiende a olvidar alguna regla básica que es vital para que el CSS funcione en tu tema de WordPress. Si eres un noob y estás empezando a plantearte cambiar algunos estilos en tu WordPress deberás familiarizarte con esto. Recuerda que: cada selector tiene una clase o ID y que los selectores se modifican primero la propiedad y luego el valor.
.nombre-de-la-clase {
propiedad: valor;
propiedad: valor;
}
No tener en cuenta CSS y las clases que ya tiene la plantilla
Muchas veces te pasará que al poner tus clases de CSS y chequear que todo está bien escrito y demás verás que tus cambios siguen sin mostrarse. Esto muchas veces suele ser por incompatibilidad entre órdenes y/o porque unas se pisan entre otras y el sistema ignora las tuyas.
Por esto es importante conocer las clases que hacen que la plantilla funcione y que tus órdenes y selectores no vayan a su bola, sino que funcionen en consonancia y con la misma lógica que los del resto de la plantilla que estés utilizando. De esta manera te asegurarás de que tus estilos funcionen sin problemas.
Escribir CSS en el lugar incorrecto
Este puede ser otro error básico de WordPress. No escribir CSS en el lugar correcto o directamente no saber donde se escribe. Hoy en día prácticamente todas las plantillas tienen un lugar donde poner tus archivos CSS para personalizar tu tema si no tienes nociones para ponerlos en donde realmente van.
Pero ya que estamos, debemos animarnos a conocer los lugares y la disposición de los archivos en WordPress, no? Pues por esto debes saber que todos los estilos de CSS están incluídos dentro de un archivo llamado style.css incluido en la carpeta del tema, junto con algunos archivos PHP.
Tener una visión detallada de los archivos y su disposición nos permitirá ser más precisos en nuestros estilos, y aplicar lo que ya hemos aprendido en el lugar correcto. Además es la mejor manera de modificar cualquier archivo y evitar así posibles conflictos.
