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.
...
Hej! Jeg vil gerne vide, om du har en chance for at fortælle mig, hvordan du sætter en "infoboks" svarende til den, der blev brugt her i begyndelsen af denne artikel, herunder de klikbare knapper ud for "Download" og "Regneark", layout er meget flot. Tak skal du have!
Koden der tilføjer header.php fungerer ikke
Sir, jeg prøvede det. Faktisk udføres widgetsiden, der definerer tilføjelsen af widgets. Og jeg tilføjede det. Når trin 2 ikke indtaster koden i php-overskriften. Gæt 2, hvad er fejlen, sir?
I den første viste kode, som er at generere et nyt widgetområde, skal du starte med at skrive "funktion", men jeg vil sige, at det starter med "funktion". Faktisk har denne kode flere fejl, der gør den forkert, mens du skriver den. Jeg ville sætte pris på, at det blev rettet.
OK.
🙂 Alt er i orden, kun ingen i deres råd forklarer, hvor koden skal tilføjes til “functions.php !!! " Det er vigtigt! Alle bruger de “forskellige” temaer ...
Hej,
Tak for disse understøttelser.
Jeg vidste, hvordan jeg tilføjede min søgefelt i den personlige overskrift. På den anden side er det mere kompliceret at personalisere stilen ...
Jeg vil gerne ændre størrelsen, placeringen (at den ikke tager hele bredden på overskriften) samt baggrundsfarven.
Merci d'avance.
Hej Thomas,
Det tager lidt CSS viden til det. Men jeg anbefaler denne fremragende WordPress-plugin: https://codecanyon.net/item/yellow-pencil-visual-css-style-editor/11322180?ref=voirplusgrand