Come personalizzare il tuo tema WordPress (5 modi passo-passo)

Se hai installato un tema WordPress ma non è adatto a te, potresti sentirti frustrato. Ci sono molte opzioni disponibili per personalizzare i tuoi temi WordPress.

La sfida è trovare il modo giusto per farlo.

In questo post ti guiderò attraverso opzioni per personalizzare il tuo tema WordPress, aiuta a decidere quale è giusto per te e ti mostra come farlo in modo sicuro ed efficiente.

Preferisci guardare la nostra versione video? Fai clic su Riproduci di seguito:

Opzioni per personalizzare un tema

Prima di immergerci e iniziare ad apportare modifiche al tuo tema, è opportuno capire quali sono le opzioni, poiché si adattano a situazioni diverse.

Ecco una panoramica delle opzioni disponibili:

• Se desideri aggiungere funzionalità al tuo tema, installa un plug-in.
• Utilizza il Customizer nelle schermate di amministrazione di WordPress per personalizzare i caratteri, i colori e forse anche il layout, a seconda del tema.
• Se stai lavorando con un tema di page builder, utilizza le sue funzionalità per personalizzare il design del tuo sito.
• Se hai installato un tema framework, utilizza uno dei temi secondari disponibili per personalizzare il tuo sito, insieme a tutte le opzioni di personalizzazione possibili nelle schermate di amministrazione.
• Se il tuo tema è specifico per il tuo sito e ti senti a tuo agio, modifica direttamente il codice del tema.
• Se desideri modificare il codice di un tema di terze parti, crea un tema figlio.

Se vuoi modificare il codice , hai a disposizione una serie di opzioni, dall’utilizzo dell’editor di blocchi, al Customizer, fino alla modifica dei file. Li esamineremo tutti in questo post, ma iniziamo con l’opzione più semplice: l’installazione di un plug-in.

Hai davvero bisogno di personalizzare il tuo tema?

A volte non lo fai. Non è affatto necessario personalizzare il tema: invece, è necessario installare un plug-in.

I temi determinano il design del tuo sito: l’aspetto e il modo in cui visualizza i contenuti. I plugin aggiungono funzionalità extra.

Se le modifiche che vuoi apportare sono incentrate sulla funzionalità piuttosto che sul design, considera l’installazione di un plugin tu stesso. Potrebbe essere un plugin che devi scrivere, uno che scarichi dalla directory dei plugin o uno che acquisti.

Se ti accorgi di voler modificare il file functions.php nel tuo tema, chiediti:

Vorrei mantenere questa funzionalità se cambiassi tema in futuro?

Se la risposta è sì, il codice dovrebbe essere inserito in un plugin, non nel tuo tema.

Buoni esempi di cosa useresti per un plugin invece di un tema, inclusa l’aggiunta di widget, la registrazione di tipi di post personalizzati e tassonomie , creando campi personalizzati e aggiungendo funzionalità extra come un negozio o miglioramenti SEO.

Personalizzazione del tema WordPress tramite le schermate di amministrazione di WordPress

Se le modifiche che si desidera apportare sono incentrate sul design e relativamente semplice, potresti essere in grado di crearli tramite le schermate di amministrazione. L’utilità di personalizzazione ti offre una varietà di opzioni per modificare il tuo tema: ciò che è disponibile dipenderà dal tuo tema. E potresti vedere qualcosa chiamato Editor nel menu Aspetto. Stai alla larga da questo, per ragioni che descriverò a breve.

Personalizzare il tuo tema tramite il personalizzatore

Il modo più semplice per personalizzare il tuo tema WordPress è utilizzare il personalizzatore di WordPress.

Puoi accedere a questo in due modi:

• Quando visualizzi il tuo sito (dopo aver effettuato l’accesso), fai clic sul collegamento Personalizza nella barra di amministrazione nella parte superiore dello schermo.
• Nelle schermate di amministrazione, fai clic su Aspetto > Personalizza.

Questo ti porta al Customizer.

