En av de viktigaste visuella elementen på din webbplats representeras av rubriken. Eftersom den är placerad strategiskt högst upp kan WordPress-huvudet vara det första elementet en besökare lägger märke till när han besöker din webbplats.

Detta är den främsta anledningen till att du bör ägna enorm uppmärksamhet när du designar den. Ta en titt på wpDataTables webbplatshuvud.

Rubriken dikterar resten av webbplatsens identitet, vilket innebär att du kan anpassa den efter din webbplats mål. Effekten en webbsida har på en besökare bör vara den faktor som motiverar dig att investera mer av din tid på att designa en bra.

Den här artikeln representerar en kort guide om hur du skapar anpassade WordPress-rubriker. Fortsätt läsa för att lära dig mer om detta ämne.

Förstå konceptet med en WordPress-header

WordPress-teman har en funktion som kallas Custom Headers. Den här funktionen innebär att temat stöder modifiering av headerbilden enligt ditt eget tycke så att du kan skapa en anpassad header för din webbplats.

När den här funktionen är aktiverad för temat du använder kan du ersätta standardbilden med en anpassad rubrik som du väljer. Anpassade rubriker är mycket mer tilltalande för ögat jämfört med standard. Det är därför du bör använda det integrerade WordPress-redigeringshuvudet.

För att göra det kort kan WordPress-huvudet påverka en besökares beslut om att stanna kvar på webbplatsen eller inte. Eftersom den genomsnittliga tiden som en besökare spenderar på en webbplats är ett par minuter, måste du använda alla möjliga alternativ för att väcka deras intresse och behålla deras uppmärksamhet fokuserad på vad din webbplats har att säga.

WordPress-rubriker kan anpassas genom att lägga till text, widgets och så vidare. Att anpassa det efter dina behov kommer att ha en synlig effekt på lång sikt.

Vikten av WordPress-headers

Många undviker att ha anpassade rubriker eftersom de tror att det inte är relevant för besökarna.

Faktum är att en anpassad WordPress-header kan diktera hur hela din webbplats uppfattas. Om en besökares uppmärksamhet inte väcks inom 10-20 sekunder från det ögonblick då han gick in på webbplatsen, kommer han att lämna den omedelbart, vilket ökar avvisningsfrekvensen.

En anpassad rubrik ger dig mer kontroll över vad din webbplats sänder. Att modifiera WordPress-huvudkoden precis som du vill gör webbplatsen mycket mer flexibel än den var från början.

En annan vana som inte är fördelaktig för din webbplats är att helt enkelt placera din slogan i den anpassade rubriken på din WordPress-webbplats.

Kom på något unikt för att skapa ett gott intryck, annars kommer din publik inte att vara nöjd med hur det ser ut. Det finns också en mängd webbplatsplugins som kan hjälpa dig att skapa en anpassad rubrik.

Hur kan du lägga till en anpassad rubrik på din WordPress-webbplats?

Header Widgets

Vissa WordPress-teman kommer med widgets. Dessa widgetar kan väljas från adminpanelen. Om temat kommer med en separat rubrikwidget kan du lägga till den på din webbplats och enkelt få en anpassad rubrik.

Du kan till exempel lägga till AdSense i rubriken genom att helt enkelt dra runt widgeten och klistra in koden. Om ditt tema inte har ett widgetalternativ måste du redigera rubriken på egen hand. Några alternativ presenteras nedan.

"Header-widgets är en snabb lösning som skapar maximal designflexibilitet utan att sakta ner din webbplats", säger Jerry Low från Build This. "De är enkla nog för vem som helst att implementera och anpassa och göra det möjligt för webbansvariga att snabbt infoga en uppmaning, annons eller något annat betydande multimedieelement."

Anpassade huvudbilder

Först och främst, om du vill lägga till anpassade header-bilder, måste du komma till WordPress header editor, som finns under Utseende – Header.

