Det här är en guide i funktioner som ditt nya WordPress-tema behöver för att göra din webbplats framgångsrik år 2020. Checklistan är relevant för webbansvariga, privatpersoner, men även utvecklare som vill förbättra sina teman. Om du funderar på att välja ett nytt WordPress-tema i år, läs vidare!

Tänk på att den typ av webbplats du vill lägga till ett tema för spelar roll. Jag har försökt att hålla tipsen så generella som möjligt så de bör gälla oavsett om du har ett företag, en blogg eller en e-handelswebbplats.

Du bör också notera att du med största sannolikhet kommer att lösa många nödvändiga funktioner med hjälp av plugins, och därmed inte förlita dig på att temat ger dig allt du behöver. Men det finns fortfarande mycket som bara kan lösas eller stödjas genom temat. Checklistan nedan är saker som plugins inte kan eller med största sannolikhet inte kan fixa, och som måste finnas på plats inom det tema du väljer.

1 Mobilvänlig

Temat ska vara mobilanpassat. Period. Mer än hälften av alla webbplatsbesök över hela världen sker via en mobil enhet. 2018 var andelen globala mobilbesök cirka 58 %, och den beräknas vara cirka 63 % 2019. Den kommer bara att öka med åren.

Vad betyder det att ett tema eller en webbplats är mobilanpassad? Det betyder helt enkelt att hemsidan har utvecklats för att fungera och är användbar på mindre skärmar, utan att behöva en separat sida för mobilanvändare. Med andra ord; temat måste vara lyhört. Ett responsivt tema kommer att få innehållet snyggt att staplas ovanpå varandra, skala eller dölja onödigt innehåll och ersätta huvudmenyn med en mobilmeny via en knapp.

Du kan mycket enkelt kontrollera om en webbplats är responsiv genom att helt enkelt skala ner ditt webbläsarfönster på din dator. Dra bara vänster eller höger sida av webbläsaren inåt. Titta på hur webbplatsen reagerar. Innehållet bör börja omarrangeras, staplas och skalas proportionellt för att passa skärmens bredd. En bra tumregel är att du aldrig ska se en horisontell rullningslist i din webbläsare!

Som ett exempel, så här fungerar sidans förstasida när du skalar ner skärmstorleken:

Ett mer pålitligt sätt att kontrollera om du är mobilvänlig är att använda Googles kostnadsfria verktyg: Testa om din webbsida är mobilvänlig. Ange webbadressen till temats demosida och klicka på "Testa". Verktyget bör rapportera tillbaka till dig om sidan verkligen är riktigt mobilvänlig eller inte.

Inte bara kommer en mobilanpassad sajt att tillåta fler besökare som använder olika enheter, utan att ha en mobilanpassad hemsida är också avgörande för SEO (sökmotoroptimering – se nästa punkt)! Google prioriterar webbplatser som är mobilanpassade i sina sökresultat. Och i mars 2020 meddelade de att Google kommer att byta till mobil-först indexering för alla webbplatser i september 2020.

2 SEO-vänlig

Sökmotoroptimering (SEO) är avgörande i dessa dagar för dig som vill att besökare ska komma till din sida. Du måste få din webbplats att rankas så högt som möjligt i sökmotorer som Google för att hoppas på besökare som konverterar till kunder. Utan SEO kommer din webbplats att drunkna i miljarder andra konkurrerande webbsidor och ingen kommer att känna till eller hitta din webbplats.

SEO handlar om att optimera din webbplats för att öka mängden och kvaliteten på trafiken till din webbplats. Detta inkluderar ämnen som innehållet, de tekniska aspekterna och hur utsidan ser, använder och granskar din webbplats. Det är ett ganska stort ämne, men för den här checklistan fokuserar jag på de tekniska aspekterna.

Du kommer (borde) med största sannolikhet att använda ett SEO-plugin. Till exempel är Yoast SEO den mest kända och använda SEO-plugin för WordPress. Den har en premiumversion, men gratisversionen är helt okej. Ett SEO-plugin bör tillåta dig att definiera titlar, metabeskrivningar, nyckelord och generera sökmotors webbplatskartor. Yoast SEO kommer också att analysera ditt inläggsinnehåll och ge dig tips om hur du kan förbättra ditt skrivande för att rankas högre.

Men det finns ett par saker du behöver kontrollera inom temat – något som ett SEO-plugin inte kan fixa.

Bra HTML-struktur

