CSS: Ändra namn på WP-bloggens navigation

Denna artikel förklarar och visar hur du gör för att, med hjälp av CSS, byta namn på bloggens (WordPress) navigationstexter som finns längst ner vid sista inlägget. Oftast så står det något i stil med ”Äldre inlägg” och klickar man vidare för att läsa så står det ”Tidigare inlägg”. Med hjälp av CSS så kan vi både dölja texten vi inte vill ha och lägga till ny. Så här gör du.


1: Inspect Tool

Det första du behöver är din webbläsares inbyggda verktyg ”Inspect”. Du startar Inspect genom att högerklicka på den länk du vill ändra och därefter väljer du ”Inspect” längst ner. Se exempelbild.

Exemplet ovan är från Helsingborgs Dagblad.

 

Vad jag vill få fram är CSS-informationen (kallas för CSS-klass)  för ”Äldre artiklar” länken. I exemplet nedan kan vi se att CSS-klassen som hänvisar till länken ovan är .nav-previous och går man dit och sedan vill tillbaka så heter CSS-koden .nav-next,  vilket inte är så logiskt, men så är WordPress byggt. I exemplet nedan har jag redan bytt namn på mina länkar.

 


2: Anpassa & Extra CSS

I WordPress Admin meny bredvid sidans namn finns en knapp som heter ”Anpassa”. Klicka på den och välj sedan ”Extra CSS”. Så här ser det ut innan och efter.


 

Koden är densamma men beror på vad din CSS-klass heter. Som vi ser ovan från Inspect så vet vi vad klasserna heter. Komplett CSS kod, i mitt fall är:

1)
.nav-previous {
visibility: hidden;
}

1.1)
.nav-previous a:after {
content: "Äldre artiklar →";
visibility: visible;
}

2)
.nav-next {
visibility: hidden;
}

2.2)
.nav-next a:after {
content: "← Tidigare artiklar";
visibility: visible;
}

 

Det första vi gör är att dölja (1) den länk som redan finns där vilket vi gör med CSS-koden visibility: hidden; och sedan lägger vi till ett nytt namn för samma ”klass” (1.1) genom att lägga till CSS-koden content: "Äldre artiklar →";. Sedan gör vi samma sak för länken som skickar oss tillbaka med nummer två.

Exempel:

Låt oss säga att din CSS-kod heter .nav-prev-blog och .nav-next-blog, då hade din kod sett ut så här istället:

.nav-prev-blog {
visibility: hidden;
}

.nav-prev-blogg a:after {
content: "SKRIV HÄR VAD LÄNKEN SKA HETA";
visibility: visible;
}

.nav-next-blog {
visibility: hidden;
}

.nav-next-blog a:after {
content: "SKRIV HÄR VAD LÄNKEN SKA HETA";
visibility: visible;
}

 




Det var allt :) Vill du ställa en fråga eller behöver du hjälp?
Vänligen lämna en kommentar eller kontakta mig på Facebook Messenger.



 

Om Bjornen

Jag är en hobbyförfattare & WP-nörd som försöker tömma hjärncellerna på kreativitet. När jag inte skriver så utökar jag mina WP-kunskaper genom att blogga och hänga på diverse sociala medier. Jag gör mitt bästa och min passion för WordPress enbart växer.

Kommentera


OBS: Alla kommentarer granskas innan dom blir publicerade. Ha en go dag!