1 of 25

Transformando un tema clásico en uno de bloques

esther solà | www.esthersola.com

2 of 25

Téma clásico

​

​

3 of 25

Téma clásico

​

​

4 of 25

Twenty Twenty-Five

​

​

5 of 25

Editor del sitio

​

​

6 of 25

theme.json

​

​

7 of 25

¿Por dónde empezar?

​

  • Estilos básicos
      • Paleta de colores
      • Tipografías
      • Layouts, espacios
      • Botones, encabezados, navegación
  • Elementos
      • Cabecera / Pie
      • Plantilla página
      • Plantilla blog: archive y single

​

8 of 25

Guía de estilos

​

​

​

​

​

​

9 of 25

Tipografía

​

​

​

​

​

​

10 of 25

Tipografía

​

​

​

​

​

​

​

11 of 25

Colores

​

​

​

​

​

​

12 of 25

Colores

​

​

​

​

​

​

​

13 of 25

Layout / espacios

​

​

​

​

​

​

​

14 of 25

Cabecera / Pie

​

​

​

​

​

​

​

15 of 25

Cabecera / Pie: template parts

​

​

​

​

​

​

​

16 of 25

Plantillas

​

​

​

​

​

​

​

17 of 25

Plantillas

​

​

​

​

​

​

​

18 of 25

¿theme.json o CSS?

​

1º - Propiedades theme.json

2º - CSS adicional específico del bloque

3º - CSS adicional del sitio

4º - Styles.css

​

​

​

​

19 of 25

Guardar / Exportar

​

  • Desde el editor del sitio
  • Plugin “Create Block Theme”

​

​

​

​

​

​

20 of 25

​

​

​

​

​

​

​

21 of 25

functions.php

​

  • Evitar cargar los patrones del directorio o eliminar los nativos
  • Registrar nuevas categorías de patrones
  • Registrar estilos de bloques
  • Registrar estilos de bloques condicionalmente
  • Cargar datos con block binding

​

22 of 25

​

​

​

​

​

​

​

Block Styles

23 of 25

​

​

​

​

​

​

​

Section Styles

24 of 25

​

Un poco sobre mí

@esther_sola_

Soporte y mantenimiento web en /tranquilidadwp.com

Temas y plugins en @OsomPress

Podcast en @freelandev

​

​

25 of 25

¡Gracias!

www.esthersola.com

@esther_sola_

Terrassa WordPress Meetup