371 | CSS en WordPress para principiantes

En el episodio 371 de WordPress Semanal aprenderás los primeros pasos para empezar a modificar tu WordPress con CSS.

Introducción al CSS en WordPress

• El CSS es lo que define el aspecto de tus webs
• Los themes y plugins que instalas ya traen sus hojas de estilos con el CSS necesario
• Pero tú puedes modificarlo a tu gusto e incluso crear estilos nuevos

6 ventajas de aprender CSS

1. Control de personalización
2. Optimización del rendimiento
3. Ahorro de costes
4. Experiencia y puerta para otras habilidades
5. Resolución de problemas
6. Diseño responsivo

Importante: aprende las bases del CSS

• Aunque no lo escribas desde cero, es súper útil saber interpretarlo
• Aprende los conceptos de:
  • Selectores
    • Etiquetas html
    • Clases
    • Identificadores
  • Propiedades
  • Valores
• Aquí curso de css básico donde aprendes esos conceptos

Cómo editar CSS dentro de WordPress

• Para pegar o escribir código CSS
  • Si usas un tema clásico: en el menú Apariencia > Personalizar > CSS adicional
  • Si usas un tema de bloques: en Apariencia > Editor > Estilos > CSS adicional
  • Si usas un constructor visual, también tendrás una o varias zonas
  • Si quieres editarlo a nivel de theme: crea un tema hijo y modifica la copia del style.css
• Para revisar el CSS existente:
  • Puedes ver el CSS de tu theme en el archivo style.css
  • Para consultar el CSS de una parte específica de una web, usa el inspector de tu navegador

¿Es buena idea un plugin para editar CSS en WordPress?

• Lo más limpio y ordenado es usar la hoja de estilos de un tema hijo para aplicar los cambios por css
• Lo más rápido y cómodo es usar el personalizador de CSS de WordPress
• En cualquiera de los dos casos, documenta bien las modificaciones
• El uso de un plugin para añadir código no deja de ser otro extra que estás añadiendo a tu web. Mejor ahorrártelo.

Consejos y trucos para trabajar con CSS en WodPress

• Familiarízate con el inspector del navegador
• Usa una extensión de navegador que te ayude visualmente
• Depura la caché para ver los cambios que hagas

Camino para aprender CSS enfocado a WordPress

• Haz los cursos de html y css
• Empieza por hacer pequeñas modificaciones de tu web
• Filtra por CSS en la Zona Código y aplica los casos que más te interesen
• Avanzado: crea tu propio child theme

Plugin de la semana

Contenidos recomendados