En bra HTML-struktur spelar en roll för att göra ett tema SEO-vänligt. HTML är strukturen för en webbsidas innehåll, oberoende av dess stil. Styling kan dölja dålig HTML-struktur, men tänk på att Googles sökrobotar läser webbplatsen utan styling.

En viktig regel i bra HTML-struktur är rubriktaggarna; h1, h2, och så vidare tills h6. Rubrikerna ska användas för att informera om ett nytt avsnitt och vad det handlar om, och taggarna ska vara i ordning (t.ex. ditt innehåll ska inte hoppa från h2till h4utan ett h3mellanliggande). h1bör reserveras för den viktigaste titeln; vanligtvis inläggets titel eller webbplatsens namn. Och h2bör användas för att tjäna de viktigaste titlarna i detta inlägg. Även om Google har meddelat att de tillåter flera h1taggar (enligt riktlinjerna för HTML5), är det fortfarande vanligt att se till att endast en h1finns på varje sida.

Temat bör också använda nyare HTML5-taggar som <header>, <main>, <footer>, <aside>eftersom dessa ger semantisk information till Google om vad specifikt innehåll faktiskt är.

En annan mycket underutnyttjad funktion är schemamarkering – ofta kallad mikrodata. Schemamarkering är en teknik som hjälper botar och sökrobotar att förstå vad innehåll är. Om produktinformationen slås in med schemamarkering gör det möjligt för Google att specifikt veta var det kan hitta pris, recensioner, produktbild och mer. Det gör att Google kan presentera produkter på ett annat sätt i sökresultaten. Det är tyvärr ovanligt att hitta detta i ett WordPress-tema, men om du hittar ett tema med schemamarkering är det ett bra tips om att temautvecklaren har haft SEO i tankarna.

Äntligen bör temat se till att skapa korrekta taggar i rikt innehållsinbäddningar, särskilt bilder. Bilder bör som minimum ha alt-taggar. Alt-taggar används för att beskriva utseendet och funktionen hos en bild på en sida. Kom ihåg att sökmotorernas sökrobotar inte kan tolka bilder som människor gör.

Sidhastighet

Hur snabbt din webbplats laddas är väldigt viktigt för SEO. Det bör inte ta mer än 5 sekunder att avsluta inläsningen av en sida på din webbplats. Temat kan optimera sidhastigheten på flera sätt.

Tänk på att ett tema kan implementera tunga och ibland externa resurser för att få det att se snyggt ut. Till exempel anpassade typsnitt, ikoner och en hel massa interaktiva element. Förfrågningar om stilmallar, javascript-filer och särskilt externa resurser som t.ex. GoogleFonts för typsnitt och Fontawesome för ikoner drar verkligen ner sidhastigheten.

Temat bör också stödja storleksändring av bilderna du laddar upp i olika storlekar, och använd dessa i enlighet med de nödvändiga bildstorlekarna runt ditt innehåll. Att ladda stora bilder är en av de största nackdelarna med sidhastighet. Det är ingen idé att använda en fullskalig bild på 1900px bredd för en liten miniatyrbild i sidfoten.

Du kan kontrollera sidhastigheten med ett annat av Googles kostnadsfria verktyg: PageSpeed Insights. Ange URL:en till temats demosida och klicka på Analysera. Låt det fungera och du bör presenteras med ett betyg och en rapport över saker du kan göra för att åtgärda eventuella problem som drar ner sidhastigheten. Kom ihåg att kontrollera både mobil- och datorrapporter. Sidhastighet på mobilen är viktigare idag; både för att mobila enheter ofta använder mobildata (som kostar pengar), och för att mobilvänlighet är viktigt. Du hoppade inte över föregående checklista, eller hur?

3 Tillgänglighet

Tillgänglighet gör din webbplats tillgänglig för alla typer av besökare, inklusive de med funktionshinder – oavsett om det är hörselskada, synskada och mer. Det finns en internationell uppsättning riktlinjer som kallas Web Content Accessibility Guidelines (WCAG) som beskriver hur webbplatser ska implementera tillgänglighet. Genom att inte följa WCAG bryter du faktiskt mot ett antal lagar och förordningar i internationell skala (eftersom besökare på din webbplats kan komma från var som helst i världen).

Riktlinjerna beskriver en stor uppsättning specifikationer och tekniska krav för en webbplats. Efterlevnad av WCAG poängsätts i tre nivåer; A, AA och AAA. Nivå AAA är den lägsta acceptabla tillgänglighetsnivån medan nivå A anses vara förstklassig tillgänglig, men nivå A sätter starka begränsningar för design, funktioner och rikt innehåll. De flesta webbplatser, såvida de inte riktar sig till personer med funktionshinder, strävar inte efter att nå nivå A i tillgänglighet.

