Cos'è un child theme e perché è così importante?
In questo post, ti daremo le risposte a queste domande e ti mostreremo passo dopo passo come creare e personalizzare il tuo tema figlio utilizzando plugin o codice.
Se vuoi apportare modifiche al tema del tuo sito WordPress,probabilmente hai visto persone che ti dicevano di usare un child theme.
Ma cos'è un tema figlio e perché sono così importanti i temi figlio?
In questo post, ti forniremo le risposte a queste domande insieme a un'introduzione ai temi figlio e a come sono perfetti per te.
Quindi ti mostreremo passo dopo passo come creare e personalizzare il tuo tema figlio utilizzando plugin o codice.
Ma, se non hai mai installato WordPress, scopri Come installare un blog Wordpress passi 7 et Come trovare, installare e attivare un tema WordPress sul tuo blog
E poi torniamo al motivo per cui siamo qui.
Cos'è un tema WordPress figlio?
Un tema figlio non è un tema autonomo. È un "figlio" di un tema principale esistente, da cui il nome.
Lo installerai insieme al tema principale, ma ti dà la possibilità di apportare modifiche in modo sicuro al tema principale senza dover modificare il tema principale stesso.
Il tema figlio otterrà la maggior parte / tutte le impostazioni di progettazione dal tema principale. Tuttavia, in situazioni in cui si modifica il tema figlio, questa modifica sovrascriverà le impostazioni del tema principale.
Vantaggi di un tema figlio
A questo punto ti starai chiedendo: perché non puoi semplicemente apportare le modifiche direttamente al tema principale?
Il motivo principale per cui non è una buona idea è Aggiornamenti dei temi WordPress.
Se desideri mantenere il tuo sito Web WordPress sicuro e funzionante, devi applicare rapidamente gli aggiornamenti non appena escono, inclusi gli aggiornamenti al tuo tema WordPress.
Se personalizzi il tuo sito web modificando direttamente il tuo tema (nessun child theme), ciò significa che sovrascriverai tutte le tue modifiche ogni volta che aggiorni il tema WordPress.
Ciò significa che tu:
- Aggiorna il tuo tema WordPress e perdi il lavoro. Non è stata un'esperienza molto divertente, vero?
- Non aggiornare il tuo tema WordPress per non perdere il tuo lavoro ... il che non va bene la sicurezza e il funzionamento del tuo sito Web WordPress.
Con un child theme, puoi apportare tutte le modifiche al child theme. Quindi sarai in grado di aggiornare il tema principale senza perdere nulla del tuo lavoro.
Oltre ad aiutarti ad aggiornare in modo sicuro, l'utilizzo di un tema figlio è generalmente utile anche per effettuare personalizzazioni. Poiché separa tutte le modifiche in un unico posto, è facile tenere traccia di tutte le modifiche e modificarle secondo necessità.
È anche facile capovolgere. Ad esempio, se desideri interrompere l'utilizzo delle modifiche e tornare al tema principale, disattiva semplicemente il tema figlio.
Alcuni Temi WordPress anche utilizzare questo approccio genitore/figlio predefinito. Ad esempio, se desideri utilizzare il framework Genesis, avrai bisogno sia del tema principale (il framework di base) che di un tema figlio per controllare il design.
Quando utilizzare un tema figlio
A parte alcune eccezioni che elencheremo di seguito, è necessario toujours usa un child theme se prevedi di apportare le tue modifiche a un tema WordPress esistente.
Quando non è necessario utilizzare un tema figlio
In generale, l'utilizzo di un tema figlio è una buona pratica ogni volta che personalizzi il tuo tema WordPress.
Tuttavia, esistono alcune eccezioni alla regola in cui potrebbe esserci un'opzione migliore rispetto all'utilizzo di un tema figlio.
Prima di tutto, se vuoi solo fare qualche piccolo ritocco CSS, potrebbe essere eccessivo creare un tema figlio solo per alcune modifiche.
Invece, puoi aggiungere il tuo CSS personalizzato utilizzando la funzione CSS aggiuntivo integrato nel personalizzatore di WordPress. Oppure puoi usare un plugin gratuito per WordPress come Simple CSS.
In secondo luogo, se si apportano modifiche che si desidera rendere indipendenti dal tema, un tema figlio potrebbe non essere l'opzione migliore.
Ad esempio, se registri una tassonomia personalizzata o un file tipo di post personalizzato, probabilmente non vuoi usare il file functions.php del tema figlio (perché vuoi mantenerli anche se cambi il tema). Invece, dovresti semplicemente aggiungere il codice al di fuori del tuo tema con un plugin come Frammenti di codice o il tuo plug-in personalizzato.
Come creare un tema figlio su WordPress
Ora che sai perché i temi figlio sono importanti, vediamo come puoi effettivamente creare un tema figlio per il tuo sito Web WordPress.
Innanzitutto, se stai usando il Ciao tema Elementor, abbiamo già creato un tema figlio per te: non è necessario farlo da solo. Potete prendi il child theme di Hello Elementor da WordPress.org. Puoi installarlo come qualsiasi altro tema WordPress (ti mostreremo anche come installare un tema figlio più avanti in questo post).
Se utilizzi un tema WordPress diverso, vale sempre la pena dare una rapida occhiata a Google per vedere se il tuo sviluppatore di temi WordPress fornisce un tema figlio. Ad esempio, Astra, GeneratePress e OceanWP hanno tutti strumenti / file per aiutarti a scaricare un tema figlio.
Se il tuo tema WordPress non ha già un tema figlio, puoi creare un tema figlio per qualsiasi tema WordPress:
- utilizzare un WordPress Plugin generatore di temi per bambini gratuito.
- Crea manualmente il tuo tema figlio.
Ti mostreremo come eseguire entrambi i metodi.
Come utilizzare un plugin WordPress per temi figlio
Un plug-in per il generatore di temi figlio ti consente di creare un tema figlio senza lasciare la dashboard di WordPress.
L'opzione più popolare qui è il plug-in di configurazione del tema figlio gratuito, attivo su oltre 300.000 siti web.
Child Theme Configurator non solo ti aiuta a creare i file del tema figlio, ma analizzerà anche il tema che stai utilizzando e il tema e i fogli di stile del carattere, se necessario.
Include anche altre funzioni utili se stai cercando di creare un tema figlio su un sito Web in cui hai già aggiunto contenuto. Ad esempio, può copiare i widget esistenti e le opzioni di personalizzazione nel child theme.
Una volta pronto il backup, inizia installando e attivando il plug-in gratuito Child Theme Configurator da WordPress.org. Quindi vai al menu Strumenti → Temi per bambini per creare il tema figlio.
Nella lista Seleziona un menu a discesa tema principale, seleziona il tema per il quale desideri creare il tema figlio. Quindi fare clic su Analizzi i dati:
Il plugin analizzerà quindi il tema principale per eventuali dipendenze.
Una volta terminato, vedrai alcune altre opzioni per configurare come creare il tuo tema figlio. Se non sei sicuro di cosa significhi un'impostazione specifica, puoi semplicemente lasciarla come predefinita:
Una volta terminate le scelte, fare clic sul pulsante in basso a creare un nuovo tema figlio.
E questo è tutto ! Il plugin creerà quindi il tema figlio per te. Tuttavia, non si attiverà non questo tema figlio.
Per attivarlo:
- Vai su Aspetto → Temi.
- Visualizza in anteprima l'aspetto del tuo sito Web con questo tema figlio (per assicurarti che funzioni, se il tuo sito Web ha un aspetto strano, probabilmente è a causa di un problema CSS).
- Attiva il tuo tema figlio come faresti con qualsiasi altro tema WordPress. Assicurati di lasciare il tema principale installato, tuttavia.
Dopo aver attivato il tema figlio, il plug-in Configuratore tema figlio offre anche altri strumenti utili per aiutarti a gestire il tema figlio. Ad esempio, se vai alla scheda File dalle impostazioni del plugin, puoi visualizzare tutti i file associati nel tema principale e nel tema figlio.
Quindi puoi copiare i file dal tema principale al tema figlio.
Ad esempio, se desideri apportare alcune modifiche a single.php, puoi copiare questo file nel child theme in modo da poterlo modificare in sicurezza:
Troverai anche molti altri strumenti per aiutarti a lavorare con i CSS.
Spiegheremo perché questi strumenti sono utili in seguito.
Come creare manualmente un tema figlio
Per questa sezione, supporremo che tu sappia un po 'di più su PHP e CSS. Se ti senti sopraffatto dalle istruzioni qui, ti consigliamo di utilizzare il plug-in gratuito della sezione precedente.
Per creare manualmente un tema figlio, è necessario creare due file (questi sono i minimi rigorosi per un tema figlio):
- style.css - per prima cosa tutto ciò che devi aggiungere è il codice boilplate.
- functions.php - questo ti permette di caricare il foglio di stile del tema principale. Senza di esso, il tuo tema figlio non sarebbe in grado di applicare il CSS dal tema principale, rendendo il tuo sito web estremamente brutto!
style.css
Innanzitutto, crea un file denominato style.css e aggiungi il codice seguente:
Innanzitutto, crea un file denominato style.css e aggiungi il seguente codice:
/* Nome del tema: Hello Elementor Child URI del tema: https://github.com/elementor/hello-theme/ Descrizione: Hello Elementor Child è un tema child di Hello Elementor, creato dal team di Elementor Autore: Elementor Team URI autore: https://elementor.com/ Modello: hello-elementor Versione: 1.0.1 Dominio del testo: ciao-elemento-figlio Licenza: GNU General Public License v3 o successiva. URI della licenza: https://www.gnu.org/licenses/gpl-3.0.html */
Assicurati di sostituire tutto ciò che viene dopo i due punti con le tue informazioni effettive:
- Nome del tema - nome del tema child.
- Tema URI - il sito web del tuo tema e la sua documentazione.
- Descrizione - una breve descrizione del tema.
- Auteur - il nome dell'autore del tema.
- URI autore: - il sito web dell'autore del tema.
- Modello - nome della cartella del tema principale (come denominato all'interno della cartella wp-content / themes). Questa è la linea più importante; il tema child non funzionerà senza di esso.
- Versione - numero di versione del tema child.
- Campo di testo - questo viene utilizzato per l'internazionalizzazione. Puoi semplicemente aggiungere "figlio" alla fine del nome del modello.
- licenza - lascia questo come predefinito.
- Licenza URI - lascia questo come predefinito.
Escludendo la riga template, non importa davvero cosa inserisci, quindi non stressarti troppo. Assicurati solo di inserire correttamente il nome della cartella del tema principale per il file modello.
Se in futuro desideri aggiungere i tuoi stili personalizzati, puoi aggiungerlo a questo foglio di stile sotto il codice boilplate.
functions.php
Quindi è necessario creare il file functions.php per il tema del tuo bambino. Di nuovo, questo è ciò che ti consente di caricare l'intero foglio di stile CSS del tema principale.
Nel file funzioni.php, aggiungi il codice seguente:
/ * Funzione per accodare il foglio di stile dal tema principale * / funzione child_enqueue__parent_scripts () { wp_enqueue_style ('parent', get_template_directory_uri (). '/ style.css'); } add_action ('wp_enqueue_scripts', 'child_enqueue__parent_scripts');
Carica i file sul sito Web di WordPress
Una volta che hai i tuoi file style.css et functions.php, devi caricarli sul tuo sito Web WordPress come nuovo tema.
Per fare ciò, connettiti al tuo sito Web WordPress tramite FTP.
Quindi vai alla directory dei temi del tuo sito web (wp-content / temi)e crea una nuova cartella per il tuo child theme.
Ad esempio, se la cartella del tema principale è ciao-elementor, puoi assegnare un nome alla cartella del tema figlio ciao-eletor-bambino per aiutarti a ricordarlo.
Quindi carica il tuo file style.css et functions.php all'interno di questa cartella:
Dopo aver scaricato entrambi i file puoi andare a Aspetto → Temi e attiva il tema figlio come faresti con qualsiasi altro tema WordPress.
Come installare un tema WordPress figlio
Abbiamo trattato alcuni di questi aspetti sopra nei Metodi specifici, ma vedremo ancora una volta come installare un child theme di WordPress.
Sarà anche utile se hai scaricato un tema figlio dal sito web del tuo sviluppatore di temi, invece di crearlo tu stesso.
Puoi installare un child theme di WordPress proprio come faresti con qualsiasi altro tema WordPress:
- Accesso a Aspetto → Temi nella dashboard di WordPress.
- Fare clic Aggiungi nuovo.
- Carica il file ZIP del tema figlio.
Durante il processo di installazione, WordPress rileva che stai scaricando un tema figlio e verifica che il tema principale esista:
Dopo aver scaricato il file, assicurati di farlo attivarlo.
Ricorda, affinché il tuo child theme funzioni, devi installarlo in quella voltail tema principale e il tema figlio.
Il tema figlio dovrebbe essere il tuo tema attivo, ma dovresti comunque avere installato il tema principale.
Ecco come dovrebbe apparire:
- Il tema figlio è il tema attivo
- Il tema principale è ancora installato, ma non attivo
Come personalizzare un tema figlio
Proprio come con la personalizzazione di un normale tema WordPress, hai diverse opzioni per "personalizzare" un tema figlio.
Per essere più precisi, lo sei non personalizzando realmente il tema figlio: stai utilizzando il tema figlio per personalizzare il tema (genitore) esistente.
Innanzitutto, ti mostreremo alcuni modi in cui puoi utilizzare il codice per personalizzare il tuo tema figlio. Successivamente, condivideremo un modo più semplice per personalizzare le cose con Generatore di temi Elementor.
Personalizza un tema figlio con il codice
Se desideri personalizzare il tuo tema figlio con il codice, dovrai avere una buona conoscenza di CSS, HTML e PHP.
Ecco alcune delle cose che puoi fare:
Aggiungi CSS personalizzato
Per personalizzare il tema figlio con CSS, puoi aggiungerlo direttamente al file style.css del tuo tema figlio.
Aggiungi CSS sotto il codice esistente nella parte superiore del file.
Qualsiasi CSS che aggiungi al tema figlio sostituirà quello del tema principale a condizione che utilizzi gli stessi selettori.
Sostituisci i modelli esistenti
Se desideri sostituire i modelli del tema principale, puoi:
- Copia il file modello dal tema principale al tema figlio.
- Modifica il file modello nel tuo tema figlio.
Ad esempio, se vuoi cambiare singolo.php, copi prima il file single.php dal tema principale al tema figlio (assicurandosi di mantenere la stessa struttura).
Quindi puoi modificare il codice nella versione del tema figlio di single.php.
Nota: WordPress utilizzerà il modello del tema figlio a condizione che abbia lo stesso nome. Per questo motivo, nascondi praticamente il modello esistente nel tema principale.
Se stai utilizzando il plugin Child Theme Configurator che abbiamo menzionato sopra, può aiutarti a copiare i file nel child theme senza lasciare la dashboard di WordPress.
Aggiungi nuovi modelli
Oltre a copiare e modificare modelli esistenti dal tema principale, puoi anche creare nuovi modelli personalizzati nel tema figlio.
Ad esempio, se desideri creare un modello per un tipo di articolo personalizzato che hai aggiunto, puoi aggiungere quei modelli nel tema figlio.
Personalizza un tema figlio con il generatore di temi Elementor
Se non hai familiarità, Generatore di temi Elementorti consente di personalizzare parte o tutto il tuo tema WordPress utilizzando un'interfaccia visiva.
Con Elementor Pro e Theme Builder, puoi creare modelli personalizzati per i modelli del tuo sito web:
- Top della mente
- footer
- Singolo (ad es. Un singolo post o pagina del blog)
- Archivi (ad es. La pagina che elenca tutti i post del tuo blog)
Questi modelli funzioneranno sia con il tema figlio che con il tema principale.
Con Elementor Theme Builder, non avrai bisogno di lavorare direttamente con il codice. Non è possibile aggiungere CSS personalizzati o copiare i file del modello PHP: fai tutto con il trascinamento della selezione.
Ad esempio, supponi di voler personalizzare l'intestazione per il tema figlio. Invece di dover copiare il tuo file header.php sul tema figlio e quindi modificare il PHP, puoi semplicemente progettare una nuova intestazione utilizzando l'interfaccia visiva e trascina e rilascia di Elementor. Quindi puoi applicare questa intestazione ovunque sul tuo sito web o solo su parti specifiche del tuo sito web.
Se sei nuovo in CSS, HTML e PHP, questo approccio senza codice ti consente di personalizzare il tuo tema figlio. E anche se lo fai, questo approccio visivo può comunque farti risparmiare molto tempo rispetto a PHP nei tuoi file modello.
Quando crei un nuovo modello con Elementor Theme Builder, sarai in grado di scegliere il tipo di modello. Ad esempio, un'intestazione.
Quindi puoi iniziare da una lavagna vuota o scegliere uno dei modelli Elementor Pro:
Da lì, puoi utilizzare le opzioni di trascinamento della barra laterale per controllare l'aspetto dell'intestazione:
Una volta terminato, puoi scegliere esattamente dove desideri utilizzare questo modello di intestazione:
Come eliminare un tema figlio su WordPress
Se vuoi smettere di usare il tuo child theme, puoi disattivarlo proprio come faresti con un normale tema WordPress.
Questo è :
- Vai su Aspetto → Temi.
- Attiva un altro tema. O il tema principale o un nuovo tema WordPress.
Ricorda che se disattivi il tema figlio e torni al tema principale, tutte le modifiche aggiunte tramite il tema figlio non saranno più presenti.
Invece, tornerai a progettare il tema principale.
Inizia a utilizzare un child theme di WordPress
Un tema figlio ti aiuta ad apportare modifiche in sicurezza al tuo tema WordPress.
Il tema figlio erediterà tutti i suoi stili dal tema principale, ma qualsiasi modifica apportata al tema figlio avrà la precedenza sul tema principale. Ciò significa che puoi aggiornare in sicurezza il tema principale senza perdere le modifiche apportate al tema figlio.
Per iniziare con un child theme di WordPress, puoi:
- Controlla se lo sviluppatore del tuo tema offre già un tema figlio. Se stai usando Hello Elementor, puoi farlo scarica un tema child per esso da GitHub.
- Utilizza il plug-in di configurazione del tema figlio gratuito.
- Crea manualmente il tuo tema figlio.
Da lì, puoi personalizzare il tuo tema figlio utilizzando CSS, HTML e PHP. Puoi anche saltare il codice e utilizzare Elementor Theme Builder per personalizzare il tuo tema utilizzando un'interfaccia visiva drag and drop.
Scopri anche alcuni temi e plugin premium per WordPress
Puoi usare altro plugin di WordPress per dare un aspetto moderno e per ottimizzare la gestione del tuo blog o sito web.
Ti offriamo qui alcuni plugin WordPress premium che ti aiuteranno a farlo.
1. Tabelle dei prezzi AP
La tabella dei prezzi di AP è a WordPress Plugin premium che semplifica la creazione di listini ricchi di funzionalità con interfacce intuitive. Offre 35 modelli predefiniti e un numero illimitato di opzioni.
con questo WordPress Plugin facile da usare, progettare una tabella dei prezzi sbalorditiva con pochi clic sarà molto semplice. Ti consente di creare griglie di prezzo illimitate offrendo la possibilità di aggiungere righe e colonne, impostare il bordo delle colonne, lo spazio delle colonne, la larghezza delle colonne e molto altro.
Leggi anche Come personalizzare il pulsante "Aggiungi al carrello" di WooCommerce
Questo plugin ti consente anche aggiungere contenuto audio, video e Google Map.
2.wp Page builder
WordPress Page Builder è il costruttore definitivo per il tuo sito Web WordPress che viene fornito con ottimi strumenti per generare qualsiasi post personalizzato, tassonomia personalizzata o metabox personalizzato.
Come caratteristiche ha tra gli altri: un tipo di post personalizzatoCPT, una tassonomia personalizzata, campi personalizzati avanzati, funzionalità di trascinamento della selezione, posizione supportata di Google Map, campi ripetibili supportati e molto altro ancora.
Download | Demo | Web hosting
3. Rankie
Rankie è un modulo WordPress molto utile progettato con l'obiettivo di controllare regolarmente le classifiche di WordPress su Google monitorando attentamente la posizione di ogni parola chiave.
Come plugin tracker di ranking, Rankie aggiornerà quotidianamente il posizionamento delle parole chiave e genererà rapporti accurati.
Leggi anche il nostro 6 domande regolari relative a SEO e reindirizzamenti
Incorpora anche un potente strumento di ricerca che genera preziosi elenchi di parole chiave. Google lo utilizza già per la ricerca.
Download | Demo | Web hosting
Risorse raccomandate
Scopri altre risorse consigliate per aiutarti a costruire e gestire il tuo sito web.
Conclusione
Ecco ! Questo è tutto per questo tutorial. Hai ancora domande sull'utilità di un child theme su WordPress? Fateci sapere nel sezione commenti e proveremo ad aiutare!
Tuttavia, sarai anche in grado di consultare il nostro risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet, consultando la nostra guida su Creazione di blog WordPress.
Non esitare a condividi con i tuoi amici sui tuoi social network preferiti.
...
