Creare un tema a blocchi per WordPress con Claude Code

In questo articolo ti mostro come usare Claude Code insieme al plugin ufficiale per WordPress sviluppato da Automattic per generare un tema a blocchi partendo da una semplice descrizione testuale.

Cos’è il plugin Claude Code per WordPress?

Il plugin Claude Code per WordPress è uno strumento sviluppato e rilasciato gratuitamente da Automattic, l’azienda che gestisce WordPress.com. (Scopri qui la differenza tra WordPress.com e WordPress.org). Integrandosi direttamente con Claude Code, mette a disposizione dell’IA tutta una serie di istruzioni e linee guida per sviluppare temi a blocchi nel rispetto degli standard WordPress, senza doversi preoccupare di ogni singolo dettaglio tecnico.

Grazie a questo plugin è possibile:

• Generare proposte grafiche in HTML a partire da una descrizione del sito
• Trasformare la proposta scelta in un tema blocchi vero e proprio
• Lavorare poi sul tema direttamente nel Site Editor di WordPress

Cosa ti serve prima di iniziare

Per replicare quello che vedrai in questo tutorial hai bisogno di:

WordPress Studio L’app gratuita di Automattic che ti permette di creare e gestire siti WordPress in locale, direttamente sul tuo computer. Puoi scaricarla dal sito ufficiale. Sul Mac crea automaticamente una cartella Studio nella tua directory utente, dove vengono salvati tutti i siti locali.

Claude Code Claude Code richiede un abbonamento a pagamento. Assicurati anche di avere installato Node.js versione 18 o superiore, requisito tecnico per il plugin.

I tre comandi principali del plugin

Una volta avviato Claude Code con il plugin di Automattic attivo, hai a disposizione tre comandi principali accessibili tramite il comando /build-with-wordpress:

• quick-build: costruzione rapida di un sito: ideale per prototipi e demo veloci
• preview-designs: genera anteprime del design senza costruire il tema completo
• design-site: il flusso più articolato e completo, con più step e la possibilità di caricare materiali grafici

Per questo tipo di lavoro è consigliabile usare un modello avanzato. Puoi selezionarlo con il comando /model dentro Claude Code: il default è Sonnet, ma per risultati migliori conviene passare a Opus.

La modalità Quick Build in azione

Vediamo concretamente come funziona il comando Quick Build.

1. Descrivi il sito

Dopo aver selezionato Quick Build, Claude ti chiede di descrivere il sito che vuoi realizzare. In questo esempio ho usato:

“Sia un sito personale minimale ed elegante per Mario Rossi con una palette in bianco e nero e l’arancione come unico colore di accento. Utilizza tipografia sans serif in tutti gli elementi.”

2. Rispondi alle domande iniziali

Claude ti chiederà alcune cose prima di procedere:

• Se vuoi usare un sito già esistente in WordPress Studio oppure crearne uno nuovo
• Se hai materiali da fornire (loghi, fotografie, linee guida grafiche)

In questa demo non avevo nulla da aggiungere, quindi ho risposto negativamente e ho scelto di creare un nuovo sito.

3. Attendi la generazione delle proposte

Questa è la parte più interessante: Claude Code elabora la descrizione e genera tre proposte grafiche in formato HTML, già aperte automaticamente nel browser. Puoi scorrere tra le tre versioni e scegliere quella che ti piace di più.

⚠️ Tieni presente che questo processo consuma token. In base al tuo piano potresti esaurire i crediti disponibili per quel periodo. In quel caso dovrai aspettare il ripristino automatico o acquistare crediti aggiuntivi.

4. Scegli la proposta

Una volta viste le tre proposte, torni sul terminale e inserisci il numero corrispondente alla versione scelta. Volendo puoi anche chiedere modifiche specifiche prima di procedere.

5. Il tema viene costruito

Claude Code costruisce automaticamente tutti i file necessari per il tema a blocchi e crea un nuovo sito all’interno di WordPress Studio. Al termine ricevi l’URL locale del sito e puoi aprirlo direttamente nel browser oppure accedere alla bacheca di amministrazione WordPress.

I file del tema generato

Aprendo la cartella del tema con un editor di testo si vede chiaramente cosa Claude Code ha prodotto:

• theme.json — il file centrale dei temi a blocchi, contiene tutte le impostazioni su font, colori e altri parametri di configurazione
• style.css — il foglio di stile con le regole aggiuntive e le informazioni identificative del tema
• functions.php — il file PHP con le funzionalità di base del tema
• Template HTML — i template per le pagine, tra cui index.html (template base) e le partial come header.html e footer.html

Tutti i template utilizzano esclusivamente i core block di WordPress, il che li rende pienamente compatibili con il Site Editor e con l’ecosistema Gutenberg.

Quick Build vs Design Site: qual è la differenza

Quick Build è pensato per chi vuole ottenere rapidamente un prototipo funzionante. Il processo è rapido, le domande sono poche e il risultato è un tema già installato e pronto all’uso.

Design Site è il flusso più evoluto. Rispetto al Quick Build permette di:

• Caricare un logo, una palette colori personalizzata e immagini di ispirazione
• Ricevere un mock-up più dettagliato e fedele alla visione finale
• Modificare il mock-up prima di avviare la costruzione del tema vero e proprio

Se il Quick Build è il punto di partenza perfetto per esplorare le possibilità dello strumento, il Design Site si avvicina a quello che può essere un flusso di lavoro reale per progetti più seri.

Come continuare il lavoro

Dopo aver generato il tema con il plugin, le strade che puoi prendere sono essenzialmente tre:

1. Continuare con Claude Code — tornare nella riga di comando e chiedere a Claude di apportare ulteriori modifiche: nuove sezioni, pagine aggiuntive, variazioni di stile
2. Lavorare nel Site Editor — usare l’interfaccia visuale di WordPress per personalizzare il tema direttamente nel browser
3. Modificare il codice manualmente — intervenire direttamente sui file del tema per personalizzazioni più precise

In tutti i casi, il tema generato da Claude Code rappresenta uno scheletro solido da cui partire, rispettando già le convenzioni e gli standard di WordPress per i temi a blocchi.

Conclusione

Il plugin Claude Code per WordPress abbassa significativamente la barriera d’ingresso per la creazione di temi a blocchi. Non elimina la necessità di capire come funziona WordPress ed è utile avere familiarità con il terminale, con la struttura dei temi e con il Site Editor, ma accelera enormemente la fase iniziale di progettazione e sviluppo.

Che tu sia uno sviluppatore che vuole velocizzare il proprio flusso di lavoro o un appassionato di WordPress che vuole esplorare nuove possibilità, questo strumento merita sicuramente un posto nella tua cassetta degli attrezzi.