1) De ce am creat un site web nou și nu am putut doar „comutați temele”

Când am identificat prima dată nevoia de schimbare, sarcina părea simplă: „Schimbați blocul de sus și faceți chemarea la acțiune mai eficientă”. La valoarea nominală, aceasta ar putea părea o soluție rapidă, dar ne-am dat seama curând că această mică sarcină a dezvăluit probleme de bază mult mai mari cu structura și designul site-ului. Problema nu a fost doar un bloc; întreaga arhitectură a site-ului avea nevoie de o revizie.

Site-ul nostru web a fost construit de-a lungul timpului, cu diferite pagini adăugate folosind diferite modele și machete, fără nicio temă sau șablon unificator. Fiecare pagină a fost unică în design, ceea ce ar putea suna creativ, dar a condus la o problemă semnificativă: inconsecvența. Dacă am continua și am face un design nou doar pentru blocul de sus, păstrând restul site-ului așa cum era, ar însemna actualizarea manuală a blocului respectiv pe peste 700 de pagini și postări. Și mai rău, acest proces manual ar trebui repetat de fiecare dată când dorim să facem schimbări viitoare. Imaginați-vă ineficiența de a fi nevoit să parcurgeți sute de pagini, asigurându-vă că fiecare are cele mai recente actualizări. A devenit rapid clar că continuarea lucrului cu vechiul site nu ar fi sustenabilă.

Dincolo de doar logistica actualizării fiecărei pagini, a trebuit să luăm în considerare experiența generală a utilizatorului. Utilizatorii de astăzi se așteaptă la experiențe perfecte și coezive atunci când vizitează un site web. Dacă derulează în jos pe o pagină și văd că designul este inconsecvent - cu fiecare bloc folosind stiluri diferite - se creează o impresie dezarticulată și neprofesională. Și mai rău, atunci când un utilizator trece de la o pagină la alta și observă că aspectul și designul sunt complet diferite, întărește un sentiment de dezordine.

Incoerența sa extins dincolo de aspect. Multe dintre imaginile de pe site au fost depășite, stilate prost sau chiar generate inadecvat de rețelele neuronale. Aceste imagini nu erau în conformitate cu standardele moderne de design, iar înlocuirea lor a fost o altă sarcină descurajantă. Utilizarea imaginilor proaste s-a reflectat slab asupra calității generale a site-ului, lăsând utilizatorilor o impresie negativă asupra produsului sau serviciului pe care îl oferim.

Nu a existat o modalitate simplă de a actualiza site-ul complet folosind un instrument precum Elementor. Fiecare pagină și bloc conținea propriile stiluri inline, ceea ce înseamnă că modificările nu au putut fi făcute la nivel global. Dacă am dori să actualizăm stilul site-ului, ar trebui să parcurgem fiecare pagină și să actualizăm manual fiecare bloc, ceea ce ar consuma timp și ar fi ineficient. Având în vedere acest lucru, a devenit evident că singura noastră soluție a fost să construim un nou site web de la zero. Acest lucru ne-ar permite să transferăm tot conținutul, păstrând în același timp aceleași adrese URL, dar cu un design nou, consistent și ușor de actualizat.

2) De ce am decis să nu folosim Elementor

Elementor este unul dintre cei mai populari creatori de pagini pentru WordPress. La suprafață, pare un instrument grozav care permite crearea rapidă și ușoară a paginii. Cu toate acestea, după ce am lucrat intens cu acesta, ne-am confruntat cu câteva limitări care ne-au făcut să decidem să ne îndepărtăm de Elementor și să optăm pentru un site web personalizat.

Limitările și provocările lui Elementor:

