Attivate i JavaScript - GRAZIE
Please enable / Bitte aktiviere JavaScript!
Veuillez activer / Por favor activa el Javascript![ ? ]

Come creare una nuova area widget in WordPress in pochi passaggi

Come creare una nuova area widget in WordPress in pochi passaggi

Un’area Widget è una “posizione” nella pagina web costruita da WP dove far comparire i più svariati contenuti come immagini, testo o qualsiasi altro “prodotto” di un componente ( “plugin” ) che generi un contenuto.

Come abbiamo già detto  la definizione di una nuova area Widget prevede due passaggi ben definiti:

  • Definizione di una nuova area Widget
  • Inserimento della nuova area Widget nella posizione desiderata

Come definire una nuova area Widget in WordPress

Per definire una nuova area Widget in WP non ci serve altro che WP corrattamente installato ed un qualsiasi tema attivo sul nostro sito.

Scontato il fatto che abbiamo questi 2 elementi ( altrimenti perchè state leggendo questo articolo ?!? ) per prima cosa dalla bacheca del nostro sito:

1 – Apriamo l’Editor integrato di WordPress

L’editor di WP si trova in Bacheca->Aspetto->Editor del tema

2. Andiamo su functions.php

Una volta aperto l’editor andiamo su functions.php, selezionabile dall’elenco a destra.

blank

Adesso spostiamoci in fondo al file e aggiungiamo il seguente codice:

function nuovo_widget() {
  register_sidebar(
    array(
     "name" => "Nuova Area Widget",
     "description" => "Barra laterale a sinistra",
     "id" => "nuova-area",
     "before_widget" => "<div>",
     "after_widget" => "</div>",
     "before_title" => "<h2 class=\"rounded\">",
     "after_title" => "</h2>"
     )
   );
}
add_action( "widgets_init", "nuovo_widget");

Il nome della funzione, nuovo_widget(), è assolutamente arbitrario;

Dentro eseguiamo il metodo register_sidebar che permette di definire una specifica sidebar.

I parametri che consentono la personalizzazione della nuova area che stiamo creando 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 che WP anteporrà ad ogni chiamata di questo widget
  • after_widget – codice HTML che WP posporrà ad ogni chiamata di questo widget
  • before_title – codice HTML che WP anteporrà ad ogni scrittura del titolo di questo widget
  • after_title – codice HTML WP posporrà ad ogni scrittura del titolo di questo widget

Una volta aggiunto il codice premiamo su Aggiorna file in basso per confermare le nostre modifiche al file.
Una volta premuto AGGIORNA verificate subito che il vostro sito sia ancora regolarmente visibile ( senza chiudere la pagina di aggiornamento del file functions.php) perchè un caratere sbagliato potrebbe mandare immediatamente in CRASH tutto il vostro Web… in questo caso, pazientemente, cercate l’errore e aggiornate di nuovo!

Come inserire la nuova area Widget nel nostro Sito WP

3. Posizioniamo la nuova area Widget nelle pagine del sito  – Andiamo su page.php

Proviamo ad aggiungere la nuova area widget in tutte le pagine del nostro sito intervenendo sul file page.php

Andiamo quindi a modificare il file page.php

blank

Individuiamo la riga con get_header(); e posizioniamoci alla riga successiva aggiungendo il seguente codice:

<?php

// Area Widget Personalizzata
if( is_active_sidebar('nuova-area') ) { ?>

    <div class="barra-sx">
        <?php dynamic_sidebar( 'nuova-area' ); ?>
    </div>

<?php // Fine Area Widget ?>
<?php } ?>

Notate che :

  • nuova-area è l’ID dell’area che stiamo costruendo e che abbiamo scelto sopra ( potete mettere il nome che volete ma deve essere uguale fra questa chiamata la e funzione definita al punto 2).
  • barra-sx è il codice CSS che gestirà il posizionamento di questa area rispetto a tutti gli altri elementi della pagina e che dobbiamo ancora definire

A questo punto individuiamo la riga con

<div id="primary" class="content-area">
e modifichiamola in questo modo
<div id="primary" class="content-area <?php echo is_active_sidebar('nuova-area') ? "area-sx" : "" ?>">

Aggiornate il file che stiamo editando ( page.php ) e come fatto sopra, senza chiudere controllate che il vostro sito sia ancora regolarmente funzionante… in caso di pagina bianca o crash di altra natura controllate con pazienza, carattere per carattere, tutte le modifiche apportate.


Prima di passare alla creaziome del CSS per posizionare la nuova area widget una precisazione: la nuova area potrà essere posizionata in diversi punti del nostro sito e in funzione di questa scelta dovremo andare a modificare differenti pagine  .php  Brevemente queste sono le pagine che gestiscono le differenti posizioni in WordPress

Utilizzando sempre il percorso del BackEnd di WordPress ASPETTO>EDITOR scegliamo fra questi files :

  • header.php ( di solito il contenuto nella testa del sito )
  • footer.php ( di solito il contenuto in fonda alla pagina )
  • index.php ( il file principale di controllo del nostro sito )
  • page.php ( il file che controlla la visualizzazione della pagine statiche )
  • single.php ( il file che controlla la visualizzazione del singolo Post )
  • altri file .php presenti nel vostro specifico template.

IL metodo di inserimento è semplice : aprite il file nel quale desiderate inserire la chiamata al vostro nuovo Widget e, evitando di cancellare qualsiasi cosa, inseritevi in una posizione in cui la porzione di codice sembri conclusa.

Salvate e provate a visualizzare dopo aver inserito un contenuto qualsiasi nella vostra posizione Widget.


Inutile dirvi che per un risultato ottimale dovrete fare delle prove per verificare la corretta visualizzazione dell’Area Widget appena creata.

4. Modifichiamo il style.css

Adesso non ci resta che aggiungere gli stili CSS appena utilizzati. Andiamo quindi a modificare il Foglio di stile (style.css)

In fondo al file aggiungiamo le seguenti due righe di CSS

.barra-sx {
  float: left;
  width: 18%;
 margin-right: 2%;
 }
.area-sx {
  float: left !important;
  width: 80% !important;
}
Salviamo il file.

L’area è pronta all’uso ( la trovate come tutte le antre in Bacheca->Aspetto->Widget ) ma il suo posizionamento ottimale dovrete trovarlo agendo correttamente sul CSS appena creato e , se necessario, pensando ad un diverso posizionamento nel file di controllo ( come nell’esempio sopra in page.php)

per dubbi o suggerimenti...ci scriviamo nei commenti!!!

Come creare una nuova area widget in WordPress in pochi passaggi

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Rispondiamo a tuttilascia un commento per ricevere dettagli o inviaci una email per proporre la stesura di nuove guide.