Menyfliksområdet Utseende kan nås från WordPress-instrumentpanelen till vänster på din webbplats. Ett annat sätt att nå redaktören skulle vara att komma åt Utseende och sedan Anpassa och Header Media. Tänk på att alternativen kan skilja sig från ett tema till ett annat.

Efter att ha nått redaktören kommer WordPress att öppna din webbplats i en livedemo. På så sätt kan du observera ändringarna du gör i realtid och bestämma om du gillar förändringen eller inte.

När du har gått in i liveförhandsvisningsläget ändrar du den aktuella huvudbilden eller den tidigare uppladdade med ett nytt foto. För att göra det behöver du bara klicka på Lägg till en ny bild. Genom att klicka på knappen öppnas ditt mediebibliotek där du kan välja foton som du antingen laddat upp på din webbplats tidigare eller foton som du kan ladda upp just nu.

Välj det foto du vill använda som din huvudbild och beskära det efter dina behov. Måtten måste passa så att rubriken passar hemsidan. Du bör endast använda bilder av hög kvalitet för denna uppgift.

Om du vill ha något riktigt coolt och väldesignat, som WebDesignerDepot hade när det lanserades, är det bäst att anlita någon som gör grafiska designtjänster i Canva Pro, Illustrator eller Affinity Designer.

Ett annat snabbt alternativ för att ändra huvudbilden är att klicka på Randomize uppladdade eller föreslagna rubriker. WordPress kommer att välja en slumpmässig bild för din webbplats rubrik. Detta är en snabb metod för människor som vill ändra utseendet på sin webbplats dagligen.

videoklipp

På senare tid verkar videor vara mycket mer populära än bilder.

Rubrikbilder är fortfarande bra, men videor kan ersätta dem helt under kommande år.

För att lägga till en video i din WordPress-header har du två olika alternativ. Innan du lär dig hur du gör det bör du veta att alla videor som läggs till i rubriken ska vara ljudfria.

.mp4

Det första alternativet är att lägga till en .mp4-video från ditt eget mediebibliotek. Det enda videoformatet som WordPress accepterar för tillfället är .mp4, så använd en gratis onlinekonverterare om du inte har detta format.

Minska filstorleken så mycket som möjligt utan att förlora för mycket kvalitet. Storleken på din video bör vara cirka 2000×1200 px. När du har arrangerat din video kan du klicka på Välj video och ladda upp den. Resultaten bör nu synas på din webbplats.

Youtube

Det andra alternativet är mycket enklare än det första. Att använda videor från YouTube kräver bara lite kopiering och inklistring.

När du har hittat videon du vill använda kan du kopiera URL:en och klistra in den i formuläret du hittar i din WordPress-headerredigerare. Videon laddas snabbt och du bör kunna se förhandsvisningen. Se om den passar in i din anpassade rubrik och – om den inte gör det – leta efter andra som kan se bättre ut.

Plugins som du kan använda för att skapa en anpassad WordPress-header

Att använda ett WordPress-header-plugin kan göra ditt jobb mycket enklare om du inte kan hur du redigerar kod så väl. Här är en lista över de bästa plugins som kan hjälpa dig att skapa en anpassad rubrik och en kort beskrivning av deras funktioner:

Unik rubrik

Unique Header är ett WordPress-plugin för header som du definitivt borde prova. Du kan lägga till bilder från ditt WordPress-mediebibliotek eller ladda upp nya.

De anpassade rubrikerna du laddar upp kan sorteras baserat på taggar och kategorier, vilket är bra om du vill ändra utseendet på din rubrik ganska ofta. Insticksprogrammet har flera funktioner som du kan dra enorm nytta av om du inte har mycket kunskap om kodning.

Du bör veta att för att använda Unique Header måste du hitta ett tema som inte har en inbyggd header-funktion, vilket beskrevs tidigare i den här artikeln.

Funktionerna i Unique Header inkluderar ett användarvänligt gränssnitt, lägga till en rubrik till ett visst inlägg eller en sida, organisera rubrikerna, aktivera och inaktivera rubrikerna och andra. Insticksprogrammet kan också användas av nybörjare.

