Come Passare Da Un Tema Classico A Un Tema A Blocchi Di WordPress

Pubblicato: di Jos Velasco
Come Passare Da Un Tema Classico A Un Tema A Blocchi Di WordPress thumbnail

Se sei un appassionato di Legos, allora adorerai i temi a blocchi di WordPress.

A partire dalla versione 5.9, WordPress offre supporto completo per i temi a blocchi. Questo è stato un cambiamento importante per la maggior parte dei siti, che erano costruiti su quello che ora è noto come temi “classici”.

Ma passare da un tema classico a un tema basato su blocchi richiede un po’ di lavoro.

In questo articolo, spiegheremo come funzionano e quali passaggi puoi intraprendere per passare dal vecchio stile a quello nuovo.

Non sarà così divertente come assemblare una Morte Nera da collezione del 2005 da 3,441 pezzi. Ma faremo del nostro meglio.

Cos’è Un Tema A Blocchi WordPress?

I temi a blocchi consentono agli utenti e agli amministratori dei siti web di personalizzare il layout delle loro pagine e contenuti utilizzando blocchi di contenuto modificabili e riutilizzabili.

Inizialmente conosciuto come “modifica completa del sito” (FSE) o “modifica del sito”, questi temi aggiungono funzionalità modulari basate su blocchi ai layout e ai template del tuo tema. Similmente a come l’editor Gutenberg ha introdotto blocchi e template di blocchi che possono essere utilizzati all’interno delle tue pagine e contenuti di post.

Ma ora, puoi personalizzare il layout e i contenuti di tutto il tuo sito (inclusi i modelli di pagina e i modelli personalizzati) utilizzando blocchi visivi in stile drag-and-drop.

Esempio di Block Editor

Queste nuove funzionalità di editing visuale rendono estremamente facile costruire nuove strutture di pagina o personalizzare il contenuto di qualsiasi pagina oltre a ciò che è contenuto nel corpo della pagina.

Questo significa che non dovrai affidarti a sviluppatori per personalizzare i file del tema o creare template personalizzati per aggiungere elementi oltre parole e immagini al tuo contenuto. Invece, puoi personalizzare il contenuto utilizzando l’editor.

I singoli blocchi possono essere creati e progettati per adattarsi a un layout reattivo e corrispondere al colore e alla tipografia del tuo sito web.

Inoltre, puoi creare e utilizzare blocchi predefiniti condivisibili. Questi sono blocchi già pronti creati da singoli individui, aziende e sviluppatori WordPress.

Tutti insieme, i temi a blocchi trasformano WordPress in un sistema più modulare e flessibile. Emulano gran parte delle funzionalità di altri costruttori di siti in stile drag-and-drop resi popolari da aziende come Squarespace e Wix.

I temi basati sul Framework dei blocchi includono generalmente blocchi personalizzati pre-costruiti che si adattano al design e allo stile del sito web. Puoi quindi utilizzare questi blocchi all’interno del tuo sito dove ne hai bisogno.

Ricevi contenuti direttamente nella tua casella di posta

Iscriviti ora per ricevere tutti gli ultimi aggiornamenti direttamente nella tua casella di posta.

Temi a Blocchi Vs. Temi Classici

I temi classici di WordPress sono stati creati per realizzare uno stile e un design coerenti.

La maggior parte delle aree del sito erano modificabili solo personalizzando il tema o modificando direttamente i file di template PHP per aggiungere funzionalità specifiche al sito web.

PHP

PHP (Hypertext Preprocessor) è un linguaggio di scripting open-source. È ampiamente utilizzato nello sviluppo web e può essere incorporato in HTML. Diversi popolari sistemi di gestione dei contenuti (CMS), come WordPress, sono costruiti con PHP.

Scopri di più

Allora, la maggior parte dei siti aveva alcuni template standard per ogni tipo di contenuto. Ad esempio, un template per le pagine e uno per i post. Gli editor di blocchi hanno generalmente ancora questa stessa struttura di tema, ma puoi facilmente creare variazioni o personalizzare ogni template utilizzando l’editor.

