Le aree dei widget in WordPress dipendono sempre dal template utilizzato, quindi per aggiungere un’area widget personalizzata bisogna modificare il template specifico che ci interessa.
Prima di cominciare procuriamoci tutto il necessario:
- Avere installato WordPress (lo si può scaricare da qui)
- Utilizziamo il template Twenty Sixteen (ricordo che la procedura è valida per qualunque template)
Se abbiamo tutto pronto cominciamo.
1. Apriamo l’editor di WordPress
L’editor si trova in Bacheca > Aspetto > Editor.
2. Andiamo su functions.php
Una volta aperto l’editor andiamo su functions.php, selezionabile dall’elenco a destra.
A questo punto spostiamoci in fondo al file e aggiungiamo il seguente codice:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
function nuovo_widget() { register_sidebar( array( "name" => "Nuova Sidebar di Petar", "description" => "Barra laterale di sinistra", "id" => "nuova-sidebar", "before_widget" => "<div>", "after_widget" => "</div>", "before_title" => "<h2 class=\"rounded\">", "after_title" => "</h2>" ) ); } add_action( "widgets_init", "nuovo_widget"); |
Faccio notare come il nome della funzione, nuovo_widget(), è assolutamente arbitrario, purché rispetti i parametri di programmazione in PHP.
Dentro eseguiamo il metodo register_sidebar che permette di definire una specifica sidebar.
I parametri passabili tramite array sono:
- name – il nome della sidebar, un testo descrittivo
- description – la descrizione della sidebar, che apparirà sotto il suo nome nella bacheca, non è obbligatorio
- id – identificativo della sidebar, deve essere tutto minuscolo e senza spazi, di predefinito è un valore numerico intero autoincrementale
- before_widget – codice HTML da anteporre ad ogni widget
- after_widget – codice HTML da posporre ad ogni widget
- before_title – codice HTML da anteporre ad ogni titolo di widget
- after_title – codice HTML da posporre ad ogni titolo di widget
Una volta aggiunto il codice premiamo su Aggiorna file.
3. Andiamo su page.php
Adesso aggiungiamo il widget in tutte le posizioni che desideriamo. Nel nostro caso lo aggiungeremo sul lato sinistro di tutte le pagine, modificabili da file page.php
Andiamo quindi a modificare il file page.php
Individuiamo la riga con get_header(); e posizioniamoci alla riga successiva aggiungendo il seguente codice:
|
1 2 3 4 5 |
<?php if( is_active_sidebar('nuova-sidebar') ) { ?> <div class="barra-sinistra"> <?php dynamic_sidebar( 'nuova-sidebar' ); ?> </div> <?php } ?> |
Ricordiamoci che nuova-sidebar è l’ID che abbiamo definito prima per la nostra sidebar, mentre la classe barra-sinistra la dovremo ancora definire.
Individuiamo la riga con:
|
1 |
<div id="primary" class="content-area"> |
E modifichiamola nel modo seguente:
|
1 |
<div id="primary" class="content-area <?php echo is_active_sidebar('nuova-sidebar') ? "con-barra-sinistra" : "" ?>"> |
In questo modo il contenitore principale sarà modificato in base alla presenza o meno del widget. La situazione di partenza era questa:
Noi vogliamo arrivare ad una nuova situazione simile a questa:
4. Modifichiamo il style.css
Adesso non ci resta che aggiungere gli stili appena utilizzati. Andiamo quindi a modificare il Foglio di stile (style.css)
In fondo al file aggiungiamo le seguenti due righe di CSS (queste sono molto essenziali, per ottenere un risultato migliore bisognerebbe rielaborarle un po’).
|
1 2 3 4 5 6 7 8 9 |
.barra-sinistra { float: left; width: 18%; margin-right: 2%; } .con-barra-sinistra { float: left !important; width: 80% !important; } |
Salviamo il file.
5. Andiamo sui Widget
Adesso è il momento di testare il nostro nuovo widget, spostiamoci perciò nei widget ed inseriamo nella nuova area, per esempio, il widget per la ricerca.
6. Risultato
A questo punto possiamo aprire il nostro sito e verificare il risultato, che dovrebbe apparire così.