Poppar sidofält och widgets

För personer som vill ha mer avancerade anpassade rubriker är Popping Sidebars & Widgets definitivt den bästa plugin. Insticksprogrammet låter dig skapa dina egna anpassade widgets.

Widgetarna kan vara text-, formulär- eller sociala medier. Detta är väldigt bekvämt eftersom du helt enkelt kan dra in widgetarna efter att du har skapat dem. Du kan publicera dina widgets på din faktiska rubrik eller ändra den helt. Plugin-programmet låter dig publicera widgets i andra delar av din webbplats, till exempel sidofältet eller sidfoten.

Header Footer Script Loader Plugin

Header Footer Script Loader Plugin lanserades av CreativeMinds. Det är ett speciellt plugin, eftersom du kan hantera olika skript med det också. Premiumversionen kostar cirka $40 för en webbplats och $60 för en till fem webbplatser.

Plugin-programmet säkerhetskopieras också av supporten och regelbundna uppdateringar. Insticksprogrammet tillåter användare att förinstallera skripten och stilarna, vilket ger dem full kontroll över deras utseende och placering. Insticksprogrammet Header Footer Script är känt för att förbättra laddningstiderna för webbplatsen genom att minska antalet skript som används.

Infoga sidhuvuden och sidfötter

Detta plugin som heter Infoga sidhuvuden och sidfötter är precis så enkelt som namnet säger det. Det är ett mycket begripligt plugin som ger användarna möjlighet att infoga kod direkt i huvudet de vill ändra.

Insticksprogrammet är gratis och är kompatibelt med de flesta teman som WordPress tillhandahåller. Den har väldigt höga betyg och den uppskattas av folk som använder den.

Mer än så har plugin-programmet en möjlighet att ändra alla koder och skript, oavsett om de är skapade med Java eller HTML. Plugin-programmet är väldigt enkelt att ställa in, vilket gör det bra för nybörjare i WordPress.

För att enkelt ändra utseendet på din WordPress-header, ladda ner det kostnadsfria plugin-programmet och börja leka med det. Tänk på att du också kan lägga till CSS-kodblock för att anpassa utseendet på rubriken ännu mer.

Sidhuvud och sidfot

Header and Footer är ett enkelt plugin som kontrollerar koden för din webbplats sidhuvuden och sidfötter. Du kan redigera koden genom att lägga till rader när som helst på ett mycket snabbt sätt.

Plugin-programmet kan erhållas gratis på WordPress.org och regelbundna uppdateringar släpps för det.

Du bör också veta att plugins skapare erbjuder gratis support om du stöter på problem med det. Det är ett plugin som kan användas bekvämt från vilken enhet som helst och av alla användare.

Skript för sidhuvud och sidfot

Detta är ett annat mycket lättanvänt plugin för att skapa anpassade rubriker. WordPress-huvudet kan redigeras genom att lägga till dina egna kodblock, genom att ändra typsnitt och till och med stilar.

Insticksprogrammet Header and Footer Scripts låter dig infoga CSS-koder, HTML-taggar eller JavaScript i sidhuvudets standardkod. Insticksprogrammet är väldigt enkelt och kan även användas av nybörjare.

AddFunc Head and Footer Code

AddFunc Head and Footer Code-plugin ger användare chansen att redigera kod för specifika inlägg. Detta är användbart när du inte vill redigera hela webbplatsen. Insticksprogrammet är också gratis och visade sig vara mycket effektivt för detta ändamål.

Plugin-programmet är mycket vänligt för Google Analytics och Facebook Pixel eller andra spårningstjänster. Uppdateringarna för detta plugin är snabba och lyhörda. Om du vill spåra information på din webbplats kan detta vara det bästa valet du har.

Hej, visste du att data också kan vara vackert?

wpDataTables kan göra det så. Det finns en bra anledning till varför det är WordPress-plugin nummer 1 för att skapa responsiva tabeller och diagram.