Con l’editor a blocchi, hai più controllo sulle singole parti di ogni pagina o post, e puoi creare nuovi template al volo.

Aggiungi Blocco Icone Social

Ad esempio, puoi aggiungere un blocco con icone social o una galleria di immagini ai tuoi modelli di pagina per farli apparire su ogni pagina del tuo sito web o aggiungerli a un singolo post.

C’è anche un editor di stile che ti permette di regolare le impostazioni del blocco e personalizzare gli elementi visivi come la palette di colori e il layout. Non devi nemmeno modificare alcun CSS.

Oltre alla flessibilità e al controllo aggiuntivi, i temi a blocchi offrono numerosi vantaggi.

Elimina Shortcodes E Modifica Del Codice HTML

Con i temi classici, molti utenti WordPress si sono affidati a metodi personalizzati per aggiungere funzionalità o modificare il layout e il design dei loro post e pagine del blog.

Gli shortcode e i frammenti HTML personalizzati venivano spesso utilizzati per sovrascrivere o inserire nuove funzionalità che non erano incluse nel tema del sito web.

HTML

HTML è l’acronimo di HyperText Markup Language. È il componente fondamentale del web e il linguaggio di markup standard per creare pagine web e applicazioni.

Leggi di più

Ad esempio, potresti aver copiato e incollato un lungo frammento di codice in ogni post per aggiungere un invito all’azione o inserire un modulo di adesione.

Ora, puoi semplicemente creare un schema sincronizzato (blocco riutilizzabile) per questo contenuto. Poi, crea un modello di post personalizzato per ogni CTA pertinente. Infine, seleziona semplicemente il modello di post per ciascun post per far apparire la CTA.

Sblocca Gli Elementi Nativi Del Costruttore Di Pagine

Per molti utenti, un tema basato su blocchi eliminerà la necessità di plugin per la costruzione di pagine che sono diventati popolari nella comunità di WordPress.

Questi plugin hanno funzionato come soluzione temporanea per gli utenti che desideravano un sistema modulare e basato su blocchi per la costruzione del loro sito web prima che fosse disponibile per la maggior parte dei temi WordPress.

Questi temi sono, naturalmente, ancora popolari. Divi, Elementor, Gutenify e altri sono stati pionieri in questo campo, ma ora non devi usare questi temi specifici per sbloccare le capacità di costruzione modulare del sito.

Migliora Le Prestazioni Del Sito

Un altro grande vantaggio nel passare ai temi a blocchi è il miglioramento della velocità di caricamento delle pagine e delle prestazioni del sito.

Tempo Di Caricamento Della Pagina

Il tempo di caricamento della pagina è, in termini semplici, il tempo necessario perché una pagina web si carichi. In termini più tecnici, è il tempo impiegato per scaricare e visualizzare l’intero contenuto di una pagina web. È solitamente misurato in secondi.

Leggi Di Più

Molti siti si affidavano a plugin di terze parti o al copia e incolla di snippet di codice per ottenere la funzionalità e il design desiderati per le loro pagine. Ciò porta spesso all’aggiunta di script e stili extra alle pagine. Ogni risorsa impiega tempo per caricarsi e rallenta il tuo sito web.

Quindi, passando da un tema classico a un tema a blocchi, molti siti potranno eliminare questi pezzi extra. Questo semplificherà il codice nella pagina e dovrebbe migliorare la velocità di caricamento e le prestazioni della pagina.

Che, a sua volta, può migliorare il SEO, aumentare l’interazione e incrementare le conversioni.

SEO

L’ottimizzazione per i motori di ricerca (SEO) è la pratica di migliorare il posizionamento di un sito nei risultati di ricerca. I risultati di ricerca vengono aggregati in base a diversi fattori, inclusi la rilevanza e la qualità di un sito. Ottimizzare il tuo sito per questi fattori può aiutare ad aumentare i tuoi posizionamenti.