Ditt tema bör uppnå nivå AAA som ett minimum. Du kan kontrollera tillgänglighetsnivåerna på en webbplats genom att använda ett kostnadsfritt verktyg som heter WAVE, tillgängligt som tillägg till Chrome och Firefox. När du har installerat i din webbläsare kan du besöka temats demosida, köra kontrollen och kontrollera rapporten.

WAVE rapport från min sida. Tydligen har jag något att jobba på!

4 menyer

WordPress har en inbyggd menyredigerare för att skapa menyer och placera dem runt ditt tema. Temat du väljer bör inte bara stödja denna menyredigerare, utan också ge dig platser för att placera menyer.

Som ett minimum bör temat tillhandahålla en menyplats; huvudmenyn. Huvudmenyn finns vanligtvis någonstans högst upp i rubriken. Det är vanligt att även tillåta ytterligare menyer i rubriken, t.ex. supportmeny. Att lägga till menyer på andra platser kan vanligtvis lösas genom att lägga till en menywidget – om temat stöder widgets (se nästa ämne).

PS: Kommer du ihåg checklista punkt 1. mobilvänlighet nämner mobilmeny? Dubbelkolla att huvudmenyns plats konverteras snyggt till en mobilmeny. Om temat tillåter supportmenyer bör de inkluderas i mobilmenyn också, och inte bara försvinna.

5 Widgetstöd

En annan inbyggd funktion i WordPress är widgets – små utdrag av innehåll som kan placeras i definierade widgetområden. Som med menyer måste temat specifikt lägga till stöd för widgets och lägga till minst ett widgetområde.

Vanliga widgetområden finns i sidfoten och sidofältet, om temat har en sidofältslayout.

Kontrollera att temat tillåter dig att placera widgets var du än behöver dem. Det är vanligt att lägga ytterligare menyer och information i sidfoten, och i WordPress görs detta vanligtvis med hjälp av widgets.

6 Anpassad logotyp

Detta är en uppenbar nödvändig funktion som temat behöver stödja: Du måste kunna ladda upp din egen logotypbild och ha den placerad i rubriken.

WordPress har en egen logotypuppladdningsfunktion i Customizer, men det är upp till temat att lägga till stöd för detta. Om temat inte stöder WordPress-verktyget måste det stödja något alternativt sätt. Många teman har sina egna temainställningar, antingen inom WordPress Customizer eller som en separat adminsida. Oavsett vilken metod temat använder, se till att du kan ladda upp din logotyp.

7 Sök

Att tillåta webbplatsbesökare att söka är mycket viktigare än det brukade vara. Såvida inte ditt innehåll och menyer är extremt optimerade och strömlinjeformade, kommer folk i allmänhet bara att söka istället för att klicka runt.

WordPress har en intern sökmotor för att söka i allt innehåll, och färdiga mallar för sökformuläret och sökresultaten. Men återigen är det upp till temat att genomföra detta.

Det är vanligt att du erbjuder en sökinmatning på din webbplats, vanligtvis högst upp i rubriken. Sökfunktionalitet finns i många former; en sökinmatning i sidhuvudet (eller sidfoten), eller en sökikon som avslöjar en inmatning på något sätt. Om temat inte erbjuder en sökingång automatiskt kan du alltid lägga till en sökwidget – förutsatt att temat stöder widgets (checklista punkt 5).

8 standardmallar

WordPress CMS stöder ett stort utbud av mallar för att visa ditt innehåll på olika sätt. När din webbplats växer kommer du att tycka att det är mer nödvändigt att luta sig mot mallar som arkiv och sökresultat.

Se till att temat implementerar en hel del av WordPresss standardmallar och att alla ser bra ut. Kontrollera mallar som kategori, taggar, datumarkiv och sökresultat. De bör tydligt ange vilken typ av arkiv vi tittar på och visa innehåll väl och med sideringsfunktionalitet.

Om du vill aktivera kommentarer bör temat också ha implementerat och utformat dessa mallar på rätt sätt.

9 anpassade färger

Du har med största sannolikhet en definierad uppsättning färger som du vill använda på din webbplats – vanligtvis samma färger som finns i din logotyp. Branding av din webbplats med din logotyp är ett minimum (checklista punkt 6) men temat bör också låta dig välja några av temats färger. Som sådan uppnår du en mer sammanhängande design när länkarna, knapparna och andra designelement är ditt varumärkes färger.