Ett faktiskt exempel på wpDataTables i naturen

Och det är verkligen lätt att göra något så här:

Du tillhandahåller tabelldata
Konfigurera och anpassa den
Publicera det i ett inlägg eller sida

Och det är inte bara snyggt, utan också praktiskt. Du kan skapa stora tabeller med upp till miljontals rader, eller så kan du använda avancerade filter och sökning, eller så kan du gå vilda och göra det redigerbart.

"Ja, men jag gillar Excel för mycket och det finns inget sådant på webbplatser". Ja, det finns. Du kan använda villkorlig formatering som i Excel eller Google Sheets.

Sa jag att du också kan skapa diagram med dina data? Och det är bara en liten del. Det finns många andra funktioner för dig.

Hur man redigerar en WordPress-header med hjälp av kod

Om du undrar hur du redigerar rubriken i WordPress genom att använda koden, är du på rätt plats. Rubrikkoder är inte komplicerade och du kommer att kunna ändra dem genom att helt enkelt kopiera och klistra in några rader här och där.

En WordPress-header kommer med standardinställningar som kan ändras genom att lägga till andra rader kod till dem. För att göra det måste du hitta filen som innehåller rubriken. Hitta WordPress-instrumentpanelen, välj Utseende och sedan Editor. Filerna som listas är de som utgör din webbplats.

Lämna header.php-filen orörd, eftersom den representerar huvudets funktioner och inte utseendet på den. Utseendet på rubriken styrs av filen styles.css, som du vill söka efter och redigera. Innan du ändrar något, rekommenderas att kopiera och klistra in originalfilen någonstans säkert.

Ett annat alternativ för att redigera WordPress-huvudet är via det tema du använder. De flesta teman har anpassningsalternativ. Dessa alternativ låter dig redigera webbplatsen och se ändringarna du gör live, för att hjälpa dig att avgöra om ändringarna är vad du vill eller inte.

De flesta teman har ett CSS-alternativ. Med det här alternativet kan du klistra in rader med kod här för att redigera utseendet på webbplatsen, i det här fallet rubriken. Kommandot för att ändra bakgrundsfärgen ser ut så här:

.header { background: white;}

Andra kommandon för att anpassa din webbplats sidhuvud

Naturligtvis kan du ändra mycket mer än bara färgen på bakgrunden. Du kan ersätta andra rader kod för att ändra utseendet på rubriken. Några av dessa är:

Ändra teckensnittsstilen till kursiv: teckensnitt:italic;
Ändra opacitetsnivån för bakgrunden (0 till 1):background-opacity: value
Ändra teckenstorlek: font-size:value px
Ändra stoppningen, samt riktningen på stoppningen: padding: valuepx
Ändra kantfärgen till vit eller annan hex-färg:border-color: white;
Ändra avståndet för att undvika överlappning:line-height: value px

Avslutande tankar om denna WordPress-huvudguide

Efter att ha förstått hur viktig WordPress-huvudet är för din webbplats bör du ta dig tid att designa den perfekta. Eftersom du har så många alternativ när det gäller att anpassa det, kanske du vill analysera dem alla och bara välja det som passar din webbplats behov.

Förhoppningsvis klargjorde den här guiden några av dina frågor om WordPress-rubriker. Om du inte är bra på att koda kan du alltid välja ett av plugins som listas ovan.

Om du tyckte om att läsa den här artikeln om anpassad WordPress-huvudguide, bör du kolla in den här om hur du ändrar teckensnittsfärg i WordPress.

Vi skrev också om några relaterade ämnen som WordPress multisite, WordPress som fastnat i underhållsläge, kostnad för webbplatsunderhåll, hur man lösenordsskyddar WordPress-webbplatsen, hur man inaktiverar kommentarer i WordPress, WordPress-instrumentpanelsinloggning och WordPress-tagline.

Inspelningskälla: wpdatatables.com