Vorresti aggiungere un widget WordPress all'area dell'intestazione del tuo sito web?

I widget ti consentono di aggiungere facilmente blocchi di contenuto nelle sezioni designate del tuo tema WordPress.

In questo tutorial, ti mostreremo come aggiungere facilmente un widget WordPress all'intestazione del tuo sito web.

Note:: Questo è un tutorial di livello intermedio. Dovrai aggiungere il codice al file file del tuo tema WordPress e padroneggiare alcuni CSS.

Ma prima di qualsiasi modifica scopri il nostro plugin 5 WordPress per il backup tuo blog o Come installare un tema WordPress et Quanti plugin dovrei installare su WordPress.

Quindi torniamo al perché siamo qui. 

Perché e quando è necessario aggiungere un widget nell'intestazione?

I widget ti consentono di aggiungere facilmente blocchi di contenuto a un'area designata nel tuo tema WordPress. Queste aree designate sono chiamate " barre laterali "O aree di" widget'.

Un'area widget nell'intestazione può essere utilizzata per visualizzare annunci, articoli recenti o qualsiasi cosa tu voglia.

Questo particolare dominio viene utilizzato su tutti i siti Web più diffusi per visualizzare informazioni davvero importanti.

Scopri anche Come aggiungere widget personalizzati dopo aver pubblicato su WordPress

area del widget alla testa di wordpress

In generale, Temi WordPress aggiungi barre laterali accanto al contenuto o nell'area del piè di pagina. Pochissimi temi WordPress aggiungono aree widget sopra il contenuto o nell'intestazione.

Consigliamo anche di scoprire il nostro MailChimp Tutorial in francese: la guida completa per creare una newsletter

Ecco perché in questo tutorial ti mostreremo come aggiungere un'area widget all'intestazione del tuo sito Web WordPress.

Passaggio 1: crea un'area widget

Prima di tutto, dobbiamo creare un'area widget personalizzata. Questo passaggio ti consentirà di visualizzare un'area widget personalizzata in " Aspetto> Widget Sulla tua dashboard di WordPress.

Sarà necessario aggiungere questo codice al file functions.php Del tuo tema.

funzione bpc_widgets_init () {register_sidebar (array ('name' => 'Custom Header Widget Area', 'id' => 'custom-header-widget', 'before_widget' => ' ',' after_widget '=>' ',' before_title '=>' ',' after_title '=>' ',)); } add_action ('widgets_init', 'bpc_widgets_init');

Questo codice salva una nuova barra laterale o un'area del widget sul tema WordPress.

Se non hai mai installato WordPress localmente, scoprilo Come installare WordPress in locale su un PC / Windows con XAMPP

Puoi andare a " Aspetto> Widget E vedrai una nuova area widget contrassegnata " Intestazione Widget un'area personalizzata '.

nuova area widget di WordPress

Vai avanti e aggiungi un widget di testo a quest'area appena creata e salvalo.

Prova anche la nostra guida sull'aggiunta di widget.

Passaggio 2: mostra il tuo widget nell'intestazione

Se visiti il ​​tuo sito Web, non sarai in grado di vedere il widget di testo che hai appena aggiunto.

Perché non ti abbiamo ancora mostrato come visualizzare le zone di widget personalizzati WordPress.

Questo è ciò che faremo in questo passaggio.

Ecco anche per te un elenco di 5 plugin WordPress critici per aumentare i guadagni del tuo blog

Dovrai modificare il file header.php Nel tuo tema WordPress e aggiungi questo codice nel punto in cui desideri visualizzare i widget.


 
 
 
 

Non dimenticare di salvare le modifiche.

Puoi quindi visitare il tuo sito Web e vedrai il widget di testo nella tua intestazione.

sito demo in mente

Il risultato non sarà necessariamente il più attraente. Ecco perché avrai bisogno di CSS in modo che venga visualizzato correttamente.

3 Step: dai stile alle intestazioni CSS

A seconda del tema WordPress, sarà necessario aggiungere codice CSS per controllare come vengono visualizzate l'intestazione e l'area del widget.

Uno dei modi più semplici per farlo è usare CSS Hero. Quest'ultimo consente di utilizzare un'interfaccia utente intuitiva per modificare il CSS di un tema WordPress.

Ti consigliamo anche di scoprirlo Cosa puoi fare con il plugin WordPress di Yellow Pencil?

Se non si desidera utilizzare un plug-in, è possibile aggiungere CSS personalizzati al tema WordPress visitando " Aspetto »Personalizza Per personalizzare il tema WordPress.

