letar du efter ett enkelt sätt att anpassa WordPress-rubriken?
eftersom din rubrik sitter högst upp på varje sida spelar den en viktig roll för att märka din webbplats, hjälpa dina besökare att navigera och marknadsföra ditt viktigaste innehåll.
men för att få flest fördelar från Webbplatsens rubrik behöver du ett sätt att redigera det, vilket många teman inte erbjuder.
i det här inlägget delar vi några olika taktiker som du kan använda för att anpassa rubriken i WordPress med både enkla dra-och-släpp-gränssnitt och din egen kod.
det enklaste alternativet är att använda Astra-temat och dess dra-och-släpp-header builder, men vi delar också några andra taktiker som fungerar med alla WordPress-Teman.
- Vad är WordPress-rubriken?
- så här anpassar du WordPress-rubriken med Astra
- 1. Öppna Astra Header Builder
- 2. Lägg till och organisera Rubrikinnehåll
- 3. Anpassa Sidhuvudlayout
- 4. Experimentera med olika typer av rubriker
- tre andra sätt att anpassa WordPress-rubriken
- 1. Använd ditt temas anpassningsinställningar
- 2. Använd Elementor och en gratis Anpassad Header Plugin
- 3. Använd anpassad kod (avancerad)
- anpassa din WordPress-rubrik idag
Vad är WordPress-rubriken?
WordPress-rubriken är den del av din webbplats som visas högst upp på varje sida. Typiskt, den innehåller minst två element vid ett minimum:
- Webbplatslogotyp/identitet
- navigeringsmeny (er)
till exempel, här är vad rubriken ser ut på Astra-bloggen. Du kan se att den innehåller Astra-logotypen, samt två separata navigeringsmenyer:
beroende på dina behov kan du också inkludera andra element som ikoner för sociala medier, en sökruta, kampanjer, ditt telefonnummer och annan information.
om du någonsin behöver se hur det fungerar finns WordPress-rubriken i rubriken.php-fil i ditt WordPress-tema.
så här anpassar du WordPress-rubriken med Astra
om du vill ha full kontroll över din WordPress-rubrik, ger det gratis Astra-temat dig ett drag-och-släpp, utan kod sätt att helt anpassa din WordPress-rubrik.
du kan se dina ändringar direkt i en liveförhandsvisning av din webbplats och du kan enkelt lägga till olika typer av innehåll, till exempel knappar, sociala ikoner, en sökruta och mer.
för att komma igång vill du installera och aktivera Astra-temat. Du kan också importera en av de hundratals förbyggda demosajterna för att snabbt komma igång. Om du behöver en hjälpande hand med något av dessa steg, vi har gott om guider som hjälper dig:
- så här installerar du Astra
- så här importerar du startsidor
när du har din grundläggande webbplats redo att gå, så här anpassar du din rubrik med Astra.
Hallå! Mitt namn är Sujay och jag är VD för Astra.
vi är på uppdrag att hjälpa småföretag att växa online med prisvärda mjukvaruprodukter och den utbildning du behöver för att lyckas.
lämna en kommentar nedan om du vill delta i konversationen, eller klicka här om du vill ha personlig hjälp eller att samarbeta med vårt team privat.
1. Öppna Astra Header Builder
för att komma igång, gå till utseende Bisexuell Anpassa i din WordPress-instrumentpanel för att starta den inbyggda WordPress Customizer. Välj sedan alternativet Header Builder:
när du har startat header builder ser du en ny uppsättning alternativ där du kan styra layouten för din rubrik:
2. Lägg till och organisera Rubrikinnehåll
nu för den roliga delen-lägga till innehåll. Du kan se att du har tre rader i rubrikbyggaren. Varje rad styr innehållet för en annan del av rubriken:
- ovanför rubrik
- primär rubrik-det är här du lägger ditt ”huvud” innehåll.
- under rubriken
du vill absolut inkludera innehåll i den primära rubriken, och sedan har du möjlighet att lägga till innehåll över eller under det enligt dina behov.
för att lägga till innehåll kan du klicka på den plats där du vill lägga till innehåll. Detta öppnar en uppsättning alternativ:
- primär meny
- sekundär meny
- Logo
- knapp
- Sök
- Social
- HTML 1
- HTML 2
Observera att när du lägger till innehåll ser du färre alternativ. Du kan till exempel bara lägga till din logotyp en gång, så det alternativet försvinner när du redan har lagt till en logotyp i din rubrik:
när du har lagt till något innehåll kan du klicka på det innehållet för att öppna dess inställningar. Om du till exempel lägger till en knapp kan du styra knapptexten och länken.
du kan också öppna Designinställningarna för att anpassa saker ytterligare:
om du vill ordna om ditt innehåll eller flytta det till en annan rad behöver du bara dra och släppa det:
3. Anpassa Sidhuvudlayout
ovan visade vi dig hur du anpassar de enskilda elementen i din rubrik. Du har också flera alternativ för att anpassa din rubrik som helhet.
först kan du gå till fliken Design i huvudhuvudbyggaren för att styra bredden och avståndet på din rubrik. Du kan också klicka på kugghjulsikonen för varje rubrikrad för att anpassa dess höjd och design:
4. Experimentera med olika typer av rubriker
beroende på om du använder gratisversionen av Astra eller Astra Pro får du också tillgång till ytterligare typer av rubriker, till exempel transparenta rubriker (gratis) och klibbiga rubriker (Pro).
du kan använda samma sidhuvud och sidfotbyggare ovan för att designa din transparenta eller klibbiga rubrik. Du ser dessa alternativ under avsnittet Rubriktyper. Du kan klicka på dem för att utöka inställningarna och utforma de olika rubriktyperna:
tre andra sätt att anpassa WordPress-rubriken
medan Astras drag-och-släpp-header builder erbjuder det enklaste sättet att anpassa WordPress-rubriken, finns det också andra taktiker som du kan använda, oavsett vilket tema du använder.
här är några av de bästa strategierna…
1. Använd ditt temas anpassningsinställningar
de flesta WordPress-teman ger dig viss kontroll över webbplatsens rubrik i den inbyggda WordPress-Anpassaren. Det är osannolikt att du får den detaljnivå som Astra ger dig, men du får några alternativ för att styra hur din rubrik ser ut och fungerar.
dessa alternativ varierar beroende på ditt tema, men du kan vanligtvis öppna dem genom att klicka på den blå pennikonen bredvid element i din rubrik. I det nya Twenty Twenty-One standardtemat kan du till exempel se att du kan anpassa din:
- logotyp
- Webbplatsrubrik
- meny
om du behöver lite extra hjälp kan du konsultera din temautvecklares dokumentation.
2. Använd Elementor och en gratis Anpassad Header Plugin
om du inte är bekant med Elementor, det är en visuell, dra och släpp designverktyg som du kan använda för att skapa innehåll på din webbplats. Med den fria Elementor-Header, Footer & Block Mall Anpassad header WordPress plugin, kan du använda den fria versionen av Elementor att designa din egen WordPress anpassade header.
denna plugin fungerar perfekt med gratis Astra tema, liksom alla andra WordPress tema du kan använda.
för att komma igång, installera och aktivera gratis plugin från WordPress.org. du måste också installera gratisversionen av Elementor om du inte redan har gjort det.
när du har gjort det, gå till utseende Bisexuell sidfot sidfot & block och klicka på Lägg till ny:
ge din mall ett namn och välj rubrik under Typ av Mall. Du kan också använda alternativen Visa på eller användarroller för att rikta din rubrik till specifikt innehåll/användare.
publicera sedan din rubrik och klicka på Redigera med Elementor för att öppna visual builder:
nu kan du helt anpassa din rubrik med Elementor visuella dra-och-släpp-gränssnitt. Insticksprogrammet ger dig också nya sidhuvud, sidfot & Block widgets som du kan använda för att lägga till viktiga platselement, som webbplatsens logotyp eller en navigeringsmeny:
för att lära dig mer om att använda Elementor, kolla in vår fullständiga Elementor-handledning eller Elementor-recension.
3. Använd anpassad kod (avancerad)
slutligen, om du är en avancerad användare, kan du också anpassa WordPress-rubriken med din egen kod. För att göra detta behöver du åtminstone en fungerande kunskap om HTML, PHP och CSS, så det här är inte ett alternativ för icke-tekniska användare.
om du inte känner till dessa kodningsspråk vill du hålla fast vid en av de tidigare metoderna på den här listan.
det finns två delar att använda kod för att anpassa din rubrik:
- HTML / PHP-detta styr det faktiska innehållet i din rubrik.
- CSS-detta styr stylingen av din rubrik.
som vi nämnde tidigare finns webbplatsens rubrikinnehåll i rubriken.php-fil. Så för att anpassa din headers innehåll måste du arbeta direkt med den här filen. Eller, vissa teman, som Astra, erbjuder också krokar som du kan använda för att lägga till innehåll i rubriken.
i Astra visual hooks guide kan du se att du har ett antal alternativ för att anpassa rubriken:
om du vill redigera ditt temas rubrik.php-fil direkt, du bör använda ett barntema för att se till att du inte skriver över dina ändringar när du uppdaterar ditt tema.
å andra sidan, om du använder krokar behöver du inte använda ett barntema så länge du använder ett plugin som Astra Hooks eller Code Snippets. Om du lägger till dina krokar direkt till ditt temas funktioner.php-fil, du bör fortfarande använda ett barntema.
med Astra Pro har du också möjlighet att lägga till krokar med Astra Pros anpassade Layoutfunktion.
det snygga med Astra Pros anpassade layouter är att du kan använda visningsregler för att styra exakt när ändringarna visas. Du kan till exempel lägga till anpassat innehåll i din rubrik som bara visas för inloggade användare.
så här anpassar du ditt headers innehåll – men hur är det med stylingen?
för att anpassa din headers styling kan du redigera stilen.css-fil direkt om du använder ett barntema. Eller så kan du använda det extra CSS-området i WordPress Customizer för att lägga till dina egna anpassade stilar i rubriken.
anpassa din WordPress-rubrik idag
din WordPress-rubrik spelar en viktig roll för din webbplats framgång. Det hjälper varumärket din webbplats, vägleda dina besökare till viktiga innehåll, främja viktig information eller sociala profiler, och mycket mer.
det enklaste sättet att få full kontroll över webbplatsens rubrik är att använda det gratis Astra-temat. Med Astra får du tillgång till en visuell, dra-och-släpp-rubrikbyggare. Du behöver ingen kod eller externa plugins – du får 100% kontroll över din rubrik från höger inuti WordPress Customizer.
i andra situationer kan du också använda ett annat temas anpassningsinställningar, Elementor – Header, Footer & Block Template plugin eller din egen kod om du har teknisk kunskap.