 Ciao ragazzi. Oggi parliamo di temi ibridi e di come questo tipologia di approccio allo sviluppo di temi può essere molto interessante per noi che facciamo temi WordPress. Quanti magari fanno temi, hanno sviluppato qualche tema? Yes. Quanti sanno cos'è un tema ibrido? Ok, allora partiamo. Partiamo un attimo dal contesto. WordPress si è evoluto molto negli ultimi anni, ma in realtà se facciamo un attimo un passo indietro si è sempre evoluto tanto. C'è stato un periodo dove l'editor non è cambiato tanto per un po' di anni, ma in realtà qua abbiamo la versione 1, la versione 2, la 2.0, la 3, la 5 e la 6, l'ultima con il full site e possiamo vedere come WordPress è proprio cambiato. Io ho incominciato con la 2, quella blu, sono molto affezionato a quella versione. Quindi perché WordPress è cambiato? È cambiato perché è cambiata l'esigenza un po' che chi fa cityweb e chi pubblica contenuti online. Le esigenze sono di avere più flessibilità nei contenuti e di avere più velocità di esecuzione. Per esempio se noi facciamo una landing page per una campagna su Facebook, su Google, abbiamo una necessità, nel caso la campagna vada bene o vada male, di cambiare il contenuto. Magari ti chiamo l'advertiser e ti dice guarda non funziona questo schema, questo copy, questa immagine, cambiamolo. Prima dovevamo fare tutto via codice, poi pian piano sono nati strumenti come i page builder e poi siamo arrivati a Gutenberg e il full site editing appunto per questa esigenza, cioè di cambiare il contenuto in maniera veloce e avere flessibilità nelle layout delle nostre pagine. Qual è il problema che abbiamo adesso con questa evoluzione che c'è stata? Il problema secondo me è che dai temi classici il passaggio al full site editing non è soft, non è tranquillo, dobbiamo fare un passaggio brusco, cioè prendere tutto il modo nel quale facevamo prima temi con PHP, un certo tipo di file, un certo tipo di struttura del tema, utterlo via, passare a JavaScript, cambia tutto, cambiano le logiche, quindi questo cambio fa un po' paura ed è un po' un salto nel buio. Quale può essere la soluzione? La soluzione, logicamente, potrebbero essere i temi ibriti. Che cosa sono però i temi ibriti? Qui abbiamo un tweet di Ellen Bauer, che quando è uscito mi ha fatto, ma molto colpito, perché su Twitter lei, su X ha scritto che la nomenclatura dei temi era parecchio confusa, c'erano i fsc teams, i block teams, come si chiamano questi nuovi temi. Oggi cercherò di fare un po' di chiarezza. I temi che possiamo avere oggi in WordPress sono principalmente tre. Abbiamo i block team, quindi si chiamano block team, non fse team, e sono quelli nuovi con il full site editing, con il site editor, gli stili globali, quelli nuovi fatti in JavaScript. Poi abbiamo i temi classici, che sono i soliti quelli fatti in PHP, col customizer, che abbiamo sempre utilizzate. E poi abbiamo i temi ibriti, che sono fatti in PHP, però hanno la possibilità di attivare, quando e sulle pagine che vogliamo, il full site editing. Vedremo dopo come farlo, e vedremo dopo perché questa soluzione secondo me è molto interessante. Poi ci sono, gli cito, giusto per anche qui cercare di fare chiarezza, gli universal team, che sono un tentativo di unire classiche block team, non con lo stile dei temi ibriti che vedremo adesso, ma con un altro stile che però diciamo non ci sono temi così sulla repufficiale, e quindi diciamo che non, ve lo dico solo che esistono, però non sono sulla repufficiale, sono temi probabilmente che scompariranno. Ok, quali sono i vantaggi di utilizzare temi ibriti? I vantaggi sono che abbiamo lo sblocco di alcune funzionalità in Gutenberg, che sono molto interessanti, come gli spazi, i margini, la possibilità di avere più opzioni nella tipografia, e la possibilità attraverso il full site editing di gestire edder e footer in maniera separata, rispetto al resto del sito, e sostanzialmente abbiamo la funzionalità del full site editing dentro il nostro tema, solo dove vogliamo. È più facile poi creare template e pattern, ok? Questa è una conseguenza. Gli effetti collaterali cosa sono? Che, avendo questo approccio, il passaggio dal tema classico, il tema full site è molto più soft, possiamo appunto attivare il full site solo dove vogliamo, possiamo prendere dimestichezza col full site editing, se abbiamo problemi possiamo comunque utilizzare sempre PHP. Adesso vedremo come si fa, però è veramente bello poter dire su questa pagina voglio il full site editing, ho leder e footer a blocchi, su quest'altra pagina voglio il solito sito, stesso edder, stesso menu. Come si crea un tema ibrido? Praticamente se vedete qua abbiamo la classica struttura in PHP di un tema classico, però evidenziati il rosso ci sono un po' di colline nuove. Abbiamo il team.json che sostanzialmente è il cuore del full site editing e questo magari lo conoscete, e abbiamo poi la struttura di file che se avete provato a fare un tema a blocchi, un bloc team, è quella dei bloc team, quindi abbiamo dei file.html sostanzialmente al posto del PHP. Questo mi ricordo che la prima volta che l'ho visto aperto un bloc team solo HTML, ti si gela un po' il sangue, però messo già così, già ti fa meno un po' paura, c'è PHP, quindi riusciamo a fare qualcosa ancora. Andiamo a vedere cosa fanno i file, adesso pian piano vediamo tutti. Il team.json va inserito nella root del nostro tema ed è un file di configurazione, adesso vediamo cosa al suo interno e serve a fare un sacco di cose all'interno di Gutenberg. Poi abbiamo due cartelline, la parts e la templates. Nella template abbiamo i template, quindi è un classico template di pagina che si chiama page not title. Nella part abbiamo footer e adder, quindi saranno i due elementi che vediamo sopra e sotto nel nostro template. Cosa cambia in WordPress quando andiamo a fare queste cose qui? Quando andiamo a inserire questi file qui, il team.json soprattutto perché è lui che dà la configurazione a Gutenberg, si attivano tante cosine belle che prima non c'erano. Per esempio abbiamo la possibilità di settare padding e margin per tantissimi blocchi, non per tutti ma per tanti. Abbiamo la possibilità di andare a avere opzioni di tipografia, bordi arrotondati, per esempio la cover possiamo mettere gli bordi arrotondati, questa è una cosa che se non andiamo ad attivare il team.json nei temi classici non c'è. Poi abbiamo il colore del bordo, la spessore del bordo, un po' di colori avanzati per alcuni blocchi e poi abbiamo questa fantastica voce edit template che è un po' magica che andiamo a vedere dopo che logicamente senza quei file là opportunatamente settati non è visibile. Entriamo un po' nel vivo, andiamo a vedere come è la struttura del team.json. Il team.json qui ha le macrosezioni collassate quindi era gruppato a questa struttura. La prima chiave che è la versione, utilizziamo la 2 dovrebbe essere la ultima, non sono sicurissimo ma credo sia l'ultima. Poi abbiamo la voce settings con dei settaggi generali, la voce styles con degli stili, la voce custom templates e template parts dove andiamo a definire delle, a richiamare i file che abbiamo creato prima nel nostro tema. Questo qua è la prima parte, la sezione settings. Abbiamo nella sezione layout le possibilità di definire la largazza del content, la largazza dell'opzione wide, gli appearance tool true che sono un attributo fantastico che attiva un sacco di funzionalità che abbiamo visto prima nel Gutenberg e poi abbiamo la sezione spacing con padding margin attivati e è molto figo il fatto che possiamo passargli le tipologie di units che vogliamo. Per esempio BH io uso tantissimo per fare cose sul mobile che si ridimensione in maniera automatica. Andiamo avanti, no sono dati indietro, andiamo avanti. Attivando i pad di gray margin come abbiamo visto nello style, cosa succede? Succede che appaiono per esempio qui vedete ho un H2, vado a cambiare un po' il padding il margin e avendo attivato quell'apparence true, quell'voce lì che apparence true praticamente ti va ad attivare anche i bordi e il radius sul blocco cover. Ecco qua, qua abbiamo invece la voce style che è un pochino più tosta ok. In realtà prima della voce style vi faccio vedere la typografi dove semplicemente andiamo ad attivare le opzioni di typografi quindi gli dico che voglio l'opzione lineate, il font style. Il font weight lo metto false perché se no ti mette tutti i pesi dal 100 al 900 ti viene uno spatafione così e quindi diciamo che quel font weight lì in realtà su false non è che ti disattiva la possibilità di metterlo boldato ma ti va a disattivare tutte le varie opzioni dal 100 al 900 ti rimangono quelle standard 400 700 e forse uno un po' più piccolina. Nella sezione font size possiamo definire delle grandezze di default dei nostri test abbiamo extra small, lo small e avanti così quindi ho già dentro Gutenberg delle grandezze delle grandezze predefinite. Nella voce style vado a definire le grandezze standard di Gutenberg quindi gli dico ok voglio un font size e mi vado a pescare la variabile del font size che ho definito prima che è un ram quindi a livello di body ne in Gutenberg avrò un ram su tutti i paragrafi poi ho il font family in lineage di default negli elements vado a definire invece la grandezza in ram in questo caso dei miei elementi h1, h2, h3 fino alla k6 di Gutenberg ok un po' di difficoltà con questa pennetta andare avanti indietro quindi cosa succede attiviamo tutte le varie variabili nella typografia e risultate questo nel browser cioè abbiamo la size dove vado praticamente a impostare la grandezza lineate, font style, text decoration, lettercase quindi tutto un sacco di opzioni nella destra qua si vede, un po' davanti si vede che vado a mettere un extra large vedete mi fa il testo gigante ok ma come faccio a attivare il full site editing solo nelle pagine che voglio? adesso lo andiamo a vedere nel fantastico page no title che abbiamo definito prima andiamo a inserire dei blocchi classici di Gutenberg se non avete ben presente questa sintasi qua se inserite dei blocchi in Gutenberg andate a visualizzare il colice vedrete che avete questa sintasi in html diciamo che la documentazione su questo aspetto dei block team non è proprio super avanzata, c'è un fantastico sito che si chiama full site editing.com dove invece c'è molto più materiale vi consiglio di dargli un occhio andiamo a vedere brevemente cosa abbiamo abbiamo vp temple part che semplicemente ti va a richiamare letter poi abbiamo un blocco vp group con dentro il post content e poi abbiamo il footer quindi questo template part mi va a richiamare quel footer.html andiamo a vedere ora che cos'ho in header.html in header.html ho un blocco gruppo che mi fa praticamente letter e gli do anche un colore con il background color grigetto poi ho dentro un altro gruppo che invece mi ha una larghezza più piccola e dentro questo gruppo qua ho il logo e la navigazione quindi questo è nostro header super semplice impostato con tre quattro blocchi andiamo a vedere il footer il footer anche questo ha un blocco gruppo e dentro ha un paragrafo con i crediti e i sociali link e i social questi sono tutti blocchi standard di Gutenberg quindi io sostanzialmente di default dentro i miei file del full site editing header footer ho questi elementi navigazione logo crediti e social il risultato cos'è? è che praticamente mi appare questa voce edit template di cui vi parlavo prima che è molto figa perché praticamente io vado su una pagina nuova e posso ho tutti i miei template magari anche in PHP adesso poi magari vi faccio vedere nella demo e praticamente quando vado a selezionare un tema full site appare questa voce qua sui temi in PHP sui template PHP perdón quelli diciamo vecchio stile non abbiamo questa voce qua questa voce qua appare solo se abbiamo il template su supporta il full site editing se vedete qui io adesso qua non si vede benissimo dopo c'è il video si vede meglio praticamente vedete che ho adesso qua ho già aperto il full site editing però quando riparte la gif sostanzialmente io vado a selezionare nella voce classica dove vado a prendere i page templates qua adesso l'ultimo pam edit template e mi apre il full site editing se clicco su leder modifico leder in questo caso vado a modificare qualcosa nel menu e poi posso andare a modificare il footer se no una volta che ho selezionato questo template posso semplicemente andarmi a modificare il content ed eder footer rimangono quelli di default qual è il risultato adesso qui voglio ok bello ma qual è l'applicazione pratica di tutta questa roba qua perché secondo me è figo questa roba ho avuto proprio settimana scorsa un caso dove sarebbe stato ideale utilizzarlo solo che l'aggiornamento del mio tema next awards che è frivi consiglio di scaricarlo sulla repo ieri abbiamo passato le 500 installazioni attive quindi siamo tutti molto contenti praticamente no adesso parte gli scherzi la differenza qual è la differenza è che io quando attivo il full site editing con il template o praticamente la possibilità di cambiare eder footer ha un sito completamente diverso se voi immaginate per esempio questo cliente che ho avuto una catena di pizzerie non ho raccontato un po i ragazzi qua anche ieri oggi abbiamo il sito normale poi abbiamo delle attività di pubblicità su facebook che mandano il traffico su una landing page nella landing page io non ho bisogno di avere chissiamo servizi shop non ho link che mi portano fuori dalla landing ho bisogno dei link che se clicco mi fanno scrollare mi fanno leggere la landing no quindi ho sostanzialmente bisogno di un eder completamente diverso dal resto del sito prima del full site edit che sta cosa qua come la facevi andavi col codice facevi un bel leaf nel eder se sei sulla pagina con i di la landing mostrami questo menu e dovevi andare a fare un casto menu eccetera adesso col full site editing ti basta selezionare il template vai a cambiare il menu e hai subito praticamente pronto senza fare codice il tuo la tua bella landing con il menu diverso quindi questo è un caso di utilizzo secondo me molto esplicativo perché ti fa capire le potenzialità poi le potenzialità sono anche logicamente che puoi cambiare leder puoi anche tirare via il menu volendo puoi mettere un logo diverso puoi fare quello che vuoi e la cosa figa è che puoi attivarlo solo sulle pagine che vuoi attraverso la selezione del template tutto il resto del sito rimane uguale qui c'è il video a prima un attimo una cosa qui ci sono due risorse per i più smanettoni c'è un bello starter team che si chiama bistarter che è uno starter team abbastanza complesso tosto però è un tema ibrido fatto bene secondo me ha un sacco di recensioni positive su github poi c'è next world che invece è il mio tema dice installazioni 400 invece sono 500 da ieri e vi consiglio di scaricarlo è molto semplice se volete imparare anche ve lo scaricate vedete un po come strutturato è l'alberata quella che abbiamo visto prima quindi è molto semplice e è un tema che mi diciamo mi sta dando parecchie soddisfazioni perché diciamo lo sto utilizzando su ti miei lavori su ti miei nuovi e tanti ragazzi hanno lo stanno utilizzando anche all'interno delle varie comuniti siamo tutti diciamo anche tanti feedback vi consiglio di dargli un'occhiata vi faccio vedere come funziona all'atto pratico ok perché in bassa risoluzione va bene in bassa risoluzione però si vede qui creo il titolo metto un testo di prova eccolo qua in hd perfetto page default template adesso metto il template blank vedete non c'è edith template vado giù metto page full edith template clicco boom mi apro il full site editing e qui ho adder menu e adesso vado a modificare qua in questo caso vado a cambiare il logo giusto per fare un'operazione qui vado a prendere un altro logo è praticamente uguale però giusto per fare un esempio cambio il logo un po più grande e poi pubblico una volta che pubblico sto pubblicando leder non sto pubblicando il contenuto questa cosa è importante da capire nel full site edith in quella versione lì io sto lavorando su leder e tutte le pagine del sito che hanno questo template selezionato cambieranno logo questo è un appunto importante chiaro perché facendo diciamo la modifica in modalità full site logicamente tutti template che hanno impostato tutte le pagine che hanno impostato quel template cambieranno leder ok ok ritorno qua e vi faccio e concludiamo quindi warp se si sempre è voluto adesso abbiamo un salto evolutivo molto notevole coi temi ibridi possiamo diciamo provare il full site editing prendere dimesticazza con questa nuova tecnologia senza fare questo salto nel buio che diciamo cambiamo totalmente tecnologia cambiamo tutto all'interno del nostro flusso di lavoro e quindi sono spero che li proverete magari mi fate sapere se vi sono piaciuto piaciuti grazie ottimo abbiamo dieci minuti quindi potete fare una serie di domande facciamo come una demo magari spacchiamo tutto ciao ti volevo chiedere a livello di prestazioni si come il classic team più come fse ma sai che è bella domanda diciamo che a me sembra che sia molto diciamo che questa questa approccio non va da cambiare molto a livello di prestazione cioè se il tuo sito già rottimi si si ho fatto adesso diciamo non ho tantissima come ti diceva una cosa molto nuova quindi non ho tantissimo e casi studio però nei vari test che ho fatto mi sembra molto performante non penso magari un pochino perdi non lo sa tu hai fatto dei test ma con che tema col tuo rallenta becco front front sì interessante poi sì diciamo che parliamoci chiaro una volta che casci tutto e poi c'è più dei problemi di questo tipo qua no che lui ogni volta a livello bec va a far delle operazioni almeno non so voi ma io in tutti i miei progetti ormai adesso un sistema di cash che davanti questo tipologia di problemi ti va un po sì sì no sicuramente è un po però alla fine il cash c'è la sistema di cash sia uno stinger cioè lei sempre quindi si per i puristi sai che io ti dico non sono super schillato dal punto di vista di cashing per il cashing è un argomento infinito però ti dico i classici hosting che sono anche sponsor qui o così devo dire che ormai i sistemi di cash mi sembra che funzionano tutti abbastanza bene poi se vai magari su server custom dove ti sei tu settato un po più le cose lì magari sarebbe interessante capire magari su che serve l'hai testato che tecno eh poi me lo fai vedere dai volentieri ok ciao volevo chiederti secondo te si può ibridare un tema classico cioè rendo ibrido un tema classico attraverso un child senza andare a toccare il tema originale ma creare un child che mi rende poi col full site editing utilizzabile ibrido bella domanda credo proprio di sì bisognerebbe fare un test però per come funziona la logica di warpress in teoria si in teoria si perché comunque quello che tu c'è nel child viene comunque poi eseguito dal warpress lo esegue come se fosse un tema quindi in teoria si secondo me sì poi magari anche su questa facciamo poi magari melodici facciamo un test proviamo oppure va bene nel senso se no mi scriviti di cos'è ok ok abbiamo altro domande ecco ciao senti volevo sapere ma nel mio vecchio file edder punto php posso richiamare l'edder che mi salvo col full site editing sì però non ti consiglio di farlo sì sì tu puoi tu puoi con una funzione che adesso non mi ricordo inserire praticamente qualsiasi blocco di guttenberg che vedi con la sintasi quella con i commenti in html lo puoi inserire in php è un approccio ti ricordi temi universal del quale parlavo prima è un po questo mondo qua è un po un mondo diciamo che con questo approccio che ti ho fatto vedere abbiamo una divisione netta cioè tu metti un template e quello è full site e l'altro invece è classico con un approccio così doveva mischiare sicuramente è interessante però io non so cioè antesterai bene prima di farlo però è possibile è possibile quante domande tecniche ragazzi che livello bravi bene bene altra domanda no ci ringraziamo bellissimo grazie grazie grazie grazie