Canvas per sviluppatori

Un tema a blocchi WordPress per sviluppatori, basato su theme.json

Canvas è un tema WordPress più un plugin complementare, ed è un block theme fino in fondo. I template sono template a blocchi, gli stili arrivano da theme.json, e ciò che l'editor salva nel database è lo stesso markup a blocchi che qualsiasi altro block theme legge. Nulla qui dipende da un page builder.

Aggiornato il

L'architettura

Un tema a blocchi, modificato dove WordPress lo conserva

Il tema contiene i template, le parti di template e le variazioni di stile; il plugin contiene la libreria di blocchi, i builder, i moduli, i livelli SEO e di performance e l'importatore delle demo. Template e stili globali restano nell'Editor del sito, quindi nulla del sito è nascosto in un pannello delle impostazioni proprietario.

  • 173 template a blocchi e 5 parti di template, tutti modificabili nell'Editor del sito
  • 4 varianti di stile, incluse dark e midnight, selezionabili nell'Editor del sito
  • I colori e la tipografia passano attraverso theme.json, così l'editor mostra la stessa tipografia del front end
  • 183 pattern di blocchi, inseriti come copia una tantum del markup
  • Una pagina si apre con l'intero template già visualizzato attorno al contenuto che stai modificando

Dentro l'editor e nell'Editor del sito

L'Editor del sito di WordPress con i template Canvas e le variazioni di stile
I template, le parti e gli stili globali restano nell'Editor del sito, dove WordPress li conserva.
Il contenuto

Nel database finisce il markup a blocchi

Il motivo per preferire un block theme non è un elenco di funzionalità. È ciò che ti ritrovi tra le mani dopo cinque anni.

Nessun formato proprietario

Canvas modifica i blocchi standard di WordPress, senza un formato proprio, così articoli e pagine conservano il loro contenuto se il tema cambia. Non ci sono shortcode da memorizzare né una vista del codice da aprire.

Impostazioni, non snippet

Tutto ciò che un visitatore vede è raggiungibile da un pannello delle impostazioni del blocco. Quando un demo aveva bisogno di qualcosa che un blocco non sapeva esprimere, il blocco ha acquisito l'impostazione, e la pagina non ha mai acquisito HTML grezzo.

Pannello avanzato su ogni blocco

Animazione, condizioni di visualizzazione, classi personalizzate, attributi personalizzati e CSS personalizzato per blocco vengono aggiunti a ogni blocco nell'editor, inclusi i blocchi core e di terze parti.

Gli asset seguono la pagina

Una pagina carica solo il CSS e il JavaScript dei blocchi che contiene, quindi una pagina dei prezzi non carica mai lo script dello slider. 35 altre ottimizzazioni sono semplici interruttori, senza plugin da installare.

Vieni da un altro tema? Elementor e Divi creano le pagine in editor propri, quindi il layout va perso quando abbandoni il builder: vedi cosa mantiene un sito Elementor quando lo sposti e come si confronta il Divi Builder. Anche Kadence e GeneratePress costruiscono con l'editor a blocchi, con i loro blocchi in plugin gratuiti (Canvas a confronto con Kadence, Canvas a confronto con GeneratePress), e Blocksy mantiene il suo generatore di header nel Customizer.

Tema a blocchi e page builder a confronto

Struttura del sito

I generatori di header e di footer vengono visualizzati come parti di template

Header, footer, barre superiori, mega menu, pannelli laterali e titoli di pagina sono record composti da blocchi e raggiungono il front end tramite le template part proprie del tema. La parte Header mostra l'header assegnato alla pagina; la parte Footer mostra il footer record assegnato. Così l'Editor del sito può vederli e le impostazioni dei blocchi restano identiche ovunque.

  • 22 blocchi header e 94 opzioni header dietro il generatore di header
  • Assegna un header a livello globale o sostituiscilo su una singola pagina, e fai lo stesso per footer, barre superiori, mega menu, pannelli laterali e titoli della pagina
  • Gli hero e gli slider sono anch'essi record, posizionati da un blocco slot che si trova nel template
  • Entrambi i blocchi slot si visualizzano nell'area di modifica, così la pagina si apre mostrando la sezione che vede il visitatore

Come funziona il generatore di header

Un record di header in costruzione con i blocchi header nell'editor a blocchi di WordPress
Un header è un record costruito con blocchi e visualizzato tramite la parte di template Header.
WooCommerce

24 blocchi per e-commerce e 18 template per e-commerce

WooCommerce è facoltativo e, quando è presente, viene gestito da blocchi e template, senza override dei template da tenere sincronizzati.

24

Blocchi per lo store

Blocchi per la pagina prodotto, la griglia dei prodotti, il carrello e il checkout, oltre a swatch di colore e aggiunta al carrello senza ricaricare la pagina.

18

Template del negozio

Template per le schermate di negozio, prodotto, carrello, cassa e account, modificabili nell'Editor del sito come ogni altro template.

21

Demo di negozi

21 dei 88 siti demo si importano come negozi completi, con prodotti, categorie, attributi e checkout già pronti.

La home page del demo Negozio di abbigliamento come la vede un acquirente, con lo slider a schermo intero e il carrello nell'header
La home page del demo Arredamento, un negozio WooCommerce per la vendita e il noleggio di mobili

Due dei 21 demo di negozio, costruiti con i blocchi e i template per negozi.

I blocchi WooCommerce

Estensibilità

La procedura guidata di configurazione crea un tema figlio, se lo vuoi

