Come personalizzare i temi di WordPress

La personalizzazione del tema WordPress ti aiuta a presentare il tuo marchio in modo univoco e a differenziare la tua attività dalla concorrenza.

Molti proprietari di siti si rivolgono a servizi di sviluppo professionale per la personalizzazione di WordPress. Tuttavia, con una buona strategia e un po’ di diligenza, puoi imparare a personalizzare i temi di WordPress da solo. Questa abilità è sempre utile in quanto ti dà il controllo dell’aspetto visivo e della funzionalità del tuo sito web.

In questo tutorial, toccheremo il motivo per cui dovresti personalizzare il tuo tema WordPress. Inoltre, ti mostreremo come modificare i temi di WordPress in base alle tue preferenze utilizzando diverse opzioni di personalizzazione, quindi continua a leggere.

Perché dovrei personalizzare il mio tema WordPress?

Indipendentemente dal tema scelto, sovrascriverà l’aspetto del tuo sito web con il suo design preimpostato. Personalizzando il tema, sarai in grado di dare al tuo sito web un aspetto unico, distinguendolo dagli altri siti web che utilizzano lo stesso tema.

Essendo facilmente riconoscibile e memorabile, il tuo sito web si distinguerà dal pacchetto. Questo, a sua volta, aumenterà la reputazione e il riconoscimento del tuo marchio.

WordPress viene fornito con un tema preimpostato che puoi modificare in seguito. Troverai una miriade di temi gratuiti o Premium tra cui scegliere a seconda dell’idea o dell’attività del tuo sito. Puoi trovare un tema direttamente dall’elenco dei temi WordPress o da un marketplace affidabile.

Di seguito, puoi vedere tutti i vantaggi della personalizzazione del tema scelto.

• Differenzia il tuo sito web dai tuoi concorrenti

Se hai esaminato i temi in precedenza, probabilmente hai notato che alcuni di essi sono costruiti per promuovere nicchie specifiche. Tuttavia, anche questi temi di nicchia tendono ad essere generalisti. Pertanto, dovrai modificare ulteriormente il tuo sito web WordPress per distinguerti dalla massa.

• Attrai il tuo pubblico

Il tema scelto potrebbe non corrispondere esattamente alle tue esigenze o aspettative per quanto riguarda il colore, altri elementi e funzionalità. I colori e il layout giusti possono influenzare in modo significativo il modo in cui i tuoi visitatori percepiscono l’unicità del tuo marchio. Molti marchi registrano persino i colori che usano per infondere un impatto duraturo sulla percezione visiva del loro pubblico.

• Fornire struttura ed efficacia

I siti web più votati sono ben organizzati e forniscono un design intuitivo. Con questo in mente, dovresti sforzarti di migliorare l’efficacia dell’aspetto del tuo sito web e generare un’esperienza utente positiva.

• Aggiungi funzionalità

Ricorda che la personalizzazione del tema WordPress è fondamentale per stabilire l’aspetto e lo stile generale del tuo sito web. Tuttavia, se desideri aggiungere più funzionalità al tuo sito web, puoi installare vari plugin di WordPress.

La repository dei plugin di WordPress contiene numerosi plugin gratuiti e a pagamento, fornendo funzionalità di base o più complesse come l’ottimizzazione di WordPress e funzionalità di sicurezza. Ad esempio, con l’aiuto di un plugin come WooCommerce, puoi trasformare il tuo blog in un sito di e-commerce.

Il messaggio di fondo è che modificando il tuo tema WordPress, hai l’opportunità di esprimere il punto di vista del tuo marchio e fare una dichiarazione. Il tuo sito web è probabilmente una delle risorse di branding più significative; consideralo come il volto del tuo marchio. Pertanto, dovresti personalizzare il tuo tema in WordPress per ottenere il meglio da esso con l’obiettivo di convincere e sostenere il tuo pubblico.

Come personalizzare i temi di WordPress – 3 modi facili e 2 avanzati

In questa sezione, approfondiremo i passaggi pratici su come personalizzare il tuo sito WordPress. Qui, ti guideremo attraverso diversi approcci in WordPress per modificare un tema, quindi continua a leggere.

Modifica il tuo tema WordPress con il Full Site Editing (versione beta) (Facile)

