Vai al contenuto principale

Come preparare il tuo sito web per Gutenberg

Divi: il tema WordPress più semplice da usare

Divi: il miglior tema WordPress di tutti i tempi!

più Download di 901.000, Divi è il tema WordPress più popolare al mondo. È completo, facile da usare e viene fornito con oltre i modelli gratuiti 62. [Consigliato]

Gutenberg arriverà presto su WordPress. Il tuo sito web è pronto? Sebbene non sappiamo ancora esattamente quale forma assumerà, questo nuovo sistema di contenuti verrà aggiunto a WordPress in futuro. Diamo un'occhiata ai potenziali impatti che ciò potrebbe avere sul tuo sito e ai modi per identificare e correggere le aree problematiche in anticipo.

gutenberg wordpress

Gutenberg è un progetto WordPress che mira a offrire agli utenti una maggiore flessibilità nella progettazione dei propri contenuti. In sostanza, il progetto mira a sostituire l'attuale editor, che funziona principalmente come un word processor, con un'interfaccia più visiva e strutturata. Attualmente, Gutenberg è un plugin e offre agli utenti la possibilità di modificare i propri contenuti allo stesso modo di Visual Composer o di altri editor drag & drop, ma in modo semplificato e molto intuitivo.

Per saperne di più su Gutenberg, clicca qui.

Gutenberg è un business enorme e probabilmente raggiungerà molti endpoint nel tuo sito web. Queste sono le tre aree che esploreremo alla ricerca di potenziali problemi:

  • Il tuo tema: Gutenberg viene fornito con il proprio set di stili per il contenuto. Il tuo tema è compatibile? Come sarà Gutenberg quando è attivo?
  • I tuoi plugin: È possibile che Gutenberg possa interagire con gli altri tuoi plugin in modi inaspettati. Vedremo cosa potrebbe essere e cosa è necessario fare per risolvere eventuali problemi che si presentano.
  • Il tuo contenuto: Gutenberg influenzerà il modo in cui vengono visualizzati i tuoi contenuti. Daremo un'occhiata a come questo potrebbe cambiare l'aspetto delle tue pagine e esamineremo alcune potenziali soluzioni in caso di problemi.

Prima di iniziare, è una buona idea creare un'area di test in cui puoi sperimentare Gutenberg senza mettere a rischio il tuo sito principale. Idealmente, dovresti creare la tua area di test o creare una copia locale del tuo sito. Per ulteriori informazioni su come eseguire una di queste attività, vedere il seguente tutorial: Come installare WordPress localmente.

Se ciò non è possibile, puoi eseguire i test direttamente sul tuo sito. Tieni presente che questo può essere rischioso, poiché attiveremo e disattiveremo una serie di parti del tuo sito. Se stai eseguendo il test dal vivo, assicurati di creare un backup del tuo sito prima di iniziare.

Una volta che sai dove vuoi testare, vai alla directory dei plugin e trova Gutenberg. Una volta installato e attivato, continua a leggere.

Ora che hai installato Gutenberg, diamo un'occhiata alla prima sezione del tuo sito che potrebbe essere interessata: il tuo tema. Se a questo punto sono già presenti problemi importanti, come errori del database o problemi con il dashboard di WordPress, passare alla sezione Cosa fare quando ci sono troppi problemi.

Crea facilmente il tuo sito Web con Elementor

Elementor ti consente di creare facilmente qualsiasi design di sito Web con un aspetto professionale. Smetti di pagare caro per quello che puoi fare da solo. [Free]

Poiché Gutenberg interagisce principalmente con il contenuto del sito, è sufficiente testare alcune cose, fortunatamente per noi.

Il primo è che Gutenberg viene fornito con il proprio foglio di stile e una serie di stili. Controlla ciascuno dei diversi tipi di pagine e modelli utilizzati sul tuo sito per assicurarti che vengano visualizzati correttamente. L'obiettivo principale qui è concentrarsi sugli elementi nell'area del contenuto principale delle tue pagine, in particolare sui contenuti e sui blocchi di immagini. Se riscontri problemi, è probabile che gli stili di Gutenberg abbiano la precedenza su quelli del tuo sito.

Per correggere questo problema, dovrai identificare l'origine del problema. Di solito, questo sarà un selettore CSS focalizzato su un elemento HTML o sulla priorità degli stili di Gutenberg rispetto alle tue classi. In ogni caso, prova a identificare dove si è verificato l'errore. Quindi, scopri perché gli stili di Gutenberg sovrascrivono il tuo e correggi il tuo codice per consentirgli di avere la precedenza.

