Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Prepara il tema WordPress per Gutenberg

75 views

Published on

Gutenberg sarà la nuova esperienza nella creazione di contenuto all’interno del nostro WordPress e permetterà all’utente finale di creare intere pagine web senza l’ausilio di page builder. All’interno di questo workshop andremo a scoprire come sia possibile preparare il nostro tema, una versione modificata di _s, per rispondere a tutti i blocchi standard che vengono implementati e scopriremo anche quanto sia semplice creare i nostri blocchi personalizzati.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Prepara il tema WordPress per Gutenberg

  1. 1. Come preparare il tuo tema all’avvento di Gutenberg
  2. 2. Chi sono e cosa faccio? mentor - developer - writer skillsandmore.org/gutenberg-theme
  3. 3. Come posso preparare il mio tema a Gutenberg?
  4. 4. Don’t Panic
  5. 5. Faremo tutto assieme, un passo alla volta
  6. 6. First Steps First Scarica l’archivio: https://github.com
  7. 7. Ho preparato un repo
 tutto per te ;)
  8. 8. Quanti blocchi ha Gutenberg? 22Aggiornato al 2/4/18
  9. 9. Devo pensarci da solo?!?
  10. 10. Ecco il bello e il brutto di Gutenberg (dal mio punto di vista)
  11. 11. Parte del CSS è scritto al posto tuo. Parte del CSS è scritto al posto tuo.
  12. 12. Faremo tutto insieme!
  13. 13. Apri il tema nel tuo editor preferito
  14. 14. Richiamiamo il file specifico per Gutenberg
  15. 15. Attiviamo i layout wide e full
  16. 16. Ci prepariamo ai layout senza sidebar
  17. 17. Diamo il benvenuto a due nuove classi
  18. 18. Si applicano a tutti i blocchi!
  19. 19. Ma possiamo consigliare anche dei colori!
  20. 20. Dichiariamo i colori
  21. 21. Ecco la nuova palette
  22. 22. Puoi disattivare la scelta dei colori
  23. 23. KEEP CALM because METABOX WORKS!
  24. 24. Shortcode come blocco
  25. 25. Iniziamo con il paragrafo
  26. 26. Gestiamo le misure standard
  27. 27. Le classi del testo
  28. 28. Ricorda che si applica i layout .alignwide e .alignfull
  29. 29. Passiamo alle immagini
  30. 30. La struttura HTML
  31. 31. Come si comporta con .alignwide e .alignfull
  32. 32. La struttura HTML
  33. 33. Finalmente la cover image!
  34. 34. La struttura HTML
  35. 35. Per gli altri blocchi c’è GitHub
  36. 36. Scopriamo come impostare dei template Gutenberg
  37. 37. Crea il tuo CPT(puoi sovrascrivere anche post e pagine)
  38. 38. Il segreto? L’array template!
  39. 39. Puoi bloccare il tuo template
  40. 40. Puoi modificare anche i post standard
  41. 41. Come scoprire i nomi dei blocchi? github.com/WordPress/gutenberg/
  42. 42. Importiamo gli stili in Gutenberg
  43. 43. Aggiungere solo backend
  44. 44. Oppure ovunque
  45. 45. Bonus Tip!!! Crea il tuo blocco personalizzato github.com/ahmadawais/create-guten-block
  46. 46. Purtroppo il nostro tempo è scaduto… La creazione di un blocco Gutenberg richiede la conoscenza di JavaScript e React
  47. 47. Grazie! Seguici sui nostri canali social:

×