1) Hvorfor vi oprettede et nyt websted og ikke bare kunne "skifte temaer"

Da vi først identificerede behovet for forandring, virkede opgaven enkel: "Skift den øverste blok og gør opfordringen til handling mere effektiv." Til pålydende kan dette virke som en hurtig løsning, men vi indså hurtigt, at denne lille opgave afslørede meget større underliggende problemer med strukturen og designet af webstedet. Problemet var ikke kun én blok; det var hele stedets arkitektur, der trængte til en overhaling.

Vores hjemmeside var blevet bygget over tid, med forskellige sider tilføjet ved hjælp af forskellige designs og layouts, uden noget samlende tema eller skabelon. Hver side var unik i sit design, hvilket kunne lyde kreativt, men førte til et væsentligt problem: inkonsekvens. Hvis vi gik videre og lavede et nyt design til kun den øverste blok, mens vi beholdt resten af webstedet, som det var, ville det betyde manuelt at opdatere den blok på over 700 sider og indlæg. Endnu værre, denne manuelle proces skulle gentages, hver gang vi ønskede at foretage fremtidige ændringer. Forestil dig ineffektiviteten ved at skulle gennemse hundredvis af sider og sikre, at hver enkelt havde de seneste opdateringer. Det stod hurtigt klart, at det ikke ville være bæredygtigt at fortsætte med at arbejde med det gamle sted.

Ud over logistikken ved at opdatere hver side, var vi nødt til at overveje den overordnede brugeroplevelse. Brugere i dag forventer sømløse, sammenhængende oplevelser, når de besøger en hjemmeside. Hvis de ruller ned på en side og ser, at designet er inkonsekvent – med hver blok, der bruger forskellige stilarter – skaber det et usammenhængende og uprofessionelt indtryk. Endnu værre, når en bruger flytter fra en side til en anden og bemærker, at layoutet og designet er helt anderledes, forstærker det en følelse af uorden.

Uoverensstemmelsen strakte sig ud over layout. Mange af billederne på webstedet var forældede, dårligt stylet eller endda uhensigtsmæssigt genereret af neurale netværk. Disse billeder var ikke i overensstemmelse med moderne designstandarder, og det var endnu en skræmmende opgave at erstatte dem. Brugen af dårlige billeder afspejlede dårligt den overordnede kvalitet af webstedet, hvilket efterlod brugerne med et negativt indtryk af det produkt eller den tjeneste, vi tilbød.

Der var ingen enkel måde at opdatere webstedet på ved hjælp af et værktøj som Elementor. Hver side og blok indeholdt sine egne inline-stile, hvilket betyder, at ændringer ikke kunne foretages globalt. Hvis vi ville opdatere webstedets stil, ville vi skulle gennemgå hver enkelt side og manuelt opdatere hver blok, hvilket ville være tidskrævende og ineffektivt. Med dette i tankerne blev det tydeligt, at vores eneste løsning var at bygge en ny hjemmeside fra bunden. Dette ville give os mulighed for at overføre alt indhold, mens vi bevarer de samme URL'er, men med et nyt, konsistent og let opdateringsvenligt design.

2) Hvorfor vi besluttede ikke at bruge Elementor

Elementor er en af de mest populære sidebyggere til WordPress. På overfladen virker det som et fantastisk værktøj, der giver mulighed for hurtig og nem sideoprettelse. Men efter at have arbejdet meget med det, stødte vi på adskillige begrænsninger, der fik os til at beslutte at flytte væk fra Elementor og vælge en specialbygget hjemmeside i stedet for.

Elementors begrænsninger og udfordringer:

