Casestudy: Een HTML-website verplaatsen naar WordPress

Bron

HTML naar WordPress Uitgelicht

WIWA is een Duits bedrijf en toonaangevende fabrikant van airless spuitapparatuur, vloeistofbehandeling, materiaalextrusie en injectiesystemen. WIWA USA is een Noord-Amerikaanse Master WIWA-distributeur die actief is in de Verenigde Staten, Canada en Mexico.

Ze zijn nu pas een paar jaar klant en hun website is in de loop der jaren behoorlijk veranderd.

In dit artikel zal ik de vele veranderingen bespreken die gepaard gaan met het verplaatsen van hun site van statische HTML naar WordPress – een dynamisch interactief hulpmiddel dat kan worden gebruikt door hun distributeurs en mensen die geïnteresseerd zijn in WIWA-producten in Noord-Amerika.

HTML verplaatsen naar WordPress Intro Het verplaatsen van een HTML-site naar WordPress is behoorlijk ingewikkeld, maar we zullen het proces van begin tot eind bespreken. Het herontwerp bekijken

Toen mij de kans werd geboden om aan de WIWA-website te werken, waren ze vooral geïnteresseerd in een herontwerp om de uitstraling van de website in het toen huidige tijdperk van webdesign te brengen. Omdat het een statische HTML-website was, zou deze idealiter worden geconverteerd naar een CMS-platform.

Ik had het gevoel dat WordPress , dat voorheen een zeer gerespecteerd blogplatform was, zichzelf had bewezen als een geweldig volledig CMS. HTML verplaatsen naar WordPress Hub Aanmelden

Dat gezegd hebbende, betaalde WIWA USA nogal wat te veel voor hun hosting- en ontwikkelingsdiensten. De website is verplaatst naar een GoDaddy-hostingplan, wat echt heeft geholpen om de zaken op hun website te versnellen. Het domein van de website werd destijds ook verplaatst naar GoDaddy-servers waar het zich tot op de dag van vandaag bevindt.

Enige ervaring met SEO en website-optimalisatie in het algemeen gaf het inzicht dat nodig was om een statische HTML-site om te zetten naar een dynamisch CMS-platform – in dit geval WordPress. Het was niet voldoende om alleen de oude pagina's naar nieuw gemaakte pagina's op WordPress te kopiëren, aangezien deze site al was geïndexeerd en verkeer kreeg.

Niet alleen moest elke pagina in WordPress worden gemaakt, maar elk van de oude pagina's had een permanente 301-omleiding naar hun WordPress-versies nodig. Het was even puzzelen, maar het is gelukt en de WIWA USA website was en is klaar voor toekomstige webontwikkeling.

Een nieuwe look & meer functionaliteit

Nadat de website is geconverteerd van HTML naar WordPress, zijn een heleboel krachtige functies ontgrendeld. We hebben niet alleen het ontwerp geüpdatet, maar ook krachtige functionaliteit toegevoegd. Een van de eerste taken op de lijst na de eerste conversie was taalvertaling. Omdat WIWA een multinational is, hadden ze een manier nodig waarop bezoekers de Engelse versie van de site gemakkelijk in hun eigen taal konden vertalen.

HTML naar WordPress Archief Een bezoek aan Wayback Machine laat zien dat het verplaatsen van de site van HTML naar WordPress de juiste zet was.

Ik kan hier niet echt met de eer strijken, omdat het een eenvoudige plug-in was en een die ze tot op de dag van vandaag gebruiken. Ik hoefde het alleen maar in te stellen, maar het was een van de eerste grote veranderingen die moesten worden doorgevoerd. Het was letterlijk ingesteld en vergeten.

Het hebben van kant-en-klare plug-ins die in een opwelling beschikbaar zijn om de functionaliteit van een website te verbeteren, is een van de redenen waarom ik voor WordPress heb gekozen, en ik denk dat de vertaalplug-in een goede illustratie is in de praktijk.

Er waren onderweg andere uitdagingen, sommige vanaf het begin en andere jaren later. Ik zal de behoeften en oplossingen bespreken van enkele van de meest opvallende functies die deze ooit statische HTML-site hebben getransformeerd in een krachtig product- en ondersteuningsportaal voor WIWA-distributeurs in Noord-Amerika.

Digitale productcatalogus