Nello screenshot qui sopra, ho ha installato un tema gratuito chiamato ColorMag che ha molte opzioni di personalizzazione. Sono state aggiunte sezioni all’utilità di personalizzazione per le funzionalità di progettazione tra cui un’immagine di intestazione, social media, colori delle categorie e una scheda Opzioni di progettazione che ti porta ad altre schede in cui puoi apportare modifiche al layout e al design del tuo sito.

Temi diversi hanno diverse opzioni di personalizzazione, ma sembra che temi più recenti ne aggiungano sempre di più. Se trovi un tema che ti piace ma che non è del tutto giusto per te, potresti scoprire che personalizzarlo ti dà esattamente il design e il layout di cui hai bisogno.

L’editor del tema (e perché non usarlo it)

Nelle schermate di amministrazione, potresti notare un’opzione chiamata Editor del tema, che puoi accedere tramite Aspetto > Editor del tema.

Questo ti dà accesso ai file nel tuo tema , il che significa che puoi modificarli direttamente.

Non farlo.

Anche se ti senti a tuo agio a scrivere CSS o PHP, modificare i file nel tuo tema in questo modo è una pessima idea, per due motivi:

• Se hai acquistato o scaricato un tema di terze parti, tutte le modifiche apportate andranno perse la prossima volta che aggiorni il tema (e dovresti mantenere aggiornato il tema per motivi di sicurezza).
• Ancora più importante, se effettui un modifica che interrompe il tuo sito, non verrà tracciato e la versione precedente del file non verrà modificata. Potresti rompere irrevocabilmente il sito.

Se vuoi modificare il codice nel tuo tema, dovresti farlo usando un editor di codice (controlla i migliori editor HTML gratuiti), e non dovresti Non modificare i file nel tuo sito live finché non lo hai testato su un sito di staging. Se è necessario modificare un tema di terze parti, è necessario farlo tramite un tema figlio. Maggiori informazioni su entrambi più avanti in questo articolo.

WordPress sa quanto sia pericoloso utilizzare l’editor del tema: ti dà persino un avviso quando provi ad accedervi.

Quindi segui il consiglio di WordPress: non usa l’editor del tema!

Uso di page builder e framework per personalizzare il tuo tema WordPress

Gran parte dei temi WordPress ha opzioni di personalizzazione, il che significa che puoi apportare modifiche al design e al layout tramite il Customizer.

Ma alcuni temi vanno oltre e sono progettati per essere estesi e personalizzati in modo significativo. Questi temi sono chiamati framework di temi.

Un’altra opzione è usare un plugin che ti consenta di progettare il tuo sito utilizzando un’interfaccia user-friendly: quelli sono chiamati page builder.

Usare una pagina Builder per personalizzare il tuo tema

I plug-in di Page Builder sono progettati per semplificare l’impostazione del design del tuo sito, utilizzando un’interfaccia che ti consente di vedere cosa ottieni.

Installa un plug-in per la creazione di pagine con un tema compatibile, quindi utilizzi le opzioni che ti offre per progettare il tuo sito esattamente come desideri.

Uno dei più noti costruttori di pagine è Elementor, ma puoi trovare alcune alternative nella nostra carrellata di page builder.

Page builder ti consentono di modificare i tuoi post e pagine con un’interfaccia drag-and-drop, il che significa che puoi vedere come appariranno i tuoi contenuti e può rendere ogni pagina unica.

Di seguito, sto utilizzando il page builder Elementor con il tema Hello Elementor, che è compatibile con esso.

I page builder ti danno molta flessibilità con il layout e il design delle tue pagine. Se sei abituato a un costruttore di siti web come Wix, possono aiutarti a facilitare la transizione a WordPress. E se preferisci un’interfaccia WYSIWYG per i tuoi contenuti WordPress, possono aiutarti a progettare rapidamente le tue pagine.

Utilizzo di un framework per temi per personalizzare il tuo tema

Un’alternativa ai page builder è il tema quadri. Si tratta di suite di temi progettati per funzionare insieme. C’è un tema principale che è il framework e una scelta di temi figlio che puoi utilizzare per personalizzare il tema principale e farlo apparire come desideri.

