Come creare un tema figlio WordPress (2021)

Sai come fare un tema figlio di WordPress ?

Naturalmente, il tuo tema sembrerà adatto al tuo sito web, ma in alcuni punti dovrai modificarlo. 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 temi figlio per WordPress?

In WordPress, un tema figlio acquisisce tutte le caratteristiche, le funzionalità e altro del tema principale. Dall'altro lato, è possibile modificare il tema figlio senza cambiare quello principale. Ridurrà il tempo e lo sforzo di modifica del 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 invariate. Gli utenti possono utilizzare questo tema figlio anche su altri siti Web WordPress.

Avvisi prima di creare un tema figlio

Per creare un tema figlio WordPress , è richiesta abilità di programmazione poiché lavorerai con HTML e CSS. Sapere cosa cambiare è molto importante. Inoltre, avrai bisogno di una conoscenza di base di PHP, almeno copiando/incollando 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 prendessi 2 piccioni con una fava: uno lo sta spostando nel campo di prova e uno è usato 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 Crea figlio di WordPress .

Costruire il tema del primo figlio

Hai 2 opzioni quando crei temi figlio WordPress. È possibile utilizzare il modo manuale per acquisire familiarità con tutti i file. In caso contrario, 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. Chiamalo 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: LP 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, ^creerai un secondo file per importare i fogli di stile dal tema principale. 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 usi 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 devi 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 plug-in sul tuo sito. Per ulteriori guide sull'installazione del plug-in, fare clic qui.

Durante l'attivazione, vai su "Strumenti" -> "Temi figlio" e scegli LearnPress nel popup di richiesta del tema principale. Scegli "Analizza" per verificare la compatibilità come tema principale. Successivamente, dovrai nominare la cartella del tema figlio per il salvataggio dei 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 manualmente un tema figlio, il tuo tema figlio non erediterà menu e strumenti dal tema principale. Per risolverlo, usa il configuratore di temi figlio. Alla fine, scegli "Crea nuovo tema figlio" per finire. In questo passaggio, il tuo tema figlio avrà functions.php e style.css per ulteriori sviluppi. A quanto pare, ricorda di visualizzare in anteprima il plug-in figlio. Successivamente, seleziona "Attiva e pubblica" per pubblicare il tema figlio.

Ora inizieremo a personalizzare il tema del tuo bambino.

Personalizzazione del tema figlio di WordPress

Creeremo un tema figlio WordPress un po' diverso dal tema genitore 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 post 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 CSS e HTML della pagina. Quando sposti il ​​mouse sulle righe HTML, lo strumento di ispezione ti mostrerà nella finestra in alto 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 incollala 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 rilanciarlo 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 "style.css" del tema principale e incollarlo nel tema figlio e personalizzarlo.

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

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

'–global–color-background' è una variabile usata nei vari punti del tema. Dovrai cambiare il valore della variabile se devi cambiare il colore in quei punti contemporaneamente. Passa a /wp-content/themes/learnpress nella cartella di installazione di WordPress e apri il file style.css nell'editor di testo per cercare il posto di –global–color-background. Quella variabile può essere modificata con un'altra variabile. Puoi trovare un sacco 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 alle combinazioni di colori pianificate. 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 prendono solitamente 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 figlio. 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 link "Proudly powered by WordPress" nel footer e aggiungiamo un avviso di copyright. Per iniziare, elimina tutti 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 seguente.

 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 la nuova notifica di copyright.

Aggiunta di 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ù popolare che tutti gli utenti possono incontrare. Inoltre, se le cose non vanno per il verso giusto, puoi sempre cancellarlo e ricominciare da capo.

Come creare un tema figlio di 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)