[WordPress] Creare un’area widget personalizzata in 6 semplici passaggi

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:

  1. Avere installato WordPress (lo si può scaricare da qui)
  2. 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:

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:

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:

E modifichiamola nel modo seguente:

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’).

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

Rispondi

This site uses Akismet to reduce spam. Learn how your comment data is processed.