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