Vil du tilføje en WordPress-widget til headerområdet på dit websted?

Widgets giver dig mulighed for nemt at tilføje blokke af indhold i bestemte sektioner af dit WordPress-tema.

I denne tutorial vil vi vise dig, hvordan du let tilføjer en WordPress-widget til overskriften på dit websted.

Bemærk: Dette er et mellemliggende niveau tutorial. Du bliver nødt til at tilføje kode til filer med dit WordPress-tema og mestre nogle CSS.

Men inden nogen ændringer, opdag vores 5 WordPress plugins til backup din blog eller Sådan installeres en WordPress tema et Hvor mange plugins skal jeg installere på WordPress.

Lad os derefter vende tilbage til, hvorfor vi er her. 

Hvorfor og hvornår skal du tilføje en widget i overskriften?

Med widgets kan du nemt tilføje blokke af indhold til et bestemt område i dit WordPress-tema. Disse udpegede områder kaldes " sidebars "Eller områder af" widgets'.

Et widgetområde på overskriften kan bruges til at vise annoncer, nylige artikler eller hvad du end ønsker.

Dette særlige domæne bruges på alle populære websteder til at vise virkelig vigtig information.

Opdag også Sådan tilføjes brugerdefinerede widgets efter udstationering på WordPress

Som en generel regel WordPress-temaer tilføje sidebjælker ud for indhold eller i sidefodsområdet. Meget få WordPress-temaer tilføjer widgetområder over indholdet eller i overskriften.

Vi råder også til at opdage vores MailChimp tutorial på fransk: den komplette guide til at skabe et nyhedsbrev

Derfor viser vi dig i denne tutorial, hvordan du tilføjer et widget-område til overskriften på dit WordPress-websted.

Trin 1: Opret et widgetområde

Først og fremmest skal vi oprette et brugerdefineret widgetområde. Dette trin giver dig mulighed for at se et tilpasset widgetområde i " Udseende> Widgets På dit WordPress-dashboard.

Du skal tilføje denne kode til filen functions.php Af dit tema.

funktion 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');

Denne kode gemmer et nyt sidefelt eller widget-område på dit WordPress-tema.

Hvis du aldrig har installeret WordPress lokalt, skal du finde ud af det Sådan installeres WordPress lokalt på en PC / Windows med XAMPP

Du kan gå til " Udseende> Widgets Og du vil se et nyt widgetområde markeret " Brugerdefineret sidehoved Widget Area '.

Gå videre, og tilføj en tekstwidget til dette nyoprettede område, og gem det.

Prøv også vores guide til tilføjelse af widgets.

Trin 2: Vis din widget i overskriften

Hvis du besøger dit websted, kan du ikke se den tekstwidget, du lige har tilføjet.

Fordi vi endnu ikke har vist dig, hvordan du viser zonerne i brugerdefinerede widgets WordPress.

Dette er, hvad vi vil gøre i dette trin.

Her er også en liste over 5 Kritiske WordPress-plugins for at øge din blogs indtjening

Du skal redigere filen header.php I dit WordPress-tema og tilføj denne kode, hvor du vil vise widgets.

Glem ikke at gemme dine ændringer.

Du kan derefter besøge dit websted, og du vil se tekstwidgeten i din header.

Resultatet vil ikke nødvendigvis være det mest attraktive. Derfor har du brug for CSS, så den vises korrekt.

3 Trin: Giv stil til dine CSS-headere

Afhængigt af dit WordPress-tema skal du tilføje CSS-kode for at kontrollere, hvordan overskrift og widgetområde vises.

En af de nemmeste måder at gøre dette på er at bruge CSS Hero. Sidstnævnte giver dig mulighed for at bruge en intuitiv brugergrænseflade til at ændre CSS for et WordPress-tema.

Vi råder dig også til at opdage dette Hvad kan du gøre med det gule blyant WordPress-plugin?

Hvis du ikke vil bruge et plugin, kan du tilføje tilpasset CSS til dit WordPress-tema ved at besøge " Udseende »Tilpas Sådan tilpasser du WordPress-temaet.

Læs også vores artikel om 10 WordPress-plugins for at forbedre trafikken i en blog

Dette giver dig mulighed for at få vist WordPress Customizer-grænsefladen. Du bliver nødt til at klikke på " Yderligere CSS '.