Crea il tema figlio solo se prevedi di modificare direttamente i file template di Canvas, perché è questo che mantiene sicure le modifiche in caso di aggiornamento. La procedura guidata di configurazione lo propone in un passaggio separato prima dell'importazione del demo, lo salva nella cartella dei temi e lo attiva, e il tuo sito avrà lo stesso aspetto di prima. La maggior parte dei siti non ne ha bisogno, perché i motivi più comuni ora si gestiscono dalle impostazioni.

  • CSS personalizzato a livello di sito, più JavaScript personalizzato per l'head e per il footer, nella sezione Varie di Opzioni del tema
  • CSS personalizzato per blocco, scritto come coppie proprietà e valore senza selettore
  • Attributi personalizzati per blocco, uno per riga come chiave e valore, che accettano attributi data e aria
  • Regole di tipografia personalizzate per qualsiasi selettore tu indichi, nella sezione Tipografia
  • Registra un tuo pacchetto di icone con la stessa interfaccia che usano 4 pacchetti integrati
  • Esporta un'intera configurazione di Opzioni del tema come file e importala nel sito successivo

Ogni sezione di Opzioni del tema

Un pannello delle impostazioni del blocco Canvas nell'editor di WordPress, con le opzioni avanzate aperte
Il pannello avanzato è presente su ogni blocco, inclusi i blocchi core e quelli di altri plugin.
L'ambiente

Cosa richiede Canvas e cosa fa durante l'installazione

I requisiti minimi sono requisiti reali, non suggerimenti. Canvas li verifica da sé sul tuo hosting, così un'importazione fallita non ti arriva mai come prima notizia.

WordPress 7.1 o versione successiva PHP 7.4 o versione successiva Testato fino a WordPress 7.1 L'editor a blocchi e l'Editor del sito inclusi in WordPress WooCommerce opzionale
  • Canvas Core non è mai un download separato: si installa dall'interno di WordPress non appena la licenza è attiva, quindi non c'è nessun abbinamento di versioni da gestire
  • Gli aggiornamenti arrivano nella schermata Aggiornamenti di WordPress, con modalità manutenzione, un backup temporaneo e un ripristino direttamente da WordPress
  • Gli aggiornamenti automatici riguardano solo le release di patch, sono attivi per impostazione predefinita con un interruttore per disattivarli, e una release che modifica un template personalizzato lo segnala
  • Una schermata Health Check esegue i requisiti del server sul tuo host reale e segnala cosa richiede attenzione; gli stessi controlli compaiono in Salute del sito di WordPress
  • Ogni stringa è traducibile, con modelli di traduzione per il tema e il plugin rigenerati a ogni rilascio e un file di configurazione WPML nel plugin
  • SEO tecnica, una sitemap XML e 16 tipi di schema vengono ricavati dai tuoi contenuti al momento del rendering

388 articoli di documentazione, generati dal codice distribuito

Domande

Le risposte alle domande tecniche

Cinque cose che uno sviluppatore verifica prima di impegnarsi in un progetto, compresa quella che Canvas non fa.

Canvas è un tema a blocchi o un tema con page builder?

Canvas è un tema WordPress costruito interamente con blocchi, ciò che WordPress chiama tema a blocchi. I template sono template di blocchi di WordPress, le parti del template sono parti del template, colori e tipografia passano attraverso theme.json e tutto si modifica nell'editor a blocchi e nell'Editor del sito, inclusi in WordPress. Non c'è alcun builder separato da installare, nessun secondo editor da imparare e nessun abbonamento al builder da rinnovare.

Che cosa succede al markup se il sito cambia tema in seguito?

Resta il markup standard di WordPress, perché è quello che salva Canvas. Un blocco Canvas che un altro tema non riconosce smette di mostrare il proprio design, ma titoli, paragrafi, immagini ed elenchi sono blocchi core e si leggono normalmente ovunque. Nulla viene memorizzato come shortcode o come formato di layout proprietario.

Dove vengono effettivamente visualizzati header e footer?

Tramite le parti template che Canvas registra, ovvero 5 parti: Header, Footer, Page Title, Sidebar e Sidebar Alt. La parte Header mostra la scheda di header assegnata alla pagina, la parte Footer mostra la scheda di footer assegnata e la parte Page Title mostra qualunque risultato producano le impostazioni del titolo della pagina. Le parti sono la parte tecnica; il design è la scheda che costruisci con 22 blocchi di header.

Mi serve un child theme?

Ti serve solo se intendi modificare direttamente i file template di Canvas, cosa che un tema figlio protegge dagli aggiornamenti. La procedura guidata di configurazione ne crea uno per te nel passaggio opzionale Tema figlio e attiva il sito con quello, oppure puoi copiare tu stesso nella cartella dei temi la cartella del tema figlio inclusa in Canvas. La maggior parte dei siti non ne ha mai bisogno: le Opzioni del tema gestiscono le impostazioni globali, il CSS personalizzato e gli attributi personalizzati di ogni blocco coprono il livello dei blocchi, e i campi di Custom CSS e JavaScript globali si trovano nella sezione Misc delle Opzioni del tema.

Canvas è un tema da destra a sinistra?

Sì, ogni foglio di stile di Canvas ha una versione speculare da destra a sinistra, e WordPress la carica da solo quando il sito usa arabo, ebraico, persiano o qualsiasi altra lingua da destra a sinistra. 88 demo su 88 sono verificate da destra a sinistra prima della pubblicazione, così menu, griglie e moduli si trovano dal lato corretto. La traduzione è un discorso a parte, e anche quella è completa: entrambe le parti del prodotto includono template di traduzione, e un file di configurazione WPML è incluso nel plugin.

Un tema a blocchi che puoi affidare a chiunque

Canvas si basa sull'editor incluso in WordPress, salva markup a blocchi standard e mantiene i template nell'Editor del sito. Crei siti per i clienti? Leggi le pagine dedicate ad agenzie e freelance.