Guida Pratica

Claude Code + GreenShift

Come connettere WordPress a Claude Code e creare pagine professionali con i blocchi GreenShift/GreenLight direttamente dall’intelligenza artificiale.

WordPress Claude Code GreenShift MCP

⚡

Velocità

Crea pagine complete in pochi minuti descrivendo il design a parole.

🎨

Design Pro

Blocchi GreenShift con animazioni, layout e stili personalizzati.

🤖

AI-Driven

Claude Code genera e pubblica il codice direttamente sul tuo sito.

Installa e attiva Application Passwords in WordPress

Da WordPress 5.6 in poi, le Application Password sono native. Vai in Utenti → Il tuo profilo , scorri fino alla sezione Application Passwords , inserisci un nome (es. "Claude Code") e clicca Add New Application Password . Copia la password generata.

ℹ️ Il sito deve essere su HTTPS per usare le Application Passwords. Su localhost puoi abilitarle via filtro PHP.

Ottieni le credenziali di accesso alla REST API

Le credenziali da usare sono:

URL base: https://tuosito.com/wp-json/wp/v2
Username: il tuo nome utente WordPress
Password: la Application Password generata al punto 1

L’autenticazione avviene tramite HTTP Basic Auth con username:password codificati in Base64.

Configura Claude Code con il plugin "Claude in Chrome"

Il metodo più semplice è usare il server MCP Claude in Chrome che permette a Claude Code di navigare sul tuo sito WordPress e interagire con l’interfaccia. In alternativa, Claude può usare direttamente la REST API di WordPress tramite chiamate HTTP.

💡 Metodo consigliato: REST API diretta — è più affidabile e non dipende dall’interfaccia grafica di WordPress che può variare.

Testa la connessione

Verifica che Claude Code possa leggere e scrivere sul tuo sito chiedendogli di recuperare la lista delle pagine esistenti:

GET https://tuosito.com/wp-json/wp/v2/pages?per_page=5

Se ricevi un JSON con le tue pagine, la connessione funziona correttamente.

Descrivi il design che vuoi ottenere

Scrivi a Claude Code una descrizione dettagliata della pagina: sezioni, colori, tipografia, contenuti e comportamenti desiderati. Più sei specifico, migliore sarà il risultato.

Crea una landing page con hero section su sfondo scuro #1a1a2e, titolo bianco, tre card su griglia 3 colonne con icone, e una CTA finale.

Claude genera l’HTML e lo converte in blocchi

La Skill greenlight-vibe di Claude Code segue questo processo automaticamente:

Crea HTML + CSS + JS vanilla ottimizzato
Esegue lo script convert.js per trasformare l’HTML in blocchi GreenShift
Valida gli stili e gli script generati

Pubblica la pagina tramite REST API

Claude Code invia il JSON dei blocchi a WordPress tramite una chiamata POST:

POST /wp-json/wp/v2/pages { "title": "La mia pagina", "content": "[blocchi GreenShift generati]", "status": "publish" }

Verifica e itera

Claude può aprire il sito con Claude in Chrome per verificare il risultato visivo, fare screenshot e apportare correzioni descrivendo cosa non va.

Note Importanti e Best Practice

⚠️

Evita le CSS Custom Properties

Non usare var(--nome) nei blocchi GreenShift pubblicati via REST API. WordPress codifica i doppi trattini e le variabili non cascadano correttamente sul frontend, rendendo il testo invisibile. Usa sempre valori hardcoded come #2a3eb1 o rgba(255,255,255,0.9) .

📐

Struttura delle Sezioni

Usa sempre la struttura wp-section alignfull con wp-content-wrap interno per i layout centrati. Questo garantisce compatibilità con il tema WordPress e il corretto comportamento responsive.

✅

Classi con Prefisso Univoco

Usa sempre un prefisso di almeno 4 lettere per le classi CSS (es. cgsh- , mybl- ). Questo evita conflitti con gli stili del tema o di altri plugin WordPress.

🔧

Plugin GreenShift Richiesto

Il sito WordPress deve avere installato e attivato il plugin GreenShift (o GreenLight). Senza il plugin, i blocchi greenshift-blocks/element non vengono renderizzati correttamente nel frontend.

Pronto a iniziare?

Configura il tuo WordPress, apri Claude Code e descrivi la pagina che vuoi creare. L’intelligenza artificiale farà il resto.

Scopri GreenShift Usa Claude Code

Come utilizzare Claude Code per creare pagine e articoli del vostro sito