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
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 '.
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.
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 '.
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.
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.
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.
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”.
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. .
Download | Demo | Web hosting
Risorse raccomandate
Scopri altre risorse consigliate per aiutarti a costruire e gestire il tuo sito web.
- Come creare documenti Excel e Word su WordPress
- Come personalizzare il logo WordPress della dashboard
- Come trovare i file per modificare un tema WordPress
- Come personalizzare il CSS del tuo sito Web WordPress
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.
...
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!
Il codice che aggiunge header.php non funziona
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?
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.
OK.
🙂 Va tutto bene, solo nessuno nei loro consigli spiega dove aggiungere il codice a “functions.php !!! " È importante! Tutti usano i temi "diversi" ...
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.
Ciao Thomas,
Ci vuole un po 'di conoscenza di CSS per questo. Ma io raccomando questo eccellente plugin di WordPress: https://codecanyon.net/item/yellow-pencil-visual-css-style-editor/11322180?ref=voirplusgrand