Slik legger du til en WordPress-widget til nettstedets overskrift

Ønsker du å legge til en WordPress-widget til nettstedets toppområde? Widgets lar deg enkelt legge til innholdsblokker i bestemte deler av temaet ditt. I denne artikkelen vil vi vise deg hvordan du enkelt kan legge til en WordPress-widget til toppteksten til nettstedet ditt.


Legg til en WordPress-widget i toppteksten til nettstedet

Merk: Dette er en tutorial på mellomnivå. Du må legge til kode i WordPress-temafilene og skrive CSS.

Hvorfor og når du trenger en overskrifts-widget på nettstedet ditt?

Widgets lar deg enkelt legge til innholdsblokker til et bestemt område i WordPress-temaet. Disse utpekte områdene kalles sidefelt eller widget-klare områder.

Et widget-klart område i overskriften eller før innhold kan brukes til å vise annonser, nylige artikler eller hva du vil.

Dette bestemte området kalles ‘Under folden’, og alle populære nettsteder bruker det for å vise virkelig viktige ting.

Overskriftsdelen på det populære List25-nettstedet

WordPress-temaer legger til sidelinjer ved siden av innholdet eller i bunntekstområdet. Ikke mange WordPress-temaer legger til widget-klare områder over innholdet eller i overskriften.

Derfor vil vi i denne artikkelen dekke hvordan du legger til et widget-område i overskriften til WordPress-nettstedet.

Trinn 1. Opprette et Header Widget-område

Først må vi lage et tilpasset widget-område. Dette trinnet lar deg se det egendefinerte widgetområdet ditt på Utseende »Widgets -siden i WordPress-oversikten.

Du må legge til denne koden i temaets funksjoner.php-fil.

funksjon wpb_widgets_init () {

register_sidebar (matrise (
‘name’ => ‘Custom Header Widget Area’,
‘id’ => ‘Custom-header-widget’,
‘before_widget’ => ”,
‘after_widget’ => ”,
‘before_title’ => ‘

‘,
‘after_title’ => ‘

‘,
));

}
add_action (‘widgets_init’, ‘wpb_widgets_init’);

Denne koden registrerer et nytt sidefelt eller et widget-klart område for temaet ditt.

Du kan nå gå til Utseende »Widgets side, så ser du et nytt widget-område merket ‘Egendefinert topptekst widgetområde’.

Tilpasset header-widget-område

Gå videre, og legg til en tekstwidget til dette nyopprettede widgetområdet og lagre det. Se vår guide for hvordan du legger til og bruker widgets i WordPress for detaljerte instruksjoner om hvordan du legger til widgeter.

Trinn 2: Vis den tilpassede topptekst-widgeten

Hvis du besøker nettstedet ditt nå, vil du ikke kunne se tekstwidgeten du nettopp la til den nyopprettede overskriftswidgeten.

Det er fordi vi ennå ikke har fortalt WordPress hvor vi skal vise dette widgetområdet.

La oss gjøre det på dette trinnet.

Du må redigere header.php-filen i ditt tema og legge til denne koden der du vil vise det tilpassede widgetområdet.

<?php

if (is_active_sidebar (’tilpasset header-widget’)): ?>

<?php dynamic_sidebar (’tilpasset header-widget’); ?>

<?php endif; ?>

Ikke glem å lagre endringene dine.

Du kan nå besøke nettstedet ditt, og du vil se området for topptekst widgeten.

Unstyled header widget

Du vil merke at det ser litt upolert ut. Det er der du trenger CSS for å få det til å se bedre ut.

Trinn 3: Style Header Widget-området ved hjelp av CSS

Avhengig av temaet ditt, må du legge til CSS for å kontrollere hvordan header-widgetområdet og hver widget inni det vises.

Den enkleste måten å gjøre dette på er ved å bruke CSS Hero-plugin. Det lar deg bruke et intuitivt brukergrensesnitt for å endre CSS for ethvert WordPress-tema. For mer informasjon se vår CSS Hero-anmeldelse.

Hvis du ikke vil bruke en plugin, kan du legge til tilpassede css til temaet ditt ved å gå til Utseende »Tilpass side.

Dette vil starte WordPress-tematilpasningsgrensesnittet. Du må klikke på fanen ‘Tilleggs CSS’.

Legge til tilpasset CSS til et WordPress-tema

Den ekstra CSS-fanen i tematilpasning lar deg legge til din tilpassede CSS mens du ser på endringene vises i live-forhåndsvisningen.

Av hensyn til denne opplæringen antar vi at du bare vil bruke dette området til å legge til en enkelt widget for å vise bannerannonser, eller en egendefinert menywidget.

Her er noen eksempler på CSS som hjelper deg i gang.

div # header-widget-område {
bredde: 100%;
bakgrunnsfarge: # f7f7f7;
border-bottom: 1px solid #eeeeee;
tekstjustering: sentrum;
}
h2.chw-title {
margin-top: 0px;
tekstjustering: venstre;
tekst-transform: store bokstaver;
skriftstørrelse: liten;
bakgrunnsfarge: #feffce;
bredde: 130px;
polstring: 5px;
}

Slik så ut vårt tilpassede header widget-område på standard Twenty Seventeen-temaet.

Forhåndsvisning av widget-widgeten

Det kan hende du må justere CSS for å samsvare med temaet ditt. Ta en titt på vår guide for hvordan du legger til tilpassede stiler til WordPress-widgeter.

Vi håper denne artikkelen hjalp deg med å lære hvordan du legger til en WordPress-widget i toppteksten til nettstedet ditt. Det kan også være lurt å se listen over 25 mest nyttige WordPress-widgeter for nettstedet ditt.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me