WPBeginner v6 – În culisele noului nostru design de site

Dacă ați vizitat WPBeginner în ultimele săptămâni, atunci probabil ați observat că avem un nou design de site. Deși are multe asemănări cu ultimul, sunt multe care s-au schimbat în culise.

După cum am promis în buletinul informativ, vreau să vă împărtășesc procesul de gândire din spatele reproiectării noastre, ceea ce am învățat, ce este nou pe site și, cel mai important, cum puteți folosi unele dintre învățăturile noastre pentru a vă îmbunătăți site-ul.

Un mic fundal

Am început WPBeginner în 2009 și, ca majoritatea creatorilor noi, am schimbat designul temei site-ului nostru de patru ori în primii 3 ani.

Pe măsură ce afacerea mea a crescut, mi-am dat seama că reproiectarea site-urilor web necesită mult timp și resurse care ar putea fi cheltuite mai bine pentru îndeplinirea misiunii noastre principale:

Așa că mi-am propus să-mi dedic toată atenția misiunii noastre de bază, iar afacerea noastră a crescut enorm.

Ultima reproiectare a WPBeginner a fost lansată în 2016 și am parcurs un drum lung de atunci.

Iată ce s-a întâmplat în ultimii 5 ani:

• Am creat peste o mie de tutoriale WordPress gratuite pe blogul WPBeginner și am adăugat sute de tutoriale video noi pe canalul nostru YouTube.
• Am lansat comunitatea noastră WPBeginner Engage pe Facebook, care este acum cel mai mare grup WordPress de Facebook, cu peste 80.000 de membri (este gratuit să vă alăturați).
• Am lansat fondul WPBeginner Growth pentru a investi în unele dintre pluginurile noastre WordPress preferate, inclusiv MemberPress, Pretty Links, Formidable Forms, Uncanny Automator și alte 6.
• Am lansat două noi plugin-uri WordPress, TrustPulse, un plugin WordPress de verificare socială și RafflePress, un plugin WordPress puternic pentru concursuri și concursuri.
• Am achiziționat cinci plugin-uri de creștere WordPress, inclusiv faimosul AIOSEO (plugin SEO totul într-un singur pentru WordPress), SeedProd (creator de site-uri WordPress drag & drop), Smash Balloon (pluginul nr. 1 pentru feeduri de rețele sociale), PushEngage (plugin de notificare push pentru site-ul web) și AffiliateWP (plugin de gestionare a afiliaților pentru WordPress).
• De asemenea, am achiziționat cinci pluginuri pentru platformă și infrastructură WordPress, inclusiv faimosul plugin WP Mail SMTP (pentru a remedia livrarea e-mailului), SearchWP (plugin puternic de căutare WordPress), Easy Digital Downloads (plugin popular de comerț electronic pentru vânzarea de produse digitale), WP Simple Pay (plugin ușor). pentru acceptarea plăților cu cardul de credit) și Sugar Calendar (plugin de calendar de evenimente simplu pentru WordPress).

În mod colectiv, pluginurile noastre sunt acum utilizate de peste 19 milioane de site-uri web , iar 4 dintre pluginurile noastre se află în primele 20 de pluginuri WordPress din toate timpurile.

Deși toate acestea sunt realizări grozave, avem un nou set de provocări care trebuiau abordate, astfel încât să putem continua să ne îmbunătățim și să ne îndeplinim misiunea.

Acest lucru mă duce la WPBeginner v6.

Design axat pe descoperirea conținutului

WPBeginner a început ca un simplu blog tutorial, dar a devenit într-adevăr Wikipedia pentru WordPress.

Utilizatorii noștri ne-au spus în mod repetat că, atunci când doreau să găsească un răspuns la problemele lor WordPress, pur și simplu caută cuvântul cheie pe Google și adaugă WPBeginner la sfârșit pentru a găsi cea mai bună soluție.

Pentru a ajuta cititorii noștri să găsească rapid răspunsul la întrebările lor WordPress, am făcut ca funcția de căutare să se concentreze pe noua noastră pagină de pornire.

Fie că sunteți un vizitator care revine să caute în biblioteca noastră de conținut sau un cititor nou care a început să folosească WordPress, pagina de pornire a WPBeginner vă ajută acum să găsiți ceea ce căutați.

Veți observa, de asemenea, un widget de căutare similar în bara noastră laterală pe toate paginile cu o singură postare, precum și pe antetul site-ului nostru când faceți clic pe pictograma de căutare.

