 Allora vi presento Serena Piccioni, attenzione ragazzi, Gloria, sta attento. Allora Serena ha cominciato la sua carriera da sviluppatrice nel 98 e ha iniziato poi a lavorare con WordPress dieci anni dopo. Nel 2015 si è trasferita a Londra, ora lavora per Helpful Design e mi ha raccontato digital, scusate, non mi torna in mente, e mi ha raccontato proprio ieri sera che la sua azienda gli ha dato una settimana come di ferie, all'interno che continuavano a lavorare per poter sviluppare dei nuovi progetti all'interno dell'azienda. E da una di queste sessioni appunto è nato questo progetto di cui ci parlerà, quindi iniziare a sviluppare con Timber e Twig. Lascio subito la parola a lei. Buon pomeriggio. Allora, mi chiamo Serena appunto. Quelli sono i miei contatti, se doveste aver bisogno dopo questa presentazione, su GitHub, su Twitter, mi trovate come XLTHLX, tendenzialmente mi trovate ovunque come XLTHLX e quella è la mia mail. Allora, come ha detto Carol, io lavoro per un'azienda che si chiama Helpful Digital, noi abbiamo circa un centinaio di City WordPress, non siamo un'azienda enorme, però comunque abbiamo un'organizzazione interna e quindi siamo divisi in sviluppatori, designer, abbiamo un desk, abbiamo ovviamente un PM. E quindi spesso è volentieri ci capita di chiederci quali possono essere i nostri processi interni, perché appunto avendo questa divisione è strettamente necessario. Una delle cose che ci siamo chiesti è stato qual è il modo migliore di sviluppare un tema. La mia personale opinione è che in generale non c'è un modo migliore, non esiste il linguaggio di procurazione migliore oppure il CMS migliore o qualsiasi altra cosa. Più che altro la verità è che dovremmo conoscere le varie alternative, quindi per un determinato contesto sapere qual è il guaggio migliore, piuttosto che il CMS migliore WordPress è molto bello perché è estremamente fressibile e si presta moltissimo a fare molte cose diverse, ma ovviamente non è l'unica alternativa e potrebbe essere che in qualche modo c'è un CMS migliore per quello che dobbiamo fare. E quindi veniamo al dunque, so che siete stanchi e che è un po' tardi, però spero che se vado troppo nel dettaglio fate un alzate la mano. Allora, questa è la classica pagina, in questo caso single, ma in realtà è la singular, è tonti tenti. Quali sono, diciamo, le parti più importanti di questa pagina che poi visualizziamo il dettaglio del nostro port. Leather, il footer, ovviamente il loop di WordPress. E come vedete, in questo caso c'è un recwire di un altro file e fino qui tutto bene. È abbastanza semplice, abbastanza chiaro, niente di strano. Andiamo a vedere invece la content. La content inizia a essere già un pochino più impegnativa. Tra l'altro, non sa se notate, ma qui ci sono un sacco di inclusioni di nuovo con il get and play part. E in alto abbiamo l'entry header, che in questo caso è semplicemente il titolo. Poi ci sono una serie di condizioni. Poi c'è l'afficio dello image che recupera la thumbnail. Se c'è una thumbnail, abbiamo all'interno il contenuto. Infine costrò entry, autor bio e sostanzialmente l'autore. Se non ricordo male, dovrebbe esserci anche il link all'autore, che è un link particolare di WordPress. Che cosa succede se però iniziamo a inserire un po' di funzionalità? Succede che vorremmo non aver mai visto quel codice sostanzialmente, so voi ma mi è capitato spesso e volentieri, di trovarmi di fronte cose di questo genere, non cercate di leggerlo perché è impossibile. E sono in questo caso più di 200 rigi di codice tutto insieme. WordPress si presta un attimino a questo genere di cose perché c'è una commissione di PHP, HTML. Per definire determinate cose non c'è verso, bisogna comunque fare un po' di spaghetti code. Ci vorrebbe un biracolo fondamentalmente per riuscire a interpretare questa cosa. Oltretutto è molto difficile da mantenere. Il biracolo, quasi nel senso, uno dei biracoli che possiamo utilizzare è Twig. Allora io adesso vi faccio vedere velocemente questa è la single twig, ma se vedete praticamente tutto quello che abbiamo visto prima nella singular PHP e nella content PHP di 2020 è riassunto qua, perché header and footer non li vedete perché è un altro mondo di gestire queste cose, c'è un'estensione. Però poi trovate la thumbnail, il title, quindi poi l'autore e il contenuto, esattamente come le altre due pagine. Però questo è soltanto HTML e mezzo Twig. C'è il trucco nel senso, il PHP dove è finito? Ovviamente, il PHP è qui, è tutto qui, nel senso non avete bisogno d'altro. Questo ovviamente è semplicemente la single PHP, quindi header and footer WordPress e questo è quello che viene fornito da Timber. Ok, adesso ci torniamo. Scusate. Allora, Twig. Twig originariamente è nato con symphony, che è un framework perché PHP ed è un generatore di template, semplificando moltissimo. Ed è basato su, se qualcuno di voi lo conosce, Gingia di Django in Python. Timber, che cos'è? Semplicemente, Twig, letteralmente, è il ramoscello. Timber è il name, ovvero è il collegamento tra WordPress e Twig. Questo è stato sviluppato da una web agency che si chiama Statement, che però lo rilascia open source, quindi potete tranquillamente utilizzare i vostri progetti. Allora, quali sono i vantaggi, a parte quello che abbiamo visto? Sicuramente è semplice da gestire se si è in team. Nel nostro caso, spesso i volentieri dovevamo lavorare in tempi diversi o contemporaneamente sulla stessa cosa, quindi cosa succede? Spesso i volentieri, usando Git, conflitti. Invece con questo sistema, utilizzando il PHP, staccato dalla HTML, ovviamente si può lavorare in contemporanea su due cose completamente differenti del front-end senza pestarsi i piedi, fondamentalmente. Poi abbiamo visto, è anche semplice da mantenere proprio per questo motivo, perché se uno dei tuoi clienti decide che deve cambiare un pixel in un'immagine, è molto più semplice andare a trovare quel pixel in un file dove c'è solo HTML che non in un mix come abbiamo visto prima. È anche efficiente e veloce, nel senso che in realtà TIG è abbastanza conosciuto da chi sviluppa con Symphony, perché è proprio estremamente veloce nel fare il rendering del front-end. Quindi non vi dovete preoccupare del fatto che questa cosa appesantisca il vostro tema, assolutamente no, anzi tendenzialmente è più veloce di prima, quindi sicuramente. E arriva anche con una cosa molto interessante, ovvero è più sicuro, perché ha un sistema interno con cui voi potete sanitizzare tutte le string e ovviamente diciamo che cerca di capire qual è la risposta migliore rispetto ai dati che gli vengono dati. Quindi se per caso per esempio manca qualcosa, TIG lo sa e semplicemente non vi dà un errore, ve lo darà se attivate il debug, ma non vediamo un errore. Semplicemente non la fa visualizzare, il che è molto utile. E poi è flessibile ed espandibile, nel senso che è un linguaggio, che vuol dire che come PHP si può espandere. Se avete delle esigenze particolari, potete scrivere del codice per riportarla direttamente nei vostri temi, non solo. È facile anche da estendere letteralmente, nel senso io posso avere un primo template, che estendo in un secondo template, che estendo in un terzo template. Il motivo per cui si chiama ramoscello fondamentemente è questo. Allora, installare Timber non è difficile, nel senso che semplicemente basta installare il plugin, oppure se volete, se utilizzate già Composer, potete semplicemente installarlo in questo modo, facendo Require. Chi di voi usa Composer, se posso? Ok, molto bene. Invece, ovviamente non basta, nel senso non è che dopo di che siate apposto e non dovete fare più niente. Teoricamente potreste utilizzarlo insieme ai temi che avete già, però questo vuol dire che vi dovete creare voi la vostra struttura, che poi vi faccio vedere. La cosa migliore per iniziare da zero è lo Starter Time, che è sempre di Upstatement, molto carino, molto semplice, estremamente per una persona che cominciava benissimo, che può essere, lo potete scaricare da GitHub e poi lo installate in WordPress, dopo il scontato che lo sapete fare, oppure lo cloneate da GitHub. Ci sono altri temi, ce n'è uno nei link alla fine della mia presentazione, però comunque tendenzialmente questo è migliore proprio perché è fatto dall'azienda che l'ha pensato, quindi l'ha fatto sicuramente molto bene. La struttura che vi trovate di fronte, allora a sinistra trovate la classica struttura di WordPress, niente di nuovo assolutamente, tema di WordPress con l'alchive, l'autor, the functions, the header, il fooder, eccetera. Questo dovrebbe essere una cosa abbastanza normale per chi sviluppa template. Cosa c'è di diverso? Semplicemente una cartella che vedete a destra che si chiama templates e che contiene tutti i file twig, che non necessariamente, ma nella maggior parte dei casi si chiamano esattamente come le pagine PHP, non necessariamente perché come mi dicevo tu puoi estendere un twig, quindi puoi segmentare ovviamente tutti i tuoi template come preferisci. Ovvio che sia da questo punto di vista che dal punto di vista del semplice codice, l'idea è di non andare a finire dagli spaghetti alle lasagne, cioè di fare troppi strati di codice oppure di fare troppi strati di template. Questo ovviamente sta la persona che fa programmazione. Allora, questo è quello che otterrete installando prima Timber e poi lo starter. Hai usato un plugin che si chiama FakerPress, non so se l'avete mai usato, che vi crea una serie di posta seconda dei criteri che gli date e come vedete è estremamente scarno perché in realtà l'idea è che poi voi ci inseriate i vostri CSS, il vostro HTML, quello che vi serve. È una base, non è neanche un freno, è proprio una base. Come si presentano dei temi che sono stati fatti in Timber e Twig nella realtà? Si presentano come questo, questo è preso dal sito ufficiale di Timber, Unicelf UK è un sito come gli altri, assolutamente. Sessa cosa, questo è uno dei primi progetti che abbiamo fatto, no, il primo, il primissimo progetto che abbiamo fatto che non ha niente di strano o di particolare. Vediamo un po' più nel dettaglio come funziona Twig. Io vi faccio vedere alcuni esempi, dopo di che in realtà Twig ha una guida meravigliosa, ci sono tantissimi esempi di codice perché comunque sono tanti anni che c'è. Quindi, in questo caso vediamo come WordPress, se io dovesse recuperare un'immagine dalla sorgente in questo caso e il titolo del post come testo alternativo avrei le tre righe sopra, cioè mi vado a recuperare lì del post e le scruttate lì della thumbnail da quello rel da la thumbnail e poi lo scrivo. Invece Twig, semplicemente, dice ok, la source è post thumbnail source, invece il titolo è title, fine, ok, semplicissimo. Guardiamo un po' più da vicino la single. Scusate un attimo, ma ho un problema di ok. Allora, come vi dicevo, non c'è un header e un footer, perché questa pagina qui estende questo template, estende il template di base come intanto con la dichiarazione in alto extendsbase.twig e poi quello che vedete da block and block content, il nome content è arbitrario, come se fosse una variabile. Tutto questo nella base, naturalmente, non c'è, lo descriviamo in questo single.twig come preferiamo noi. E se vedete, appunto, c'è una thumbnail che abbiamo visto prima post thumbnail source, in questo caso quella è semplicemente Twig, che gli dice fammi un resize a 1800 per 300 pixel. Queste sono funzioni molto simpatici e molto carine, che semplificano la vita tantissimo. Non devo stare lì di me, ma poi dirgli di fare un resize. Ovviamente l'immagine deve essere più grande di quella dimensione, ovviamente. E se sta cosa per post link, post author path, eccetera eccetera e continuiamo così. Vi faccio vedere meglio la single PHP, perché così iniziamo a parlare di contesto. Allora, Timber cosa fa? Per agganciare WordPress al Twig, utilizza il contesto. Questa è una sintasi abbastanza semplice, come vedete, perché all'inizio dici vai a prendere il contesto di Timber. Seconda riga, cosa ci metto nel contesto di Timber? Ci metto email post, quelli che ho preso dal mio database. E poi definisco il context post come quei post che ho tirato fuori dal database. Infine, qui la sintasi è un po' più complicata perché va a considerare sia una pagina di blog che abbia la password, oppure questo ovviamente è WordPress, oppure tutte le single che sono di un certo post type con un certo slug, con un certo ID, oppure io non so cosa sia e allora c'è basicamente la single twig. Fai rendering usando il context, ok? Cosa vuol dire tutto ciò? Questa, scusate sì, questa qui è la base, abbiamo visto, abbiamo detto prima la single twig estende questa, questo template e qui ancora di nuovo ci sono degli include, in questo caso del leather, e se vedete in centro c'è il nostro blocco di contenuto, ma non c'è niente, semplicemente non c'è contenuto. Dopodiché io posso ridefinirlo tutte le volte che voglio. L'altra cosa interessante di twig appunto è che si possono fare gli include, sono include, ne più o ne meno, come PHP, cambia soltanto un pochino la sintasi e infine che io posso utilizzare direttamente le funzioni WordPress usando Function, in questo caso è Function vbfooter, quindi se mi dovesse servire per un motivo qualsiasi di utilizzare direttamente una funzionalità di WordPress, ce l'abbiamo direttamente in questo modo. Allora, questo sostanzialmente, quello che vi dicevo prima, è il flusso. Da gli aggetti di WordPress, Timber li converte in un contesto, un array di dati, che viene passato a twig. Cosa succede se io devo estendere twig, il famoso esempio di prima, dove volevamo non vedere la pagina? Questo per esempio è un loop per mostrare gli articoli correlati a un articolo principale, la classica, il classico footer dopo il post. Chi è? Relativamente semplice, se guardate bene. La cosa interessante è che ovviamente posso utilizzare i condizioni, in questo caso if related, poi vi faccio vedere a dove viene correlated, e poi dice se esiste per esempio l'immagine allora scrivi l'immagine, oppure fami semplicemente un'intestazione, dammi il titolo, ok, e l'URL non lo trovo perché è all'inizio. Item URL, ok. Ci sono sostanzialmente tre cose che io vado a gestire in questa pagina, come faccio a farlo? In realtà l'unica cosa che devo fare è dirgli che nel contesto related, come abbiamo visto prima, la pagina si chiama all'inizio, io dico se esistono i related, e il contesto related lo definisco nella PHP. Allora in questo caso io ho preso una funzione, buona lissima funzione, ok. Ma in realtà qual'è la cosa bella? Che io posso fare un dammi? Cosa vuol dire? Semplicemente definisco un array dove vado a mettere tutti i miei contenuti. Perché questo è molto importante? Perché se io sono un designer e ho una minima conoscenza di twig, posso cominciare a disegnare il mio template utilizzando questa sintasi qui. E io otterrò esattamente quello che mi serve. Ovviamente un dammi non è la pagina finita, però la posso utilizzare in questo modo. Oppure posso fare, come abbiamo visto prima, una funzione. In questo caso cosa fa? Esattamente come prima tira fuori un array di dati. In questo caso specifico in realtà non so se lo utilizzate o l'avete mai visto, utilizza advanced custom post type e quindi getfield va a recuperare un repeater. Però potrebbe essere qualcosa. Non c'è necessità di seguire una specifica sintasi. Basta che alla fine ci siano array di dati. Io avrei anche concluso questa breve introduzione. Ovviamente, come dicevo, ci sono tantissime risorse a proposito di twig. Ce ne sono ancora specifiche per timber. La cosa interessante di questi link, il primo è un altro tipo di starter template che si chiama branch. È un fork dell'altro starter e sostanzialmente basato su bootstrap se volete utilizzare bootstrap. C'è una guida che secondo link passo passo su come utilizzare timber. E infine il cheat sheet di twig e timber, anche quello estremamente utile perché sono poche paginette, però vi dà l'idea di cosa potete fare molto velocemente con twig e timber. Io vi ringrazio. Grazie mille Serena. Allora c'è qualche domanda. Ciao, scusa. Ho seguito tutta la presentazione e avevo solo un doppio più caldo di quello che stavi facendo. Non importa, sono io che faccio interferenza, scusatemi. Dicevo, non ho compreso come avviene l'interpolazione di template. Questa. Esatto. A twig gli dici quale template di base va a estendere. Puoi anche non farlo ovviamente. Se hai il base non lo farai. Vedi che c'è il block content subito dopo? Ok. Sì esatto, io potrei chiamarla Pippo. È uguale al stesso. E all'interno di questo io posso metterci quello che voglio. Ok? Io lo dichiaro, se guardi, in mezzo dove c'è sorry no content. Esatto. Quindi esatto. Esatto. Vedi che anche all'inizio c'è un include HTML, header, twig, eccetera. C'è un blockhead and block. Perché lo definisco? E lo definisco vuoto. Perché mi servirà in altri template di twig. È uno slot, bravo esattamente. Sì, no, infatti. Aspetta. Una domanda veloce. Noi utilizziamo Sage come starter team con Bedrock. La differenza tra i due, perché ho visto che comunque come sintassi in certi casi si assomigliano. Meglio uno, meglio l'altro è un'alternativa, giusto per confrontare un po' e capire se siamo comunque su una strada parallela o cosa. Ma in realtà io non conosco benissimo Sage, nel senso che non l'ho mai utilizzato per progetti business. So più o meno come funziona, quello sì. È sempre una questione di necessità. Nel senso va benissimo che lo utilizzi. Non è totalmente necessario. Dipende da quali sono le tue esigenze. Se voi siete strutturati, utilizzate Git, come ho detto prima, eccetera, forse questo tipo di sintassi vi risulta un po' più semplice. Sì, io ho visto il mio grafico di fiducia che ha imparato in tempo zero utilizzare Twig e lo usa molto volentieri proprio perché non dico banale, però siamo lì. Se voi utilizzate già Sage da tanto tempo probabilmente non vi conviene cambiare. Esatto, in un altro modo. Sì, certo. Si può usare Bootstrap, si può usare Tachions, Foundation, qualsiasi cosa. Posso includere funzioni PHP dentro al file Twig? No. Sì, sì, sì, sì. E' proprio lì in fondo. Se tu guardi verso la fine, dove c'è il footer, c'è un FunctionBiffinFooter. Ad esempio, prima vedevo che la thumbnail la chiamavi smontando tutto, quindi andando a ricreare l'HtmlImageSearchHalt, invece che usando il predefinito di WordPress the post thumbnail, quindi così perdi però l'utilizzo dei filtri, se le z-load, quelle balle lì, se fatte tramite plugin, li devi fare da zero. Cioè, il vantaggio, ad esempio, rispetto a queste cose che vado a perdere qual'è? No, non le perdi, perché le puoi comunque dichiarare come vedi lì. Semplicemente di dirci, guarda, questa è una Function di WordPress. Ok, quindi doppia parentesi graffa, Function, e tra parentesi qual'è la Function che stai recuperando? Li puoi dare degli argomenti anche. Non è che esattamente come WordPress. Ok. Quindi, no, non perdi da questo punto di vista. Io ho fatto un esempio con l'imagine in quel modo perché ti fa un po' iniziare a capire che cos'è il contesto. Perché il contesto in questo caso è sempre post. E all'interno di quel contesto tu hai tutti gli oggetti che ti servono, già disponibili. E questo ti può semplificare molto la vita se stai facendo cose abbastanza base. Poi, ovviamente, estendere il tutto ci sono tanti modi. Grazie. Ciao, grazie. Ne ho tre di domande, va bene lo stesso. Sono brevissime. Volevo capire il tema base, lo starter team. È un tema che contiene già i vari template file o sono cose che devo andare a creare io. Posso fare un child dello starter team o vado a lavorare direttamente su quello? No, vado a lavorare direttamente su quello. Teoricamente tu potresti prendere parte dello starter team e inserirlo nel tema che hai già. Ok, adesso sono confusa. L'idea è che comunque tu abbia la possibilità di sviluppare autonomamente tutta la logica del template. Ok, quindi non è proprio una cosa per principianti, anche se loro dicono di sì. Però l'idea è io anche il mio template già fatto, ok? Vado a installarmi Timber e poi comincio a prepararmi i template di Twig, ma sulla base del mio template. Quindi vado a prendere l'HTML e lo sposto, ok? Quindi sì, è una cosa manuale, non è una cosa che è già fatta e io posso utilizzare prontà come fosse un altro tema. Non è come understrap, per esempio. Mi faccio un child di understrap e quindi ci metto tutta la parte grafica come voglio, ma ho già tutti i miei template file per il single, per archivio. Esatto, esattamente. Non è una cosa del genere assolutamente no. Volendo in realtà partire dallo starter, l'ideale sarebbe aggiungerci quanto meno il proprio framework CSS. E poi, ovviamente, a seconda delle esigenze, JavaScript o quant'altro, e infine farsi le proprie funzionalità, nel caso, come per esempio gli articoli correrati, aggiuntive rispetto a quello che trovi non lo start a time. Questo sarebbe l'ideale, ok? Però puoi anche fare il processo inverse. Puoi anche utilizzarlo estendendo il tuo tema già fatto. È curioso, gli andrò ad avere un'occhiata. L'altra domanda non c'entra moltissimo, hai detto che hai riempito i contenuti con un plugin, gli articoli che hai fatto vedere nello starter team. Si, si chiama Faker Press. Ok, grazie. ancora magari 5 minuti di tempo, se qualcuno vuole chiedere. Sì, buonasera. Io volevo sapere questo. Prima hai detto che il tuo grafico di fiducia è riuscito a utilizzare questi due strumenti, ma aveva qualche nonzono di PHP, era proprio... No, due di PHP proprio non... Assolutamente, non capisce spe nulla. Ci prova, ma non ce l'ho fatto. Quindi non è necessario capire qualcosa per riuscire a fare dei template con questi strumenti? Scusami, non ho capito. Può saperne più di tanto di PHP per utilizzare questi strumenti? No, no, no. È il bello di questa cosa qui. Nel senso che sia developer friendly che designer friendly, cioè tu che sei developer sei felice perché lavori soltanto sul back-end e te lo puoi gestire come vuoi, indipendentemente dal front-end. Tu che sei designer, ti puoi gestire il front-end come vuoi, indipendentemente dal back-end. È proprio la sua, diciamo, forza. E imparare a sintarsi di Twig, se hai una vaga idea di che cosa è un if, un ciclo fora, cosa del genere, è meglio. Però non è anche una cosa che puoi imparare usando Twig. Ah, ho capito. Ci sono migliaia di esempi, quello di scorsi. Ho capito. La documentazione è veramente molto vasta e molto chiara. Va bene, va bene, grazie. Qualcuno altro ancora, domande? Domande uno, domande due, domande tre. Niente? Va bene, allora facciamo ancora un grandissimo applauso e un grazie a Sarena.