1. Erori și erori : În timp ce Elementor oferă multe funcții utile, nu este lipsit de problemele sale tehnice. De exemplu, când am copiat o pagină și am încercat să o edităm, noua pagină arăta adesea diferit de cea originală, chiar înainte de a face modificări. Au existat erori frecvente cu privire la modul în care erau afișate elementele, cum ar fi proprietatea „lățimea maximă a imaginii” care nu funcționează corect. Aceste erori au făcut dificilă asigurarea unui stil consecvent între pagini.
2. Prea multă libertate creativă, care duce la inconsecvență : Unul dintre punctele cheie de vânzare ale Elementor este capacitatea de a personaliza totul. Cu toate acestea, această flexibilitate poate fi o sabie cu două tăișuri, mai ales atunci când mai mulți editori lucrează pe site. Este ușor pentru non-profesioniști să creeze neintenționat pagini cu design inconsistent. De exemplu, am văzut cazuri de editori care foloseau text roz pe butoanele roz sau adăugau triunghiuri portocalii zburătoare în fundal, rezultând un design aglomerat și confuz. Fără un sistem strict de design, a devenit imposibil să se mențină o identitate vizuală coerentă.
3. Personalizare limitată pentru funcționalitate avansată : În timp ce Elementor excelează în crearea de bază a paginilor cu text și imagini, devine mai dificil atunci când trebuie să adăugați funcționalități personalizate. Ne-am trezit adesea limitați la blocurile încorporate, care erau greu de personalizat pentru funcții mai complexe. Pe măsură ce nevoile noastre au crescut dincolo de aspectele de bază, limitările Elementor au devenit din ce în ce mai evidente.
4. Probleme de cod și performanță umflate : metoda Elementor de a construi pagini introduce imbricarea excesivă a elementelor. De exemplu, Elementor generează automat multiple
   containere în interiorul altora

   elemente, fiecare cu propriul set de stiluri. Acest lucru are ca rezultat o structură umflată care afectează negativ viteza de încărcare, performanța paginii și, în cele din urmă, clasarea SEO a site-ului. Când am efectuat teste de viteză, rezultatele au fost în mod constant slabe, iar codul greu generat de Elementor a fost în mare parte de vină.
5. Fără capacități de testare A/B : În peisajul digital de astăzi, testarea A/B este esențială pentru optimizarea experienței utilizatorului. Cu toate acestea, Elementor nu oferă posibilitatea de a afișa diferite versiuni ale site-ului diferiților utilizatori. Toată lumea vede același site, ceea ce limitează capacitatea noastră de a testa și de a ajusta elemente de design, cum ar fi culorile, formele butoanelor și imaginile de fundal. Fără această funcționalitate, nu am putea optimiza site-ul pe baza comportamentului real al utilizatorului.
6. Database Bloat : Poate unul dintre cele mai semnificative dezavantaje ale Elementor este modul în care gestionează stilurile și conținutul. Elementor stochează stiluri, structuri imbricate și alte etichete inutile amestecate cu conținutul din baza de date. Acest lucru duce la o bază de date umflată care nu este curățată chiar și atunci când Elementor este dezactivat sau dezinstalat. Ca rezultat, trecerea la o nouă temă sau cadru nu rezolvă problema – acele stiluri rămân încorporate în pagini, continuând să cauzeze probleme.

Având în vedere toate aceste provocări, a devenit clar că avem nevoie de o soluție mai robustă. Am luat decizia de a construi un site web nou, independent, fără Elementor, optând pentru o abordare mai durabilă și mai flexibilă.

3) Cum se creează o pagină pe noul site

Construirea noului site de la zero ne-a oferit oportunitatea de a stabili un proces curat și eficient pentru crearea paginilor. În noul sistem, crearea unei pagini este simplă:

1. Conectați-vă la panoul de administrare WordPress și faceți clic pe Pagini -> Adăugați o pagină nouă .
2. Veți vedea editorul standard WordPress, unde puteți scrie sau lipi text, adăuga link-uri și încărcați imagini.

Acest proces este simplu, dar flexibil. În loc să se bazeze pe sistemul de blocare complicat al Elementor, editorul de conținut din WordPress este mult mai curat, permițând actualizări rapide și personalizare ușoară. Sub editor, există setări pentru Câmpuri personalizate avansate (ACF), care sunt deja configurate pentru a menține coerența pe întregul site.

