Vai al contenuto principale

Come aggiungere un widget per l'intestazione del tuo blog WordPress

Divi: il tema WordPress più semplice da usare

Divi: il miglior tema WordPress di tutti i tempi!

più Download di 901.000, Divi è il tema WordPress più popolare al mondo. È completo, facile da usare e viene fornito con oltre i modelli gratuiti 62. [Consigliato]

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.

Osservazioni:: 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 genere, i temi di WordPress aggiungono 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

Crea facilmente il tuo sito Web con Elementor

Elementor ti consente di creare facilmente qualsiasi design di sito Web con un aspetto professionale. Smetti di pagare caro per quello che puoi fare da solo. [Free]

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

Smetti di sprecare tempo e denaro!

Scopri lo strumento migliore per creare il tuo blog, il blog del tuo negozio online o qualsiasi altro sito web in pochi clic!

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 utilizzare altri plugin di WordPress per dare un aspetto moderno e ottimizzare la presa del tuo blog o sito Web.

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

1. Smart4y Tooltip

Smart4y Tooltip è un plugin WordPress flessibile dedicato alla creazione di tooltip moderni senza alcuna dipendenza dalla libreria JavaScript. È completamente reattivo e offre la possibilità di inserire contenuto 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

Il plug-in giustificato di WordPress è un plug-in responsive della galleria che allinea le 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

questo plugin per WordPress, come suggerisce il nome, ti consente di pianificare la pubblicazione di posta elettronica sul tuo sito web. Fa parte dei plugin del plugin di WordPress "Follow My Blog Post". 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.

...

Questo articolo contiene i commenti 8

  1. Ciao! Vorrei sapere se hai la possibilità di dirmi come inserire un "riquadro delle informazioni" simile a quello usato qui all'inizio di questo articolo, inclusi i pulsanti cliccabili accanto a "Download" e "Fogli di lavoro", il il layout è molto bello. La ringrazio!

  2. Signore, l'ho provato. Infatti, la pagina dei widget è l'output che definisce l'aggiunta di widget. E l'ho aggiunto. Quando il passaggio 2 non riesce a inserire il codice nell'intestazione php. Indovina 2, qual è l'errore, signore?

  3. Nel primo codice mostrato, che è quello di generare una nuova area widget, inizia a digitare "funzione", ma direi che inizia con "funzione". In realtà questo codice ha diversi errori che lo rendono sbagliato durante la scrittura. Apprezzerei che fosse corretto.

  4. 🙂 Va tutto bene, solo nessuno nei loro consigli spiega dove aggiungere il codice a “functions.php !!! " È importante! Tutti usano i temi "diversi" ...

  5. hi,

    Grazie per questi supporti.

    Sapevo come aggiungere la mia barra di ricerca nell'intestazione personalizzata. D'altra parte, personalizzare lo stile è più complicato ...

    Vorrei cambiare la dimensione, la posizione (che non occupa l'intera larghezza dell'intestazione) e il colore di sfondo.

    Grazie in anticipo.

Lascia un commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito utilizza Akismet per ridurre indesiderati. Ulteriori informazioni su come vengono utilizzati i dati dei commenti.

Torna in alto
7 azioni
quota1
Tweet
Enregistrer6