I 2014 fikk vi nye regler for universell utforming av nettsider. Der er det et eget kapittel som gjelder bruk av overskrifter på nettsider. Disse bør du prøve å følge uansett om reglene gjelder din nettside eller ikke. Det gjør rett og slett innholdet på siden lettere å lese, bedre optimalisert for søkemotorer og ikke minst mere brukervennlig for de som bruker skjermlesere. Akkurat det har vi skrevet om i en tidligere blogg som du kan lese her.
En overskrift er ikke alltid en overskrift 🙂
Ser du forskjell på denne:
Riktig bruk av overskrifter
og denne:
Riktig bruk av overskrifter
Ikke du heller nei? Men Google sine roboter ser noe annet enn det vi ser med det blotte øye.
Dette er det Google ser:
<h3>Riktig bruk av overskrifter</h3><p style=””>og denne:</p><p style=”font-size: 28px;“>Riktig bruk av overskrifter</p>
Google sine robots vil tillegge teksten mellom h3 taggene større verdi, enn den teksten som ligger mellom p tagger. Så bruk de viktigste søkeordene dine i overskrifter, og sørg for å markere de som overskrift og ikke bare endre størrelse på fonten.
Når vi snakker om overskrifter på WordPress sider, så er en overskrift en tekst du har markert som overskrift 1, overskrift 2 el.l i den visuelle editoren. Slik du ser i bildet under.
Så hvordan skjuler jeg titler på alle sider?
I eksemplet i videoen bruker jeg Minus themet fra Thrive Themes. Koden du må bruke, vil variere fra theme til theme, men metoden for å finne den er den samme.
Ved å inspisere tittelen her finner jeg ut at .cnt article h1.entry-title er det som styrer utseende på tittelen. Her ønsker jeg å skjule tittelen helt fra alle sider og legger derfor inn en “display: none;”. Hvis du faktisk velger å gjøre dette, så husk å markere første overskrift i artikkelen din med “Overskrift 1”.
.cnt article h1.entry-title {display: none;}
Men jeg vil jo ikke fjerne tittel fra alle sider, bare noen…..
Hvis du kun vil fjerne tittel fra forsiden din, så vil det som regel være nok å legge til .home foran resten av css koden:
.home .cnt article h1.entry-title {display: none;}
Er det andre sider du vil fjerne titler fra, kan du bruke sidens “page id”. Den finner du ved å inspisere kode helt øverst på den aktuelle siden. I eksempelet under ser vi at siden har page-id-2.
Så i dette tilfellet kan vi skjule tittel på den aktuelle siden på denne måten:
body.page-id-2 .cnt article h1.entry-title {display: none;}
OK, så hva med de andre overskriftene?
Det er som regel nok å endre font størrelsen bare ved å legge inn h1, h2, h3 osv i Custom CSS “boksen” på denne måten:
h2 {font-size: 24px;}
Vær klar over at dette vil variere fra theme til theme!
Derfor er det viktig å lære seg å inspisere kode for å finne ut hva som gjelder i akkurat ditt theme. Og som en ekstra bonus vil det snike seg inn en større og større forståelse for CSS og hvilke muligheter som finnes.
Bruk gjerne en plugin som Simple Custom CSS!
Noen theme har ikke et eget felt for å legge til egendefinert CSS kode, og da er redigering av stilarket det eneste alternativet. Et stilark kan fort bestå av mange hundre linjer med kode, og det kan være fort gjort å gjøre en feil som får store konsekvenser. Det er generelt sett ikke særlig smart å gjøre endringer rett i theme filene. Du bør enten bruke et childtheme, eller gjøre endringene i themets Custom CSS boks.
Hvis stilarket er eneste alternativ du har, så last gjerne inn Simple Custom CSS og gjør endringene dine der i stedet. Når du har installert den vil den legge seg som et menypunkt under Utseende i kontrollpanelet i WordPress.
Koden du legger inn der, vil overstyre den som ligger i stilarket og det er mye lettere å feilsøke om du skulle ha mistet et punktum eller et semikolon på veien 🙂