Full Site Editing (FSE) è parte del progetto Gutenberg, che estende la funzionalità di modifica dei blocchi oltre le pagine e i post. Puoi utilizzare questo editor del sito basato su blocchi a seconda del tema scelto e della versione di WordPress su cui viene eseguito il tuo sito. Hai bisogno di almeno WordPress 5.9 (o versione successiva) e un tema compatibile con i blocchi per trarne vantaggio.

In questo support/tutorials, useremo il tema predefinito Twenty Twenty-Two poiché è basato su blocchi, a complemento del rilascio della versione beta di FSE.

Per accedere all’editor del sito completo, accedi alla tua bacheca di WordPress e vai a Aspetto > Editor.

Una volta caricata, la schermata FSE ti consente di personalizzare il layout delle tue pagine WordPress in blocchi. In breve, tutte le parti della pagina sono separate in elementi di blocco e puoi creare blocchi riutilizzabili per coerenza di progettazione.

Diversi concetti chiave sono trattati nell’Editor sito completo e li affronteremo brevemente di seguito.

• Puoi aggiungere vari blocchi dal pulsante “+” nella parte in alto a sinistra dello schermo per formattare il contenuto del testo, il logo del sito e il titolo, aggiungere elementi multimediali o altri widget. Puoi trascinare e rilasciare i blocchi per ottenere l’aspetto desiderato per il tuo sito web.
• Dalla scheda Blocco Pattern, puoi selezionare design di blocchi unici per le tue pagine.

• Carica il menu Stili facendo click sul cerchio in bianco e nero nell’angolo in alto a destra per personalizzare ulteriormente i colori, il layout e la tipografia.

• Crea, modifica, visualizza in anteprima e rimuovi modelli dall’Editor del sito premendo il pulsante con il logo di WordPress nell’angolo in alto a destra. Di default, carica il template della home page del tuo sito web.

Nota che puoi creare una pagina con un singolo template o combinare parti di template e pattern di blocco.

• Puoi accedere all’interfaccia di modifica Template dalla barra laterale di sinistra, dove puoi creare e modificare modelli di post e pagine. Ad esempio, esiste un modello standard per le pagine Errore 404 che puoi modificare per allinearlo con il tuo design. Puoi anche creare una pagina di contatto personalizzata e impostare un modulo di contatto per il tuo sito live e altro ancora.

• Per creare blocchi strutturali riutilizzabili utilizzabili all’interno dei modelli, accedi all’editor Parti modello. Da quella sezione, puoi personalizzare l’intestazione e il piè di pagina del tuo sito WordPress.

Poiché l’editor del sito completo è basato su blocchi, il personalizzatore del tema e i widget sono nascosti per impostazione predefinita. Vengono visualizzati in Aspetto solo quando il tuo sito ha un plugin che richiede queste funzionalità.

Nel complesso, l’editor di blocchi è un’innovazione nella personalizzazione del tema di WordPress in quanto consente ai principianti di creare bellissimi siti web senza codificare. Sebbene i temi basati su blocchi non siano ancora molto comuni, gli sviluppatori di temi alla fine lo raggiungeranno.

Utilizza la personalizzazione del tema per modificare il tuo tema WordPress (Facile)

Per personalizzare temi classici come Astra, che non supportano ancora l’editor del sito completo, puoi utilizzare il WordPress Theme Customizer. Questo strumento legacy ti consente di modificare i temi di WordPress in tempo reale. A seconda del tema che stai utilizzando per il tuo sito WordPress, ci sono diversi set di modifiche che puoi apportare al tuo sito dal tuo pannello di amministrazione.

Puoi accedervi da Aspetto > Personalizza o dal pulsante Aspetto > Temi > Personalizza nella miniatura del tema attivo.

Questo carica la pagina Personalizza da cui puoi applicare le modifiche al tuo tema WordPress e vedere immediatamente il risultato. Puoi scegliere tra varie opzioni di personalizzazione disponibili nella barra laterale di sinistra.

Da quella barra laterale, puoi accedere e modificare tutte le funzionalità incluse nel tuo tema. Le più comuni tra i temi classici di WordPress sono le impostazioni della homepage, le combinazioni di colori e gli sfondi.

Come modificare il titolo e lo slogan di WordPress