1. Fejl og fejl : Selvom Elementor tilbyder mange nyttige funktioner, er det ikke uden tekniske problemer. Når vi for eksempel kopierede en side og forsøgte at redigere den, så den nye side ofte anderledes ud end originalen, selv før der blev foretaget ændringer. Der var hyppige fejl med, hvordan elementer blev vist, såsom egenskaben "maksimal billedbredde" som ikke fungerede korrekt. Disse fejl gjorde det vanskeligt at sikre ensartet styling på tværs af sider.
2. For meget kreativ frihed, der fører til inkonsekvens : Et af Elementors vigtigste salgsargumenter er evnen til at tilpasse alt. Denne fleksibilitet kan dog være et tveægget sværd, især når flere redaktører arbejder på webstedet. Det er nemt for ikke-professionelle utilsigtet at oprette sider med inkonsekvente designs. For eksempel så vi forekomster af redaktører, der brugte lyserød tekst på lyserøde knapper eller tilføjede flyvende orange trekanter i baggrunden, hvilket resulterede i et rodet og forvirrende design. Uden et stramt designsystem på plads blev det umuligt at opretholde en sammenhængende visuel identitet.
3. Begrænset tilpasning til avanceret funktionalitet : Mens Elementor udmærker sig i grundlæggende sidebygning med tekst og billeder, bliver det mere udfordrende, når du skal tilføje brugerdefineret funktionalitet. Vi fandt os ofte begrænset til de indbyggede blokke, som var svære at tilpasse til mere komplekse funktioner. Efterhånden som vores behov voksede ud over de grundlæggende layouts, blev Elementors begrænsninger mere og mere tydelige.
4. Opsvulmet kode og ydeevneproblemer : Elementors metode til at bygge sider introducerer overdreven indlejring af elementer. For eksempel genererer Elementor automatisk flere
   containere i andre

   elementer, hver med sit eget sæt stilarter. Dette resulterer i en oppustet struktur, der negativt påvirker indlæsningshastighed, sideydelse og i sidste ende hjemmesidens SEO-placering. Da vi kørte hastighedstest, var resultaterne konsekvent dårlige, og den tunge kode genereret af Elementor var i høj grad skylden.
5. Ingen A/B-testfunktioner : I dagens digitale landskab er A/B-test afgørende for at optimere brugeroplevelsen. Elementor tilbyder dog ikke muligheden for at vise forskellige versioner af webstedet til forskellige brugere. Alle ser det samme websted, hvilket begrænser vores mulighed for at teste og finjustere designelementer som farver, knapformer og baggrundsbilleder. Uden denne funktionalitet kunne vi ikke optimere webstedet baseret på reel brugeradfærd.
6. Database Bloat : Måske er en af de væsentligste ulemper ved Elementor, hvordan det håndterer stilarter og indhold. Elementor gemmer typografier, indlejrede strukturer og andre unødvendige tags blandet med indholdet i databasen. Dette fører til en oppustet database, der ikke bliver ryddet op, selv når Elementor er deaktiveret eller afinstalleret. Som et resultat løser skift til et nyt tema eller en ny ramme ikke problemet – disse stilarter forbliver indlejret på siderne, hvilket fortsætter med at forårsage problemer.

Med alle disse udfordringer i tankerne blev det klart, at vi havde brug for en mere robust løsning. Vi tog beslutningen om at bygge en ny, uafhængig hjemmeside uden Elementor og valgte en mere bæredygtig og fleksibel tilgang.

3) Sådan opretter du en side på det nye websted

Opbygningen af det nye websted fra bunden gav os muligheden for at etablere en ren, strømlinet proces til oprettelse af sider. I det nye system er det ligetil at oprette en side:

1. Log ind på WordPress admin panel og klik på Sider -> Tilføj ny side .
2. Du vil se standard WordPress-editoren, hvor du kan skrive eller indsætte tekst, tilføje links og uploade billeder.

Denne proces er enkel, men fleksibel. I stedet for at stole på Elementors komplicerede bloksystem, er indholdseditoren i WordPress meget renere, hvilket giver mulighed for hurtige opdateringer og nem tilpasning. Under editoren er der indstillinger for Advanced Custom Fields (ACF), som allerede er konfigureret til at opretholde ensartethed på tværs af hele webstedet.