ACF ne permite să creăm secțiuni de conținut flexibile, cu blocuri precum Conținut 1... Conținut 15 , unde puteți seta cu ușurință titlul, textul, imaginea și etichetele butoanelor pentru fiecare secțiune a paginii. Aceste blocuri alternează automat poziționarea imaginilor și a textului, asigurându-se că aspectul rămâne captivant vizual fără a necesita ajustări manuale.

Pentru imagini, am implementat un sistem de potrivire a culorilor care aplică automat un gradient în culorile principale ale site-ului. Acest lucru asigură că toate imaginile se aliniază cu estetica generală. Pentru logo-uri sau capturi de ecran în care culorile trebuie să rămână intacte, există o opțiune „păstrați culorile” care înlocuiește gradientul.

Acest sistem simplifică gestionarea conținutului, menținând în același timp coerența designului pe toate paginile.

4) Cum să creezi o postare nouă

Crearea postărilor pe noul site urmează același proces simplificat ca și crearea paginilor, cu câteva diferențe cheie:

• Postările au adrese URL care includ ../blog/.. , diferențiandu-le de pagini.
• În bara laterală din dreapta, un bloc afișează automat cele mai recente trei articole, contribuind la menținerea blogului dinamic și captivant.

Șablonul pentru toate postările se află în fișierul template-parts/content/content-single.php , care se ocupă de structura și aspectul fiecărei postări de blog. Acest șablon consistent permite actualizări ușoare și asigură că toate postările respectă aceleași linii directoare de design.

5) Câmpuri personalizate avansate (ACF)

ACF a fost o parte esențială a dezvoltării noului nostru site web. Ne permite să creăm câmpuri personalizate care pot fi gestionate cu ușurință prin panoul de administrare WordPress. Câmpuri precum content_1 sunt referite în codul PHP, permițându-ne să extragem în mod dinamic conținutul corect pentru fiecare pagină și postare.

Această flexibilitate este esențială pentru a ne asigura că putem gestiona și actualiza eficient site-ul, oferind totuși spațiu pentru personalizare atunci când este necesar.

6) Testare A/B

Una dintre cele mai semnificative îmbunătățiri pe care le-am făcut cu noul site a fost implementarea testării A/B. Testarea A/B ne permite să comparăm două versiuni ale site-ului pentru a vedea care funcționează mai bine cu utilizatorii. Aceasta poate include testarea diferitelor culori, forme de butoane, fundaluri sau chiar machete.

Am implementat această funcționalitate folosind parametrii GET din URL. De exemplu, se pot crea două campanii publicitare identice, dar cu adrese URL diferite:

• https://www.conveythis.com/?param=1

• https://www.conveythis.com/?param=2

Când utilizatorii dau clic pe aceste linkuri, parametrul este salvat într-un cookie. În funcție de valoarea parametrului, site-ul va afișa diferite versiuni ale paginii, cum ar fi diferite culori ale butoanelor sau imagini de fundal. Acest lucru ne permite să colectăm date valoroase despre preferințele și comportamentele utilizatorilor.

Toate evenimentele sunt înregistrate în a.csvfișier, precum și într-o bază de date MySQL, permițându-ne să analizăm datele și să luăm decizii informate cu privire la îmbunătățirile site-ului.

7) Fișierul functions.php

8) Gestionarea SEO și viteza site-ului

Un accent major în timpul revizuirii site-ului a fost îmbunătățirea SEO și performanța generală a site-ului. Site-ul original, construit folosind Elementor, a avut probleme cu timpii de încărcare lenți și practicile SEO suboptime din cauza codului umflat și a imaginilor neoptimizate.

Îmbunătățirea SEO

Pentru a ne asigura că noul nostru site este prietenos cu SEO, am implementat câteva bune practici chiar de la început:

• HTML semantic : Am structurat cu atenție HTML-ul site-ului cu utilizarea adecvată a etichetelor de antet (
  ,
  , etc.), asigurându-se că motoarele de căutare ar putea analiza și înțelege cu ușurință ierarhia conținutului. Acest lucru este deosebit de important atât pentru clasamentele SEO, cât și pentru accesibilitate.
