WPBeginner v6 – În culisele noului nostru design de site

Dacă ați vizitat WPBeginner în ultimele săptămâni, probabil ați observat că am avut un nou design al site-ului. Deși are multe asemănări cu cel anterior, multe lucruri s-au schimbat în culise.

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

Un pic de context

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

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

Așa că mi-am propus să dedic toată atenția misiunii noastre principale și afacerea noastră a crescut extraordinar.

Ultima reproiectare a WPBeginner a fost lansată în 2016 și am evoluat mult de atunci.

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

• Am creat peste o mie de tutoriale gratuite WordPress pe blogul WPBeginner și am adăugat sute de tutoriale video noi pe Canalul nostru de YouTube.
• Am lansat comunitatea noastră WPBeginner Engage pe Facebook, care este acum cel mai mare grup de Facebook pentru WordPress, cu peste 80.000 de membri (este gratuit să te alături).
• 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 pluginuri WordPress, TrustPulse, un plugin de dovadă socială pentru WordPress, și RafflePress, un plugin puternic pentru concursuri și tombole WordPress.
• Am achiziționat cinci pluginuri de creștere pentru WordPress, inclusiv faimosul AIOSEO (plugin SEO all-in-one pentru WordPress), SeedProd (creator de site-uri WordPress drag & drop), Smash Balloon (cel mai bun plugin pentru fluxuri de social media), PushEngage (plugin pentru notificări push pe site) și AffiliateWP (plugin de management al afiliaților pentru WordPress).
• De asemenea, am achiziționat cinci pluginuri pentru platforma și infrastructura WordPress, inclusiv celebrul plugin WP Mail SMTP (pentru a remedia livrarea e-mailurilor), SearchWP (un plugin puternic de căutare WordPress), Easy Digital Downloads (un plugin popular de eCommerce pentru vânzarea de produse digitale), WP Simple Pay (un plugin ușor pentru acceptarea plăților cu cardul de credit) și Sugar Calendar (un plugin simplu de calendar de evenimente pentru WordPress).

În total, pluginurile noastre sunt acum utilizate de **peste 19 milioane de site-uri web**, iar 4 dintre pluginurile noastre se află în top 20 al celor mai bune pluginuri WordPress din toate timpurile.

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

Acest lucru mă aduce la WPBeginner v6.

Design axat pe descoperirea conținutului

WPBeginner a început ca un simplu blog de tutoriale, dar a devenit cu adevărat 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 căutau pe Google cuvântul cheie și adăugau 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 despre WordPress, am pus funcția de Căutare în centrul atenției pe noua noastră pagină principală.

Indiferent dacă sunteți un vizitator care revine pentru a căuta în biblioteca noastră de conținut sau un cititor nou care abia începe cu WordPress, pagina de pornire WPBeginner vă facilitează acum găsirea a ceea ce căutați.

Veți observa, de asemenea, un widget de căutare similar în bara laterală pe toate paginile postărilor individuale, precum și în 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-tehnici este că explicăm subiecte complexe WordPress în limbaj simplu, pas cu pas.

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

Ca utilizator WPBeginner, aveț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 o treabă grozavă negociind cele mai bune oferte pentru dvs., iar această secțiune a crescut destul de mult, având peste 100 de cupoane și oferte.

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

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

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

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

Dacă vrei să-ți depășești concurența și să obții un avantaj competitiv, îți recomand cu tărie să acorzi atenție UXO.

Voi împărtăși sfaturi pe parcursul acestui articol despre cum puteți implementa funcționalități similare pe site-ul dvs., așa cum am făcut noi în tema noastră nouă.

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

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

Alternativ, puteți folosi și căutarea personalizată Google pentru site, care folosește algoritmul Google, dar dezavantajul este că Google va afișa reclame pe 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 noi în secțiunea Oferte sau Glosar, urmați acest tutorial despre cum să adăugați căutare AJAX live în WordPress.

Alte tutoriale WordPress despre căutare care v-ar putea fi utile sunt cum să creezi un formular de căutare WordPress personalizat și cum să adaugi o bară de căutare în meniul WordPress.

Noul meniu mega WordPress

Continuând tema descoperirii conținutului, ne-am modernizat vechile meniuri derulante WordPress în noi Mega Meniuri multi-coloană.

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

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

Cum să adăugați un Mega Menu î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 evidenția mai bine paginile dvs. principale.

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

În 2019, WordPress a introdus editorul de blocuri super puternic (cunoscut și sub numele de Gutenberg) pentru crearea de conținut.