Unul dintre motivele pentru care WPBeginner a devenit cel mai mare site de resurse WordPress pentru utilizatorii non-tehnologii este că explicăm subiecte WordPress complexe în limba engleză simplă, pas cu pas.

În noul design, am adăugat funcția de căutare live la secțiunea noastră de glosar WordPress, astfel încât să vă puteți familiariza cu ușurință cu limbajul WordPress obișnuit. Acesta este practic ca un dicționar pentru termeni WordPress.

În calitate de utilizator WPBeginner, obțineți acces exclusiv la cele mai bune reduceri WordPress la pluginuri populare, teme premium, găzduire și alte instrumente de marketing.

Echipa noastră a făcut cu adevărat o treabă grozavă în negocierea celor mai bune oferte pentru tine, iar această secțiune a crescut destul de mult pentru a avea peste 100 de cupoane și oferte.

Datorită solicitării populare a utilizatorilor, am adăugat și Căutare live în secțiunea noastră Oferte, astfel încât să puteți găsi rapid cea mai bună ofertă pentru produsele WordPress preferate.

Pe măsură ce intrăm în 2022, o mare prioritate pentru noi este descoperirea conținutului.

Acest lucru ne ajută să oferim cea mai bună experiență de utilizare, crește timpul pe site, crește numărul de afișări de pagină și reduce rata de respingere generală.

Cred că în 2022, optimizarea experienței utilizatorului (UXO) va juca un rol critic în SEO.

Dacă doriți să vă învingeți concurenții și să obțineți un avantaj competitiv, vă recomand cu tărie să acordați atenție UXO.

Voi împărtăși sfaturi în acest articol despre cum puteți implementa funcții similare pe site-ul dvs., așa cum am făcut-o în noua noastră temă.

Cum să îmbunătățiți căutarea WordPress

Funcția implicită de căutare WordPress nu este foarte puternică, așa că dacă doriți să personalizați algoritmul de clasare și să controlați ce apare pentru fiecare căutare, vă recomand să utilizați pluginul SearchWP.

Alternativ, puteți utiliza și căutarea personalizată pe site-ul Google, care utilizează algoritmul Google, dar dezavantajul este că Google va afișa anunțuri în paginile dvs. de căutare, ceea ce nu arată foarte bine.

Dacă doriți să adăugați căutare live pe site-ul dvs., așa cum am făcut în secțiunea Oferte sau Glosar, atunci urmați acest tutorial despre cum să adăugați căutarea live AJAX în WordPress.

Alte tutoriale de căutare WordPress pe care le puteți găsi utile sunt cum să creați un formular de căutare WordPress personalizat și cum să adăugați o bară de căutare în meniul WordPress.

Noul Mega Meniu WordPress

Mergând pe tema descoperirii conținutului, am actualizat vechile noastre meniuri derulante WordPress în noi Mega Meniuri cu mai multe coloane.

Acest lucru permite noilor noștri utilizatori să găsească rapid și ușor conținutul nostru cel mai bun.

De asemenea, ne permite să evidențiem mai bine noile noastre produse, instrumentele de afaceri gratuite pe care le-am construit și multe altele.

Cum să adăugați un mega meniu în WordPress

Deși am creat o soluție personalizată pentru WPBeginner, puteți urma acest tutorial despre cum să adăugați un mega meniu în WordPress pentru a vă evidenția mai bine paginile de top.

Editorul de blocuri WordPress (în sfârșit)

În 2019, WordPress a introdus editorul de blocuri super puternic (alias Gutenberg) pentru crearea de conținut.

Am început imediat să-l folosesc pe blogul meu personal, dar din moment ce WPBeginner folosea o temă moștenită cu o mulțime de funcții personalizate codificate, schimbarea nu a fost la fel de ușoară.

Deci, în ultimii doi ani, am fost blocați să folosim Editorul clasic pe site-ul WPBeginner, în timp ce toate site-urile noastre mai noi au primit cele mai recente și mai bune caracteristici ale editorului de blocuri WordPress.

În sfârșit, cu noua noastră temă, acum putem folosi toate caracteristicile minunate ale editorului de blocuri WordPress.

De exemplu, acum pot adăuga un bloc foarte grozav „Știați” fără a scrie niciun cod:

De asemenea, am reproiectat complet câteva dintre paginile noastre de destinație folosind editorul de blocuri WordPress.

De exemplu, consultați noua noastră pagină de destinație gratuită cu configurarea blogului WordPress.

De asemenea, am reproiectat instrumentele noastre gratuite de afaceri folosind editorul de blocuri pentru a evidenția unele dintre instrumentele gratuite recente pe care le-am construit.