Leggi di più

Riduci Conflitti, Aggiornamenti e Vulnerabilità

Con meno dipendenza dai plugin di terze parti, avrai anche meno conflitti o aggiornamenti necessari per il tuo sito WordPress.

Man mano che i siti diventano più complessi, i plugin aggiuntivi utilizzati possono spesso entrare in conflitto tra loro. Questo può creare problemi gravi come il famigerato White Screen of Death. E aggiornare i plugin può sembrare un vero tiro di dadi. (“Questo sarà quello che romperà il mio sito?!”)

Forse ancora più importante, meno dipendenza dai plugin di terze parti renderà anche il tuo sito più sicuro. Questi strumenti possono spesso introdurre vulnerabilità o exploit nel tuo codice. (Soprattutto se eviti di aggiornarli perché hai paura di danneggiare qualcosa di importante.)

Dovresti Passare A Un Tema A Blocchi?

Considerando tutti questi vantaggi, sembra chiaro che, nella maggior parte dei casi, passare a un tema a blocchi sia una mossa intelligente.

La maggior parte delle aziende e dei siti web dovrebbe considerare il passaggio da un tema classico a un tema a blocchi.

Introduce numerosi miglioramenti alla qualità della vita che rendono più facile gestire il tuo sito web e i tuoi contenuti e permette al tuo team di lavorare più efficientemente e personalizzare i contenuti senza il tempo dedicato di uno sviluppatore utilizzando capacità di modifica senza codice.

Ed è un passo prezioso verso il miglioramento delle prestazioni e della sicurezza del tuo sito web.

Quando non dovresti cambiare?

In breve: se non hai tempo e risorse da dedicare al cambiamento. Modificare il tuo tema WordPress, specialmente se è costruito su misura o pesantemente personalizzato, richiede un notevole lavoro.

Mentre i tuoi contenuti, media e altri asset rimarranno intatti, il design generale del tuo sito web cambierà per adattarsi al nuovo tema.

Se desideri mantenere l’aspetto del tuo tema attuale o vuoi un aspetto completamente diverso, dovrai adeguare il design di conseguenza.

Dal lato positivo: apportare quelle modifiche sarà più semplice perché il tuo nuovo tema sarà basato su blocchi e ti permetterà di modificare la maggior parte dei layout del tema, elementi, colori e stili senza dover modificare il codice.

Diamo un’occhiata al processo.

Come Passare A Un Tema A Blocchi WP

Fase 1: Esegui il Backup del Tuo Sito Web

Ogni volta che apporti aggiornamenti importanti al tuo sito web, crea un backup.

È così importante che lo ripeteremo.

Crea un backup. (Seriamente.)

Se stai utilizzando un servizio di hosting WordPress gestito, dovresti avere opzioni di backup automatico e manuale.

Se non lo sei, considera un plugin di WordPress come BlogVault, UpdraftPlus, o Jetpack Backup per salvare tutti i file e i contenuti del tuo sito.

Jetpack

Jetpack è un plugin di WordPress creato da Automattic, la società dietro WordPress.com. È un plugin che ti dà accesso a funzionalità che di solito sono disponibili solo sui siti WordPress.com.

Leggi di più

In questo modo, se qualcosa va storto, avrai un modo per ripristinare il tuo sito web.

Passaggio 2: Valuta il Tuo Sito Web

La prossima cosa che dobbiamo fare è capire cosa succederà quando farai il cambio.

Cambiare il tuo tema ha generalmente due effetti immediati:

  1. Il layout generale, i colori e gli stili del tuo sito web cambieranno.
  2. Perderai qualsiasi codice personalizzato o modifica che è stata aggiunta direttamente nei file o nei template del tuo vecchio tema.

Oltre a ciò, il tuo contenuto e tutto ciò che è stato aggiunto al corpo dei tuoi post e delle tue pagine dovrebbe rimanere invariato.