Det finns inget inbyggt stöd i WordPress för att definiera en uppsättning färger som används i temat. Temautvecklare behöver utveckla stöd för detta på egen hand. Färgerna definieras vanligtvis i temats stilmallar och utvecklaren måste hitta en lösning för att åsidosätta dessa färgvariabler med färger valda av dig i admin.

Det här är en ganska svår funktion att implementera och den kan lösas på en rad olika sätt – från bra till dåliga. En dålig lösning skulle vara att generera en stor del av styling overhead genom att helt enkelt åsidosätta och duplicera stylingen med anpassade färger. En stor formatmallsfil eller flera formatmallar har en inverkan på sidhastigheten (se checklista punkt 2). En bra lösning skulle vara att införliva något sätt att åsidosätta färgvariablerna och återskapa en ren stilmall när du väljer olika anpassade färger.

10 Layoutalternativ

De dagar då en webbplats skulle ha innehåll till vänster och en höger sidofält oavsett vilken sida du är på, är borta. Moderna webbplatser har olika layouter: en framsida i full bredd, artiklar med en eller flera sidofält, artiklar utan sidofält eller någon form av annan kolumnuppsättning.

Denna checklista beror på din webbdesign och dina behov. Om din webbplats är en liten sajt med ett minimalt krav på olika layouter spelar detta inte lika stor roll. Men ju mer innehåll din webbplats har, desto mer behöver du skapa målsidor med olika design.

Om temat har en sidofält bör det som ett minimum vara möjligt att välja post-för-post om man vill gå i full bredd eller inte (ta bort sidofältet) eller inte. Med Gutenberg (se nästa checklista) är det nu lättare att skapa målsidor i full bredd – om temat stödjer detta.

Mitt egenutvecklade tema för A White Pixel har layoutalternativ för inlägg

11 Gutenberg-stöd

När WordPress släppte version 5.0 i december 2018 kom den med en helt ny inläggsredigerare – kallad Gutenberg. Gutenberg-redigeraren har revolutionerat sättet du kan skapa innehåll på genom att du enkelt kan skapa avsnitt med bakgrundsbild eller färger, rikt innehåll, kolumner och mer. Sådana här saker var inte möjliga tidigare.

Men eftersom Gutenberg kräver ett annat programmeringsspråk (Javascript, React) än språket WordPress ursprungligen skapades med (PHP), har stödet i utvecklingsgemenskapen varit långsamt. Det är dock år 2020 och temat bör stödja Gutenberg.

Det finns ett överflöd av WordPress-teman där ute som är beroende av sidbyggare som Visual Composer, Elementor och Divi. Gutenberg gör i stort sett dessa plugins överflödiga. Gör dig själv en tjänst och välj inte ett tema som kräver ett plugin för sidbyggare, eftersom du kan uppnå samma resultat med den nya standardfunktionaliteten i WordPress.

12 Klar översättning

Denna checklista är för dig som vill ha en hemsida på ett annat språk än engelska. Glöm inte att även om du skriver allt ditt innehåll på ett annat språk, innehåller temat vanligtvis vissa texter i frontend, som "Läs mer", "Visa", "Nästa sida" och så vidare. Om det är viktigt för dig att fullt ut implementera ett annat språk för läsarna bör du kontrollera om temat är översättningsfärdigt.

Det finns olika sätt att översätta ett tema. Om du är en utvecklare handlar det om att använda textdomänfunktioner i ditt tema och lägga till en .poteller .po-fil. Om du är en temaanvändare med liten eller ingen kunskap om kod finns det alternativa sätt. Du kan till exempel använda plugin Loco Translate för att direkt komma åt temats översättningsfiler. Eller så kan du använda WPML eller andra plugins för att bygga en flerspråkig webbplats.

Men allt detta kräver att temat är skrivet med stöd för översättning av dess strängar.

Slutsats

Om du tagit dig ända hit med en grön bock i var och en av de 12 checklistposterna ovan, har du valt ett bra tema! Temat stöder standard WordPress-funktionalitet och uppfyller kraven på en webbplats för 2020 när det kommer till SEO, tillgänglighet och mobilvänlighet.

Om ditt tema saknas inom vissa områden, investera lite tid i att se hur du kan lösa det på alternativa sätt eller fortsätt leta efter ett annat tema. Om du är en utvecklare borde den här checklistan ha gett dig några riktlinjer för minimikraven för att skapa ett bra WordPress-tema.

Inspelningskälla: awhitepixel.com