[Come] Aggiungere un'area widget a qualsiasi tema WordPress (2021)

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 TwentyTwenty.

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 di Elegant Themes. Dai un'occhiata alla nostra recensione completa qui.

Contenuti[Mostra]

piè di pagina dell'area widget di wordpress e altre posizioni

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 di saperne di più trucchi e suggerimenti 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.

struttura della directory del tema figlio di wordpress

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 Child
 Theme URI:    http://example.com/twenty-fifteen-child/
 Description:  Twenty Fifteen Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     twentyfifteen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text 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 
//Import parent styles the right way and add other stylesheets if necessary.
function twenty_fifteen_child_styles() {
  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.

Widget del piè di pagina di Wordpress
Widget del piè di pagina nel tema Twenty Fifteen

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à.

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.

Scarica l'elenco dei 101 trucchi per WordPress che ogni blogger dovrebbe conoscere

101 trucchi per WordPress

Fare clic qui per eseguire il download ora

L'autore
David Attard
Autore: David AttardSito web: https://www.linkedin.com/in/dattard/
David ha lavorato nel o intorno al settore online / digitale negli ultimi 18 anni. Ha una vasta esperienza nei settori del software e del web design utilizzando WordPress, Joomla e le nicchie che li circondano. In qualità di consulente digitale, il suo obiettivo è aiutare le aziende a ottenere un vantaggio competitivo utilizzando una combinazione del loro sito Web e delle piattaforme digitali disponibili oggi.

Un'altra cosa... Sapevi che anche le persone che condividono cose utili come questo post sembrano FANTASTICHE? ;-)
Si 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.

Autore / i in primo piano su:  Inc Magazine Logo   Logo di Sitepoint   Logo CSS Tricks    logo webdesignerdepot   Logo WPMU DEV   e molti altri ...