Come creare un tema Child WordPress (2021)

Sai come fare? un tema WordPress per bambini ?

Ovviamente, il tuo tema sembrerà adatto al tuo sito web, ma in alcuni punti dovrai modificarli. Apportare modifiche al tema figlio è una scelta preferibile per modificare il tuo sito. Inoltre, conoscere il tema figlio è una delle cose di base di WordPress che dovresti sapere. Puoi iniziare a conoscere WordPress qui.

Esaminiamo il processo per creare un tema figlio di WordPress.

Perché dovresti usare i temi figlio per WordPress?

In WordPress, un tema figlio acquisisce tutte le caratteristiche, le funzionalità e altro del tema principale. D'altra parte, è possibile modificare il tema figlio senza cambiare quello padre. Ridurrà il tempo e lo sforzo di modificare il sito per te. Inoltre, gli aggiornamenti del tuo tema WordPress rimangono più sicuri e più stabili. Quando personalizzi quello figlio, tutte le modifiche e le personalizzazioni sul genitore rimarranno le stesse. Gli utenti possono utilizzare questo tema figlio anche su altri siti Web WordPress.

Avvisi prima di creare un tema per bambini

Per creare un tema figlio WordPress , è necessaria l'abilità di codifica poiché lavorerai con HTML e CSS. Sapere cosa cambiare è molto importante. Inoltre, avrai bisogno di una conoscenza di base di PHP, almeno di copiare/incollare i frammenti di codice da altre fonti.

Ti consigliamo sinceramente di esercitarti nell'ambiente di sviluppo. Questo è un posto dove puoi farlo senza aver paura di rovinare il tuo sito principale. È come se prendi 2 piccioni con una fava: uno lo sposta nel campo di prova e l'altro viene utilizzato come sviluppo del tema.

Un'altra cosa, il tema principale dovrebbe adattarsi all'aspetto e alle funzionalità ai tuoi scopi. Infatti, meno modifiche apporti, migliore sarà il tuo sito.

Nelle parti seguenti, utilizzeremo il tema LearnPress come esempio per una migliore illustrazione del tema WordPress create child .

Costruire il tema del primo figlio

Hai 2 opzioni quando crei temi figlio WordPress. Puoi usare il modo manuale per familiarizzare con tutti i file. Altrimenti, l'applicazione di un plug-in funzionerà con file e cartelle complicati.

Ora, inizieremo la personalizzazione.

Utilizzo del codice

Per iniziare, aprirai /wp-content/themes/ nell'installazione di WordPress e creerai una nuova cartella per il tuo tema figlio. Nominalo come preferisci.

Quindi, devi creare i primi 2 file per il tuo tema figlio. Apri un editor di testo e incolla il codice seguente nel documento vuoto:

 1 Theme Name: WPB Child Theme 2 Theme URI: https://www.wpbeginner.com/ 3 Description: A LearnPress child theme 4 Author: ThimPress 5 Author URI: https://thimpress.com 6 Template: learnpress 7 Version: 1.0.0 8 Text Domain: learnpresschild

Puoi modificare le informazioni mentre pianifichi e salvare questo file nel tuo file style.css nella cartella del tema figlio recente. Bene, hai appena creato il foglio di stile principale del tema figlio.

