Come aggiungere un widget WordPress all'intestazione del tuo sito Web (2 modi)
Categories
News Sviluppo Realizzazione Siti Web Wordpress Serra Simone

Come aggiungere un widget WordPress all’intestazione del tuo sito Web (2 modi)

Tempo di lettura: 6 minuti

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.

Esempio di invito all'azione dell'intestazione

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.

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.

Costruttore di intestazioni Astra

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ù”.

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

Seleziona l'opzione widget 1

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.

Fare clic sulla casella widget 1

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.

Fare clic sull'icona più e selezionare il widget

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.

Pubblica le modifiche al widget dell'intestazione

Ora puoi visualizzare l’area dell’intestazione con il widget o i widget che hai aggiunto.

Esempio di widget di intestazione

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.

Vai alla sezione widget per il widget di intestazione

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.

Sezione widget di intestazione

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

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.

Widget di 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”.

CSS aggiuntivo per la personalizzazione di WordPress

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

Aggiungi codice CSS e pubblica

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.

Esempio di widget di intestazione dopo CSS

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.



Source link

Web Designer Freelancer Realizzazione Siti Web Serra Simone Realizzo siti web, portali ed e-commerce con focus specifici sull’usabilità, l’impatto grafico, una facile gestione e soprattutto in grado di produrre conversioni visitatore-cliente. Elaboro siti internet, seguendo gli standard Web garantendo la massima compatibilità con tutti i devices. Sviluppo e-commerce personalizzati, multilingua, geolocalizzati per potervi mettere nelle migliori condizioni di vendita. Posiziono il tuo sito su Google per dare maggiore visibilità alla tua attività sui motori di ricerca con SEO di base o avanzato.

Scroll Giù