Vom folosi în continuare SeedProd pentru a crea pagini de destinație complet personalizate atunci când este necesar, deoarece este un constructor adecvat de pagini WordPress drag & drop.

Deși a fost distractiv să înveți cum să folosești Gutenberg pentru a crea o pagină de destinație personalizată, este totuși nevoie de MULTE codare pentru configurare înainte ca echipele de marketing să poată crea o pagină de destinație personalizată.

În timp ce, atunci când utilizați un plugin pentru constructor de pagini, echipele de marketing pot crea rapid pagini de destinație personalizate, machete de pâlnie etc., fără niciun ajutor din partea echipei de dezvoltare.

Echipa de bază WordPress lucrează din greu la funcțiile de editare a site-ului complet, dar încă mai are nevoie de multă muncă înainte de a putea concura cu funcțiile puternice pe care le obțineți cu creatorii de pagini precum SeedProd, Divi sau Beaver Builder.

Acestea fiind spuse, editorul de blocuri este al naibii de minunat și există o mulțime de pluginuri de bloc WordPress pe care le puteți folosi pentru a crea elemente de design interesante pentru a vă îmbunătăți conținutul.

Iată un alt bloc interesant pe care noua noastră temă îl are pentru evidențierea pluginurilor prezentate:

SeedProd este cel mai prietenos generator de pagini drag & drop pentru începători pentru WordPress. Vine cu peste 150 de șabloane prefabricate, iar caracteristica lor de creare a temei vă permite să construiți teme WordPress complet personalizate (fără niciun cod). Încercați SeedProd astăzi »

În următoarele postări de blog, sunt sigur că veți vedea mai multe blocuri de design de conținut pe care le avem pentru a ne îmbunătăți și mai mult lizibilitatea conținutului.

Trecerea de la Yoast la AIOSEO

Pentru cel mai mult timp, site-ul WPBeginner a folosit o versiune foarte veche și personalizată a pluginului Yoast SEO (v 2.3.5).

Pentru a pune în perspectivă, sunt pe versiunea 17 chiar acum.

Nu am vrut să actualizez Yoast pentru că echipa lor a eliminat câteva caracteristici esențiale pe care le-am considerat importante pentru SEO.

De asemenea, am simțit că spațiul SEO general WordPress a încetat să mai inoveze.

Așa că, la începutul lui 2020, am achiziționat AIOSEO, pluginul SEO all-in-one original și am pus echipa mea să-l reînnoiască complet.

Sunt foarte mândru de munca pe care a făcut-o echipa noastră și are toate funcțiile SEO de care aveți nevoie pentru a obține un avantaj competitiv.

La fel ca editorul de blocuri, site-urile noastre web mai noi au început să treacă la AIOSEO și au început să vadă că clasamentul lor se îmbunătățește, așa că eram nerăbdător să încep să-l folosesc pe WPBeginner.

Acum, folosim cele mai recente și mai bune funcții SEO de la All in One SEO.

Avem acum funcții precum harta site-ului video pentru a ne ajuta să ne îmbunătățim clasamentul conținutului cu videoclipuri, harta site-ului RSS pentru a ne ajuta conținutul să fie indexat mai rapid, module SEO avansate pentru a avea un control mai fin asupra SEO site-ului nostru și multe altele.

Cred cu adevărat că este cel mai bun plugin SEO de pe piață și, cel mai important, are un preț corect pentru întreprinderile și agențiile mici.

Plănuiesc să fac o scriere completă în săptămânile următoare despre motivul pentru care am schimbat cu o defalcare detaliată a caracteristicilor, dar între timp, puteți încerca versiunea gratuită a All in One SEO sau puteți verifica versiunea Pro care are toate cele mai puternice funcțiile pe care le folosesc pe WPBeginner.

Îmbunătățiri ale vitezei WordPress

Numeroase studii au arătat că site-urile web mai rapide îmbunătățesc experiența utilizatorului, cresc timpul petrecut pe site și conversiile generale.

Acesta este și motivul pentru care Google a făcut ca viteza site-ului să fie un factor de clasare SEO.

Acum, dacă urmărești site-ul de ceva vreme, atunci știi că sunt obsedat de optimizarea performanței.

Site-ul WPBeginner era deja destul de rapid datorită uimitorului nostru partener de găzduire WordPress SiteGround. Ele oferă o soluție de găzduire WordPress foarte optimizată, construită pe platforma cloud Google.