Prova ad apportare correzioni nel tuo tema (o meglio ancora, in un tema figlio o un'area specificata per CSS nel tuo tema), piuttosto che modificare Gutenberg. Se modifichi direttamente uno dei file in Gutenberg, è probabile che venga sovrascritto quando il plug-in viene aggiornato.

Allo stesso modo, ti consigliamo di eseguire gli stessi test sulla tua dashboard una volta per tutte. Le opzioni del tema e altre sezioni personalizzate generate dal tuo tema sembrano essere i maggiori colpevoli finora. Dopo aver identificato i problemi di stile in queste aree, di solito puoi risolverli modificando o creando un tema figlio e modificando il CSS lì.

Stai cercando i migliori temi e plugin per WordPress?

Scarica i migliori plugin e temi WordPress su Envato e crea facilmente il tuo sito web. Già più di 49.720.000 download. [ESCLUSIVO]

Dopo aver testato il tuo tema, i plugin per il tuo sito sono i seguenti. In particolare, tieni d'occhio i plug-in che forniscono codici brevi da utilizzare nei tuoi contenuti (ad es. Gravity Forms), plug-in che influenzano l'aspetto del tuo contenuto (ad es. Plug-in di accessibilità che influiscono sulla dimensione del testo) e plugin che inseriscono direttamente elementi nella tua pagina (come Advanced Custom Fields).

Per controllare quest'area, inizia raccogliendo un elenco di tutti gli shortcode che stai utilizzando, oltre alle pagine in cui esistono. Con l'elenco in mano, visita ciascuna di queste pagine per vedere se funzionano come previsto. Se hai problemi di stile, è probabile che tu stia riscontrando lo stesso problema di prima e hai bisogno di riadattare i tuoi stili.

Tuttavia, se viene visualizzato lo shortcode e non il contenuto previsto (ovvero la tua pagina visualizza il file [shortcode]invece di fare la cosa giusta) c'è un'altra soluzione. In questo caso, puoi guardare il blocco in cui si trova lo shortcode e confermare che non è considerato testo (trova e rimuovi le etichette indesiderate attorno allo shortcode). Se il problema persiste, spostare lo shortcode su un tipo di blocco più adatto dovrebbe riavviare tutto.

Questo problema deriva dallo stesso problema che abbiamo già trattato: le sostituzioni di stile. Identifica gli elementi interessati e correggi il CSS.

L'ultima area che esamineremo per problemi di conflitto riguarda la creazione di oggetti. Qualsiasi plug-in che inserisce elementi HTML in una pagina senza utilizzare codici brevi è sospetto qui, ad esempio, quando PHP estrae campi personalizzati dal plug-in Advanced Custom Fields.

Lo slittamento più comune con la creazione di elementi ruota attorno a blocchi incompatibili. Poiché Gutenberg fornisce i propri stili, è possibile che se i tuoi elementi vengono creati all'interno di un blocco involontario, potrebbero non essere visualizzati correttamente. La soluzione per questo è assicurarti che il tuo codice aggiunga elementi al blocco dove vuoi che siano.

Non è urgente come gli altri problemi di cui abbiamo parlato, ma potrebbero esserci alcune complicazioni nel modo in cui vengono visualizzati i tuoi contenuti. La maggior parte di questi problemi deriverà da piccoli cambiamenti di stile o dalla disposizione dei blocchi. Per risolvere questo problema dovrai giocare con il sistema di blocco fino a ottenere la tua pagina nel modo desiderato.

Cosa fare quando ci sono troppi problemi

Hai riscontrato un problema che non sei riuscito a risolvere con i suggerimenti di questo tutorial? Niente panico ! C'è ancora del tempo prima che Gutenberg venga integrato nel core di WordPress.

Innanzitutto, annota qual è l'errore e quali passaggi hanno portato all'errore. Più informazioni puoi raccogliere, meglio è. Passa tutte queste informazioni al team di Gutenberg. Con un po 'di fortuna, saranno in grado di determinare il problema e risolverlo in una versione futura.

Crea facilmente il tuo negozio online

Scarica gratuitamente WooCommerce, i migliori plug-in di e-commerce per vendere i tuoi prodotti fisici e digitali su WordPress. [Consigliato]

Se stavi lavorando a un sito di staging, a questo punto è tutto ciò che puoi fare per ora. Continua a controllare le note di rilascio per vedere se il tuo problema è stato risolto o forse lavora per risolverlo da solo.

Se stavi lavorando sul tuo sito live, disabilitare Gutenberg dovrebbe riportare tutto alla normalità. In caso contrario, è ora di tornare al backup che hai eseguito all'inizio del tutorial!

Gutenberg mira ad essere un enorme cambiamento nell'ambiente WordPress, che cerca di cambiare i contenuti in meglio. Prima che raggiunga il ramo principale, assicurati di verificare che il tuo sito funzioni con le nuove modifiche. Se hai problemi diversi da quelli elencati qui, soluzioni migliori o correzioni per qualsiasi cosa in questo tutorial, lascia un commento qui sotto.

Questo articolo contiene i commenti 0

Lascia un commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito utilizza Akismet per ridurre indesiderati. Ulteriori informazioni su come vengono utilizzati i dati dei commenti.

Torna in alto
3 azioni
quota2
Tweet
Enregistrer1