Supponiamo di voler aggiungere una nuova area widget al nostro sito WordPress, nel nostro esempio aggiungeremo un\’area widget in alto nel tema twentyfifteen.
La procedura consiste nel modificare il file functions.php per cui è importante lavorare direttamente con un tema child, altrimenti ad ogni aggiornamento del tema genitore, la modifica andrà persa.
Se desideri informazioni su come creare un tema child, leggi questo articolo: “Tema child WordPress, come crearlo?“
Apriamo il file functions.php e cerchiamo register_sidebar
Se abbiamo trovato Register_sidebar
significa che il nostro tema in uso sta già registrando alcune aree widget. Nel nostro caso avremo:
register_sidebar( array( 'name' => __( 'Widget Area', 'twentyfifteen' ), 'id' => 'sidebar-1', 'description' => __( 'Add widgets here to appear in your sidebar.', 'twentyfifteen' ), 'before_widget' => '<aside id="%1$s" class="widget %2$s">', 'after_widget' => '</aside>', 'before_title' => '<h2 class="widget-title">', 'after_title' => '</h2>', ) );
Per aggiungere un’area widget nell’header…
dovremo semplicemente ricopiare questo codice e incollarlo immediatamente sotto avendo cura di modificare il valore name, id e description.
Avremo quindi:
register_sidebar( array( 'name' => __( 'Widget Area', 'twentyfifteen' ), 'id' => 'sidebar-1', 'description' => __( 'Add widgets here to appear in your sidebar.', 'twentyfifteen' ), 'before_widget' => '<aside id="%1$s" class="widget %2$s">', 'after_widget' => '</aside>', 'before_title' => '<h2 class="widget-title">', 'after_title' => '</h2>', ) ); register_sidebar( array( 'name' => __( 'Header Widget Area', 'twentyfifteen' ), 'id' =>'header-1', 'description' => __( 'Add widgets here to appear in your header.', 'twentyfifteen' ), 'before_widget' => '<aside id="%1$s" class="widget %2$s">', 'after_widget' => '</aside>', 'before_title' => '<h2 class="widget-title">', 'after_title' => '</h2>', ) );
Se invece NON abbiamo trovato Register_sidebar
dovremo aggiungere una nuova funzione. Procediamo in questo modo, aggiungendo quanto segue:
/* Registro la mia area widget.
*/
function register_widget_areas() {
register_sidebar( array(
'name' => __( ' Header Widget Area', 'twentyfifteen' ),
'id' =>'header-1',
'description' => __( 'Add widgets here to appear in your header.', 'twentyfifteen' ),
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
) );
}
add_action( 'widgets_init', 'register_widget_areas' );
;
Il prossimo passo è: aggiungere l’area widget nella location desiderata.
Poichè nel nostro esempio stiamo aggiungendo un\’area widget all’header, procederemo a modificare il file header.php
Anche in questo caso lavoriamo sempre sul nostro tema child.
Aggiungiamo il seguente codice subito dopo <div id=”content” class=”site-content”>
<?php if ( is_active_sidebar( 'header-1' ) ) : ?> <div class="header-area"> <?php dynamic_sidebar( 'header-1' ); ?> </div> <?php endif; ?>
Per iniziare ad usare la nuova area widget, apri il tuo pannello di amministrazione, Aspetto -> Widget ed aggiungi il contenuto che ritieni opportuno. Valuta di aggiungere a tuo piacimento eventuali regole css per adattare il tuo widget al tema in uso.
Buon lavoro e per eventuali domande su come aggiungere area widget a WordPress non esitare ad inserire un tuo commento all’articolo 😉
Molto interessante!!!
Ma se io ho un sito dove ho una front-page diviso in sezioni e ho un file front-page.php e tanti file php quante sono le sezioni della front-page…..e voglio creare una nuova sezione con un nuovo widget da inserire nella front-page….vanno bene le stesse righe di codice?? e dove devo incollarle ed editarle??? ( oltre al file functions.php)
Ciao Matteo,
puoi modificare vari file per inserire il richiamo alla nuova area widget.
Ad esempio: header.php, index.php, page.php e altri file che trovi nel tuo tema.
Va ovviamente collocato correttamente in base alla location scelta. Nell’esempio che ho riportato l’area è stata aggiunta all’header.
Ciao,
premettendo che non capisco tante cose (ma sto studiando), ho provato a creare un widget nell’header. Mentre per quanto riguarda l’inserimento del codice nel file header del child, non mi ha dato problemi (è corto, ho copiato tutto, rinominato correttamente e inserito nel child il codice compreso di modifiche), ho problemi a creare nel child la funzione di functions.php
In questo momento nel sito la puoi vedere perché è stato aggiunto il codice al functions del tema di origine ma vorrei capire perché se creo un mio file function nel child e aggiungo queste righe non funziona. Le ho provate un po’ tutte, si tratta di un tema acquistato. Ho provato a riscrivere anche tutto il codice precedente che è inglobato, se ci ho capito qualcosa in un “if” e un “ifend”, ho provato a tenerlo fuori, ho provato solo una parte, ecc … ma in ogni caso la pagina restituita è sempre bianca. Funziona solo se il codice che hai fornito è inserito nel functions del tema di origine.
Quindi combino qualche disastro, certamente d’ignoranza.
Posso chiederti una mano mostrandoti la parte di codice originale (una parte alquanto ampia “per andare sul sicuro”) del file functions per capire al dettaglio dove sbaglio?
Cordialità,
Andrea.
Ciao Andrea, probabilmente c’è qualche errore nella creazione del tema child (se non ti è stato fornito insieme a quello acquistato). Prova a leggere questo articolo “Tema child wordpress, come crearlo?“. In particolare nota che: “il functions.php di un tema child non sovrascrive il file corrispondente nel tema genitore. Viene invece caricato in aggiunta al functions.php del genitore.
Per cui la procedura da compiere è quella di inserire nel file functions.php del tema child solo e soltanto la funzione aggiuntiva che desideri inserire.“. Fammi sapere.
Ciao,
devo riscrivere perché il commento non è stato pubblicato. Cerco di essere più breve.
Il mio file style nel child è l’esatta copia di tutto il file originale perché l’ho modificato parecchio e non ricordo tutto. Può essere un problema?
Ho rinominato il file child a mio piacimento.
Se considero la funzione d mio interesse
register_sidebar( array(
‘name’ => __( ‘Header Widget Area’, ‘twentyfifteen’ ),
‘id’ =>’header-1′,
‘description’ => __( ‘Add widgets here to appear in your header.’, ‘twentyfifteen’ ),
‘before_widget’ => ”,
‘after_widget’ => ”,
‘before_title’ => ”,
‘after_title’ => ”,
) );
devo sostituire il nome twentyfifteen con il nome del tema originale o con il nuovo nome che ho dato al tema child?
Come mi hai suggerito functions.php non sovrascrive quindi sarebbe sufficiente aggiungere. Ma cosa significa esattamente? Io ho un file functions.php vuoto nel mio child. Aggiungo semplicemente ciò che ho scritto sopra (o meglio ciò che tu ci hai insegnato) nel file o devo aggiungere qualche comando?
In pratica è sufficiente che io scriva
register_sidebar( array(
‘name’ => __( ‘Header Widget Area’, ‘twentyfifteen’ ),
‘id’ =>’header-1′,
‘description’ => __( ‘Add widgets here to appear in your header.’, ‘twentyfifteen’ ),
‘before_widget’ => ”,
‘after_widget’ => ”,
‘before_title’ => ”,
‘after_title’ => ”,
) );
sul file bianco una volta chiarita la questione del nome del tema oppure devo inserirlo in qualche contesto?
grazie mille, sono stato più breve ma penso più chiaro.
Grazie,
Andrea.
Nel functions.php del tuo tema child aggiungi solo la funzione, chiaramente indica l’inizio di un tag PHP con .
Per il nome del tema, inserisci il nome del tema in uso
Articolo utilissimo e scritto in modo chiarissimo ed esaustivo. Grazie mille!
Ciao, vorrei aggiungere widget nell’area header e sto modificando un tema child che nel header.php del genitore non ha
quindi non capisco come procedere. Grazie
Scusami ma non ho capito. Non trovi il file header?