Solo Un Altro Cambio di Tema

Ad esempio, se stai utilizzando un tema classico e hai personalizzato il layout dell’intestazione del tuo sito, queste modifiche non verranno mantenute.

Allora, cosa dovresti fare?

Consulta tutte le pagine del tuo sito web (o almeno tutti i template unici).

Cerca eventuali contenuti personalizzati, widget, banner, grafiche, ecc., che sono stati aggiunti ai file del tema. Questi appariranno generalmente nelle sezioni “statiche” come l’intestazione, la barra laterale o il piè di pagina.

Prendi nota di ogni istanza che trovi. È possibile aggiungere nuovamente questo contenuto al tuo sito dopo aver effettuato il cambio.

E non preoccuparti. Anche se ti perdi qualcosa, generalmente puoi tornare al tuo vecchio tema per vedere cosa c’era e ora manca nel tuo nuovo sito.

Passo 3: Scegli Un Tema

Ora è il momento di scegliere il tuo tema.

Qual è il risultato desiderato?

Vuoi un tema che somigli molto al design del tuo sito web attuale? O qualcosa di radicalmente diverso? Un aspetto completamente nuovo.

Qualunque sia la direzione, puoi iniziare esplorando i temi disponibili nella directory dei temi di WordPress. (Clicca su “Temi a Blocchi” per filtrare.)

Puoi anche dare un’occhiata alla nostra lista dei 27 migliori temi a blocchi.

Tieni presente che le opzioni di personalizzazione sono praticamente illimitate con tutti i temi a blocchi. È come quando cerchi un appartamento o una casa. Non fissarti sul colore delle pareti. Puoi sempre ridipingere. Pur volendo cercare temi che si avvicinino allo stile generale e alle preferenze di design, sarai in grado di modificare il tema per adattarlo alle tue esigenze.

Ad esempio, se preferisci un design minimalista potresti voler iniziare con un tema semplice. Un’altra opzione è modificare un tema complesso per rimuovere parte del contenuto.

Infine, guarda i blocchi pre-progettati inclusi nei temi.

Molti temi includeranno stili di blocchi personalizzati che sono già stati creati e diventano disponibili come opzioni non appena attivi il tema. Questo può essere un grande risparmio di tempo rispetto al dover creare ulteriori blocchi manualmente dopo aver configurato il nuovo tema.

Esempi di blocchi di motivi

Esplora la sezione “Patterns” del tema per vedere come questi blocchi vengono utilizzati per creare sezioni personalizzate. Molti temi includeranno esempi di pattern per gli header, pattern per i footer e altre sezioni o componenti rilevanti che potresti voler utilizzare nel tuo sito web.

Passo 4: Installa E Attiva Il Tema

Una volta scelto un tema, è il momento di installarlo.

Puoi scaricare il file zip del tema block localmente e poi caricarlo. Oppure, se il tema è presente nella directory di WordPress, puoi installarlo dal tuo WP Admin.

Per fare questo, vai su Aspetto > Temi, e clicca il pulsante “Aggiungi Nuovo”.

Aggiungi Nuovo Tema su WP Admin

Quindi, digita il nome del tema nella casella di ricerca. Trova il tema che desideri installare e passaci sopra con il mouse. Clicca su “Installa”.

Installa Nuovo Tema

Ora il tuo nuovo tema è installato!

Torna alla tua pagina dei Temi e trova il tema. Puoi attivarlo subito cliccando su “Attiva”.

Nota Per Gli Esperti: Se sei ancora incerto su come apparirà il tuo sito web con il nuovo tema, utilizza l’opzione “Anteprima Dal Vivo” per vedere come sarà. Oppure, ancora meglio, installa il tema e segui i passaggi successivi su una versione di staging del tuo sito web. In questo modo, le modifiche non saranno visibili mentre stai aggiornando e personalizzando il tuo sito.