Un esempio di framework del tema è Divi, che ha opzioni di personalizzazione che ti consentono di modificare ulteriormente il design del tema figlio, inclusa un’interfaccia di trascinamento simile a quelle dei page builder.

Modifica del codice del tema WordPress

Se ti senti a tuo agio a modificare CSS e / o PHP, puoi farlo modifica il codice nel tuo tema per personalizzare il tuo tema.

Questo ti dà il massimo grado di controllo.

Se stai modificando il tuo tema, che è specifico per il tuo sito e è stato sviluppato appositamente per questo, quindi puoi apportare modifiche direttamente al tema. Ma se stai lavorando con un tema di terze parti e desideri modificarlo, dovresti creare un tema figlio per evitare di perdere le modifiche la prossima volta che aggiorni il tema.

Modifica dei file del tema

Il primo passo per modificare il tuo tema WordPress è capire quali file del tema controllano cosa e quale dovrai modificare.

Il foglio di stile

Ogni tema WordPress ha un foglio di stile, chiamato style.css. Contiene tutto il codice per lo stile del tuo sito: layout, caratteri, colori e altro.

Se vuoi cambiare i colori nel tuo tema, ad esempio, devi apportare modifiche al foglio di stile. Se desideri aggiungere un nuovo carattere, dovresti utilizzare il foglio di stile per applicarlo a diversi elementi come il corpo del testo e le intestazioni.

Fai attenzione quando modifichi il foglio di stile: specificità significa che il codice di un elemento non proviene sempre da dove tu penso che sia.Gli elementi erediteranno lo stile da altri elementi che si trovano sopra di loro nella gerarchia della pagina a meno che tu non aggiunga uno stile specifico dell’elemento inferiore.

Per scoprire cosa CSS sta influenzando gli elementi della pagina, puoi utilizza l’ispettore nel tuo browser per visualizzare il CSS (Chrome DevTools in questo esempio):

Puoi quindi usarlo per scrivere nuovo CSS che ha come target singoli elementi o una serie di elementi o classi sulla pagina.

Se tutto questo parlare di elementi, classi e specificità è nuovo per te, potresti evitare di modificare direttamente il CSS del tuo tema. Almeno finché non avrai imparato di più sui CSS e su come funzionano.

Il file Functions

Un altro file che praticamente ogni tema avrà è il file functions (functions.php) . Questo è il file che fa funzionare un sacco di cose nel tuo tema. Al suo interno, puoi trovare il codice per registrare le funzionalità del tema come immagini in primo piano, widget e altro.

Se sei tentato di aggiungere codice funzionale al tuo tema, è qui che lo aggiungerai. Ma attenzione: nella maggior parte dei casi, dovresti davvero scrivere un plugin. Chiediti:

Vorrei mantenere questa funzionalità se cambiassi tema in futuro?

Se la risposta è sì, scrivi un plugin invece di aggiungere codice al file delle funzioni. I plugin non devono essere grandi: non c’è niente che ti impedisca di crearne uno per un paio di righe di codice.

Il file functions è tutto scritto in PHP, quindi dovrai avere familiarità con quello. Non copiare ciecamente il codice che trovi tramite una ricerca su Google: prenditi il tempo per capire cosa fa quel codice e per capirlo. In questo modo è meno probabile che tu aggiunga codice che non è buono come dovrebbe essere.

I file modello del tema

La maggior parte dei file in un tema sono file modello del tema . Si tratta di file che determinano quale contenuto WordPress genera in una determinata pagina e vengono scelti in base alla gerarchia del modello.

Se si desidera modificare il modo in cui il contenuto viene visualizzato in un determinato tipo di articolo, pagina o archivio , dovrai modificare uno di questi file o crearne uno nuovo.

Ad esempio, supponiamo che il tuo tema abbia un file archive.php che viene utilizzato per produrre pagine di archivio per categorie e tag. Si desidera apportare modifiche alla modalità di output dei tag. Quindi crei un file chiamato “tag.php”, che sarebbe basato su archive.php con le tue modifiche.

Di nuovo, fai attenzione a modificare i file: potrebbero danneggiare il tuo sito. Prova sempre su un locale installazione utilizzando uno strumento come DevKinsta e / o il sito di staging prima.