Și, desigur, am urmat cele mai bune practici WordPress de viteză, dar cu noul nostru design de temă, am făcut câteva îmbunătățiri notabile ale vitezei.

Iată rezultatele noastre Google Page Speed:

Iată rezultatul paginii de pornire de la GTMetrix și Pingdom:

Și am obținut acest rezultat în ciuda faptului că am adăugat noi secțiuni, mai mult conținut pe pagina de pornire, imagini mai largi etc.

Și înainte să întrebați, site-ul WPBeginner are 68 de pluginuri active în prezent.

Deci, s-ar putea să vă întrebați cum am reușit să adaug mai mult conținut pe site în timp ce reduc dimensiunea paginii și fac totul mai rapid?

Ei bine, am eliminat lucruri de care simțeam că nu mai avem nevoie și acestea sunt lucruri pe care chiar vreau să le facă și mai mulți proprietari de site-uri web.

Acest lucru nu numai că va ajuta la accelerarea site-ului dvs., ceea ce ajută la clasarea SEO, dar va reduce consumul total de lățime de bandă, va reduce costurile și va îmbunătăți amprenta de carbon a site-ului dvs.

Dezactivarea Gravatar din comentariile WordPress

WordPress vine cu un serviciu terță parte încorporat numit Gravatar prescurtare pentru avatare recunoscute la nivel global.

Acest lucru vă permite să vedeți fotografia de profil sau avatarul unui utilizator atunci când acesta lasă un comentariu pe site-ul dvs. WordPress.

Provocarea este că le cere vizitatorilor site-ului dvs. web să configureze un cont Gravatar, ceea ce majoritatea utilizatorilor nu o fac. În schimb, site-ul dvs. încarcă avatarul gri al omului misterios, care nu arată bine.

Acum să presupunem că aveți o postare populară pe blog cu 50 de comentarii în care doar 10% dintre utilizatori au o imagine Gravatar și 90% nu. Ei bine, sunt 50 de imagini suplimentare pe care pagina ta le încarcă și care într-adevăr nu adaugă valoare semnificativă conținutului.

De aceea, o mulțime de bloguri populare au început să dezactiveze Gravatar, iar noi facem același lucru pe WPBeginner.

Această modificare simplă a îmbunătățit drastic timpul de încărcare a paginii și scorul de viteză al site-ului.

Eliminarea fonturilor personalizate terță parte

Voi fi sincer, nu m-am gândit niciodată de două ori la fonturile personalizate în trecut.

A fost ceva care pur și simplu s-a simțit normal și a făcut site-ul să arate bine din punct de vedere al tipografic, cel puțin dacă ai norocul să ai un internet rapid.

În vechea temă WPBeginner, am folosit un font personalizat Adobe numit Proxima Nova, un font de pictogramă popular numit FontAwesome, iar ferestrele pop-up OptinMonster foloseau fonturile Source Sans Pro de la Google.

Când am vizitat site-ul dintr-o locație îndepărtată, cu o calitate slabă a internetului, mi-am dat seama cu adevărat cât de mare au impactul asupra performanței acestor fonturi asupra experienței utilizatorului.

În noul nostru design, am vrut să rezolv această problemă, astfel încât să le putem facilita studenților și proprietarilor de afaceri din țările în curs de dezvoltare să acceseze WPBeginner, să învețe WordPress și să-și dezvolte prezența online.

Noua temă WPBeginner v6 folosește fonturile implicite de sistem, care au parcurs un drum lung. Arată grozav pe toate dispozitivele și, desigur, este foarte rapid.

Fără text fără stil (FOUT), fără schimbare cumulativă a aspectului (CLS) și timp de blocare redus semnificativ.

Dacă vă conectați la tabloul de bord WordPress sau utilizați Github, atunci veți observa că fonturile noastre sunt similare, deoarece ambele platforme au făcut trecerea la fonturile de sistem mai devreme.

Deși eliminarea fonturilor personalizate poate să nu fie o soluție viabilă pentru toate site-urile web de afaceri, este cu siguranță ceva despre care cred că atât designerii, cât și dezvoltatorii ar trebui să fie atenți când vine vorba de viteză.

Câteva bune practici care pot ajuta:

• În loc să utilizați două fonturi separate pentru titlu și conținut, luați în considerare utilizarea aceluiași font pentru ambele.
• În loc să utilizați mai multe greutăți și stiluri diferite de font, cum ar fi subțire, obișnuit, semibold, bold, extra bold, negru și apoi versiuni cursive ale tuturor acestora, luați în considerare reducerea greutăților fontului la doar două: obișnuit și bold.
• În loc să încărcați întreaga bibliotecă FontAwesome sau o altă bibliotecă de fonturi de pictograme, luați în considerare adăugarea de SVG-uri directe ale pictogramelor de care aveți nevoie.