La pagina di personalizzazione del tema ti consente di modificare il titolo e lo slogan del tuo sito e vedere come apparirà immediatamente sul tuo sito. Espandi il gruppo di impostazioni Identità del sito e modifica il testo per farlo.

Vedrai il nuovo testo visualizzato nell’anteprima sul lato destro mentre digiti. Una volta che sei soddisfatto del risultato, fai click su Pubblica e le modifiche verranno implementate.

Ulteriori personalizzazioni del tema di WordPress

A seconda del tema, potrebbero esserci opzioni aggiuntive su quella pagina. Ad esempio, Astra include i builder header e footer. Con questi builder, puoi aggiungere determinati elementi all’intestazione e al piè di pagina del tuo sito e creare design unici.

Puoi anche codificare Ulteriori personalizzazioni CSS o controllare come appaiono le tue modifiche su diverse dimensioni dello schermo.

Inoltre, puoi creare menu di navigazione e aggiungere Widget tramite la personalizzazione del tema. Ci sono anche altre funzionalità di personalizzazione per migliorare le prestazioni complessive del tuo tema WordPress.

Ad esempio, il tema Astra ti consente di abilitare il caricamento di Google Fonts locale. I caratteri caricati localmente possono ridurre significativamente il numero di richieste esterne generate dal tuo sito per visualizzare la formattazione del contenuto. Di conseguenza, questo migliora le prestazioni complessive del tuo sito web WordPress accelerandolo.

Personalizza il tuo tema WordPress con un Page Builder/Framework (Facile)

WordPress è un potente CMS che ti consente di personalizzare il tuo tema utilizzando un plugin per la creazione di pagine. Un plugin per la creazione di pagine popolare e facile da usare è il plugin Elementor, che è un editor visivo drag-and-drop. Con il suo design intuitivo, chiunque può creare siti web dall’aspetto professionale e pixel-perfect senza una sola riga di codice.

Elementor ti dà il controllo completo su ogni elemento del sito web e include oltre 40 widget e funzionalità. Puoi accelerare ulteriormente il processo di creazione del tuo sito sfruttando i kit e i modelli di siti web creati da designer.

La versione Pro di Elementor ti consente di modificare elementi dai tuoi temi WordPress come Header, Footer, Single Post e Archive Page.

Il plugin è pronto per Gutenberg, completamente reattivo e offre strumenti e miglioramenti per aiutarti a creare un sito web straordinario.

Un altro framework popolare per la creazione di siti web è Divi by Elegant theme. In sostanza, questo è un tema WordPress che incorpora una vasta gamma di funzionalità per la creazione di siti web. Divi ha un’opzione di editor visivo, oltre 800 layout predefiniti e una funzione di test diviso.

Questo tema Premium include un builder What you see is what you get (WYSIWYG) che ti aiuta a creare siti web dal design unico. Puoi anche modificare ogni elemento del tuo sito direttamente sullo schermo, vedendo immediatamente le modifiche.

Con Divi, puoi creare i tuoi layout e salvarli o esportarli/importarli su altri siti Divi. Un’altra caratteristica di Divi è il Color Manager, che suggerisce le tavolozze in base alle selezioni precedenti. Ciò ti aiuta a mantenere la coerenza del design nell’aspetto del tuo sito web. La piattaforma flessibile e intuitiva di Divi ti consente di creare bellissimi design interattivi per convincere il tuo pubblico di destinazione.

Modifica un tema WordPress dall’editor del file del tema (Avanzato)

I file del tema di WordPress sono memorizzati nel tuo spazio account di web hosting. Puoi accedervi e modificarli utilizzando il File Manager nel tuo provider di hosting o direttamente dalla tua bacheca WordPress > Aspetto > Editor dei file del tema.

Nota che per modificare i file del tema, avrai bisogno di un certo livello di PHP o competenza CSS. Inoltre, WordPress sconsiglia di modificare i file direttamente sul tuo sito live poiché le modifiche possono interrompere il tuo sito o perdersi in caso di aggiornamento del tema.

Anche se sei entusiasta della modifica del codice, non raccomandiamo di farlo sul tuo sito live (noto come “cowboy coding“). Invece, suggeriamo di modificare il codice del tema su un sito di Staging o di creare un Tema figlio.