ACF giver os mulighed for at skabe fleksible indholdssektioner med blokke som Content 1…Content 15 , hvor du nemt kan indstille titel, tekst, billede og knapetiketter for hver sektion på siden. Disse blokke skifter automatisk placeringen af billeder og tekst, hvilket sikrer, at layoutet forbliver visuelt engagerende uden at kræve manuelle justeringer.

Til billeder implementerede vi et farvetilpasningssystem, der automatisk anvender en gradient i webstedets hovedfarver. Dette sikrer, at alle billeder stemmer overens med den overordnede æstetik. For logoer eller skærmbilleder, hvor farverne skal forblive intakte, er der en "behold farver", der tilsidesætter gradienten.

Dette system forenkler indholdsstyring og bibeholder samtidig designkonsistens på tværs af alle sider.

4) Sådan opretter du et nyt indlæg

Oprettelse af indlæg på det nye websted følger den samme strømlinede proces som at oprette sider med et par vigtige forskelle:

• Indlæg har webadresser, der inkluderer ../blog/.. , der adskiller dem fra sider.
• I højre sidebjælke viser en blok automatisk de tre seneste artikler, hvilket hjælper med at holde bloggen dynamisk og engagerende.

Skabelonen til alle indlæg er placeret i filen template-parts/content/content-single.php , som håndterer strukturen og layoutet af hvert blogindlæg. Denne konsekvente skabelon giver mulighed for nemme opdateringer og sikrer, at alle indlæg overholder de samme designretningslinjer.

5) Avancerede tilpassede felter (ACF)

ACF har været en væsentlig del af vores nye hjemmesides udvikling. Det giver os mulighed for at oprette brugerdefinerede felter, der nemt kan administreres gennem WordPress admin panel. Felter som content_1 refereres til i PHP-koden, hvilket giver os mulighed for dynamisk at trække det korrekte indhold ind for hver side og hvert indlæg.

Denne fleksibilitet er afgørende for at sikre, at vi kan administrere og opdatere webstedet effektivt, mens vi stadig giver plads til tilpasning, når det er nødvendigt.

6) A/B-test

En af de vigtigste forbedringer, vi lavede med det nye websted, var implementeringen af A/B-test. A/B-test giver os mulighed for at sammenligne to versioner af webstedet for at se, hvilken der klarer sig bedre hos brugerne. Dette kan omfatte test af forskellige farver, knapformer, baggrunde eller endda layouts.

Vi implementerede denne funktionalitet ved hjælp af GET-parametre i URL'en. For eksempel kan der oprettes to identiske reklamekampagner, men med forskellige webadresser:

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

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

Når brugere klikker på disse links, gemmes parameteren i en cookie. Afhængigt af værdien af parameteren vil webstedet vise forskellige versioner af siden, såsom forskellige knapfarver eller baggrundsbilleder. Dette giver os mulighed for at indsamle værdifulde data om brugerpræferencer og adfærd.

Alle begivenheder er logget ind.csvfil, såvel som i en MySQL-database, hvilket giver os mulighed for at analysere dataene og træffe informerede beslutninger om webstedsforbedringer.

7) Filen functions.php

8) Håndtering af SEO og webstedshastighed

Et stort fokus under revisionen af hjemmesiden var at forbedre SEO og den overordnede sideydelse. Det originale websted, bygget ved hjælp af Elementor, havde problemer med langsomme indlæsningstider og suboptimale SEO-praksis på grund af oppustet kode og uoptimerede billeder.

Forbedring af SEO

For at sikre, at vores nye websted var SEO-venligt, implementerede vi adskillige bedste praksis lige fra starten:

• Semantisk HTML : Vi strukturerede omhyggeligt webstedets HTML med korrekt brug af header-tags (
  ,
  osv.), hvilket sikrer, at søgemaskiner nemt kan analysere og forstå indholdshierarkiet. Dette er især vigtigt for både SEO-rangeringer og tilgængelighed.
