Il wordpress Gpci framework comprende varie template parts che sono attivamente utilizzate dai template standard del tema. Come tutte le template parts di wordpress hanno queste caratteristiche:
- vanno usate tramite il blocco template part nel site editor
- sono completamente personalizzabili
- se utilizzate più volte il loro contenuto è automaticamente sincronizzato (come i patterns sincronizzati)
- possono essere facilmente create tramite il site editor
Lista template parts
Ho utilizzato le template parts nelle zone ricorrenti che molto probabilmente saranno uguali in tutto il sito (come header e footer). Per differenziare è sufficiente creare un'altra template part o copiarne il contenuto dove necessario per la visualizzazione desiderata. E' da specificare che la template part aggiunge un wrapper al proprio contenuto, quindi è necessario adattare il markup html. Qui di seguito la lista delle template parts del framework e una panoramica su ciò che fanno:
Header
- Slug: header-primary
Questa template part contiene la header principale del sito. All'interno è inserito il logo e un pattern classic menu default.
Footer
- Slug: footer-primary
Questa template part contiene il footer del sito: comprende alcune informazioni base e un form per la modifica dei cookies.
Form modifica cookies
Questo form esegue queste operazioni:
- elimina i cookies del sito dal browser dell'utente
- richiama la parte del template sezione cookies tramite ajax
- alla risposta imposta l'overflow hidden al body
- Se il cookie necessario non è impostato simula tramite javascript un click di invio per richiamare automaticamente la sezione cookies
Il form, tramite le condizioni di rendering, è disabilitato come impostazione predefinita e funzionerà solo quando attiva una connessione di tipo https.
Sezione cookies
- Slug: section-cookies
Questa parte del template contiene la sezione di accettazione cookies. Non è inserita in alcuna zona ma è richiamata tramite ajax dal form all'interno del footer: è già funzionante così com'è ma è possibile cambiare liberamente le descrizioni e/o le scelte possibili. E' formata da un contenitore con id section-cookie-consent che contiene il codice css e la funzione javascript SetCookiesOnConsent. Questa funzione seleziona le checkboxes all'interno della sezione e imposta i cookies di conseguenza. Abbiamo quindi la descrizione breve seguita da 3 pulsanti:
- solo necessari - disabilita tutti i consensi escluso il necessario e fa partire la funzione SetCookiesOnConsent che setta il cookie necessario
- accetta tutto - abilita tutti i consensi e fa partire la funzione SetCookiesOnConsent che setta tutti i cookies
- dettagli e personalizzazione - non setta alcun cookie ma apre il modal con informazioni aggiuntive e permette all'utente di abilitare i cookies desiderati:
Nel modal, a parte le informazioni base, sono inserite 4 checkbox (già trasformate in switch tramite css) per 4 tipi di cookies:
- necessari - id: cookie-necessary, questa checkbox è disabled e checked di default in quanto in base a questo la sezione non verrà più chiamata automaticamente
- statistici - id: cookie-stats
- pubblicitari - id: cookie-marketing
- social media - id: cookie-social
E' importante capire che l'id della checkbox equivale al nome del cookie che verrà impostato (il valore invece sarà sempre 1), quindi il cookie con id cookie-necessary imposta il cookie: cookie-necessary=1, e così via (cookie-stats=1, cookie-marketing=1, cookie-social=1). A questo punto è possibile rimuovere le checkbox non desiderate e aggiungerne di nuove ricordandosi semplicemente di assegnare un id e tutto verrà eseguito automaticamente dalla funzione SetCookiesOnConsent che imposterà i cookies selezionati. Ora è possibile accodare i files javascript basandosi sul valore dei cookies controllando via php o via javascript (grazie alla funzione GetCookie). Questa parte verrà trattata in un secondo momento. In fondo al modal inserito il pulsante "accetta i cookies selezionati" che imposterà i cookies selezionati dall'utente.
Breadcrumbs primary
- Slug: breadcrumbs-primary
Questa template part contiene i links di navigazione principali del sito. Se utilizzata nel site editor simulerà 3 pagine finte per la configurazione.
Ottenere template parts
E' possibile ottenere e generare le template parts anche tramite codice (come nel form inserito nel footer) per poterle utilizzare in funzioni php e javascript. Qui di seguito alcuni esempi:
Esempi
Codice presente nel form che richiama la sezione cookies come risposta, genera la template part utilizzando la funzione do_blocks:
echo do_blocks( '<!-- wp:template-part {"slug":"section-cookies","theme":"gpci-child"} /-->' );