• Meta-etichete și date Open Graph : am folosit pluginul Yoast SEO pentru a gestiona meta titlurile, descrierile și datele Open Graph pentru partajarea socială. Folosind Yoast, ne-am asigurat că fiecare pagină și postare au metadate optimizate, care sunt esențiale pentru vizibilitatea motorului de căutare și ratele de clic de pe platformele de social media.
• Schema Markup : Folosind fișierul functions.php , am adăugat schema personalizată de marcare pentru datele structurate, îmbunătățind modul în care motoarele de căutare afișează paginile noastre în rezultatele căutării. De exemplu, am inclus o schemă pentru articole, studii de caz și produse, ajutând motoarele de căutare să ne categorizeze mai bine conținutul.

funcția add_schema_markup() {
ecou'
  {
"@context": "http://schema.org",
"@type": "Organizație",
"nume": "ConveyThis",
"url": "https://www.conveythis.com",
„logo”: „https://www.conveythis.com/logo.png”,
„sameAs”: [
„https://www.facebook.com/#{1} #",
"https://twitter.com/conveythis"
]
}
';
}
add_action( 'wp_head' , „add_schema_markup” );


Optimizarea vitezei site-ului

Performanța este un factor critic nu numai pentru experiența utilizatorului, ci și pentru clasamentele SEO. Am luat mai mulți pași pentru a îmbunătăți viteza site-ului:

• Optimizarea imaginii : am folosit formate moderne de imagine, cum ar fi WebP , care oferă rate de compresie mai bune decât formatele tradiționale precum PNG și JPEG. Toate imaginile au fost difuzate la dimensiunea adecvată în funcție de rezoluția ecranului utilizatorului, asigurând timpi de încărcare rapid chiar și pe dispozitivele mobile.
• Lazy Loading : prin implementarea lazy loading pentru imagini, ne-am asigurat că numai imaginile vizibile pe ecranul utilizatorului au fost încărcate inițial. Imaginile suplimentare s-ar încărca pe măsură ce utilizatorul derulează, reducând timpul inițial de încărcare a paginii.
• Memorarea în cache și reducerea : am folosit WP Rocket pentru stocarea în cache, minimizarea și compresia fișierelor HTML, CSS și JavaScript. WP Rocket ne-a ajutat să obținem timpi de încărcare mai rapidi prin reducerea dimensiunii totale a fișierului și prin furnizarea de versiuni statice în cache ale paginilor pentru vizitatorii repetători.

9) Optimizarea și curățarea bazei de date

Vechiul site a acumulat o cantitate semnificativă de date „junk” din cauza umflăturilor Elementor și a structurii ineficiente a bazei de date. Pentru a ne asigura că noul site funcționează fără probleme, am efectuat o curățare și o optimizare amănunțită a bazei de date.

• Eliminarea datelor Elementor vechi

După cum am menționat mai devreme, chiar și după dezactivarea Elementor, stilurile și setările sale erau încă încorporate în baza de date. Am folosit interogări personalizate pentru a șterge aceste date în exces și pentru a curăța baza de date. În plus, am eliminat toate fișierele media nefolosite, am postat revizuiri și elementele tranzitorii expirate care s-au acumulat de-a lungul timpului.

• Indexarea bazei de date

De asemenea, am optimizat baza de date prin adăugarea de indici la coloanele interogate frecvent, asigurându-ne că interogările bazei de date au fost mai rapide și mai eficiente. De exemplu, adăugarea unui index ladata_postcoloana a accelerat interogările legate de postările recente, îmbunătățind performanța paginilor blogului nostru.

Concluzie

Decizia de a construi un nou site web de la zero a fost condusă de limitările și ineficiențele vechiului site. Pur și simplu comutarea temei nu a fost o opțiune viabilă din cauza inconsecvențelor de design, a stilurilor umflate și a problemelor de performanță cauzate de Elementor. Prin crearea unui nou site cu dezvoltare personalizată și câmpuri personalizate avansate, am obținut un site web mai eficient, mai coeziv și mai profesionist, care îmbunătățește experiența utilizatorului, permițând în același timp actualizări simplificate și funcționalitate de testare A/B. Acest nou site oferă o bază solidă pentru creșterea și îmbunătățirile viitoare.