Fanen « Yderligere CSS I " Customizer Giver dig mulighed for at tilføje din brugerdefinerede CSS, mens du ser ændringerne i forhåndsvisningen til højre.

Af grunde, der er forbundet med denne tutorial, antager vi, at du vil bruge dette område til at tilføje en enkelt widget til at vise bannerannoncer eller en brugerdefineret menu-widget.

Her er et eksempel på CSS for at komme i gang:

div # header-widget-område {bredde: 100%; background-color: #f7f7f7; border-bottom: 1px fast #eeeeee; text-align: center; } H2.chw-title {margin-top: 0px; text-align: left; tekst-transform: uppercase; font-size: små; background-color: #feffce; bredde: 130px; padding: 5px; }

Her er, hvordan vores brugerdefinerede widget vises på Twenty Seventeen temaoverskrift.

Oplev også nogle premium WordPress-plugins  

Du kan bruge andet WordPress plugins for at give et moderne udtryk og for at optimere håndteringen af ​​din blog eller hjemmeside.

Vi tilbyder dig her nogle premium WordPress-plugins, der hjælper dig med det.

1. Smart4y Tooltip

Smart4y Tooltip er et WordPress plugin fleksibelt værktøj dedikeret til at skabe moderne værktøjstip uden nogen afhængighed af Javascript-biblioteket. Det er fuldt responsivt og giver mulighed for at indsætte HTML-indhold.

Dens WYSIWYG-editor vil give dig mulighed for visuelt at oprette hver værktøjstip uden at skulle indtaste nogen kode, men hvis du er villig, kan du altid gøre det.

Oplev også vores 10 WordPress plugins til evaluering af artikler fra din blog

Dens andre funktioner er: Understøttelse af Builder-side, et ret responsivt layout, evnen til at definere globale parametre for alle værktøjstip eller til at definere specifikke parametre for hvert værktøjstip, understøttelse af foruddefinerede visuelle effekter, beregning af placeringen af ​​værktøjstip i det ændrede vindue, detaljeret dokumentation osv ...

Download | Demo | Web-hosting

2. Justified

Le WordPress plugin Justified er et responsivt galleri-plugin, der justerer dine miniaturebilleder i et retfærdigt gitter ved hjælp af jQuery, som på Flickr. 

Det bringer funktioner, der adskiller dine gallerier fra konkurrenterne!

Dets vigtigste funktioner er: responsivt layout, specielle flyover-effekter, automatisk tilpasning af gitteret,  en kortkodeditor, udseende ehelt tilpasselig, understøttelse af pseere og mange andre…

Downloade | demo | Web-hosting  

3. Planlæg e-mails

ce WordPress plugin som navnet antyder giver dig mulighed for at planlægge e-mailudgivelse på dit websted. Det er en del af "Følg mit blogindlæg" WordPress plugin-udvidelser.

Du kan nu planlægge offentliggørelsen af ​​dine e-mails i henhold til timer, dage eller uger.

Læs også vores artikel om 10 WordPress plugins til at bruge kort på din hjemmeside

Det giver mulighed for at sende en kombineret e-mail til alle underretninger i stedet for hver e-mail for hver underretning og giver også mulighed for at definere forskellige e-mail-skabeloner til forskellige e-mails, endelig for at gøre modtagelsen af ​​dine e-mails mere fordøjelig. .

Downloade | demo | Web-hosting

Anbefalede ressourcer

Find ud af om andre anbefalede ressourcer, der hjælper dig med at opbygge og administrere dit websted.

• Sådan opretter Excel og Word-dokumenter på WordPress
• Sådan tilpasses WordPress-logoet på instrumentbrættet
• Sådan finder du de filer, til at redigere en WordPress tema
• Sådan tilpasses CSS på dit WordPress-websted

Konklusion

Det er det! Det er alt sammen til denne tutorial, jeg håber, det vil hjælpe dig med at tilføje et widget-område i overskriften på dit WordPress-tema. Tøv ikke med at del med dine venner på dine foretrukne sociale netværk. 

Du vil dog også kunne konsultere vores ressourcer, hvis du har brug for flere elementer til at udføre dine projekter med oprettelse af internetsider ved at konsultere vores guide om WordPress blog oprettelse.

Hvis du har forslag eller bemærkninger, skal du lade dem stå i vores afsnit kommentarer.

...