Vuoi aggiungere un widget WordPress all’area dell’intestazione del tuo sito Web?
I widget ti consentono di aggiungere facilmente blocchi di contenuto a sezioni specifiche del tuo tema, ma non tutti i temi includono un’area widget di intestazione.
In questo articolo, ti mostreremo come aggiungere facilmente un widget WordPress all’intestazione del tuo sito web.
Perché aggiungere un widget di intestazione al tuo sito WordPress?
L’intestazione del tuo sito web è una delle prime cose che i tuoi visitatori vedranno quando visiteranno il tuo Sito Web WordPress. Aggiungendo un widget WordPress all’intestazione, puoi ottimizzare quest’area per catturare l’attenzione del lettore.
La maggior parte delle intestazioni dei siti Web includerà a logo personalizzato e un Menu di navigazione per aiutare i visitatori a visitare il tuo sito.
Puoi anche aggiungere un widget di intestazione sopra o sotto quest’area per presentare contenuti utili, banner pubblicitari, offerte a tempo limitato, forme a riga singola, e altro ancora.
Qui in WPBeginner, abbiamo un’intestazione chiamare all’azione direttamente sotto il menu di navigazione.
La maggior parte dei temi WordPress ha aree pronte per i widget nella barra laterale e nelle aree del piè di pagina del sito, ma non tutti i temi aggiungono aree pronte per i widget nell’intestazione.
Nota dell’editore: Se il tuo tema non ha un’area di intestazione pronta per i widget, ora puoi farlo crea temi WordPress completamente personalizzati da zero (senza alcuna codifica).
Ma prima, diamo un’occhiata a come aggiungere un widget WordPress all’intestazione del tuo sito Web nel tema esistente. Usa semplicemente i collegamenti rapidi qui sotto per passare direttamente al metodo che desideri utilizzare.
- Aggiungi un widget di intestazione di WordPress nelle impostazioni del tema di WordPress
- Aggiungi un widget di intestazione di WordPress aggiungendo codice a WordPress
Metodo 1. Aggiungi un widget WordPress all’intestazione del tuo sito Web nelle impostazioni del tema di WordPress
Molti dei migliori temi WordPress includere un’area widget di intestazione che puoi personalizzare a tuo piacimento.
Innanzitutto, vorrai vedere se il tuo tema WordPress attuale supporta un’area widget di WordPress nell’intestazione.
Puoi trovarlo andando su Personalizzatore di temi WordPress o l’area dei widget del tuo pannello di amministrazione di WordPress. Per fare ciò, vai a Aspetto » Personalizza e vedere se c’è un’opzione per modificare l’intestazione.
In questo esempio, il libero Astra il tema ha un’opzione chiamata ‘Header Builder’. Ti mostreremo come utilizzare questa funzione in Astra, ma tieni presente che avrà un aspetto diverso a seconda del tema che stai utilizzando.
Se fai clic su questo, viene visualizzata una schermata per modificare l’intestazione e aggiungere widget.
Nella parte inferiore dello schermo, puoi personalizzare completamente l’intestazione, insieme alle aree sopra e sotto l’intestazione. Passa il mouse su una delle aree vuote e fai clic sull’icona “Più”.
Viene visualizzato un menu a comparsa in cui è possibile selezionare “Widget 1”.
Ci sono opzioni aggiuntive tra cui scegliere, ma dovrai selezionare una delle opzioni “Widget” per rendere il widget dell’intestazione pronto.
Per aggiungere un’area widget all’intestazione, fai clic sulla casella “Widget 1” nella sezione di personalizzazione dell’intestazione.
Questo fa apparire l’opzione per aggiungere un widget.
Quindi, fai clic sull’icona di aggiunta del blocco “Più” nel menu a sinistra.
Viene visualizzato un popup in cui è possibile selezionare un widget da aggiungere all’intestazione.
Puoi continuare a personalizzare la tua intestazione e aggiungere tutti i widget che desideri.
Al termine, assicurati di fare clic sul pulsante “Pubblica” per salvare le modifiche.
Ora puoi visualizzare l’area dell’intestazione con il widget o i widget che hai aggiunto.
Non usi Astra?
Un altro modo per vedere se il tuo tema ha già un widget di intestazione di WordPress è accedere a Aspetto » Widget nel tuo pannello di amministrazione di WordPress.
Quindi, controlla se è presente una sezione del widget denominata “Intestazione” o qualcosa di simile.
In tal caso, fai semplicemente clic sull’icona di aggiunta del blocco “Più” per visualizzare il menu dei widget.
Quindi puoi aggiungere qualsiasi widget che ti piace facendo clic su di esso.
Assicurati di fare clic sul pulsante “Aggiorna” per salvare le modifiche nell’area del widget dell’intestazione.
Metodo 2. Aggiungi un widget WordPress all’intestazione del tuo sito Web aggiungendo codice a WordPress
Se il tuo tema WordPress non ha attualmente un’area widget di WordPress nell’intestazione, dovrai aggiungerlo manualmente aggiungendo codice a WordPress.
Se non l’hai mai fatto prima, consulta la nostra guida su come copiare e incollare codice in WordPress.
Quindi, puoi aggiungere il seguente snippet di codice al tuo funzioni.php dossier, in a plug-in specifico del sito, o utilizzando a plug-in frammenti di codice.
function wpb_widgets_init() {
register_sidebar( array(
'name' => 'Custom Header Widget Area',
'id' => 'custom-header-widget',
'before_widget' => '<div class="chw-widget">',
'after_widget' => '</div>',
'before_title' => '<h2 class="chw-title">',
'after_title' => '</h2>',
) );
}
add_action( 'widgets_init', 'wpb_widgets_init' );
Questo codice registra una nuova barra laterale o un’area pronta per il widget per il tuo tema.
Se vai a Aspetto » Widget, vedrai una nuova area widget denominata “Area widget intestazione personalizzata”.
Ora puoi aggiungere i tuoi widget a questa nuova area. Per maggiori dettagli, consulta la nostra guida su come aggiungere e utilizzare i widget in WordPress.
Tuttavia, il tuo widget di intestazione non verrà ancora visualizzato dal vivo sul tuo sito web. Ti mostreremo come farlo dopo.
Visualizzazione del widget di intestazione personalizzato in WordPress
Ora che hai creato l’area del widget di intestazione, devi indicare a WordPress dove visualizzarla sul tuo sito web.
Per fare ciò, devi modificare il file header.php del tuo tema. Quindi, è necessario aggiungere il codice seguente in cui si desidera visualizzare il widget.
<?php
if ( is_active_sidebar( 'custom-header-widget' ) ) : ?>
<div id="header-widget-area" class="chw-widget-area widget-area" role="complementary">
<?php dynamic_sidebar( 'custom-header-widget' ); ?>
</div>
<?php endif; ?>
Questo codice aggiungerà l’area del widget che hai creato in precedenza all’area dell’intestazione del tuo sito web.
Ora puoi visitare il tuo blog WordPress per vedere l’area del widget dell’intestazione dal vivo.
Dai uno stile alla tua area del widget di intestazione di WordPress usando i CSS
A seconda del tema, potresti anche dover aggiungere CSS a WordPress per controllare come vengono visualizzati l’area del widget dell’intestazione e ogni widget al suo interno. Se non conosci i CSS, puoi usare un plugin come CSS Eroe invece.
Per saperne di più, consulta la nostra guida su come aggiungere facilmente CSS personalizzati al tuo sito WordPress.
Quindi, vai a Aspetto » Personalizza nel tuo pannello di amministrazione di WordPress.
Questo fa apparire il pannello di personalizzazione del tema di WordPress. Devi fare clic sulla scheda “CSS aggiuntivo”.
Ciò ti consente di aggiungere CSS aggiuntivi direttamente al tuo tema e vedere le modifiche in tempo reale.
Ecco alcuni esempi di codice CSS per aiutarti a iniziare:
div#header-widget-area {
width: 100%;
background-color: #f7f7f7;
border-bottom:1px solid #eeeeee;
text-align: center;
padding: 20px;
}
h2.chw-title {
margin-top: 0px;
text-align: left;
text-transform: uppercase;
font-size: small;
background-color: #feffce;
width: 130px;
padding: 5px;
}
Aggiungi semplicemente il codice CSS nella casella “CSS aggiuntivo”.
Una volta terminata l’aggiunta del CSS, assicurati di fare clic sul pulsante “Pubblica” per salvare le modifiche.
Ecco come appare il widget dell’intestazione personalizzata con le modifiche CSS in tempo reale.
Ci auguriamo che questo articolo ti abbia aiutato a imparare come aggiungere un widget WordPress all’intestazione del tuo sito web. Potresti anche voler vedere la nostra guida su come scegliere il miglior hosting WordPress e le nostre scelte esperte del miglior software di chat dal vivo per le piccole imprese.
Se ti è piaciuto questo articolo, iscriviti al nostro Canale Youtube per i video tutorial di WordPress. Puoi trovarci anche su Twitter e Facebook.
Il post Come aggiungere un widget WordPress all’intestazione del tuo sito Web (2 modi) è apparso per la prima volta su WPBeginner.