Qualunque di questi tipi di file devi modificare, dovresti farlo correttamente. Leggi la sezione seguente sulle migliori pratiche per scoprire come modificare il tuo codice in un modo che non danneggi il tuo sito e non provochi problemi di sicurezza.

Personalizzazione di un tema di terze parti con un tema figlio

Se il tema che stai in esecuzione sul tuo sito proviene da una terza parte e desideri modificare il codice, dovrai creare un tema figlio.

Questo perché se modifichi il tema direttamente e poi lo aggiorni ( quale dovresti), perderai tutte le modifiche apportate.

La creazione di un tema figlio consiste in quattro passaggi:

1. Crea una nuova cartella in wp-content / temi.
2. In quella cartella, crea un foglio di stile. In quel foglio di stile, tel l WordPress che questo è un tema figlio del tema esistente.
3. Aggiungi copie dei file che desideri modificare al tema figlio e modificale da lì.
4. Attiva il tema figlio in il tuo sito.

WordPress utilizzerà sempre un file dal tema figlio per produrre il contenuto a meno che non ci sia un file più in alto nella gerarchia nel tema principale. Se sono presenti due versioni dello stesso file, utilizzerà quella del tema figlio. Ciò significa che il tuo nuovo file nel tema secondario sovrascriverà quello del tema principale.

Best practice per personalizzare i temi WordPress

Quindi stai pianificando di personalizzare il tuo tema. Prima di procedere e apportare le modifiche, segui questi suggerimenti per assicurarti di farlo in modo sicuro e di non danneggiare il tuo sito, renderlo vulnerabile agli attacchi o perdere il codice.

Se possibile , Personalizza senza modificare il codice

Se puoi effettuare le tue personalizzazioni tramite Customizer o altrove nelle schermate di amministrazione, è più sicuro che modificare il codice.

Modifica il codice solo se lo fai familiarità con CSS (per il foglio di stile) e PHP (per altri file di temi) e sai come farlo in sicurezza.

Utilizza un sito di sviluppo locale per apportare le modifiche

Se stai modificando il codice nel tuo tema o creando un tema figlio per apportare modifiche, dovresti svolgere il lavoro di sviluppo su un installazione locale di WordPress con il tuo tema installato e il tuo contenuto copiato dal tuo sito live.

In questo modo, hai un mirror del tuo sito live per testare le tue modifiche. Lavorare su un sito locale non avrà alcun effetto sul tuo sito live e può essere più veloce.

Anche se stai utilizzando Customizer, può essere utile utilizzare una versione locale del tuo sito per testare mentre puoi pubblicare le tue modifiche e testarle senza influire sul sito live.

Dopo aver testato le modifiche al tuo tema puoi caricarlo sul tuo sito live o, ancora meglio, puoi testarlo su un staging del sito e poi spingerlo a vivere.

Usa il controllo della versione

Quando apporti modifiche al tuo tema, dovresti usare il controllo della versione per tenere traccia delle modifiche.

Nella sua forma più semplice, ciò significa cambiare il numero di versione del tema e conservare copie di entrambe le versioni. Ma se vuoi eseguire correttamente il controllo della versione, devi utilizzare un servizio come GitHub per tenere traccia delle tue modifiche.

In questo modo, se una modifica causa problemi, puoi facilmente ripristinarla senza dover eseguire manualmente modifiche.

Il controllo della versione è ancora più utile se lavori come parte di un team, poiché sarai in grado di vedere cosa stanno facendo gli altri membri. Assicurati di leggere la nostra guida git vs Github.

Usa un sito di staging per testare le tue modifiche

Se hai accesso a un sito di staging (come lo staging gratuito di Kinsta che viene fornito con tutti piani), testarlo prima di attivare la nuova versione del tema (o il nuovo tema figlio) sul tuo sito live è il modo più sicuro per procedere.

Questo perché qualsiasi sito locale avrà alcune differenze rispetto al tuo sito live: si trova su un server diverso (quello creato su computer locale), potrebbe essere in esecuzione una versione diversa di PHP o uno qualsiasi degli altri strumenti che eseguono il tuo sito.