L’editor dei file del tema ti consente di modificare tutti i file relativi al tuo tema WordPress dalla rispettiva interfaccia. Tutti i temi contengono i seguenti file che puoi modificare per regolare il loro design: style.css, functions.php e file template. I temi personalizzati possono includere file aggiuntivi a seconda del loro set di funzionalità.

Foglio di stile (style.css)

Il file style.css contiene tutte le funzionalità relative al design di un tema, come caratteri, colori e layout. Puoi modificare l’aspetto del tuo sito web aggiungendo CSS personalizzati e apportando modifiche a questo file.

Funzioni.php

Il file functions.php definisce le funzionalità e le caratteristiche di un tema WordPress. Questo file ha tutti i menu personalizzati, i loghi, i widget e le immagini in primo piano codificate in PHP.

File template del tema

I file template del tema combinano HTML, codice PHP e tag template per definire i layout di pagina di WordPress. Le modifiche a questi file influenzeranno il modo in cui vengono visualizzate la pagina 404 personalizzata, le pagine di post e le pagine di archivio.

Tuttavia, prima di considerare la modifica dei file del tema di WordPress dalla tua bacheca, sappi che anche i plugin di sicurezza impediscono l’accesso ad essi. Poiché l’editor dei file del tema fornisce accesso diretto ai file del tema, molti plugin di sicurezza (come Security Optimizer) lo disabilitano per evitare che hacker possano inettare malware.

Personalizza il tuo sito utilizzando un tema Child (Avanzato)

L’utilizzo di un tema figlio per personalizzare il tema di WordPress è considerato una buona pratica quando si modifica il codice del tema. Usando questo approccio, puoi tranquillamente implementare le modifiche senza preoccuparti di perderle dopo aver aggiornato il tuo tema. Inoltre, eviterai di interrompere il tuo sito poiché le tue modifiche influenzeranno solo il tema figlio e non il tema principale.

Cos’è un tema WordPress Child

Un tema principale di WordPress è ogni tema che contiene una pila completa di file e risorse del tema. Allo stesso tempo, un tema figlio di WordPress eredita tutte le caratteristiche e le funzionalità del tema principale.

Secondo il WordPress Codex, un tema figlio in WordPress ha la seguente definizione:

Un tema figlio eredita l’aspetto del tema principale e tutte le sue funzioni, ma può essere utilizzato per apportare modifiche a qualsiasi parte del tema. In questo modo, le personalizzazioni vengono mantenute separate dai file del tema principale. L’utilizzo di un tema figlio ti consente di aggiornare il tema principale senza influire sulle personalizzazioni apportate al tuo sito.

I temi figlio ti consentono di apportare modifiche portatili e replicabili al tuo tema mantenendole separate dal tema principale.

Come creare un tema figlio

Per creare un tema figlio, devi impostare i file style.css e functions.php in una cartella separata all’interno della struttura dei file di WordPress. In quella cartella che prende il nome dal tuo tema figlio, puoi creare modelli e applicare varie modifiche. Quando il tema principale viene aggiornato, le modifiche apportate nel tema figlio rimarranno intatte.

Il metodo più semplice per creare un tema child è utilizzare un plugin come il Child Theme Wizard. Dopo averlo installato, viene attivato automaticamente e puoi trovarlo nella sezione Strumenti nella tua Dashboard.

Lì, seleziona un tema principale dal menu a discesa, compila il nome che desideri assegnare al tema figlio e premi il pulsante Crea tema figlio. Pochi secondi dopo, vedrai un messaggio di “successo” che il tuo tema figlio è stato creato.

Quindi, vai su Aspetto > Temi e attiva il tuo tema figlio. Questo è tutto! Puoi iniziare a personalizzare il tuo WordPress implementando le modifiche sul tema Child.

7 consigli e trucchi per modificare temi WordPress

• Suggerimento 1.Fai sempre il backup del tuo sito web prima di modificarlo

  Per sicurezza, assicurati di backup del tuo sito prima di personalizzare il tuo tema WordPress. In questo modo, se qualcosa va storto, puoi ripristinare il tuo sito dal backup e farlo funzionare di nuovo in pochissimo tempo.

• “Prova a personalizzare senza modificare il codice” step=”Suggerimento 2.” heading=”3″]

  Cerca di evitare di incasinare il codice del tuo tema WordPress se non sei uno sviluppatore professionista. I file del tema sono delicati e un semplice errore di codifica può deteriorare l’intero sito web, rendendolo inaccessibile. Pertanto, è più sicuro utilizzare opzioni user-friendly come Theme Customizer o un generatore di pagine per personalizzare il tuo tema WordPress.