Am început imediat să-l folosesc pe blogul meu personal, dar deoarece WPBeginner folosea o temă veche cu multe funcționalități codificate personalizat, tranziția nu a fost la fel de ușoară.

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

În cele din urmă, cu noul nostru temă, putem folosi acum toate caracteristicile minunate ale editorului de blocuri WordPress.

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

De asemenea, am reproiectat complet mai multe dintre paginile noastre de destinație folosind editorul de blocuri WordPress.

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

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

Vom continua să folosim SeedProd pentru a crea pagini de destinație complet personalizate atunci când este necesar, deoarece este un adevărat page builder WordPress drag & drop.

Deși a fost distractiv să învăț cum să folosesc Gutenberg pentru a crea pagini de destinație personalizate, este totuși necesar un NUMĂR MARE de 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 de page builder, echipele de marketing pot crea rapid pagini de destinație personalizate, layout-uri de funnel-uri etc. fără niciun ajutor din partea echipei de dezvoltare.

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.

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

Iată un alt bloc interesant pe care noua noastră temă îl are pentru evidențierea plugin-urilor recomandate:

SeedProd este cel mai ușor de utilizat constructor de pagini drag & drop pentru WordPress. Vine cu peste 150 de șabloane pre-făcute, iar funcția lor de constructor de teme îți permite să construiești teme WordPress complet personalizate (fără cod). Încearcă SeedProd astăzi »

În postările viitoare de pe blog, sunt sigur că veți vedea mai multe blocuri de design de conținut pe care trebuie să le îmbunătățim în continuare lizibilitatea conținutului nostru.

Trecerea de la Yoast la AIOSEO

Pentru o lungă perioadă de 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ă, ei sunt acum la versiunea 17.

Nu am vrut să actualizez Yoast deoarece echipa lor eliminase unele funcționalități esențiale pe care le consideram importante pentru SEO.

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

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

Sunt extrem de mândru de munca pe care a depus-o echipa noastră și are toate caracteristicile SEO de care ai nevoie pentru a obține un avantaj competitiv.

La fel ca editorul de blocuri, site-urile noastre mai noi au început să treacă la AIOSEO și au început să vadă îmbunătățiri în clasamente, așa că am fost dornic să încep să-l folosesc pe WPBeginner.

Acum, folosim cele mai noi și mai bune funcționalități SEO de la All in One SEO.

Acum avem funcționalități precum sitemap video pentru a ajuta la creșterea clasamentului conținutului nostru cu videoclipuri, sitemap RSS pentru a ajuta conținutul nostru să fie indexat mai rapid, module SEO avansate pentru a avea un control mai fin asupra SEO-ului 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 afacerile mici și agenții.

Intenționez să fac o prezentare completă în săptămânile următoare despre motivul pentru care am făcut tranziția, cu o detaliere a funcționalităților, dar între timp, puteți încerca versiunea gratuită a All in One SEO, sau puteți consulta versiunea Pro care are toate funcționalitățile puternice 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, în general, conversiile.

Acesta este și motivul pentru care Google a făcut din viteza site-ului un factor de clasificare SEO.

Acum, dacă urmăriți site-ul de ceva timp, știți că sunt obsedat de optimizarea performanței.

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

Și, desigur, am urmat cele mai bune practici de viteză WordPress, dar cu noul nostru design de temă, am făcut mai multe î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 adăugării de noi secțiuni, mai mult conținut pe pagina principală, imagini mai late etc.

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

Așa că s-ar putea să vă întrebați cum am reușit să adaug mai mult conținut pe site, reducând în același timp dimensiunea paginii și făcând totul mai rapid?

Ei bine, am eliminat lucrurile pe care am simțit că nu le mai avem nevoie, și acestea sunt lucruri pe care vreau cu adevărat ca mai mulți proprietari de site-uri să le ia în considerare.

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

Dezactivarea Gravatar din comentariile WordPress

WordPress vine cu un serviciu terț integrat numit Gravatar, prescurtare de la Globally Recognized Avatars (Avataruri Recunoscute Global).

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

Provocarea este că necesită ca vizitatorii site-ului tău să își creeze un cont Gravatar, ceea ce majoritatea utilizatorilor nu fac. Așa că, în schimb, site-ul tău încarcă doar avatarul gri al omului misterios, care nu arată bine.

