Il tema WordPress predefinito nel 2014 era Venti Quindici, un modello con una barra laterale fissa a sinistra che si trasforma in un'intestazione nella visualizzazione mobile, un'area minima del piè di pagina, un'ottima tipografia e una bella area dell'immagine in primo piano. Da allora abbiamo visto l'uscita di TwentySixteen, TwentySeventeen, TwentyEighteen, TwentyNineteen e l'attuale tema gratuito defualt venti venti.
Questi temi sono fantastici, passano attraverso un intero processo per essere scelti come tema WordPress predefinito, tuttavia, possiamo capire che gli utenti vogliono ancora personalizzarlo e renderlo proprio.
Poiché questi temi in genere offrono alcune limitazioni come una singola barra laterale (che è chiamata area pronta per i widget in WordPress), ti mostreremo come aggiungere un widget al piè di pagina o come modificare il codice di qualsiasi tema per aggiungere più aree di widget a un tema.
L'aggiunta di un'area widget al piè di pagina da TwentyFifteen a TwentyTwenty non è diverso dall'aggiunta di un'area widget nella maggior parte dei temi WordPress.
Se sei interessato a vedere altri temi WordPress, ti consigliamo di guardare altri temi popolari come Divi da Elegant Themes. Dai un'occhiata alla nostra recensione completa qui.
Crea un tema figlio di WordPress
Quando si personalizzano i file modello di un tema WordPress per creare un'area widget, è buona norma creare un file bambino tema.
Il concetto di tema figlio è abbastanza semplice: non vogliamo interrompere la possibilità di aggiornare il tema a versioni appena rilasciate.
Quando si creano personalizzazioni a un tema figlio, le modifiche verranno aggiunte al tema figlio anziché al tema originale. Quando è disponibile una versione aggiornata del tema originale, sarai in grado di aggiornare la tua copia del tema originale e lasciare intatte le modifiche nel tema figlio.
Se stai cercando ulteriori suggerimenti e trucchi relativi a WordPress, visita il resto della sezione su CollectiveRay.
1. Creare directory e file del tema figlio
Come primo passaggio, crea una cartella all'interno del file wp-content> temi cartella. Chiama la cartella venticinque bambini, ventidue bambini. Tuttavia, è importante che il tema figlio segua la convenzione di denominazione del genitore.
Quindi se viene chiamato il genitore venticinque, il bambino deve essere chiamato venticinque figli. Allo stesso modo, se si chiama il tema che stai personalizzando venti venti, il tema figlio deve essere chiamato tè andato a vent'anni.
Dopo aver creato il tema figlio, è necessario creare due file aggiuntivi.
Dovrebbe essere chiamato il file che verrà utilizzato per eseguire le modifiche negli stili CSS style.css. Abbiamo anche bisogno di functions.php file per il tema figlio, dove possiamo aggiungere alcune funzionalità richieste.
Questi due file vanno nella cartella dei venticinque figli o nella rispettiva cartella che hai creato per il tema figlio.
2. Aggiungi il file per l'area widget di WordPress (a piè di pagina o dove preferisci)
Poiché l'area del widget deve essere aggiunta al piè di pagina del tema, è necessario disporre di un file per il codice del piè di pagina.
Il modo più sicuro per codificare un file modello WordPress è iniziare da un modello già pronto, quindi aggiungere ciò che desideri e / o eliminare ciò che non desideri.
In questo caso, prendi il file footer.php dal tema Twenty Fifteen, o dal tema Twenty Twenty o come si chiama il tema che stai personalizzando e incollalo nel tuo tema child.
3. Aggiungere il codice ai file del tema figlio per creare il widget
Al momento, abbiamo solo file vuoti, quindi così com'è, il tema figlio non può fare nulla.
Per poter apportare modifiche, un child theme funzionante necessita di alcuni commenti all'inizio di style.css. Aperto style.css nel tuo editor di codice preferito e aggiungi questo bit di codice.
/*Theme Name: Twenty Fifteen ChildTheme URI: http://example.com/twenty-fifteen-child/Description: Twenty Fifteen Child ThemeAuthor: John DoeAuthor URI: http://example.comTemplate: twentyfifteenVersion: 1.0.0License: GNU General Public License v2 or laterLicense URI: http://www.gnu.org/licenses/gpl-2.0.htmlTags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-readyText Domain: twentyfifteenchild*/
La parte davvero importante qui è in Modello quindi nell'esempio sopra, lo è Modello: venticinque. Questo sta istruendo WordPress sul nome del tema principale.
Assicurati che il nome sia esattamente lo stesso del nome della cartella del tema principale (maiuscole / minuscole o spazi, trattini, trattini bassi, ecc. Sono importanti: tutto deve corrispondere esattamente al nome della cartella del tema principale).
Quindi, apri functions.php e aggiungi il seguente bit di codice.
Sebbene questo passaggio non sia strettamente obbligatorio, è altamente raccomandato perché con questo codice il tema figlio erediterà l'aspetto grafico del suo genitore.
Quindi scriviamo una funzione che si aggancia al file wp_enqueue_scripts () action hook. All'interno della funzione tu enqueue foglio di stile del tema principale utilizzando il funzione wp_enqueue_style ().
Ciò garantisce che il tema figlio erediti gli stili del suo genitore ignorando ogni regola di stile specifica nel suo style.css file.
<?php
//Importa gli stili principali nel modo giusto e aggiungi altri fogli di stile se necessario.
funzione venti_quindici_bambini_stili() {
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}
add_action('wp_enqueue_scripts', 'twenty_fifteen_child_styles');
Il tema del tuo bambino è per lo più finito!
Accedi al Temi pannello nell'installazione di WordPress e dovresti vedere il tuo tema Twenty Fifteen Child pronto per l'uso. Clic Attivare e visita il tuo sito. Dovrebbe essere esattamente lo stesso del tema principale.
Aggiunta dell'area widget
Ora dobbiamo aggiungere il codice per definire l'area del widget del footer. Ecco lo snippet che entra in functions.php.
/ ** * Registra l'area widget del piè di pagina. * * @since Twenty Fifteen Child 1.0 * * @link https://codex.wordpress.org/Function_Reference/register_sidebar * / function twentyfifteen_child_widgets_init () {register_sidebar (array ('name' => __ ('Footer Widgets', 'twenty -fifteen-child '),' id '=>' sidebar-2 ',' description '=> __ (' Aggiungi widget qui da visualizzare nell'area piè di pagina. ',' Twenty-fifteen-child '),' before_widget ' => ' ',' after_widget '=>' ',' before_title '=>' ',' after_title '=>' ',)); } add_action ('widgets_init', 'twentyfifteen_child_widgets_init');
Il codice sopra aggiunge una funzione che registra una barra laterale con l'ID di sidebar-2 (il tema Twenty Fifteen ha già una barra laterale con l'ID di sidebar-1), quindi aggancia questa funzione nella widgets_init () action hook.
Quindi, andiamo avanti e aggiungiamo la nuova barra laterale al piè di pagina. Aperto footer.php in un editor di codice e inserisci questo frammento appena sotto questa riga di codice: <footer id="colophon" class="site-footer" role="contentinfo">.
Il codice sopra prima controlla se la sidebar-2 ha dei widget, in tal caso mostra la sidebar all'interno di un div con la classe "widget-area".
La prossima cosa che devi fare è andare al pannello Widget del tuo back-end di WordPress, individuare la barra laterale Footer Widgets e aggiungervi alcuni widget. Salva i widget mentre li aggiungi e controlla il risultato.
Quanto sopra mostra un paio di widget nella barra laterale del piè di pagina di Twenty Fifteen Child e puoi vedere che il testo era troppo vicino alla parte superiore del contenitore e il margine inferiore dei widget era troppo alto. Questo piccolo frammento in style.css migliorerà notevolmente l'aspetto.
.site-footer .widget {margin: 0; imbottitura: 10% 20% 0; } .site-footer .widget: last-child {margin-bottom: 10%; }
Ecco un altro esempio di aggiunta di un'altra barra laterale:
if (is_active_sidebar ('sidebar-2')
|| is_active_sidebar ('sidebar-3')):
?>
">
if (is_active_sidebar ('sidebar-2')) {?>
<?php }
if (is_active_sidebar ('sidebar-3')) {?>
</div>
Il codice che devi usare dipenderà dal tema che stai usando nella realtà.
Il tuo widget footer di WordPress è pronto!
In questo post, abbiamo visto come aggiungere una nuova area widget al piè di pagina del tema Twenty Fifteen WordPress. Sebbene abbiamo posizionato l'area widget nel piè di pagina del tema, puoi utilizzare questa logica per aggiungere aree widget praticamente ovunque in un tema seguendo passaggi simili.
Per favore, lasciare un utile commenta con i tuoi pensieri, quindi condividi questo articolo sui tuoi gruppi di Facebook che lo troverebbero utile e raccogliamo insieme i frutti. Grazie per la condivisione e per essere gentile!
Disclosure: Questa pagina può contenere collegamenti a siti esterni per prodotti che amiamo e consigliamo vivamente. Se acquisti prodotti che ti suggeriamo, potremmo guadagnare una commissione per segnalazione. Tali commissioni non influenzano le nostre raccomandazioni e non accettiamo pagamenti per recensioni positive.
e molti altri ...