Successivamente, si farà un file di 2 ^° per importare i fogli di stile dal tema genitore. Crea un nuovo documento nel tuo editor di testo e copia questo codice:

 1 /* enqueue scripts and style from parent theme */ 2 3 function learnpress_styles() { 4 wp_enqueue_style( 'child-style', get_stylesheet_uri(), 5 array( 'learn-press-style' ), wp_get_theme()->get('Version') ); 6 ( 7 add_action( 'wp_enqueue_scripts', 'learnpress_styles');

Quando utilizzi LearnPress come tema principale, questo codice inizierà a funzionare. Pertanto, la maggior parte dei temi funzionerà in questo modo. Salva questo file e diventerà la cartella functions.php del tuo tema figlio.

Dopo questi passaggi, avrai un tema figlio di base. In "Aspetto", scegli "Temi" e "Attiva". Pertanto, il tuo sito inizierà a utilizzare il tema figlio. Se hai bisogno di personalizzare, passa alla parte successiva.

Utilizzo dei plugin

Ti suggeriamo di utilizzare il plugin Child Theme Configurator. Poiché non richiede codifica, puoi facilmente apportare modifiche e personalizzazioni.

Innanzitutto, installa il plugin sul tuo sito. Per ulteriori guide sull'installazione dei plug-in, fare clic qui.

Durante l'attivazione, vai su "Strumenti" -> "Temi figli" e scegli LearnPress nel tema principale che chiede il popup. Scegli "Analizza" per verificare la compatibilità come tema principale. Successivamente, dovrai nominare la cartella del tema figlio per salvare i file e dove salvarli. Nell'impostazione predefinita, scegli "Fai clic per modificare gli attributi del tema figlio". Quindi soddisferai le informazioni del tema figlio.

Quando crei un tema figlio manualmente, il tuo tema figlio non erediterà menu e strumenti dal tema padre. Per risolverlo, usa il Child Theme Configurator. Alla fine, scegli "Crea nuovo tema figlio" per finire. In questo passaggio, il tema figlio avrà functions.php e style.css per ulteriori sviluppi. A quanto pare, ricorda di visualizzare l'anteprima del plug-in figlio. Successivamente, seleziona "Attiva e pubblica" per pubblicare il tema figlio.

Ora inizieremo a personalizzare il tema figlio.

Personalizzazione del tema WordPress Child

Creeremo il tema figlio di WordPress in modo un po' diverso dal tema principale aggiungendo codice al file "style.css".

Copia il codice da Firefox/Chrome Inspector

Puoi utilizzare i widget Inspector di Chrome e Firefox per scoprire il codice CSS necessario. Inoltre, puoi utilizzare questi strumenti per accedere agli elementi CSS e HTML di tutti i siti.

Per vedere un file CSS di un articolo o di un sito, fai clic con il pulsante destro del mouse e scegli "Ispeziona". Il tuo schermo si dividerà in 2 metà e potrai vedere il CSS e l'HTML della pagina. Quando sposti il ​​mouse sulle righe HTML, lo strumento di ispezione ti mostrerà nella finestra in alto. Fa anche le regole CSS.

Ci sarà un cambio di colore temporaneo nella parte posteriore. Per renderlo permanente, copia questa riga di regole CSS e incolla nel file style.css del tema figlio:

 1 body { 2 background-color: #fdf8ef; 3 )

Salva le modifiche e visualizza l'anteprima del sito. Inoltre, puoi riavviarlo per qualsiasi elemento nel foglio di stile del tema. Bene, ti diamo un foglio di stile completo per un tema figlio qui:

 1 Theme Name: WPB Child Theme 2 Theme URI: https://www.thimpress.com 3 Description: A LearnPress child theme 4 Author: ThimPress 5 Author URI: https://www.thimpress.com 6 Template: learnpress 7 Version: 1.0.0 8 Text Domain: learnpresschild 9 */ 10 11 .site-title { 12 color: #7d7b77; 13 ) 14 .site-description { 15 color: #aba8a2; 16 ) 17 body { 18 background-color: #fdf8ef; 19 color: #7d7b77; 20 ) 21 .entry-footer { 22 color: #aba8a2; 23 ) 24 .entry-title { 25 color: #aba8a2; 26 font-weight: bold; 27 ) 28 .widget-area { 29 color: #7d7b77; 30 )

Copia il codice dal file style.css del tema principale

Come puoi vedere, è possibile copiare dal file theme'style.css genitore e incollarlo nel tema figlio e personalizzare.

Ad esempio, il codice per il colore di sfondo della pagina è:

 1 background-color: var(--global--color-background);

'–global–color-background' è una variabile utilizzata nei vari punti del tema. Dovrai cambiare il valore della variabile se hai bisogno di cambiare il colore in quei posti allo stesso tempo. Spostati in /wp-content/themes/learnpress nella cartella di installazione di WordPress e apri il file style.css nell'editor di testo per cercare la posizione del –global–color-background. Quella variabile può essere cambiata con un'altra variabile. Puoi trovare una grande quantità di variabili di colore nel file style.css del tema principale. Dopo aver selezionato le opzioni di colore adatte, copi e incolli quella riga di codice nel file style.css del tema figlio e sostituisci quelle vecchie con quelle nuove scelte per la tua tendenza cromatica. Quindi, i colori verranno divisi in base agli schemi di colori pianificati. Questo processo renderà le tue combinazioni di colori coerenti e modificate rapidamente.

Personalizzazione dei file modello

In un tema, le aree di gestione dei file in un sito Web sono chiamate modelli. I modelli in genere prendono il nome dalla sezione che gestiscono. Pertanto, alcune sezioni importanti sono gestite da vari file o modelli di contenuto.

Per personalizzare un modello, trova quel file nel tema principale e copialo nel tema secondario. Quindi, aprilo nell'editor di testo e inizia a modificarlo.

Ti mostreremo un tutorial per questo processo con il file footer.php. Copialo nella cartella del tema figlio e aprilo in un editor di testo normale. Ad esempio, eliminiamo il collegamento "Proudly powered by WordPress" nel piè di pagina e aggiungiamo un avviso di copyright. Per iniziare, elimina tutto tra i tag <div class="powered-by">.

 1 <div class="powered-by"> 2 <?php 3 printf( 4 /* translators: %s: WordPress. */ 5 esc_html__( 'Proudly powered by %s.', 'learnpress' ), 6 '<a href="' . esc_url( __( 'https://wordpress.org/', 7 'learnpress' ) ) . '">WordPress</a>' 8 ); 9 ?> </div><!-- .powered-by -->

Quindi incollerai il codice che trovi sotto quei tag nell'esempio qui sotto.

 1 <div class="powered-by"> 2 <p>&copy; Copyright <?php echo date("Y"); ?>. All rights reserved.</p> 3 </div><!-- .powered-by -->

Scegli “Salva modifiche” e quando torni sul sito, vedrai il nuovo avviso di copyright.

Aggiungere funzionalità al tuo tema figlio di WordPress

Per modificare o aggiungere una funzione al tuo sito, dovrai cercare il file functions.php. Questo file utilizza il codice PHP per eseguire questo processo.

Di solito, sei guidato a copiare e incollare frammenti di codice nel file function.php ma verranno eliminati quando aggiorni PHP o il tuo tema. Pertanto, ti suggeriamo di utilizzare un tema figlio per aggiungere i frammenti di codice. Bene, passiamo al processo di aggiunta dei widget. Aggiungi lo snippet di codice al file functions.php del tema figlio.

 1 <?php 2 // Register Sidebars 3 function custom_sidebars() { 4 5 $args = array( 6 'id' => 'custom_sidebar', 7 'name' => __( 'Custom Widget Area', 'text_domain' ), 8 'description' => __( 'A custom widget area', 'text_domain' ), 9 'before_title' => '<h3 class="widget-title">', 10 'after_title' => '</h3>', 11 'before_widget' => '<aside class="widget %2$s">', 12 'after_widget' => '</aside>', 13 ); 14 register_sidebar( $args ); 15 16 ) 17 add_action( 'widgets_init', 'custom_sidebars' ); 18 ?>

Salva e vai su "Aspetto" -> "Widget" per vedere il nuovo strumento. Inoltre, puoi cercare ulteriori informazioni sull'aggiunta di un'area funzione. Puoi aggiungere molte funzionalità aggiungendo frammenti di codice al file functions.php del tuo sito.

Questo è tutto su come creare un tema figlio in WordPress . Passiamo alla parte dell'errore di correzione.

Errori di correzione

Puoi incontrare qualsiasi problema creando un tema figlio in qualsiasi momento. Pertanto, non dovresti arrenderti facilmente.

I problemi di sintassi possono essere causati da alcune mancanze nel processo di codifica. Inoltre, è l'errore più comune che tutti gli utenti possono incontrare. Inoltre, se le cose non vanno bene, puoi sempre cancellarlo e ricominciare da capo.

Come creare un tema Child WordPress: Conclusione

Ci auguriamo che tu possa acquisire conoscenze sulla creazione di un tema figlio attraverso il nostro articolo. Grazie per le tue letture!

Per saperne di più: Come correggere l'errore HTTP 500 WordPress (2021)