Acum, să spunem că aveți o postare populară pe blog cu 50 de comentarii, unde doar 10% dintre utilizatori au o imagine Gravatar și 90% nu. Ei bine, acestea sunt 50 de imagini suplimentare pe care pagina dvs. le încarcă și care, de fapt, nu adaugă valoare semnificativă conținutului.

De aceea, multe bloguri populare au început să dezactiveze Gravatar, iar noi facem același lucru pe WPBeginner.

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

Eliminarea fonturilor personalizate de la terți

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

Era ceva ce părea normal și făcea ca site-ul să arate bine din punct de vedere tipografic, cel puțin dacă aveți norocul să aveți internet rapid.

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

Când am vizitat site-ul dintr-o locație îndepărtată, cu o conexiune slabă la internet, am realizat cu adevărat cât de mare este impactul performanței acestor fonturi asupra experienței utilizatorului.

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

Noua temă WPBeginner v6 folosește Fonturile de Sistem implicite, care au evoluat mult. Arată grozav pe toate dispozitivele și, desigur, este super rapidă.

Fără afișare bruscă de text nestilizat (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, veți observa că fonturile noastre sunt similare, deoarece ambele platforme au trecut mai devreme la fonturi de sistem.

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

Câteva bune practici care pot ajuta:

• În loc să folosiți două fonturi separate pentru titluri față de conținut, luați în considerare utilizarea aceluiași font pentru ambele.
• În loc să folosiți mai multe greutăți și stiluri de font diferite, cum ar fi subțire, normal, semibold, bold, extra bold, negru, și apoi versiunea italică a tuturor acestora, luați în considerare reducerea greutăților fonturilor la doar două: normal și bold.
• În loc să încarci întreaga bibliotecă FontAwesome sau o altă bibliotecă de fonturi pentru pictograme, ia în considerare adăugarea directă a fișierelor SVG ale pictogramelor de care ai nevoie.

Dezactivarea fonturilor personalizate în OptinMonster

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

Pop-up-urile de pe site-ul meu și formularele de abonare prin e-mail folosesc OptinMonster și totuși î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 email și să-mi cresc conversiile pe site.

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 pe care îl doriți.

Sunt destul de priceput la tehnologie și pot implementa micul fragment pe care echipa l-a distribuit în documentație, dar știu că mulți dintre clienții noștri nu sunt.

Deci, acum echipa noastră a construit de fapt această funcționalitate în constructorul de campanii (nu este necesară codarea).

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

Mai întâi, adăugați următorul fragment JS pentru a dezactiva încărcarea fonturilor web de către OptinMonster 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 dvs. 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. web. Acest lucru va aplica practic fontul-familie de mai sus tuturor campaniilor OptinMonster care se încarcă pe site-ul dvs.

Am trecut de la W3 Total Cache la WP Rocket

Pentru o lungă perioadă de timp, am rulat o configurație foarte personalizată a pluginului W3 Total Cache pe WPBeginner.

Deși și-a făcut treaba, nu a fost o potrivire pentru WP Rocket, pe care îl folosim pe toate site-urile noastre de produse.

Deci, cu acest redesign, am trecut în sfârșit la WP Rocket, care vine cu O MULȚIME de funcționalități excelente pentru viteza site-ului, în special preîncărcarea fiabilă a cache-ului și minificarea fișierelor.

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

Doar o notă rapidă dacă folosești ThirstyAffiliates sau Pretty Links pentru a-ți gestiona linkurile afiliate, asigură-te că le excluzi de la caching.

Pur și simplu accesați fila Reguli avansate și adăugați slug-ul afiliatului dvs. la setarea Nu cache URL-uri.

Dacă nu faci acest lucru și ai activată pre-încărcarea cache-ului, atunci WP Rocket va încerca să pună în cache linkurile tale de afiliere, deoarece acestea arată ca linkuri interne.

Acest lucru vă poate umfla artificial numărul de clicuri și vă poate afecta metricile de afiliere.

Am rugat echipa WP Rocket să vadă dacă pot detecta automat pluginurile populare de afiliere și să pre-completeze eticheta URL exclusă pentru a fi mai prietenoasă cu începătorii, și sper să implementeze sugestia.

Ce urmează?

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

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

Va veni în curând și sper să-l lansez până la începutul T2 2022.

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

În afară de asta, fiți cu ochii pe canalul nostru de YouTube, deoarece vom face lucruri foarte interesante acolo în 2022.

Ca întotdeauna, vreau să vă mulțumesc tuturor pentru sprijinul și feedback-ul continuu de-a lungul anilor.

Cu stimă,
Syed Balkhi
Fondator WPBeginner