Come aggiungere una zona  widget nel header del tuo WordPress?

Una zona widget, o “area widget”, è una delle molte caratteristiche offerte da WordPress. Con essa, sarete in grado di costruire alcune aree del vostro sito in base alle vostre esigenze. Tuttavia, a seconda del tema, le aree widget saranno disponibili solo per costruire la sidebar e footer di pagina.

 

Perché un’area widget nell’intestazione?

 

inserire zona widget in wordpress

Perché un’area widget nell’intestazione?

 

È vero che la prima delle domande che potreste chiedervi sarebbe “ma perché fare?” … In realtà, a seconda del tuo sito o il tuo Blog, si potrebbe essere contenuto con le aree widget della sidebar e il footer di pagina. Tuttavia, in alcuni altri casi, si può beneficiare di questa nuova area (nell’intestazione) per inserire contenuti molto importanti e/o ad alto potenziale, come:

  • Un banner pubblicitario
  • Un inserto per iscriversi ad una newsletter per esempio
  • Contenuti promozionali
  • Un biglietto editoriale o Mood

 

Inoltre, poiché gli utenti di Internet stanno sempre di più usando i cellulari per navigare sul Web, è molto importante inserire il contenuto promozionale prima del contenuto classico. Infatti, si doveva rendersi conto che per motivi di ottimizzazione (reattivo), il contenuto della sidebar è “retrocesso” alla fine di un articolo quando si naviga con uno smartphone, poco prima i widget del footer … Ma sei sicuro che i tuoi lettori andranno così lontano? Il tuo widget di intestazione rimarrà sempre nella prima posizione

Passaggio 1: creare il tema figlio (child theme)

Come tutti i cambiamenti che portiamo a un tema WordPress, si dovrà passare attraverso la creazione di un tema figlio (child theme)… Per fare questo, vi consiglio di leggere questo articolo in anticipo.

Fase 2: creare la sua nuova area widget

Per fare questo, sarà necessario modificare il file functions.php del tema figlio utilizzando un editor di testo o direttamente dalla vostra scheda amministrazione di wordpress andando su: aspetto > editor  ed aggiungere queste poche righe di codice.

il codice è:

register_sidebar( array(

 

‘name’ => ‘La mia nuova zona  widget’,

‘id’ => ‘new-widget-area’,

‘before_widget’ => ‘<div class=”nwa-widget”>’,

‘after_widget’ => ‘</div>’,

‘before_title’ => ‘<h2 class=”nwa-title”>’,

‘after_title’ => ‘</h2>’,

) );

}

 

Alcune spiegazioni:

  • ‘ name = il nome dell’areà widget’che apparirai nella tua amministrazione di WordPress
  • ‘ ID’= Identificativo univoco della tua “area widget”
  • ‘ Before_widget’= Scegli un tag HTML da aprire prima del tuo widget (<div>, <li> ecc…) e approfittane per aggiungere una classe che ti può aiutare con la personalizzazione CSS (STEP 5)
  • ‘ After_widget’= Chiudi il tag (</div>, </li> ecc…)
  • ‘ Before_title = Scegli un tag per il titolo del widget (<h2>,, ecc… <h3> <h4>) e, come per il’Before_widget’, aggiungere una classe per il tuo CSS più tardi
  • ‘ After_title = Chiudi il tag title (</h2>, </h3>,</h4> ecc.)

 

 

Fase 3: Fare apparire il nuovo widget Area

 

Per ora, la vostra nuova area widget esiste ed è già disponibile dalla vostra zona di amministrazione alla voce aspetto > widget. Tuttavia, non apparirà sul lato visitatore fino a quando non l’avrai aggiunto al file in questione.

Per fare questo, sarà necessario duplicare il file denominato header. php contenuto nel tuo tema principale. Si dovrebbe trovare in wp content > tema > il nome del tuo tema > header. php. Modificare questa copia per aggiungere la seguente porzione di codice alla posizione più appropriata:

<!– aggiunto della nuova widget area –>

<?php if ( is_active_sidebar( ‘new-widget-area’ ) ) : ?>

<div id=”header-widget-area” class=”nwa-header-widget widget-area” role=”complementary”>

<?php dynamic_sidebar( ‘new-widget-area’ ); ?>

</div>

<?php endif; ?>

<!– fine nuova widget area –>

 

Passo 4: Aggiungi widget per l’area “widget header”

Una volta inserito il codice nel file di funzioni php e nel file di intestazione, si sarà in grado di andare alla scheda aspetto > widget per aggiungere i widget è necessario. Per il mio esempio, ho aggiunto il widget “testo” (anche pensare che il testo widget in grado di ospitare tutti i tipi di codici brevi), ma è possibile utilizzare qualsiasi widget presenti nel tuo sito…

 

Passo 5: regolare l’aspetto dell’area widget

Naturalmente, una volta che vedete il vostro widget comparire nell’intestazione del vostro luogo sarete fieri di voi:-)… D’altra parte, si vedrà che l’aspetto lascia un po’ a desiderare! Non preoccuparti, sarete in grado di modificare questo con un po’ di CSS che si aggiungerà nel file di stile CSS del tema figlio (child theme) o nella tua zona amministrazione di della bacheca wprdpress vai su aspetto > Personalizza > CSS aggiuntivo . È in questa fase che le “classi” aggiunto nel tag HTML sarà utile …

Qui, per esempio, l’aggiunta di CSS  per cambiare l’aspetto primario della nuova area widget:

 

/* header widget area */

 

.nwa-header-widget{

margin-top: 3em;

margin-bottom: 3em;

padding: 2em;

text-align: center;

background-color: #D1D1D1;

box-shadow: 2px 2px 5px grey;

}

 

.nwa-title{

margin-bottom: 1em;

text-transform: capitalize;

 

È possibile creare altre aree widget?

Sulla base di queste informazioni e questo metodo (passi 1-5), è del tutto possibile creare diverse zone widget. È possibile, ad esempio, creare una barra laterale diversa a seconda delle categorie di elementi o a seconda che si tratti di una pagina, di un articolo o di un tipo di post personalizzato. Se questo è ciò che si vuole fare, essere sicuri di:

  • Assegnare diversì ID’è nomé ad ogni nuova zona creata nelle vostre funzioni, file php
  • Sostituire il <? php get_sidebar ();? > del file in questione (il file Page. php per le tue pagine e il singolo file. php per i tuoi articoli) per le righe di codice per rendere il vostro widget area personalizzata appaiono (come nel passaggio 3)
  • Modificare il codice CSS se necessario

 

In conclusione…

Grazie alla potenza offerta da WordPress così come alcuni pezzi di codice, avete notato che la personalizzazione del tuo sito o il tuo blog non è cosi  complicata.

 

Lascia un commento