Dezactivarea fonturilor personalizate în OptinMonster

Odată ce tema a fost proiectată și codificată, mai trebuia să rezolv încă o problemă cu fonturile.

Ferestrele pop-up ale site-ului meu și formularele de abonare prin e-mail folosesc OptinMonster și încă încărcau fonturi Google.

Acum, dezactivarea OptinMonster nu a fost o opțiune, deoarece mă ajută să obțin mai mulți abonați la e-mail și să sporesc conversiile site-ului nostru.

Din fericire, este una dintre companiile mele, așa că am cerut echipei de dezvoltare o soluție pentru a dezactiva fonturile Google.

S-a dovedit că nu am fost primul care a solicitat această funcție, iar OptinMonster avea deja o soluție API care permite nu numai dezactivarea fonturilor Google, ci și încărcarea oricărui font web personalizat dorit.

Sunt destul de cunoscător în tehnologie și pot implementa fragmentul mic pe care echipa l-a împărtășit în documentație, dar știu că mulți dintre clienții noștri nu sunt.

Așa că acum echipa noastră a construit această funcție în cadrul generatorului de campanii (nu este nevoie de codificare).

Dar dacă sunteți confortabil cu codul și nu doriți să dezactivați manual această setare pentru fiecare campanie, puteți doar să urmați hack-ul pe care îl folosesc.

Mai întâi adăugați următorul fragment JS pentru a dezactiva OptinMonster să încarce orice fonturi web pe site-ul dvs.:

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

Apoi, adăugați următorul CSS în fișierul style.css:

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

Desigur, nu uitați să schimbați fonturile pentru a se potrivi cu fonturile site-ului dvs. Acest lucru va aplica practic familia de fonturi de mai sus la toate campaniile OptinMonster care se încarcă pe site-ul dvs.

Trecut de la W3 Total Cache la WP Rocket

Pentru cel mai mult timp, am rulat o configurație foarte personalizată a pluginului W3 Total Cache pe WPBeginner.

Deși și-a făcut treaba, nu s-a potrivit pentru WP Rocket pe care l-am folosit pe toate site-urile noastre de produse.

Așa că, cu această reproiectare, am trecut în sfârșit la WP Rocket, care vine cu MULTE caracteristici excelente de viteză a site-ului, în special o preîncărcare fiabilă a cache-ului și o minificare a fișierelor.

Acest plugin este crucial dacă doriți să vă îmbunătățiți viteza site-ului.

Doar o notă scurtă dacă utilizați ThirstyAffiliates sau Pretty Links pentru a vă gestiona linkurile afiliate, apoi asigurați-vă că le excludeți de la cache.

Mergeți pur și simplu la fila Reguli avansate și adăugați slug-ul dvs. de afiliat sub setarea Never Cache URLs.

Dacă nu faceți acest lucru și aveți preîncărcarea cache-ului activată, atunci WP Rocket va încerca să vă memoreze în cache link-urile afiliate, deoarece arată ca link-uri interne.

Acest lucru vă poate umfla artificial numărul de clicuri și vă poate afecta valorile afiliaților.

Am cerut echipei WP Rocket să vadă dacă pot detecta automat plugin-urile afiliate populare și pot completa în prealabil eticheta URL exclusă pentru a o face mai prietenoasă pentru începători și sper că vor implementa sugestia.

Ce urmează?

Am planuri mari pentru 2022, de aceea am vrut să pun live noul design de site înainte de sfârșitul acestui an.

Plănuim să lansăm o secțiune complet nouă pe WPBeginner despre care mulți dintre voi ați întrebat în ultimii 2 ani.

Vine în curând și sper să-l lansez până la începutul trimestrului II 2022.

De asemenea, intenționez să experimentez mai mult cu noul editor de blocuri pentru a crea o experiență generală de lectură mai bună pentru tine.

În afară de asta, fii cu ochii pe canalul nostru YouTube, deoarece vom face niște lucruri foarte interesante acolo în 2022.

Ca întotdeauna, vreau să vă mulțumesc tuturor pentru susținerea și feedbackul dumneavoastră continuu de-a lungul anilor.

A ta cu adevărat,
Syed Balkhi
Fondatorul WPBeginner

Postarea WPBeginner v6 – În culisele noului nostru design de site a apărut pentru prima dată pe WPBeginner.