• Metatags og Open Graph-data : Vi udnyttede Yoast SEO- plugin til at håndtere metatitler, beskrivelser og Open Graph-data til social deling. Ved at bruge Yoast sikrede vi, at hver side og indlæg havde optimeret metadata, hvilket er afgørende for søgemaskinens synlighed og klikrater fra sociale medieplatforme.
• Skemamarkering : Ved hjælp af functions.php -filen tilføjede vi tilpasset skemamarkering til strukturerede data, hvilket forbedrede, hvordan søgemaskiner viser vores sider i søgeresultaterne. For eksempel inkluderede vi et skema for artikler, casestudier og produkter, hvilket hjalp søgemaskiner med bedre at kategorisere vores indhold.

function add_schema_markup() {
ekko'
  {
"@context": "http://schema.org",
"@type": "Organisation",
"name": "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' );


Optimering af webstedshastighed

Ydeevne er en kritisk faktor, ikke kun for brugeroplevelsen, men også for SEO-placeringer. Vi tog flere trin for at forbedre webstedets hastighed:

• Billedoptimering : Vi brugte moderne billedformater som WebP , som tilbyder bedre komprimeringshastigheder end traditionelle formater som PNG og JPEG. Alle billeder blev serveret i den passende størrelse baseret på brugerens skærmopløsning, hvilket sikrer hurtige indlæsningstider selv på mobile enheder.
• Lazy Loading : Ved at implementere Lazy Loading for billeder sikrede vi, at kun de billeder, der er synlige på brugerens skærm, blev indlæst i starten. Yderligere billeder vil blive indlæst, efterhånden som brugeren ruller, hvilket reducerer den indledende sideindlæsningstid.
• Caching og minifikation : Vi brugte WP Rocket til caching, minifikation og komprimering af HTML-, CSS- og JavaScript-filer. WP Rocket hjalp os med at opnå hurtigere indlæsningstider ved at reducere den samlede filstørrelse og levere statiske cachelagrede versioner af sider til gentagne besøgende.

9) Databaseoptimering og oprydning

Den gamle hjemmeside havde akkumuleret en betydelig mængde "junk"-data på grund af Elementors oppustede og ineffektive databasestruktur. For at sikre, at det nye websted kørte problemfrit, udførte vi en grundig databaseoprydning og optimering.

• Fjernelse af gamle Elementor-data

Som nævnt tidligere, selv efter deaktivering af Elementor, var dens stilarter og indstillinger stadig indlejret i databasen. Vi brugte tilpassede forespørgsler til at slette disse overskydende data og rydde op i databasen. Derudover fjernede vi alle ubrugte mediefiler, bogførte revisioner og udløbne transienter, der havde akkumuleret over tid.

• Databaseindeksering

Vi optimerede også databasen ved at tilføje indekser til hyppigt forespurgte kolonner, hvilket sikrede, at databaseforespørgsler var hurtigere og mere effektive. For eksempel at tilføje et indeks tilpost_datekolonne fremskyndede forespørgsler relateret til seneste indlæg, hvilket forbedrede ydeevnen af vores blogsider.

Konklusion

Beslutningen om at bygge en ny hjemmeside fra bunden var drevet af begrænsningerne og ineffektiviteten på det gamle websted. Blot at skifte tema var ikke en levedygtig mulighed på grund af designuoverensstemmelser, oppustede stilarter og ydeevneproblemer forårsaget af Elementor. Ved at oprette et nyt websted med tilpasset udvikling og avancerede brugerdefinerede felter, opnåede vi en mere effektiv, sammenhængende og professionel hjemmeside, der forbedrer brugeroplevelsen og samtidig muliggør strømlinede opdateringer og A/B-testfunktionalitet. Dette nye websted giver et solidt grundlag for fremtidig vækst og forbedringer.