WooCommerce was een belangrijke functie die werd gebruikt om statische productpagina's om te zetten in een volledige digitale catalogus. Hoewel ze hun producten vanuit een catalogus kunnen gaan verkopen, geven ze er op dit moment de voorkeur aan om producten gewoon te presenteren.

Het maken van een digitale catalogus was vrij eenvoudig. Als we gewoon de prijs weglaten, is er niets toe te voegen aan de winkelwagen, dus er wordt geen knop voor die functie gemaakt. Toch zijn er andere functies van WooCommerce beschikbaar, zoals zoeken naar producten, filters, categorieën, tags, attributen en zo ongeveer alles wat u normaal gesproken nodig heeft voor een online winkel.

Er is gewoon geen echte verkoop.

Deze methode is ook enigszins toekomstbestendig, want als ze besluiten om te beginnen met verkopen, is alles al aanwezig, behalve de prijs en een paar verzendgegevens.

HTML naar WordPress-catalogus Het inbellen in de catalogus was een belangrijk onderdeel van het verplaatsen van de site van HTML naar WordPress.

Zoeken is een belangrijke functie voor de WIWA USA-website. Al vroeg werd een onderdelenzoekopdracht voor technische ondersteuning geïmplementeerd, gevolgd door een distributeurkaart met zoekfunctie. Na een recenter herontwerp (de tweede sinds ik eraan begon te werken) hebben we hun trainingsvideo's, brochures, handleidingen en productvideo's omgezet in een doorzoekbaar formaat.

Hoe en waarom we dat hebben gedaan, leg ik verderop in dit artikel nader uit.

Geïntegreerd zoeken naar onderdelen

Onderdelen zoeken was een andere belangrijke functie die moest worden geïmplementeerd. Dit kwam met een unieke reeks uitdagingen, en om eerlijk te zijn, het kostte een paar pogingen om deze goed te krijgen. Een probleem is dat een onderdeelnummer moet worden gekoppeld aan een PDF-diagram.

Er waren honderden PDF-bestanden die moesten worden geüpload naar het hostingaccount en vervolgens doorzoekbaar moesten worden gemaakt. Een statische pagina met alle bestanden zou hier gewoon niet werken. Het idee dat iemand door een lijst van honderden bestanden zou bladeren, was gewoon onpraktisch.

Zoeken was de enige oplossing.

Mijn eerste gedachte was om een plug-in te gebruiken. Ik heb er verschillende geprobeerd, maar elk had zijn eigen opzegbare tekortkomingen. Zoals vaak gebeurt bij webontwikkeling wanneer een oplossing nog niet bestaat, is het aan jou om er een te maken.

Dus in plaats van een plug-in te gebruiken en te configureren, moest ik mijn mouwen opstropen, wat onderzoek doen en beginnen met scripten.

Even terzijde, ik denk niet dat de meeste webontwikkelaars gewoon weten hoe ze een bepaald script uit hun hoofd kunnen schrijven om een probleem op te lossen, tenzij het 'hallo wereld' is of iets van dien aard.

Ik denk dat de belangrijkste kracht van een goede webontwikkelaar niet noodzakelijk is dat je alles meteen weet. Het is weten hoe je de vraag moet stellen en hoe je het antwoord moet implementeren.

Nu kan een programmeur misschien snel een script tot stand brengen, want dat is het grootste deel van wat ze doen. Webontwikkelaars daarentegen zijn een soort manusje van alles. We doen ontwerp, codering/scripting, databases en meer.

Er zijn maar weinig mensen die al deze dingen gewoon "weten".

Het punt is dit: laat je niet tegenhouden door niets te weten. Onze taak als webontwikkelaars is simpelweg om de juiste oplossing te ontdekken en te implementeren. We krijgen het misschien niet altijd goed bij de eerste poging, maar doorzettingsvermogen is hoe we evolueren om geweldig te worden in wat we doen in elk aspect van het leven.

Waar ik in dit geval op uitkwam, was een aangepaste zoekopdracht die gericht was op het doorzoeken van PDF-bestanden die op de server werden gehost. Het was een uitdaging, omdat WordPress standaard niet buiten de database zoekt.

Omdat de pdf-bestanden eenvoudig werden geüpload en niet aan pagina's of berichten werden toegevoegd, werd er niet naar verwezen in de database. Om het probleem nog erger te maken, toen ik eenmaal de aangepaste zoekopdracht had laten werken, werden de resultaten niet weergegeven in het WordPress-sjabloonsysteem.

