WPBeginner v6 – Bakom kulisserna på vår nya webbdesign

Om du besökte WPBeginner under de senaste veckorna, då har du förmodligen märkt att vi fick en ny webbdesign. Även om den har många likheter med den förra, har mycket förändrats bakom kulisserna.

Som jag lovade i nyhetsbrevet vill jag dela med mig av tankeprocessen bakom vår omdesign, vad vi har lärt oss, vad som är nytt på webbplatsen och viktigast av allt hur du kan använda några av våra lärdomar för att förbättra din webbplats.

Lite bakgrund

Jag startade WPBeginner 2009, och som de flesta nya skapare ändrade jag vår webbplats designtema fyra gånger under de första 3 åren.

När min verksamhet växte insåg jag att omdesign av webbplatser tar mycket tid och resurser som kunde ha använts bättre för att uppfylla vårt kärnuppdrag:

Så jag gjorde det till en prioritet att ägna all min uppmärksamhet åt vårt kärnuppdrag och vår verksamhet växte enormt.

Den senaste omdesignen av WPBeginner lanserades 2016, och vi har kommit långt sedan dess.

Här är vad som hände under de senaste 5 åren:

• Vi skapade över tusen gratis WordPress-handledningar på WPBeginner blogg och lade till hundratals nya videohandledningar på vår YouTube-kanal.
• Vi lanserade vår WPBeginner Engage-community på Facebook, som nu är den största WordPress-facebookgruppen med över 80 000 medlemmar (det är gratis att gå med).
• Vi lanserade WPBeginner Growth fund för att investera i några av våra favorit WordPress-plugins, inklusive MemberPress, Pretty Links, Formidable Forms, Uncanny Automator, och 6 andra.
• Vi lanserade två nya WordPress-plugins, TrustPulse, ett WordPress social proof-plugin, och RafflePress, ett kraftfullt WordPress-plugin för utlottningar och tävlingar.
• Vi förvärvade fem WordPress-tillväxtplugins inklusive den berömda AIOSEO (allt-i-ett SEO-plugin för WordPress), SeedProd (dra-och-släpp WordPress-webbplatsbyggare), Smash Balloon (#1 plugin för sociala medieflöden), PushEngage (plugin för webbplats push-notiser) och AffiliateWP (affiliatehanteringsplugin för WordPress).
• Vi förvärvade också fem WordPress-plattform- och infrastrukturplugins, inklusive den berömda WP Mail SMTP-plugin (för att fixa leveransbarhet av e-post), SearchWP (kraftfull WordPress-sökmotorplugin), Easy Digital Downloads (populär e-handelsplugin för att sälja digitala produkter), WP Simple Pay (enkel plugin för att acceptera kreditkortsbetalningar) och Sugar Calendar (enkel händelsekalenderplugin för WordPress).

Sammantaget används våra plugins nu av över 19 miljoner webbplatser, och 4 av våra plugins är bland de 20 bästa WordPress-pluginsen genom tiderna.

Även om allt detta är stora framgångar, har vi en ny uppsättning utmaningar som behövde åtgärdas, så att vi kan fortsätta att förbättra och tjäna vårt uppdrag.

Detta för mig till WPBeginner v6.

Design fokuserad på innehållsupptäckbarhet

WPBeginner började som en enkel handledningsblogg, men den har verkligen blivit Wikipedian för WordPress.

Våra användare har upprepade gånger sagt till oss att när de ville hitta en lösning på sina WordPress-problem, googlade de helt enkelt nyckelordet och lade till WPBeginner i slutet för att hitta den bästa lösningen.

För att hjälpa våra läsare att snabbt hitta svaret på sina WordPress-frågor, gjorde vi sökfunktionen till ett stort fokus på vår nya startsida.

Oavsett om du är en återkommande besökare som söker i vårt innehållsbibliotek, eller en ny läsare som precis har börjat med WordPress, gör hemsidan för WPBeginner det nu enkelt för dig att hitta det du letar efter.

Du kommer också att märka en liknande sökwidget i vår sidopanel på alla enskilda inläggssidor samt i vår webbplatsheader när du klickar på sökikonen.

En av anledningarna till att WPBeginner har blivit den största WordPress-resurswebbplatsen för icke-tekniska användare är att vi förklarar komplexa WordPress-ämnen på enkel svenska, steg för steg.

I den nya designen har vi lagt till funktionen för live-sökning i vår WordPress ordlista, så att du enkelt kan bekanta dig med vanligt WordPress-lingo. Detta är i princip som en ordbok för WordPress-termer.

Som WPBeginner-användare får du exklusiv tillgång till de bästa WordPress-rabatterna på populära plugins, premiumteman, hosting och andra marknadsföringsverktyg.

Vårt team har verkligen gjort ett bra jobb med att förhandla fram de bästa erbjudandena för dig, och den här sektionen har vuxit ganska mycket och har över 100+ kuponger och erbjudanden.

På grund av populära användarförfrågningar har vi även lagt till Live Search i vår Deals-sektion, så att du snabbt kan hitta det bästa erbjudandet på dina favorit WordPress-produkter.

När vi går in i 2022 är en stor prioritet för oss innehållsupptäckbarhet.

Detta hjälper oss att leverera den bästa användarupplevelsen, ökar tiden på webbplatsen, ökar sidvisningar och minskar vår totala avvisningsfrekvens.

Jag tror att användarupplevelseoptimering (UXO) år 2022 kommer att spela en avgörande roll för SEO.

Om du vill slå dina konkurrenter och få en konkurrensfördel rekommenderar jag starkt att du uppmärksammar UXO.

Jag kommer att dela med mig av tips under hela den här artikeln om hur du kan implementera liknande funktioner på din webbplats som vi gjorde i vårt nya tema.

Hur man förbättrar WordPress-sökning

Standardfunktionen för sökning i WordPress är inte särskilt kraftfull, så om du vill anpassa rankningsalgoritmen och kontrollera vad som visas för varje sökning, rekommenderar jag att du använder SearchWP-pluginet.

Alternativt kan du också använda Googles anpassade webbplatssökning som använder Google-algoritmen, men nackdelen är att Google kommer att visa annonser på dina sökresultatsidor vilket inte ser särskilt bra ut.

Om du vill lägga till live-sökning på din webbplats som vi har gjort på sektionen Erbjudanden eller Ordlista, följ då den här handledningen om hur man lägger till AJAX live-sökning i WordPress.

Andra WordPress-sökningsguider som du kan finna användbara är hur du skapar en anpassad WordPress-sökformulär, och hur man lägger till en sökfält i WordPress-menyn.

Nytt WordPress Mega-meny

I linje med temat för innehållsupptäckbarhet uppgraderade vi våra gamla WordPress-ned menyerna till nya Mega Menus i flera kolumner.

Detta gör det möjligt för våra nya användare att snabbt och enkelt hitta vårt allra bästa innehåll.

Det gör det också möjligt för oss att bättre lyfta fram våra nya produkter, de gratis affärsverktyg som vi har byggt, och mer.

Hur man lägger till en megameny i WordPress

Även om vi har byggt en anpassad lösning för WPBeginner, kan du följa den här handledningen om hur man lägger till en megameny i WordPress för att bättre lyfta fram dina toppidor.

WordPress Blockredigerare (äntligen)

År 2019 introducerade WordPress den superkraftfulla blockredigeraren (även känd som Gutenberg) för att skapa innehåll.

Jag började omedelbart använda den på min personliga blogg, men eftersom WPBeginner använde ett äldre tema med många anpassade kodade funktioner var bytet inte lika enkelt.

Under de senaste två åren har vi varit tvungna att använda klassisk redigerare på WPBeginner-webbplatsen, medan alla våra nyare webbplatser fick de senaste och bästa funktionerna i WordPress blockredigerare.

Äntligen, med vårt nya tema, kan vi nu använda alla de fantastiska funktionerna i WordPress blockredigerare.

Till exempel kan jag nu lägga till ett riktigt coolt "Visste du att"-block utan att skriva någon kod:

Vi har också helt omgjort flera av våra landningssidor med hjälp av WordPress blockredigerare.

Titta till exempel på vår nya landningssida för gratis WordPress blogginstallation.

Vi har också omdesignat våra gratis affärsverktyg med hjälp av blockredigeraren för att lyfta fram några av de senaste gratisverktygen som vi har byggt.

Vi kommer fortfarande att använda SeedProd för att skapa helt anpassade landningssidor vid behov eftersom det är en riktig dra & släpp WordPress-sidbyggare.

Även om det var roligt att lära sig använda Gutenberg för att skapa anpassade landningssidor, kräver det fortfarande MYCKET kodning för installationen innan marknadsföringsteam kan skapa en anpassad landningssida.

Medan när du använder ett sidbyggarplugin kan marknadsföringsteam snabbt skapa anpassade landningssidor, trattlayouter etc. utan hjälp från utvecklingsteamet.

WordPress core team is working hard on the full-site editing features, but it still needs a lot of work before it can compete with the powerful features that you get with page builders like SeedProd, Divi, or Beaver Builder.

Med det sagt är blockredigeraren ganska fantastisk, och det finns gott om WordPress-blockplugins som du kan använda för att skapa coola designelement för att förbättra ditt innehåll.

Här är ett annat coolt block som vårt nya tema har för att lyfta fram utvalda plugins:

SeedProd är den mest nybörjarvänliga dra-och-släpp-sidbyggaren för WordPress. Den kommer med över 150+ färdiga mallar, och deras temabyggarfunktion låter dig bygga helt anpassade WordPress-teman (utan någon kod). Prova SeedProd Idag »

I kommande blogginlägg kommer du säkert att se fler innehållsdesignblock som vi måste ytterligare förbättra vår läsbarhet av innehållet.

Byta från Yoast till AIOSEO

Under mycket lång tid använde WPBeginner-webbplatsen en mycket gammal & anpassad version av Yoast SEO-pluginet (v 2.3.5).

För att sätta det i perspektiv, de är på version 17 just nu.

Jag ville inte uppdatera Yoast eftersom deras team hade tagit bort några viktiga funktioner som jag ansåg var viktiga för SEO.

Jag kände också att det övergripande WordPress SEO-utrymmet hade slutat innovera.

Så i början av 2020 förvärvade vi AIOSEO, den ursprungliga allt-i-ett SEO-pluginen, och jag lät mitt team totalrenovera den.

Jag är otroligt stolt över det arbete vårt team har utfört, och den har alla SEO-funktioner du behöver för att få en konkurrensfördel.

Precis som blockredigeraren började våra nyare webbplatser att byta till AIOSEO och började se sina rankningar förbättras, så jag var angelägen om att börja använda det på WPBeginner.

Nu använder vi det senaste och bästa av SEO-funktioner från All in One SEO.

Vi har nu funktioner som videositemap för att hjälpa till att förbättra våra innehållsrankningar med videor, RSS-sitemap för att hjälpa vårt innehåll att indexeras snabbare, avancerade SEO-moduler för att ha mer finjusterad kontroll över vår webbplats SEO, och massor mer.

Jag tror verkligen att det är det bästa SEO-pluginet på marknaden, och viktigast av allt är att det har ett rimligt pris för småföretag och byråer.

Jag planerar att skriva en fullständig genomgång under de kommande veckorna om varför vi bytte, med en detaljerad funktionsuppdelning, men under tiden kan du prova den kostnadsfria versionen av All in One SEO, eller kolla in Pro-versionen som har alla kraftfulla funktioner som jag använder på WPBeginner.

WordPress hastighetsförbättringar

Talrika studier har visat att snabbare webbplatser förbättrar användarupplevelsen, ökar tiden på webbplatsen och den totala konverteringen.

Detta är också anledningen till att Google gjorde webbplatshastighet till en SEO-rankningsfaktor.

Om du har följt webbplatsen ett tag, vet du att jag är besatt av prestandaoptimering.

WPBeginner-webbplatsen var redan ganska snabb tack vare vår fantastiska WordPress-värdpartner SiteGround. De erbjuder en mycket optimerad WordPress-värdlösning byggd ovanpå Googles molnplattform.

Och naturligtvis följde vi bästa praxis för WordPress hastighet, men med vår nya temadesign gjorde vi flera anmärkningsvärda hastighetsförbättringar.

Här är våra Google Page Speed-resultat:

Här är resultatet av hemsidan från GTMetrix och Pingdom:

Och vi fick detta resultat trots att vi lade till nya sektioner, mer innehåll på hemsidan, bredare bilder, etc.

Och innan du frågar, WPBeginner-sidan har 68 aktiva plugins för närvarande.

Så du kanske undrar hur jag lyckades lägga till mer innehåll på webbplatsen samtidigt som sidstorleken minskades och allt gjordes snabbare?

Tja, jag tog bort saker som jag kände att vi inte längre behövde, och det här är saker som jag verkligen vill att fler webbplatsägare ska överväga att göra också.

Detta kommer inte bara att hjälpa till att snabba upp din webbplats vilket hjälper SEO-rankingen, utan det kommer att minska din totala bandbreddsförbrukning, minska kostnaderna och förbättra din webbplats koldioxidavtryck.

Inaktivera Gravatar från WordPress-kommentarer

WordPress levereras med en inbyggd tredjepartstjänst som heter Gravatar, en förkortning för Globally Recognized Avatars.

Detta gör att du kan se en användares profilbild eller avatar när de lämnar en kommentar på din WordPress-webbplats.

Utmaningen är att det kräver att dina webbplatsbesökare skapar ett Gravatar-konto, vilket de flesta användare inte gör. Så istället laddar din webbplats bara den grå mystiska mansavatar som inte ser bra ut.

Låt oss nu säga att du har ett populärt blogginlägg med 50 kommentarer där bara 10 % av användarna har en Gravatar-bild och 90 % inte har det. Tja, det är 50 ytterligare bilder som din sida laddar som egentligen inte tillför betydande värde till innehållet.

Det är därför många populära bloggar har börjat inaktivera Gravatar, och vi gör detsamma på WPBeginner.

Denna enkla ändring har drastiskt förbättrat våra sidladdningstider och webbplatshastighetspoäng.

Ta bort anpassade typsnitt från tredje part

Jag ska vara ärlig, jag tänkte aldrig på anpassade typsnitt tidigare.

Det var något som bara kändes normalt och fick webbplatsen att se bra ut ur ett typografiskt perspektiv, åtminstone om du hade tur nog att ha en snabb internetuppkoppling.

I det gamla WPBeginner-temat använde vi ett anpassat Adobe-typsnitt som heter Proxima Nova, ett populärt ikon-typsnitt som heter FontAwesome, och våra OptinMonster-popups använde Source Sans Pro från Google-typsnitt.

När jag besökte webbplatsen från en avlägsen plats med dålig internetkvalitet insåg jag verkligen hur stor prestandapåverkan dessa typsnitt har på användarupplevelsen.

I vår nya design ville jag lösa detta problem, så att vi kan göra det enkelt för studenter och företagare i utvecklingsländer att få tillgång till WPBeginner, lära sig WordPress och växa sin online-närvaro.

Det nya WPBeginner v6-temat använder standard System Fonts som har kommit långt. De ser bra ut på alla enheter, och naturligtvis är det supersnabbt.

Ingen obestiliserad text (FOUT), ingen kumulativ layoutförskjutning (CLS) och betydligt minskad blockeringstid.

Om du loggar in på WordPress-instrumentpanelen eller använder Github, kommer du att märka att våra typsnitt är liknande eftersom båda dessa plattformar tidigare har bytt till systemtypsnitt.

Även om borttagning av anpassade typsnitt kanske inte är en genomförbar lösning för alla företagswebbplatser, är det definitivt något jag tror att både designers & utvecklare bör vara medvetna om när det gäller hastighet.

Några bästa metoder som kan hjälpa:

• Istället för att använda två separata typsnitt för rubriker kontra innehåll, överväg att använda samma typsnitt för båda.
• Istället för att använda flera olika typsnittsvikter och stilar som tunn, vanlig, semibold, fet, extra fet, svart, och sedan kursiva versioner av alla dessa, överväg att minska typsnittsvikterna till endast två: vanlig och fet.
• Istället för att ladda hela FontAwesome eller ett annat ikonbibliotek, överväg att lägga till direkta SVG-filer av de ikoner du behöver.

Inaktivera anpassade teckensnitt i OptinMonster

När temat var designat och kodat var jag fortfarande tvungen att lösa ett problem till med typsnitt.

Mina webbplats-popups och e-postprenumerationsformulär använder OptinMonster, och de laddade fortfarande Google-typsnitt.

Nu var det inte ett alternativ att inaktivera OptinMonster eftersom det hjälper mig att få fler e-postprenumeranter och öka våra webbplatskonverteringar.

Lyckligtvis är det ett av mina företag, så jag frågade utvecklingsteamet om en lösning för att inaktivera Google-typsnitt.

Det visade sig att jag inte var den första som begärde den här funktionen, och OptinMonster hade redan en API-lösning som inte bara tillåter inaktivering av Google-typsnitt, utan också laddning av alla anpassade webbtypsnitt du vill ha.

Jag är ganska tekniskt kunnig och kan implementera det lilla kodavsnittet som teamet delade i dokumentationen, men jag vet att många av våra kunder inte är det.

Så nu har vårt team faktiskt byggt den här funktionen inuti kampanjbyggaren (ingen kodning behövs).

Men om du är bekväm med kod och inte vill manuellt inaktivera den här inställningen för varje kampanj, kan du bara följa det hack jag använder.

Lägg först till följande JS-kodavsnitt för att förhindra OptinMonster från att ladda några webbtypsnitt på din webbplats:

<script type="text/javascript">
document.addEventListener('om.Scripts.init', function(event) {
event.detail.Scripts.enabled.fonts= false;
});
</script>

Lägg sedan till följande CSS i din style.css-fil:

html .Campaign * { font-family: "Proxima Nova", Helvetica, "Helvetica Neue", Arial, sans-serif !important; }

Glöm förstås inte att ändra typsnitten så att de matchar dina webbplatsens typsnitt. Detta kommer i princip att tillämpa typsnittet ovan på alla OptinMonster-kampanjer som laddas på din webbplats.

Bytt från W3 Total Cache till WP Rocket

Under en mycket lång tid använde jag en mycket anpassad konfiguration av W3 Total Cache-plugin på WPBeginner.

Även om det löste uppgiften, var det ingen match för WP Rocket som vi har använt på alla våra produktsidor.

Så med denna omdesign bytte jag äntligen till WP Rocket som kommer med MÅNGA bra funktioner för webbplatshastighet, framför allt pålitlig förinläsning av cache och filminifiering.

Detta plugin är avgörande om du vill förbättra din webbplatshastighet.

Bara en snabb notering om du använder ThirstyAffiliates eller Pretty Links för att hantera dina affiliatelänkar, se då till att du exkluderar dem från cachning.

Gå bara till fliken Avancerade regler och lägg till din affiliate-slug under inställningen Aldrig cachelagra URL:er.

Om du inte gör detta och du har cacheförladdning aktiverad, kommer WP Rocket att försöka cachelagra dina affiliate-länkar eftersom de ser ut som interna länkar.

Detta kan artificiellt blåsa upp dina klickantal och påverka dina affiliate-mätvärden.

Jag har bett WP Rocket-teamet att se om de automatiskt kan upptäcka populära affiliate-plugins och förifylla den exkluderade URL-taggen för att göra det mer nybörjarvänligt, och jag hoppas att de implementerar förslaget.

Vad kommer härnäst?

Jag har stora planer för 2022, det är därför jag ville få den nya webbplatsdesignen live före slutet av detta år.

Vi planerar att lansera en helt ny sektion på WPBeginner som många av er har frågat om de senaste 2 åren.

Det kommer snart, och jag hoppas kunna lansera det i början av Q2 2022.

Jag planerar också att experimentera mer med den nya blockredigeraren för att skapa en bättre övergripande läsupplevelse för dig.

Håll annars ett öga på vår YouTube-kanal då vi kommer att göra riktigt coola saker där under 2022.

Som alltid vill jag tacka er alla för ert fortsatta stöd och feedback genom åren.

Med vänliga hälsningar,
Syed Balkhi
Grundare av WPBeginner