• Utilizza un sito di Staging per le personalizzazioni

  Il modo più sicuro per applicare le personalizzazioni del tema WordPress è creare un ambiente di Staging per il tuo sito. Un sito di Staging è una copia del tuo sito web, in cui puoi eseguire attività come l’aggiornamento e il test di nuovi plugin o design senza influire sul tuo sito live.

  Se sei un cliente SiteGround, puoi sfruttare lo strumento di staging di WordPress nel tuo Site Tools . Con esso, puoi creare facilmente un sito di Staging, gestirlo e inviarlo per sostituire il tuo sito live quando sei pronto.

  Quando modifichi il tuo tema WordPress su un sito di staging, il tuo sito live rimarrà intatto anche se qualcosa va storto.

• Suggerimento 4.Crea un design responsive

  Poiché smartphone, tablet e dispositivi di tutte le dimensioni dello schermo sono una parte importante della navigazione sul web, la creazione di un tema reattivo è essenziale. Il tuo sito deve mantenere un aspetto coerente su tutti i dispositivi per sostenere il tuo pubblico di destinazione. Pertanto, ricorda di controllare se le modifiche al design e alla funzionalità del tuo tema WordPress sembrano appropriate in tutte le dimensioni dello schermo.

• Suggerimento 5.Accessibilità

  In un’altra nota, se vuoi raggiungere un pubblico più ampio, dovresti anche sforzarti di personalizzare il tuo tema per l’accessibilità. Studi mostrano che 8.1 milioni di persone hanno una sorta di disabilità visiva, che richiede l’uso dello schermo lenti di ingrandimento/lettori o che necessitano di pagine a contrasto più elevato che si adattano al daltonismo. Oltre il 62% degli adulti con disabilità utilizza un laptop e il 72% utilizza uno smartphone.

  Tuttavia, molti siti web non forniscono modifiche di accessibilità per rendere le loro pagine disponibili per le persone con determinate disabilità. Apparentemente, oltre il 97% dei primi 1 milione di siti web del mondo non offre un’accessibilità adeguata. Di conseguenza, oltre il 60% degli screen reader riferisce che l’accessibilità dei contenuti web è peggiorata.

  Suggerimenti chiave per garantire una maggiore accessibilità del tuo sito sono evitare il testo a basso contrasto e aggiungere testo alternativo per le tue immagini. Fai la differenza e ricorda di verificare se le tue personalizzazioni soddisfano le esigenze di questo vasto pubblico.

• Suggerimento 6.Segui gli standard di codifica di WordPress

  Tutti i temi WordPress approvati seguono gli WordPress Coding Standards, quindi se stai modificando il codice del tuo tema – Assicurati di farlo anche tu. Fare un pasticcio di frammenti di codice nei file del tema può causare molti problemi a lungo termine.

  Pertanto, prova ad aggiungere commenti per le modifiche al codice e a strutturarli in modo appropriato, mantenendo un aspetto ordinato e organizzato. In questo modo, sarai in grado di identificare rapidamente le modifiche precedenti.

• Suggerimento 7.Controllo della version

  Ultimo ma non meno importante, dovresti stabilire il controllo della versione del tuo sito WordPress. Puoi farlo con un plugin come WP Rollback, che ti consente di ripristinare una versione precedente di un plugin o di un tema. Ti consigliamo di mantenere aggiornato il tuo sito; tuttavia, a volte, un aggiornamento del plugin potrebbe danneggiare il tuo sito. Per fortuna, con WP Rollback, puoi ripristinare una versione funzionante del tuo sito web.

Riepilogo

Ora hai tutto ciò di cui hai bisogno per progettare un sito web straordinario e catturare l’attenzione del tuo pubblico. Ottieni il riconoscimento personalizzando il tuo tema WordPress con uno dei metodi che abbiamo descritto. Usa i trucchi che abbiamo condiviso per perfezionare l’aspetto del tuo sito e distinguerti dalla massa.

Speriamo che il nostro support/tutorials ti abbia entusiasmato e che tu sia pronto ad attirare il tuo pubblico con il tuo fantastico sito web!