Terre Sicane Wine Fest - tema WordPress su misura per il festival del vino
Rifacimento completo di tswf.it, il sito del festival del vino delle Terre Sicane: da un WordPress assemblato con plugin a un tema su misura con section builder proprietario, CI/CD e SEO strutturata.
Un tema WordPress su misura per Terre Sicane Wine Fest, il festival del vino delle Terre Sicane giunto all'ottava edizione (24-26 luglio 2026, Abbazia Santa Maria del Bosco a Contessa Entellina). Il progetto ha sostituito un'installazione appesantita da page builder e plugin di terze parti con un tema custom dotato di section builder proprietario, pipeline di deploy automatizzata e SEO strutturata.
Ho seguito l'intero ciclo di vita del progetto: architettura, sviluppo del tema, design engineering, deploy e ottimizzazione per i motori di ricerca.
| Aspetto | Dettaglio |
|---|---|
| Ruolo | Full-stack: architettura, sviluppo tema, design engineering, deploy, SEO |
| Stack | WordPress, PHP 8.2/8.4, Carbon Fields 3.6, JavaScript e CSS vanilla, DDEV, GitHub Actions |
| Hosting | SiteGround con cache full-page e SSL gestito |
| Codice | Circa 3.800 righe PHP (40 file), 1.400 di CSS e 400 di JS, zero framework front-end |
| Contenuti | 4 custom post type, 13 blocchi componibili, circa 1.000 media importati via seeding automatico |
Il contesto: da un WordPress assemblato a un tema su misura
Il sito precedente era il classico WordPress assemblato: page builder generalista, plugin per gli eventi, plugin per le gallerie, tema generico. Le conseguenze erano quelle tipiche di questo approccio, ovvero markup gonfio, dipendenza da licenze di terze parti, contenuti intrappolati nei formati dei plugin, nessuna coerenza visiva con il brand del festival e difficoltà di aggiornamento per la redazione.
L'obiettivo era un tema WordPress su misura in cui ogni contenuto fosse un dato strutturato (non HTML dentro un builder), con un design system dedicato, una gestione redazionale semplice e una pipeline di deploy professionale.
L'architettura: un section builder su Carbon Fields
Il cuore del tema è un section builder costruito sul campo complex di Carbon Fields: ogni pagina è una sequenza di sezioni tipizzate, ciascuna con i propri campi. Il rendering segue il principio open-closed, cioè apertura all'estensione e chiusura alla modifica. Un registry mappa ogni tipo di blocco al suo partial, un dispatcher unico risolve il rendering e aggiungere un blocco richiede una voce nel registry, un gruppo di campi e un partial. Nessuno switch da toccare, nessun template da duplicare.
I partial ricevono i dati come contratto esplicito: viste pure, senza accesso diretto al database, quindi testabili e sostituibili. In produzione ci sono 13 blocchi componibili:
- Hero video o foto, in versione piena o compatta
- Racconto editoriale e blocchi di testo
- Banda CTA e blocco biglietti
- Griglie artisti, aziende e partner (query sui custom post type)
- Programma multi-giorno come dato strutturato
- Mappa illustrata interattiva
- Lista d'attesa con lead generation
- Documenti legali e gallerie
Il modello dei contenuti
Artisti, aziende e gallerie sono custom post type ancorati a una tassonomia Edizione: il festival è annuale e le griglie filtrano per edizione corrente, quindi il sito del 2027 si prepara creando termini, non pagine. Il programma è un dato strutturato (giorni, appuntamenti, orari) al posto del plugin eventi, senza lock-in e con markup su misura. Tutto ciò che è globale (brand, loghi, edizione, biglietti, footer, social, SEO, privacy) vive in opzioni di tema centralizzate con helper di accesso e fallback.
Il design system
Token CSS (colori vino, mosto, calce, bosco e sole, radius, ombre, spaziature), kit di componenti e tema in file separati, con catena di dipendenze esplicita negli enqueue. Font self-hostati per performance e GDPR, micro-animazioni scroll-reveal con IntersectionObserver rispettose di prefers-reduced-motion, asset JS e CSS dei blocchi caricati solo sulle pagine che li usano.
Le scelte tecniche più significative
Zero dipendenze runtime oltre Carbon Fields
Niente jQuery, niente framework CSS, niente page builder. Carbon Fields è impacchettato nel tema via Composer con la cartella vendor committata: il server non ha bisogno di Composer e il deploy è un rsync atomico.
CI/CD con GitHub Actions: 18 secondi dal push alla produzione
La cartella del tema è un repository autonomo; ogni push su master esegue rsync via SSH con deploy key dedicata verso SiteGround e purga la cache. Il versionamento degli asset usa filemtime per file, così ogni deploy invalida da solo la cache browser e CDN (una costante statica avrebbe lasciato in cache le versioni vecchie con max-age di un anno).
Seeding idempotente dei contenuti
Import di circa 1.000 media (967 foto d'archivio di 3 edizioni, recuperate via WP REST API dal vecchio sito) e di tutti i contenuti reali tramite script rieseguibili con wp eval-file, con dedup per origine. Gli stessi script funzionano in locale e in produzione e l'ambiente locale su DDEV è una replica fedele.
Progettato per la cache full-page
Il form di lead generation non usa nonce WordPress: le pagine restano in cache per ore e un nonce stampato nell'HTML scadrebbe generando falsi errori. Le difese sono honeypot, throttle per IP, validazione e dedup per email, con risposta identica al successo per non dare segnali ai bot. L'endpoint admin-post ha doppia risposta, JSON per il fetch e redirect con query flag per il no-JS, quindi progressive enhancement completo.
SEO tecnica integrata nel tema
Meta description con fallback a catena (campo, excerpt, contenuto, primo testo delle sezioni, perché le pagine builder hanno post_content vuoto), Open Graph e Twitter completi, JSON-LD @graph con schema Festival (date, luoghi, offerta con prezzo, organizzatore, performer presi dai custom post type dell'edizione corrente) sulla home, robots e sitemap ripuliti, redirect 301 dal vecchio sito. Il modulo si disattiva da solo se compare un plugin SEO dedicato.
Compliance senza costi di UX
Cookie banner iubenda site-wide; i testi di privacy e cookie policy sono pre-renderizzati server-side dall'API no-markup di iubenda e cacheati con transient: niente flash di caricamento, HTML pulito che eredita la tipografia del sito e fallback automatico all'embed client-side se l'API non risponde.
Strumenti redazionali su misura
Meta box per importare sezioni da un'altra pagina, modalità Avvisami (un interruttore globale trasforma ogni CTA biglietti in un popup di raccolta email finché la biglietteria non è online) e tooltip sul contenuto del prezzo gestito da CMS.
Problemi non banali risolti
Il debugging più interessante, documentato nei commit, riguarda quasi sempre comportamenti di piattaforma poco noti.
DOM clobbering su form.action
Il campo hidden name="action" richiesto da admin-post.php sovrascrive la proprietà action del form, trasformando fetch(form.action) in una POST verso /[object HTMLInputElement] con conseguente 404. Il fix è usare getAttribute('action').
will-change: transform come containing block
Lo scroll-reveal lascia will-change sugli elementi animati, che intrappola qualunque position: fixed interno (bottom sheet della mappa, tooltip mobile). Risolto ancorando i popover con position: absolute a contenitori scelti, mai fixed dentro sezioni animate.
Collasso di layout da 1 pixel
Il banner biglietti collassava a una colonna su qualunque desktop perché contenuto e gap superavano di 1 pixel la larghezza interna e flex-wrap andava a capo. Diagnosi con misure reali in browser headless (non a occhio) e fix con basi flex esplicite.
wp_nonce_url dentro JavaScript
La funzione restituisce URL con & (escape HTML): usata in una stringa JS rompe nonce e parametri generando errori di sessione scaduta. Gli URL destinati a JavaScript vanno costruiti grezzi con add_query_arg e wp_create_nonce.
Favicon generica su Google
Il rel=icon 32x32 non è multiplo di 48 pixel e veniva scartato; il fallback /favicon.ico serviva la home (HTML), quindi placeholder generico in SERP. Il fix è un'icona 192x192 dichiarata più il redirect di /favicon.ico al PNG.
Metodo trasversale: misurare invece di supporre. Ogni bug di layout è stato diagnosticato con strumenti reali (browser headless, screenshot, computed style) e ogni fix verificato in locale e in produzione prima della chiusura.
Le fasi del progetto
Analisi e architettura
Audit del sito esistente, definizione del modello dei contenuti (custom post type, tassonomia Edizione, opzioni globali) e progettazione del section builder.
Design system
Token CSS ispirati al brand del festival, kit di componenti, tipografia self-hostata e micro-animazioni accessibili.
Sviluppo dei blocchi
Implementazione dei 13 blocchi componibili su registry e dispatcher, con partial puri e asset condizionali.
Migrazione e seeding
Recupero di circa 1.000 media da 3 edizioni via WP REST API e import idempotente di tutti i contenuti con script rieseguibili.
CI/CD e go-live
Pipeline GitHub Actions con deploy in circa 18 secondi, redirect 301 dal vecchio sito, SEO strutturata e verifica in produzione.
I risultati
La redazione oggi compone le pagine a blocchi con contenuti strutturati e strumenti di importazione, senza page builder né licenze. La performance è by design: niente framework, asset condizionali, font self-hostati, cache-busting automatico e compatibilità nativa con la cache full-page dell'hosting. L'architettura a moduli con confini chiari (registry open-closed, viste pure, helper con fallback) e gli ambienti allineati rendono la manutenzione prevedibile.
Circa 18 secondi dal push alla produzione e un impianto a edizioni per cui il passaggio all'anno successivo è un'operazione di contenuto, non di sviluppo.
Hai bisogno di un tema WordPress su misura?
Se il tuo sito è appesantito da page builder e plugin, o se i tuoi contenuti sono intrappolati in formati proprietari, un tema WordPress su misura restituisce controllo, performance e autonomia redazionale. Posso aiutarti a valutare il rifacimento con lo stesso approccio raccontato in questo caso studio.