Dit betekende dat ik een ander script moest maken dat het WordPress-sjabloonsysteem voor de resultatenpagina noemde.

Eenmaal klaar heeft dit een aantal jaren goed gewerkt. Uiteindelijk ontwikkelde iemand een plug-in waarmee bestanden konden worden geüpload en vervolgens door de database konden worden geïndexeerd – en zo werkt het zoeken naar onderdelen tegenwoordig. Hierdoor konden onderdelen nu ook worden doorzocht met behulp van de hoofdzoekfunctie van WordPress met slechts een paar kleine aanpassingen.

HTML naar WordPress Zoeken Toen we de site van HTML naar WordPress verhuisden, was zoeken een functie die behouden moest blijven. De distributiekaart verplaatsen van HTML naar WordPress

Omdat WIWA USA een hoofddistributeur is, is het logisch dat ze de andere distributeurs op hun website vermelden. WIWA USA staat momenteel op nummer één in een Google-zoekopdracht naar de merknaam 'WIWA', zelfs boven hun moederbedrijf.

Tenminste voor zoekopdrachten in de VS. Dit is belangrijk om te vermelden, omdat de distributeurkaart het voor aannemers mogelijk maakt om de dichtstbijzijnde WIWA-apparatuurdistributeur te vinden.

Toen ik onderzoek deed naar de beste manier om deze functie te implementeren, ontdekte ik al snel dat er geen plug-ins bestonden die specifiek voor dit soort implementatie waren. Ik vond echter een plug-in die het meeste zou doen wat we nodig hadden. Met slechts een paar kleine oplossingen kon ik de wil van deze plug-in buigen om mijn biedingen uit te voeren.

Om eerlijk te zijn, de gebruikte plug-in was een betaalde plug-in en de ontwikkelaar heeft sindsdien de functionaliteit toegevoegd waardoor dit "out of the box" zou werken.

Hoewel deze plug-in een paar jaar aan de behoefte voldeed, waren de lijsten niet doorzoekbaar vanuit de hoofdzoekopdracht van WordPress. Een persoon moest daadwerkelijk op de link naar de distributeurkaart klikken en verschillende filters gebruiken om de dichtstbijzijnde distributeur te vinden.

Dit was goed, maar voor de volledigheid is de functie bijgewerkt met een andere plug-in – een die in staat is om met een klik op de knop iemands locatie op te halen en een kaart met markeringen en hun vermeldingen binnen een bepaalde straal weer te geven.

Dit werd bereikt door aangepaste berichttypen te maken en vervolgens de post te geotaggen.

Door voor elke distributeur een bericht te maken, kregen ze elk hun eigen pagina in plaats van alleen op een lijst te worden geplaatst. Omdat het aangepaste berichttypen zijn, betekent dit ook dat ze kunnen worden opgenomen in de belangrijkste zoekfuncties van WordPress. Als een aannemer de naam van een distributeur kent, kunnen ze de naam gewoon in de hoofdzoekopdracht typen om die vermelding te vinden.

De distributeurkaart is zo'n integraal onderdeel van de website-ervaring van WIWA USA dat het zoekformulier zich op de startpagina bevindt. Het biedt de mogelijkheid om automatisch de locatie te detecteren, binnen een straal te zoeken en de resultaten te filteren op alleen de Verenigde Staten, Canada of Mexico.

HTML naar WordPress Distributeurkaart De distributeurkaart was een sleutelfunctie toen we de site van HTML naar WordPress verhuisden.Individuele berichten voor eenmalige functionaliteit

Trainingsvideo's, brochures, handleidingen en productvideo's hadden allemaal een gemeenschappelijk kenmerk. Gedurende een aantal jaren had elk type documentatie zijn eigen pagina die bestond uit een raster van statische inhoud. Ze waren in feite opgezet zoals de originele HTML-pagina's met enkele ontwerpwijzigingen.

Hoewel ze er mooier uitzagen, waren er een paar tekortkomingen.

In de beginjaren werkte dit prima, maar naarmate er in de loop van de tijd meer inhoud werd toegevoegd, begonnen de pagina's langzamer te worden. Hoewel de pagina's zelf konden worden gevonden via de WordPress-zoekopdracht, konden de afzonderlijke items dat niet zijn.