Fai una copia del tuo sito live sul tuo server di staging, quindi carica e attiva il tuo nuovo tema. Testa accuratamente il tuo sito per assicurarti che tutto funzioni, quindi puoi trasferire le modifiche al tuo sito live.

Rendi il tuo tema reattivo

Qualsiasi modifica che devi apportare al tuo tema dovrebbe funziona su dispositivi mobili e desktop.

Con sempre più persone che accedono a Internet tramite telefono cellulare e l’indice Mobile-first di Google, è probabilmente più importante ora che il tuo tema funzioni sui dispositivi mobili di quanto non lo sia fa sul desktop. Pertanto, qualsiasi modifica che apporti al tuo tema deve essere ottimizzata per i dispositivi mobili o preferibilmente mobile first se pertinente.

Ciò si applicherà principalmente a qualsiasi modifica che apporti allo stile o al layout: controlla che il nuovo layout funzioni sui dispositivi mobili e che hai aggiunto query multimediali in modo che il layout si adatti alle diverse dimensioni dello schermo.

Se il tuo tema non è reattivo, avrà un impatto negativo sul posizionamento nei motori di ricerca e sui tassi di conversione.

Se non hai accesso a molti dispositivi mobili diversi su cui eseguire il test, puoi utilizzare uno strumento come BrowserStack per vedere come appare il tuo sito su dispositivi diversi. Puoi anche utilizzare gli strumenti per sviluppatori nel tuo browser e le visualizzazioni reattive nell’utilità di personalizzazione.

Assicurati che le tue personalizzazioni non influiscano sull’accessibilità

Qualsiasi modifica al tuo tema deve essere accessibile anche agli utenti con disabilità o disabilità sensoriali .

Non si tratta solo di garantire che il tuo sito funzioni con gli screen reader: altre considerazioni come le combinazioni di colori e le dimensioni dei caratteri sono importanti per un gran numero di persone.

Se le modifiche stai apportando al tuo tema per rendere i colori più luminosi o il testo più piccolo, ripensaci: questo potrebbe rendere difficile per le persone leggere o interagire con il tuo sito.

Prima di apportare modifiche in tempo reale, usa un controllo dell’accessibilità per testare il tuo sito e assicurati che non escluda persone.

Attenersi agli standard di codifica di WordPress

Se stai modificando il codice nel tuo tema o creando un chi ld, devi assicurarti che il tuo codice sia in linea con gli standard di codifica di WordPress.

Questi standard esistono per garantire la coerenza e la qualità del codice e per evitare che il codice sia disordinato. Esistono standard per PHP, CSS e JavaScript, quindi prenditi del tempo per controllare quelli che sono rilevanti per te e assicurati di seguirli.

Se il tuo tema WordPress esistente è ben codificato e ne scrivi di nuovo codice in un modo coerente con quello, sei sulla buona strada per assicurarti che il tuo codice sia conforme. Assicurati di aggiungere commenti a tutte le modifiche apportate al tema in modo che tu o gli altri sappiate cosa avete fatto quando tornerete a lavorare sul codice in futuro.Potresti pensare di non dimenticare, ma dopo alcuni mesi è sorprendentemente facile dimenticare il motivo per cui hai modificato una riga di codice.

Hai bisogno di personalizzare il tuo tema #WordPress per renderlo unico? Ci sono molte opzioni! Scegli quello giusto per te nella nostra guida approfondita! 👚👔Fai clic per twittare

Riepilogo

Personalizzare il tuo tema WordPress non è poi così difficile. A volte è un semplice caso di utilizzare il Customizer per apportare modifiche ai caratteri o ai colori (assicurati di leggere la nostra guida approfondita sui caratteri di WordPress). Altre volte, devi creare un nuovo child theme per aggiungere un nuovo file modello a un tema.

Le opzioni che hai per personalizzare il tuo tema includono l’utilizzo di un plugin o il Customizer, la modifica diretta del codice del tema WordPress o creando un child theme.

Identifica l’opzione giusta per te e personalizza le tue personalizzazioni in modo sicuro, il tutto senza danneggiare il tuo sito.