Leter du etter en enkel måte å tilpasse WordPress header?
fordi overskriften din sitter øverst på hver side, spiller den en viktig rolle i å merke nettstedet ditt, hjelpe de besøkende til å navigere og fremme ditt viktigste innhold.
men for å få mest mulig ut av nettstedets overskrift, trenger du en måte å redigere den på, som mange temaer ikke tilbyr.
i dette innlegget deler vi noen forskjellige taktikker som du kan bruke til å tilpasse overskriften I WordPress ved hjelp av både enkle dra-og-slipp-grensesnitt og din egen kode.
det enkleste alternativet er å bruke Astra-temaet og dets dra-og-slipp-header builder, men vi deler også noen andre taktikker som vil fungere med Et Hvilket Som Helst WordPress-tema.
- Hva Er WordPress Header?
- Hvordan Tilpasse WordPress Header Med Astra
- 1. Åpne Astra Header Builder
- 2. Legg Til Og Organiser Topptekstinnhold
- 3. Tilpass Header Layout
- 4. Eksperimenter Med Forskjellige Typer Overskrifter
- Tre Andre Måter Å Tilpasse WordPress Header
- 1. Bruk Temaets Tilpassingsinnstillinger
- 2. Bruk Elementor Og En Gratis Tilpasset Header Plugin
- 3. Bruk Egendefinert Kode (Avansert)
- Tilpass WordPress Header I Dag
Hva Er WordPress Header?
WordPress-overskriften er den delen av nettstedet ditt som vises øverst på hver side. Vanligvis inneholder den minst to elementer på det minste minimum:
- nettstedslogo/identitet
- Navigasjonsmeny (er)
For eksempel, her er hva overskriften ser ut på Astra bloggen. Du kan se at Den inneholder Astra-logoen, samt to separate navigasjonsmenyer:
Avhengig av dine behov kan du også inkludere andre elementer som sosiale medier ikoner, en søkeboks, kampanjer, telefonnummer og annen informasjon.
Hvis Du noen gang trenger å se hvordan Det fungerer, Er WordPress-overskriften inneholdt i overskriften.php-fil i Ditt WordPress-tema.
Hvordan Tilpasse WordPress Header Med Astra
hvis du vil ha full kontroll over Din WordPress header, gratis Astra tema gir deg en dra-og-slipp, no-kode måte å tilpasse Din WordPress header.
du kan se endringene dine med en gang i en forhåndsvisning av nettstedet ditt, og du kan enkelt legge til forskjellige typer innhold, for eksempel knapper, sosiale ikoner, en søkeboks og mer.
for å komme i gang, må du installere Og aktivere Astra tema. Du kan også importere en av de hundrevis av forhåndsbygde demosider for å komme raskt i gang. Hvis du trenger en hjelpende hånd med noen av disse trinnene, vi har nok av guider for å hjelpe deg ut:
- Slik installerer Du Astra
- slik importerer du startnettsteder
når du har ditt grunnleggende nettsted klar til å gå, kan du tilpasse overskriften din ved Hjelp Av Astra.
Hallo! Mitt Navn Er Sujay Og Jeg ER Administrerende DIREKTØR I Astra.
Vi er på oppdrag for å hjelpe små bedrifter med å vokse online med rimelige programvareprodukter og utdanningen du trenger for å lykkes.
Legg igjen en kommentar nedenfor hvis du ønsker å delta i samtalen, eller klikk her hvis du ønsker personlig hjelp eller å engasjere seg med vårt team privat.
1. Åpne Astra Header Builder
for å komme i gang, gå Til Appearance → Tilpass I WordPress dashbordet for å starte den innfødte WordPress Customizer. Velg Deretter Header Builder-alternativet:
Når du starter header builder, vil du se et nytt sett med alternativer der du kan kontrollere utformingen av overskriften:
2. Legg Til Og Organiser Topptekstinnhold
nå for den morsomme delen-legge til innhold. Du kan se at du har tre rader i topptekstbyggeren. Hver rad styrer innholdet for en annen del av toppteksten:
- Over header
- Primær header – Dette er hvor du vil sette ditt «viktigste» innhold.
- under header
Du vil absolutt inkludere innhold i primærhodet, og da har du muligheten til å legge til innhold over eller under det i henhold til dine behov.
hvis du vil legge til innhold, kan du klikke på stedet der du vil legge til innhold. Dette vil åpne et sett med alternativer:
- Primærmeny
- Sekundær meny
- Logo
- Knapp
- Søk
- Sosial
- HTML 1
- HTML 2
Vær oppmerksom på at når du legger til innhold, ser du færre alternativer. For eksempel kan du bare legge til logoen din en gang, slik at alternativet forsvinner når du allerede har lagt til en logo i overskriften:
Når du har lagt til noe innhold, kan du klikke på innholdet for å åpne innstillingene. Hvis du for eksempel legger til en knapp, kan du kontrollere knappeteksten og koblingen.
Du kan også åpne Designinnstillingene for å tilpasse ting ytterligere:
hvis du vil omorganisere innholdet eller flytte det til en annen rad, er alt du trenger å gjøre, å dra og slippe det:
3. Tilpass Header Layout
Ovenfor viste Vi deg hvordan du tilpasser de enkelte elementene i overskriften. Du har også flere alternativer for å tilpasse overskriften som helhet.
Først kan du gå Til Design-fanen i hovedhodebyggeren for å kontrollere bredden og avstanden til overskriften. Du kan også klikke på tannhjulikonet for hver overskriftsrad for å tilpasse høyden og designen:
4. Eksperimenter Med Forskjellige Typer Overskrifter
Avhengig av om du bruker Den gratis versjonen Av Astra Eller Astra Pro, får du også tilgang til flere typer overskrifter, for eksempel gjennomsiktige overskrifter (gratis) og klebrige overskrifter (Pro).
Du kan bruke samme topp-og bunntekstbygger ovenfor for å designe den gjennomsiktige eller klissete toppteksten. Du ser disse alternativene under Overskrifttyper-delen. Du kan klikke på dem for å utvide innstillingene og designe de forskjellige header typer:
Tre Andre Måter Å Tilpasse WordPress Header
Mens Astra ‘ s dra-og-slipp header builder tilbyr den enkleste måten å tilpasse WordPress header, er det også andre taktikker du kan bruke, uansett hvilket tema du bruker.
her er noen av de beste strategiene…
1. Bruk Temaets Tilpassingsinnstillinger
De Fleste WordPress-temaer gir deg litt kontroll over nettstedets overskrift i den innfødte WordPress-Tilpasseren. Du er usannsynlig å få detaljnivået Som Astra gir deg, men du får noen alternativer for å kontrollere hvordan overskriften ser ut og fungerer.
disse alternativene vil variere basert på temaet ditt, men du kan vanligvis åpne dem ved å klikke på det blå blyantikonet ved siden av elementer i overskriften. For eksempel, i den nye Tjue Tjueen standardtema, kan du se at du er i stand til å tilpasse din:
- Logo
- sideoverskrift
- Meny
hvis du trenger litt ekstra hjelp, kan du konsultere temautviklerens dokumentasjon.
2. Bruk Elementor Og En Gratis Tilpasset Header Plugin
Hvis Du ikke er kjent Med Elementor, det er en visuell, dra-og-slipp designverktøy som du kan bruke til å lage innhold på nettstedet ditt. Med Gratis Elementor-Header, Footer & Blokker Mal tilpasset header WordPress plugin, kan du bruke den gratis versjonen Av Elementor å designe Din Egen WordPress tilpasset header.
denne plugin fungerer perfekt med gratis Astra tema, samt alle Andre WordPress tema du kan bruke.
for å komme i gang, installer og aktiver gratis plugin fra WordPress.org. Du må også installere Den gratis versjonen Av Elementor hvis du ikke allerede har gjort det.
når du har gjort det, går Du Til Utseende → Topptekstbunn & Blokker Og klikker På Legg Til Ny:
Gi malen et navn, og velg Topptekst under Type Mal. Du kan også bruke Alternativene Vis På Eller Brukerroller til å målrette overskriften mot bestemt innhold / brukere.
Publiser deretter toppteksten og klikk På Rediger Med Elementor for å åpne visual builder:
Nå kan du tilpasse toppteksten ved Hjelp Av Elementor visuelle dra-og-slipp-grensesnitt. Den plugin gir deg også ny Header, Bunntekst & Blokker widgets som du kan bruke til å legge til viktige elementer, som nettstedets logo eller en navigasjonsmeny:
hvis du vil vite mer om Å bruke Elementor, sjekk ut vår fulle Elementor tutorial eller Elementor gjennomgang.
3. Bruk Egendefinert Kode (Avansert)
Til Slutt, hvis du er en avansert bruker, Kan Du også tilpasse WordPress-overskriften ved hjelp av din egen kode. For å gjøre dette trenger du minst en arbeidskunnskap om HTML, PHP og CSS, så dette er ikke et alternativ for ikke-tekniske brukere.
hvis du ikke kjenner disse kodespråkene, vil du holde fast ved en av de tidligere metodene på denne listen.
det er to deler å bruke kode for å tilpasse toppteksten:
- HTML / PHP-dette styrer det faktiske innholdet i overskriften.
- CSS-dette styrer styling av overskriften.
som vi nevnte tidligere, ligger nettstedets topptekstinnhold i toppteksten.php-fil. Så for å tilpasse topptekstens innhold, må du jobbe direkte med denne filen. Eller noen temaer, for eksempel Astra, tilbyr også kroker som du kan bruke til å legge til innhold i overskriften.
I Astra visual hooks guide, kan du se at du har en rekke alternativer for å tilpasse overskriften:
Hvis du vil redigere temaets overskrift.php-fil direkte, bør du bruke et barntema for å sikre at du ikke overskriver endringene dine når du oppdaterer temaet ditt.
på den annen side, hvis du bruker kroker, trenger du ikke å bruke et barntema så lenge du bruker et plugin som Astra Hooks eller Kodebiter. Hvis du legger dine kroker direkte til temaets funksjoner.php-fil, bør du fortsatt bruke et barn tema, skjønt.
Med Astra Pro har Du også muligheten til å legge til kroker ved Hjelp Av Astra Pros Tilpassede Layoutfunksjon.
den fine Tingen Om Astra Pros Tilpassede Oppsett er at du kan bruke visningsregler for å kontrollere nøyaktig når endringene vises. Du kan for eksempel legge til egendefinert innhold i toppteksten som bare vises for påloggede brukere.
slik tilpasser du topptekstens innhold – men hva med stylingen?
hvis du vil tilpasse topptekstens styling, kan du redigere stilen.css-fil direkte hvis du bruker et barn tema. Eller du kan bruke Det Ekstra CSS-området I WordPress Customizer for å legge til dine egne tilpassede stiler i overskriften.
Tilpass WordPress Header I Dag
Din WordPress header spiller en viktig rolle i nettstedets suksess. Det hjelper merkevaren din nettside, veilede besøkende til nøkkelinnhold, fremme viktig informasjon eller sosiale profiler, og mye mer.
den enkleste måten å få full kontroll over nettstedets topptekst er å bruke Gratis Astra tema. Med Astra, får du tilgang til en visuell, dra-og-slipp header byggmester. Du trenger ikke noen kode eller eksterne plugins-du får 100% kontroll over overskriften din fra Høyre inne I WordPress Customizer.
i andre situasjoner kan du også bruke Et Annet tema Customizer innstillinger, Elementor-Header, Bunntekst & Blokker Mal plugin, eller din egen kode hvis du har teknisk kunnskap.