Het werd duidelijk dat het een groot voordeel zou zijn om elk item afzonderlijk doorzoekbaar te maken. Er kan bijvoorbeeld een enkel product zijn met een productcatalogus, een brochure, een paar handleidingen en verschillende trainingsvideo's.

Zou het niet mooi zijn als een gebruiker gewoon de productnaam of het model zou kunnen typen en alle beschikbare inhoud voor dat product te zien zou krijgen?

Verdorie Skippy, het zou!

Dit zou niet alleen al die inhoud gemakkelijker te vinden maken, maar ook de archiefpagina's versnellen.

HTML naar WordPress-berichten Vergeet de functionaliteit van berichten niet wanneer u een site van HTML naar WordPress verplaatst.

Een van de beste voorbeelden hiervan zijn de productvideo's die daadwerkelijk op YouTube worden gehost. Zonder in een hoop technische details te komen, moeten videofragmenten / ingesloten video's afzonderlijk worden geladen, wat niet zo erg is als het maar een enkele video is.

Voeg meerdere video's toe op één pagina en het kan een beetje harig worden met laadtijden.

De oplossing was om voor elke video afzonderlijke berichten te maken. Sommige WordPress-thema's bieden postformaten en in dit geval zou een videopost een miniatuur voor de video in de postarchieven weergeven in plaats van een videofragment.

Dit zorgt ervoor dat de postarchieven en indexen veel sneller worden geladen, omdat we nu werken met afbeeldingen in de vorm van miniaturen in plaats van video-insluitingen.

HTML naar WordPress-video's Toen we de site van HTML naar WordPress verhuisden, leverde het gebruik van berichten veel snellere laadtijden op.

Evenzo hadden de productbrochures en handleidingen, die allemaal in PDF-formaat zijn, een raster met afbeeldingen uit de PDF-bestanden, allemaal gerangschikt in een raster en allemaal op één pagina. Door elk van deze naar hun eigen bericht te converteren, hebben we nu te maken met miniaturen voor de archiefpagina's in plaats van afbeeldingen van normale grootte – wat helpt bij laadtijden.

Er is ook het extra voordeel van het gebruik van categorieën die allemaal hun eigen individuele archieven hebben in plaats van alles op één pagina te proppen. Nogmaals, helpen met laadtijden en algehele organisatie.

Afsluitende gedachten over het verplaatsen van een site van HTML naar WordPress

Deze website had een paar andere technische uitdagingen, maar wat ik hier heb benadrukt, is het brood en de boter van de operatie. Van veel van de ideeën die WIWA bedacht, wist ik niet zeker of ze echt mogelijk zouden zijn.

Althans voor mij, als eenmanszaak.

Wat ik heb geleerd is dat "laat me eens kijken" je van de haak zal slaan als je onzeker bent. Je kunt de faalangst je er niet van weerhouden om het in deze branche te proberen. In 2021 hebben beginnende ontwikkelaars het redelijk goed in vergelijking met toen ik begon.

Er is tegenwoordig gewoon een overweldigende hoeveelheid informatie en bronnen vrij beschikbaar voor webontwikkelaars.

Om eerlijk te zijn haatte ik WordPress in de vroege stadia van hun transformatie naar een CMS. Het stelde iedereen die een e-mail kon schrijven in staat een website te bouwen, en dat was mijn brood en boter. Ik heb al die tijd besteed aan het leren bouwen van websites met een teksteditor, FTP-programma, HTML, CSS, javascript en PHP.

Wat ik ontdekte nadat ik met WordPress aan boord kwam, is dat het kennen van deze dingen me een betere ontwikkelaar heeft gemaakt.

Het heeft me geholpen om van deze statische website iets te maken wat ik denk, en ik hoop dat WIWA het echt geweldig vindt. Een WordPress-site met één klik kunnen installeren is één ding. In staat zijn om WordPress, plug-ins, stijlen, thema's en functies te manipuleren is een heel ander beest.

Ja, iedereen kan het, maar met wat doorzettingsvermogen en vindingrijkheid kun je van een goede website een geweldige website maken.

Het bericht Casestudy: Een HTML-website verplaatsen naar WordPress verscheen eerst op GoDaddy Blog .