Come aggiungere un widget WordPress all’intestazione del sito Web

Vuoi aggiungere un widget WordPress nell’area dell’intestazione del tuo sito web? I widget ti consentono di aggiungere facilmente blocchi di contenuto nelle sezioni designate del tuo tema. In questo articolo, ti mostreremo come aggiungere facilmente un widget WordPress all’intestazione del tuo sito.


Aggiungi un widget WordPress all'intestazione del tuo sito

Nota: Questo è un tutorial di livello intermedio. Dovrai aggiungere codice ai file dei temi di WordPress e scrivere CSS.

Perché e quando è necessario un widget di intestazione sul tuo sito?

I widget ti consentono di aggiungere facilmente blocchi di contenuto a un’area designata nel tema WordPress. Queste aree designate sono chiamate barre laterali o aree pronte per i widget.

Un’area pronta per il widget nell’intestazione o prima del contenuto può essere utilizzata per visualizzare annunci, articoli recenti o qualsiasi cosa tu voglia.

Questa particolare area è chiamata “Below the fold” e tutti i siti popolari la usano per mostrare cose davvero importanti.

La sezione dell'intestazione sul popolare sito Web List25

In genere, i temi WordPress aggiungono barre laterali accanto al contenuto o nell’area del piè di pagina. Non molti temi WordPress aggiungono aree pronte per i widget sopra il contenuto o nell’intestazione.

Ecco perché in questo articolo tratteremo come aggiungere un’area widget all’intestazione del tuo sito Web WordPress.

Passaggio 1. Creazione di un’area del widget dell’intestazione

Innanzitutto, dobbiamo creare un’area del widget personalizzata. Questo passaggio ti permetterà di vedere l’area del tuo widget personalizzato su Aspetto »Widget pagina nella dashboard di WordPress.

Dovrai aggiungere questo codice al file Functions.php del tuo tema.

funzione wpb_widgets_init () {

register_sidebar (array (
‘nome’ => “Area widget intestazione personalizzata”,
‘id’ => ‘Custom-header-widget di’,
‘before_widget’ => ”,
‘after_widget’ => ”,
‘before_title’ => ‘

‘,
‘after_title’ => ‘

‘,
));

}
add_action (‘widgets_init’, ‘wpb_widgets_init’);

Questo codice registra una nuova barra laterale o un’area pronta per il widget per il tema.

Ora puoi andare a Aspetto »Widget pagina e vedrai una nuova area widget denominata “Area widget intestazione personalizzata”.

Area del widget dell'intestazione personalizzata

Vai avanti e aggiungi un widget di testo a questa area del widget appena creata e salvalo. Consulta la nostra guida su come aggiungere e utilizzare i widget in WordPress per istruzioni dettagliate sull’aggiunta di widget.

Passaggio 2: visualizza il widget dell’intestazione personalizzato

Se visiti ora il tuo sito Web, non sarai in grado di vedere il widget di testo che hai appena aggiunto al widget dell’intestazione appena creato.

Questo perché non abbiamo ancora detto a WordPress dove visualizzare questa area del widget.

Facciamolo in questo passaggio.

Dovrai modificare il file header.php nel tuo tema e aggiungere questo codice nel punto in cui desideri visualizzare l’area del tuo widget personalizzato.

<?php

if (is_active_sidebar (‘custom-header-widget’)): ?>

<?php dynamic_sidebar (‘widget-intestazione-personalizzata’); ?>

<?php endif; ?>

Non dimenticare di salvare le modifiche.

Ora puoi visitare il tuo sito Web e vedrai l’area del widget dell’intestazione.

Widget di intestazione non stilato

Noterai che sembra un po ‘non lucidato. Ecco dove avrai bisogno dei CSS per renderlo migliore.

Passaggio 3: personalizza l’area del widget dell’intestazione usando i CSS

A seconda del tema, dovrai aggiungere CSS per controllare la modalità di visualizzazione dell’area del widget dell’intestazione e di ogni widget al suo interno.

Il modo più semplice per farlo è utilizzando il plug-in CSS Hero. Ti consente di utilizzare un’interfaccia utente intuitiva per modificare i CSS di qualsiasi tema WordPress. Per maggiori dettagli, consulta la nostra recensione di CSS Hero.

Se non desideri utilizzare un plug-in, puoi aggiungere CSS personalizzati al tuo tema visitando Aspetto »Personalizza pagina.

Questo avvierà l’interfaccia di personalizzazione del tema WordPress. Dovrai fare clic sulla scheda “CSS aggiuntivo”.

Aggiunta di CSS personalizzati a un tema WordPress

La scheda CSS aggiuntiva nel personalizzatore del tema ti consente di aggiungere il tuo CSS personalizzato mentre guardi le modifiche apparire nell’anteprima dal vivo.

Per il bene di questa esercitazione, supponiamo che utilizzerai solo quest’area per aggiungere un singolo widget per visualizzare banner pubblicitari o un widget menu personalizzato.

Ecco alcuni CSS di esempio per aiutarti a iniziare.

div # header-widget-area {
larghezza: 100%;
colore di sfondo: # f7f7f7;
bordo inferiore: 1px solido #eeeeee;
text-align: center;
}
h2.chw-title {
margin-top: 0px;
text-align: left;
trasformazione del testo: maiuscolo;
dimensione carattere: piccola;
colore di sfondo: #feffce;
larghezza: 130px;
imbottitura: 5px;
}

Questo è l’aspetto della nostra area del widget dell’intestazione personalizzata sul tema predefinito Twenty Seventeen.

Anteprima del widget dell'intestazione

Potrebbe essere necessario regolare il CSS in base al tema. Dai un’occhiata alla nostra guida su come aggiungere stili personalizzati ai widget di WordPress.

Speriamo che questo articolo ti abbia aiutato a imparare come aggiungere un widget WordPress all’intestazione del tuo sito. Potresti anche voler vedere il nostro elenco dei 25 widget WordPress più utili per il tuo sito.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map