Passo 5: Personalizza Il Layout E Il Design

Una volta attivato il tema, il tuo sito web apparirà (probabilmente) diverso rispetto a prima.

Ora è il tuo momento di personalizzare l’aspetto con la configurazione del tuo tema. Puoi ricreare il design precedente che usavi per il tuo sito, oppure puoi indirizzarlo in una direzione completamente nuova.

In entrambi i casi, puoi utilizzare la funzionalità di blocco dell’intero sito per personalizzare con solo pochi clic.

Normalmente, se il tuo tema può utilizzare l’Editor di Sito, apparirà un nuovo messaggio nella pagina customize.php che dice: “Evviva! Il tuo tema supporta la modifica del sito con i blocchi! Dimmi di più. Usa l’Editor di Sito.”

Se non vedi questo messaggio per qualsiasi motivo, dalla pagina dei Themes, clicca su “Personalizza” sul tuo nuovo tema.

Personalizza Tema WordPress

Ora vedrai la schermata dell’Editor. Da qui, puoi immergerti e modificare qualsiasi pagina o post specifico sul tuo sito. Puoi anche modificare e creare nuovi modelli o schemi.

Qui è dove vorrai trascorrere la maggior parte del tuo tempo. A seconda dei tuoi obiettivi per il nuovo tema, potresti voler passare attraverso ogni modello e schema predefiniti per personalizzare il contenuto e il layout.

Oltre a modificare il layout e i blocchi sul tuo sito, puoi anche utilizzare le opzioni di modifica per personalizzare le impostazioni dello stile.

Impostazioni Stile Blocco

Nelle impostazioni “Blocco”, dovresti vedere una serie di opzioni di stile. Qui puoi regolare gli elementi di design come la dimensione del carattere, l’allineamento, la spaziatura e gli schemi di colori.

Puoi anche aggiungere classi CSS personalizzate per ciascun elemento sotto Avanzate.

CSS

I Cascading Style Sheets (CSS) sono un linguaggio di codifica essenziale utilizzato per lo styling delle pagine web. I CSS ti aiutano a creare pagine bellissime modificando l’aspetto di vari elementi, inclusi lo stile del font, il colore, il layout e altro ancora.

Leggi di più

Passaggio 6: Verifica la Presenza di Plugin o Widget Danneggiati

Non tutti i plugin, widget o personalizzazioni funzioneranno con i temi a blocchi.

Se il tuo sito web utilizzava un certo numero di plugin e widget (che avresti dovuto identificare nel Passo 2), potrebbe essere necessario apportare alcune modifiche nel backend.

I plugin di blocco sono compatibili con i temi a blocchi, ma alcuni più vecchi potrebbero non funzionare.

Immagina di voler aggiungere un widget social che usavi con il tuo vecchio tema. Se non vedi l’opzione per aggiungere quel particolare widget dall’editor di blocchi, probabilmente devi trovare un nuovo plugin che sia supportato.

Trova Il Tema A Blocchi Perfetto Per Il Tuo Sito Web

Ora che conosci i passaggi, è il momento della parte divertente.

Trovare il tema a blocchi giusto per il tuo sito web, che si tratti di un blog personale, di un sito aziendale o di una piattaforma mediatica, può essere entusiasmante, con così tante fantastiche opzioni disponibili.

Alcuni dei nostri temi a blocchi popolari preferiti:

  1. Twenty Twenty-Three
  2. GeneratePress
  3. Blockbase
  4. SeedProd
  5. Divi

Con il tema giusto, sei sulla buona strada per diventare un maestro dei blocchi WordPress, DreamHost può aiutarti!

Buona costruzione!

Ad background image

Lo Sogni, Noi Lo Programmiamo

Sfrutta più di 20 anni di competenza nella programmazione quando scegli il nostro servizio di Sviluppo Web. Dicci solo cosa desideri per il tuo sito u2014 ci occupiamo noi del resto.

Scopri di più