WPBeginner v6 – Bakom kulisserna av vår nya site-design

Om du har besökt WPBeginner under de senaste veckorna, så har du säkert notice att vi har fått en new website design. Även om den har många likheter med den förra, så är det mycket som har förändrats bakom kulisserna.

Som jag lovade i nyhetsbrevet vill jag dela med mig av tankeprocessen bakom vår omdesign, vad vi lärde oss, vad som är new på sajten och framför allt hur you kan använda några av våra lärdomar för att förbättra your website.

Lite bakgrund

Jag startade WPBeginner 2009, och gillar de flesta nya skapare, jag ändrade vår website theme design fyra gånger under de första 3 åren.

I takt med att mitt företag växte insåg jag att omarbetningar av websites tar mycket tid och resurser i anspråk som kunde ha använts bättre för att uppfylla vår core:

Så jag gjorde det till en punkt att ägna all min uppmärksamhet åt vår core och vår verksamhet växte enormt.

Den senaste omdesignen av WPBeginner lanserades 2016, och vi har kommit en lång väg sedan dess.

Så här har det gått under de senaste 5 åren:

• Vi skapade över tusen gratis WordPress tutorials på WPBeginner blogg och lade till hundratals nya video tutorials på vår YouTube-kanal.
• Vi lanserade vår WPBeginner Engage-community på Facebook som nu är den största WordPress Facebook-gruppen 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 tillägg inklusive MemberPress, Pretty Links, Formidable Forms, Uncanny Automator, och 6 andra.
• Vi lanserade två new WordPress tillägg, TrustPulse, ett WordPress tillägg för sociala bevis, och RafflePress, ett kraftfullt WordPress tillägg för giveaway och tävlingar.
• Vi förvärvade fem WordPress-tillväxtplugins inklusive den berömda AIOSEO (all in one SEO plugin för WordPress), SeedProd (drag and drop WordPress webbplatsbyggare), Smash Balloon (#1 social media feeds plugin), PushEngage (website push notification plugin), och AffiliateWP (affiliate management plugin för WordPress).
• Vi förvärvade också fem WordPress-plattforms- och infrastrukturplugins inklusive det berömda WP Mail SMTP-pluginet (för att fixa email deliverability), SearchWP (kraftfullt WordPress-sökplugin), Easy Digital Downloads (populärt e-handelsplugin för att sälja digitala produkter), WP Simple Pay (enkelt plugin för att godkänna betalningar med credit card) och Sugar Calendar (enkel kalender för händelser).

Tillsammans används våra tillägg nu av över 19 miljoner websites, och 4 av våra tillägg är bland de högst upp bland de 20 bästa WordPress-tilläggen genom tiderna.

Även om all detta är fantastiska prestationer har vi en new uppsättning utmaningar som vi måste ta itu med, så att vi kan fortsätta att förbättra och tjäna vårt uppdrag.

Detta leder mig till WPBeginner v6.

Design med fokus på upptäckbarhet av content

WPBeginner började som en enkel tutorial blogg, men det har verkligen blivit Wikipedia för WordPress.

Våra användare har upprepade gånger berättat för oss att när de vill hitta ett svar på sina WordPress-problem, googlar de helt enkelt keyword och add to WPBeginner i slutet för att hitta den bästa lösningen.

För att våra läsare snabbt ska kunna hitta svar på sina frågor om WordPress har vi gjort funktionen Search till ett stort fokus på vår new homepage.

Om du är en återkommande visitor som kommer för att searcha vårt content-bibliotek eller en ny läsare som precis har börjat med WordPress, gör WPBeginners homepage det nu enkelt för dig att hitta det du letar efter.

Du kommer också att notera en liknande sökwidget i vår sidebar på alla sidor med enskilda inlägg samt på vår website header när du klickar på search icon.

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

I den nya designen har vi lagt till funktionen Live search i vår WordPress glossary section, så att du enkelt kan bekanta dig med vanligt WordPress lingo. Det här är i princip som en ordbok för WordPress termer.

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

Vårt team har verkligen gjort ett bra jobb med att förhandla fram de bästa erbjudandena åt you, och denna section har vuxit en hel del och har nu över 100+ coupons och erbjudanden.

På begäran av många användare har vi också lagt till Live Search i vår section Inga annonser, så att du snabbt kan hitta det bästa erbjudandet på dina favoritprodukter från WordPress.

När vi går in i 2022 är upptäckbarhet av content en viktig prioritering för oss.

Detta hjälper oss att leverera den bästa användarupplevelsen, öka tiden på site, öka sidvisningar och minska vår totala studsfrekvens.

Jag tror att under 2022 kommer optimering av användarupplevelsen (UXO) att spela en critical roll i sökmotorsoptimering.

If you want to beat your competitors and get a competitive advantage, I strongly recommend paying attention to UXO.

Jag kommer att dela med mig av tips i den här artikeln om hur du kan implementera utvalda funktioner på din site, som vi gjorde i vårt nya theme.

Så här förbättrar du WordPress Search

WordPress utvalda sökfunktion är inte särskilt kraftfull, så om du vill customize rankingalgoritmen och kontrollera vad som visas för varje search, rekommenderar jag att du använder tillägget SearchWP.

Alternativt kan du också använda Google custom site search som använder Googles algoritm, men nackdelen är att Google kommer att visa annonser på dina search pages vilket inte ser så bra ut.

Om du vill lägga till live search på din site, gillar vi det vi har gjort på sektionen Följ eller Ordlista, följ då denna tutorial om hur du lägger till AJAX live search i WordPress.

Andra WordPress search tutorials som du kanske tycker är användbara är hur man skapar ett customizer WordPress sökformulär, och hur man add to ett sökfält i WordPress menu.

New WordPress Mega Menu

I linje med temat att göra content mer lättöverskådligt uppgraderade vi våra gamla dropdown-menyer i WordPress till new Mega Menus med flera kolumner.

This allows our new users to quickly and easily find our very best content.

It also allows us to better highlight our new products, the free business tools that we’ve building, and more.

Så här addar du till en Mega Menu i WordPress

Även om vi har byggt en custom solution för WPBeginner, kan du följa denna tutorial om hur du lägger till en megameny i WordPress för att bättre lyfta fram dina högst upp sidor.

WordPress Block Editor (äntligen)

Under 2019 introducerade WordPress den superkraftiga Block Editor (även kallad Gutenberg) för att skapa content.

Jag började genast använda det på min personliga blogg, men eftersom WPBeginner använde ett legacy theme med många utvalda funktioner var det inte lika lätt att byta.

Så under de senaste två åren har vi varit klistrade med Classic Editor på WPBeginners webbplats medan alla våra nyare webbplatser har fått de senaste och bästa funktionerna i WordPress block editor.

Slutligen med vårt new theme kan vi nu använda all awesome features i WordPress block editor.

Nu kan jag till exempel add to ett riktigt coolt ”Did You Know”-block utan att skriva någon kod:

Vi har också gjort om flera av våra landing pages helt med hjälp av WordPress Block Editor.

Kontrollera till exempel vår nya landing page för gratis installation av WordPress-blogg.

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

Vi kommer fortfarande att använda SeedProd för att skapa helt customiserade landing pages när det behövs eftersom det är en riktig drag and drop WordPress page builder.

Även om det var roligt att lära sig hur man använder Gutenberg för att skapa anpassade landing pages, krävs det fortfarande MYCKET kodning för installationen innan marknadsföringsteam kan skapa en anpassad landing page.

Medan när du använder ett page builder plugin, kan marknadsföringsteam snabbt skapa custom landing pages, funnel layouts, etc. utan någon hjälp från dev-teamet.

WordPress core team arbetar hårt med funktionerna för redigering av hela webbplatsen, men det krävs fortfarande mycket arbete innan det kan konkurrera med de kraftfulla funktioner som du får med page builders som SeedProd, Divi eller Beaver Builder.

Med det sagt är block editor ganska fantastisk, och det finns gott om WordPress block tillägg som du kan använda för att skapa coola designelement för att förbättra ditt content.

Här är ett annat coolt block som vårt new theme har för att markera utvalda tillägg:

SeedProd är den mest nybörjarvänliga drag and drop page builder för WordPress. Den levereras med över 150+ förgjorda templates, och deras theme builder-funktion gör att du kan bygga helt custom WordPress themes (utan någon kod). Prova SeedProd idag ”

I de kommande blogginläggen kommer du säkert att se fler block för innehållsdesign som vi har för att ytterligare förbättra vårt innehålls läsbarhet.

Byta från Yoast till AIOSEO

Under den längsta tiden använde WPBeginner site en mycket gammal & customize version av Yoast SEO plugin (v 2.3.5).

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

Jag ville inte updating Yoast eftersom deras team hade tagit bort några väsentliga funktioner som jag tyckte var viktiga för sökmotorsoptimering.

Jag kände också att den övergripande sökmotorsoptimeringen i WordPress hade slutat att förnya sig.

Så i början av 2020 förvärvade vi AIOSEO, det ursprungliga allt-i-ett-SEO-pluginet, och jag fick mitt team att helt omarbeta det.

Jag är superstolt över det arbete som vårt team har gjort, och det har alla de sökmotorsoptimeringar du behöver för att få en konkurrensfördel.

Like the block editor, our newer websites started switching to AIOSEO and started to see their rankings improve, so I was eager to start using it on WPBeginner.

Nu använder vi de senaste och bästa av sökmotorsoptimeringens funktioner från All in One SEO.

Vi har nu funktioner som video sitemap för att hjälpa till att öka vårt innehåll ranking med videoklipp, RSS sitemap för att hjälpa vårt innehåll indexeras snabbare, avancerade sökmotorsoptimering moduler för att ha mer finjustera kontroll över vår site SEO, och massor mer.

Jag tror verkligen att det är det bästa sökmotorsoptimering tillägget på marknaden, och viktigast av allt är att det har ett rimligt pris för småföretag och agencies.

Jag planerar att göra en fullständig uppsats under de kommande veckorna om varför vi bytte med en detaljerad funktionsfördelning, men under tiden kan du prova gratisversionen av All in One SEO, eller kontrollera Pro-versionen som har alla de kraftfulla funktioner som jag använder på WPBeginner.

WordPress hastighetsförbättringar

Många studier har visat att snabbare webbplatser förbättrar upplevelsen för användarna, ökar tiden på site och den totala konverteringen.

Det är också därför Google har gjort webbplatsens hastighet till en faktor för sökmotorsoptimering.

Nu om du har följt webbplatsen ett tag, då vet du att jag är besatt av prestandaoptimering.

WPBeginners site var redan ganska snabb tack vare vår fantastiska WordPress partner för webbhotell SiteGround. De erbjuder en mycket optimerad lösning för webbhotell för WordPress som är byggd högst upp på Googles molnplattform.

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

Här är våra resultat för Google Page Speed:

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

Och vi fick detta resultat trots att vi lade till new sections, mer content på homepage, bredare images etc.

Och innan du frågar, WPBeginners site har 68 aktiva tillägg för närvarande.

You kanske undrar hur jag hanterade att lägga till mer content på site samtidigt som jag minskade storleken på page och gjorde allt snabbare?

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 ägare av websites också ska överväga att göra.

Eller ej, det kommer att göra din site snabbare, vilket hjälper sökmotorsoptimeringens ranking, men det kommer också att minska din totala bandbreddsförbrukning, minska kostnaderna och förbättra din websites koldioxidavtryck.

Inaktivera Gravatar från WordPress Comments

WordPress levereras med en built-in tjänst från tredje part som heter Gravatar, en förkortning för Globally Recognized Avatars.

This allows you to see a user’s profile photo or avatar when they leave a comment on your WordPress site.

Utmaningen är att det är obligatoriskt för dina website besökare att skapa ett Gravatar account, vilket de flesta användare inte gör. Så istället hämtar din website bara den gråa mystery man-avataren som inte ser bra ut.

Låt oss nu säga att du har ett populärt blogginlägg med 50 kommentarer där endast 10% av användarna har en Gravatar image och 90% inte. Tja, det är 50 ytterligare images som din page hämtar som verkligen inte addar signifikant 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 förändring har drastiskt förbättrat våra sidors hämtartider och vår site speed score.

Removing 3rd Party Custom Fonts

Jag ska vara ärlig, jag tänkte aldrig två gånger om custom fonts i det förflutna.

Det var något som bara kändes normalt och fick webbplatsen att se bra ut ur typografisk synvinkel, kl om man har turen att ha ett snabbt internet.

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

När jag besökte sajten från en avlägsen location med dålig internetkvalitet insåg jag verkligen hur stor inverkan dessa fonts har på användarens upplevelse.

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 öka sin närvaro på nätet.

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

Ingen flash of unstyled text (FOUT), ingen kumulativ förändring av layouten (CLS) och betydligt kortare blockeringstid.

Om du loggar in på WordPress dashboard eller använder Github kommer du att notera att våra fonts är liknande eftersom båda dessa plattformar bytte till systemfonts tidigare.

Även om det kanske inte är en genomförbar lösning för alla företagswebbplatser att ta bort customize fonts, är det definitivt något som jag anser att både designers och utvecklare bör tänka på när det gäller hastighet.

Några bästa metoder som kan vara till hjälp:

• Istället för att använda två separata fonts för head respektive content, kan du överväga att använda samma font för båda.
• Istället för att använda flera olika fontvikter och stilar som tunn, normal, halvfet, fet, extra fet, svart och sedan kursiv version av all dessa, överväg att minska fontvikterna till endast två: normal och fet.
• Istället för att hämta hela FontAwesome eller ett annat bibliotek med fonts för ikoner, kan du överväga att lägga till direkta SVG:er av de ikoner som du behöver.

Inaktivera Customize Fonts i OptinMonster

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

Mina website popups och formulär för prenumeration via email använder OptinMonster, och de hämtar fortfarande Google fonts.

Nu inaktivera OptinMonster var inte ett alternativ eftersom det hjälper mig att få fler email prenumeranter och öka vår website konverteringar.

Lyckligtvis är det ett av mina företag, så jag bad utvecklarna om en lösning för att inaktivera Googles fonts.

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 tillåter inte bara att inaktivera Googles typsnitt, utan också att hämta alla anpassade webbfonter som du vill.

Jag är ganska tekniskt kunnig och kan implementera det lilla snippet 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 utvalda funktionen i kampanjbyggaren (ingen kodning behövs).

Men om du är bekväm med kod och inte vill manuellt toggle denna inställning av för varje kampanj, kan du bara följa hacket som jag använder.

Lägg först till följande JS snippet för att inaktivera OptinMonster från att hämta några webb fonts på din webbplats:

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

Följare, add to följande CSS i din style.css-fil:

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

Glöm naturligtvis inte att ändra fonten så att den matchar fonten på din website. Detta kommer i princip att tillämpa font-familjen ovan på alla OptinMonster-kampanjer som hämtar på din webbplats.

Bytte från W3 Total Cache till WP Rocket

Under den längsta tiden körde jag en mycket customiserad konfiguration av W3 Total Cache plugin på WPBeginner.

Även om det fick jobbet gjort, var det ingen matcha för WP Rocket som vi har använt på alla våra produkt webbplatser.

Så med den här omdesignen bytte jag äntligen till WP Rocket som kommer med massor av fantastiska funktioner för webbplatsens hastighet, särskilt en tillförlitlig cache-förladdning och filminifiering.

Detta plugin är avgörande om du vill förbättra hastigheten på din website.

Bara en snabb anmärkning om du använder ThirstyAffiliates eller Pretty Links för att hantera dina affiliate-länkar, se till att du utesluter dem från att cachas.

Gå bara till fliken Advanced Rules och add to your affiliate slug under Never Cache URLs inställningen.

Om du inte gör detta och du har aktiverat cache pre-load, kommer WP Rocket att försöka cache dina affiliate-länkar eftersom de gillar interna länkar.

Detta kan artificiellt blåsa upp dina antal click och påverka dina affiliate metrics.

Jag har bett WP Rocket-teamet att se om de automatiskt kan upptäcka populära affiliate-tillägg och fylla i taggen för exkluderad URL 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 och det är därför jag ville få den nya designen av sajten live före årets slut.

Vi har planer på att lansera en helt new section på WPBeginner som många av er har frågat efter 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 block editorn för att skapa en bättre övergripande läsupplevelse för you.

Utöver det, håll utkik på vår YouTube-kanal eftersom vi kommer att göra några riktigt coola saker där under 2022.

Som alltid vill jag tacka all you för ert fortsatta support och återkoppling genom åren.

Yours Truly,
Syed Balkhi
Grundare av WPBeginner