Leggi anche il nostro articolo su Plugin 10 WordPress per migliorare il traffico di un blog

Ciò ti consentirà di visualizzare l'interfaccia di personalizzazione di WordPress. Dovrai fare clic sul pulsante " Ulteriori CSS '.

ulteriore css WorDPress

La scheda « ulteriore CSS Nel " Customizer Ti consente di aggiungere il tuo CSS personalizzato mentre visualizzi le modifiche nell'anteprima a destra.

Per motivi inerenti a questo tutorial, supponiamo che utilizzerai quest'area per aggiungere un singolo widget per visualizzare banner pubblicitari o un widget menu personalizzato.

Ecco un esempio di CSS per iniziare:

div # header-widget di zona {width: 100%; background-color: #f7f7f7; border-bottom: 1px #eeeeee solido; text-align: center; } H2.chw-title {margin-top: 0px; text-align: left; text-transform: uppercase; font-size: small; background-color: #feffce; larghezza: 130px; padding: 5px; }

Ecco come verrà mostrato il nostro widget personalizzato nell'intestazione del tema Twenty Seventeen.

tema demo venti diciassette wordpress

Scopri anche alcuni plugin WordPress premium  

Puoi usare altro plugin di WordPress per dare un aspetto moderno e per ottimizzare la gestione del tuo blog o sito web.

Ti offriamo qui alcuni plugin WordPress premium che ti aiuteranno a farlo.

1. Smart4y Tooltip

Smart4y Tooltip è un WordPress Plugin strumento flessibile dedicato alla creazione di tooltip moderni senza alcuna dipendenza dalla libreria Javascript. È completamente responsive e offre la possibilità di inserire contenuti HTML.

Plugin WordPress reattivo di Smart4y Tooltip

Il suo editor WYSIWYG ti consentirà di creare visivamente ogni descrizione senza dover inserire alcun codice, ma se lo desideri puoi sempre farlo.

Scopri anche il nostro Plugin 10 WordPress per valutare articoli dal tuo blog

Le sue altre caratteristiche sono: Supporto della pagina del builder, un layout abbastanza reattivo, la capacità di definire parametri globali per tutti i tooltip o di definire parametri specifici per ogni tooltip, supporto per effetti visivi predefiniti, il calcolo della posizione del tooltip sulla finestra ridimensionata, documentazione dettagliata, ecc….

Scarica | Demo | Web hosting

2. giustificato

Le WordPress Plugin Justified è un plug-in di galleria reattivo che allinea le tue miniature in una griglia giustificata utilizzando jQuery, come su Flickr. 

Giustificato-Plugin per WordPress-Fotografi,

Offre funzionalità che distingueranno le tue gallerie da quelle dei concorrenti!

Le sue caratteristiche principali sono: layout reattivo, effetti speciali di cavalcavia, riallineamento automatico della griglia,  un editor di shortcode, aspetto ecompletamente personalizzabile, il supporto di pspettatori e molti altri…

Download | Demo | Web hosting  

3. Pianifica email

ce WordPress Plugin come suggerisce il nome ti permette di programmare la pubblicazione delle email sul tuo sito web. Fa parte delle estensioni del plugin WordPress “Segui il mio post sul blog”. Pianifica e-mail Segui il mio blog Post plugin wordpress

Ora sarai in grado di programmare la pubblicazione delle tue e-mail in base a ore, giorni o settimane.

Leggi anche il nostro articolo su Plugin 10 WordPress per utilizzare le mappe sul tuo sito web

Offre la possibilità di inviare un'e-mail combinata per tutte le notifiche invece di ciascuna e-mail per ciascuna notifica e consente inoltre di definire diversi modelli di e-mail per diverse e-mail, infine per rendere più digeribile la ricezione delle vostre e-mail. .

DownloadDemo |Web hosting

Risorse raccomandate

Scopri altre risorse consigliate per aiutarti a costruire e gestire il tuo sito web.

Conclusione

Ecco ! Questo è tutto per questo tutorial, spero che ti aiuterà ad aggiungere un'area widget sull'intestazione del tuo tema WordPress. Non esitare a condividi con i tuoi amici sui tuoi social network preferiti

Tuttavia, sarai anche in grado di consultare il nostro risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet, consultando la nostra guida su Creazione di blog WordPress.

Se hai suggerimenti o commenti, lasciali nella nostra sezione commentaires.

...