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

7 thoughts on “[WordPress] Creare un’area widget personalizzata in 6 semplici passaggi

    1. Nell’area dei widget te la visualizza? Hai provato ad inserire un widget di testo nell’area e poi controllare se il testo compare nel tema?

    1. Probabilmente dipende dal tema, devi controllare il punto nel quale hai inserito il widget. Nel mio esempio è su page.php, ma nel tuo tema potrebbe dover essere inserito altrove.

    1. Dovresti controllare la struttura in CSS/HTML. Non so dove vuoi inserire esattamente la sidebar, ma supponiamo che tu voglia metterla a destra delle prime 3 colonne.
      Esempio 1
      Per esempio come nell’immagine qui sopra. Allora dovresti controllare anzitutto il codice HTML. Dal codice vedo che viene utilizzato Bootstrap e ci sono 3 colonne di dimensioni, rispettivamente, 6 3 3.
      In totale Bootstrap divide lo spazio di una riga in 12 colonne, quindi anzitutto dovresti modificare opportunamente la dimensione di tali colonne.
      Di seguito c’è un esempio nell’immagine del pezzo di codice che ci interesserebbe.
      Esempio 2
      A questo punto potresti inserire un pezzo di codice come questo:
      esempio 4
      Modificando preventivamente le colonne, per ottenere un risultato come il seguente:
      esempio 3

Rispondi

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.