Lab: Hardware Validation & Component Test
WordPress leren
Deelvraag: Werkt Three.js met WordPress?
Het was voor mij belangrijk om WordPress te leren omdat de website Clever-Gamging, waarvoor ik de configurator moet gaan maken, gehost wordt door WordPress. Ook was het een van mijn leerdoelen van wat ik zelf graag wilde leren omdat ik denk dat hier ook veel mogelijkheden liggen. Mijn stage maakt bijna alle websites in WordPress, het voordeel hiervan is dat klanten zelf ook dingen eventueel makkelijk zouden kunnen aanpassen.
WordPress opzetten
Om de bovenstaande deelvraag te beantwoorden ben ik een aantal dagen bezig geweest met het testen hiervan. Hiervoor ben ik begonnen met het opzetten van een testomgeving. Dylan de Jonge (mede eigenaar) heeft mij en Jay (andere stagiair) daarom een spoedcursus WordPress gegeven.
In deze spoedcursus heeft Dylan ons eerst uitgelegd:
Wat is WordPress?
Een Open Source Conten Mangement System.
Hoe werkt WordPress?
Doormiddel van plug-ins en thema’s.
Hoe zet je WordPress op?
Via XAMPP lokaal of online op een server vaak met een Installatie knop.
Wat kun je doen met WordPress?
Met WordPress kun je makkelijk je eigen website/ blog of webshop opzetten. WordPress maakt gebruik van thema’s en plug-ins waardoor jij nog makkelijker je eigen website kunt aanpassen.
Wat zijn de voordelen van WordPress?
- Het is een CMS.
- Het maakt gebruik van thema’s en plug-ins.
- Klanten kunnen er ook makkelijker in werken.
- WordPress is gratis (thema’s kosten vaak geld)
- Veel templates
- SEO vriendelijk (Yoast)
- Vaak veilig
Nadat we wat basiskennis hadden over WordPress zijn we zelf een WordPress site samen gaan opzetten. Dit deden we op een online server en daarom konden we het makkelijk installeren. We hadden ook de lokale versie geprobeerd. Dylan heeft ook uitgelegd hoe dat WordPress er in de back-end uitzag met bijvoorbeeld de database. Hierin liet hij ons even alle kolommen en tabellen zien in PHPMyAdmin, voor mij gaf dit een goede inkijk omdat ik al een beetje een basiskennis hierin heb. Zo worden gebruikers ook opgeslagen in een aparte tabel en worden alle blog Posts weer in een andere tabel opgeslagen, dit is me later VUL IN weer goed van pas gekomen.
Thema’s & plug-ins
Je kunt standaard templates gebruiken om je website te maken, maar om je site een stukje unieker te maken kun je gebruik maken van Thema’s. Hierin heb je nog Standaard WordPress (gratis) thema’s:
Maar je hebt ook betaalde Thema’s waardoor het nog nét iets unieker wordt, zoals:
Plug-ins zijn handige aanvullingen voor op je website, vaak gratis maar je hebt ook betaalde. Yoast is bijvoorbeeld een gratis plug-in waarmee je de SEO score van je website kunt verbeteren. Zelf wilde ik ook graag meer van SEO Vul IN leren, daarom heb ik regelmatig met Dylan gespard over bepaalde SEO technieken. SEO is een belangrijk iets als je wilt dat je website makkelijk vindbaar is voor de juiste doelgroep, erg belangrijk om meer bezoekers en –> conversie te krijgen. Voor de configurator heb ik uiteindelijk ook besloten om een plug-in te kiezen.
Opdrachten om WordPress & Thema’s te leren
Ik heb geleerd om in ze alle 3 de thema’s te werken. Zelf is de website van Clever-Gaming gemaakt in Divi, hier heb ik daarom ook extra veel mee gewerkt. Er zijn een aantal opdrachten die ik heb gemaakt.
Wat is Divi?
Divi is een Viual Page Builder waarmee je met voorgeprogrammeerde componenten makkelijk een website in elkaar kunt zetten zonder enige HTML / PHP kennis. Je kunt CSS gebruiken om iets aan te passen of je kunt zelf ook nog je eigen code-blokken toevoegen.
De reden dat Divi de ‘main-theme’ is van mijn stage is omdat het een eenmalige aankoop is (€250,- en je het dan voor een onbeperkt aantal websites levenslang kunt gebruiken, in plaats van dat je aan een abbonoment van €400,- per jaar zit.
Met Divi maak je gebruik van Sections, Rows en Modules. Waarbij Sections de sectie is waarin je iets gaat maken je kunt hierbij kiezen tussen een Regular (normale breedte) en Fullwidth, voor bijvoorbeeld een banner. Bij Row geef je aan welke verhouding je in je rij wilt hebben, meestal gebruik ik de linksboven row, zo is dit blog bericht ook is opgedeeld. Bij Module geef je aan wat je erin wilt gaan zetten, bijvoorbeeld een tekst of een knop of een van de ander 30+ opties.
Dewebsitebouwers (Divi)
Om te beginnen heb ik de website van dewebsitebouwers.com nagebouwd. Dit was voor mij de aller eerste keer en dit hielp mij om in de de materie te komen.
De website heb ik helaas niet helemaal kunnen afkrijgen, wel bijna, maar het portfolio was te groot en het was zonde om hier té veel tijd in te steken aangezien het een oefenopdracht was. Neem gerust een kijkje op mijn ‘namaak’ website, ik ben er zelf best trots op. Een van mijn zwakke punten was dat ik erg perfectionistisch ben, dit zorgt vaak voor vertraging.
In de inderstaande bijlage heb ik een completer werkproces als bijlage zitten.
BrownieS & DownieS (Divi)
Ook kreeg ik de eer om de website van BrownieS & DownieS Uden te maken. Dit was mijn tweede opdracht, maar wel een officiële opdracht. Het enigste nadeel van deze opdracht was wel dat er een tijdslimiet op zat want de website moest zo snel mogelijk live zijn, ik ben 1 week bezig geweest met het maken van de website. De website staat nu live op https://browniesanddowniesuden.nl/
Foto: homepagina website BrownieS & DownieS
Deze opdracht heeft me ook goed geholpen om beter om te gaan met Divi, zo heb ik nu bijvoorbeeld meer gebruik gemaakt van Globale elementen, wat veel tijd scheelt. Maar tegelijkertijd hing ik weer even vast op het menu, hiervoor heb veel eigen CSS & javascript moeten toevoegen. Ik had hier ook positieve feedback op gekregen, er waren soms een paar kleine foutjes die ik heb gemaakt, deze staan in de onderstaande bijlage.
In de onderstaande bijlage staat het gehele proces en de feedback die ik erop heb gekregen.
Portfolio (Divi)
Ook heb ik mijn portfolio site ( https://webfresh.coencouwenberg.nl ) in Divi gemaakt. Ik voel me momenteel het meest vertrouwd met Divi. Ook kreeg ik van Dylan en Patrick een licentie voor Divi, dus dat scheelt ook weer wat.
Mijn portfolio site is nog niet helemaal perfect maar ik heb deze wel zo goed mogelijk geprobeerd te maken. Hier heb ik alleen geen uitgebreide log van omdat ik vond dat ik mijn tijd beter kon besteden aan de content ervan dan het ontwikkelen van mijn portfolio site. Elke site wordt wel weer een beetje bij beetje beter.
Foto: portfolio home pagina
Wat is Oxygen?
Oxygen is ook een Visual site builder, hiermee kun je een gehele site maken en je kunt alles individueel aanpassen. Op stage willen ze steeds meer gebruik maken van Oxygen omdat je hiermee net iets meer eigen input kunt brengen aan de website.
Oxygen is iets moeilijker om te leren maar als je het eenmaal doorhebt pik je nieuwe opdrachten ook steeds sneller op. Oxygen geeft ook meer vrijheid maar is complexer.
Het grote voordeel aan Oxygen is dat het véél sneller is dan de meeste andere thema’s omdat het overbodige elementen weg laat, dit maakt de code ook veel schooner.
Sameninzorg (Oxygen)
Ik heb één website gemaakt in Oxygen, namelijk de website voor een zorgketen genaamd “SamenInZorg”. De website is hier te vinden: https://dev.clever-hosting.eu/sameninzorg/ . Ik merkte wel dat ik steeds handiger werd in het oppakken van nieuwe page-builders / website builders, allemaal hebben ze ook ongeveer hetzelfde doel en het princiepe is hetzelfde. Vaak is het de eerste 2 dagen wel even zoeken waar alles zit, maar je leert het wel sneller.
Foto: Homepagina SamenInZorg
Wat ik vooral heb geleerd aan deze opdracht was hoe het is om met klanten te werken. De vrouw die ons de content voor de website aanleverde had zelf weinig website kennis, en dat merkte je ook goed in de manier van aanleveren van content. Zo kregen we maar liefst 30 mailtjes met delen content, foto’s werden apart verstuurd in nieuwe mails en aparte bijlages. Ik denk dat het me alleen al 2 dagen heeft gekost om alle content op een rijtje te zetten wat voor ons duidelijk was. Ze wilde de website graag zo snel mogelijk af hebben, dus stuurde ze steeds alles wat ze had door. Uiteindelijk werd het daardoor best wel een puinhoop. Natuurlijk was het voor haar duidelijk, maar ik ben weer een leek in de materie die zij weer aanlevert over hersenschade etc… dus ik wist vaak ook niet meer wat waarbij hoorde als ze iets nieuws aanleverde, hier is ook best veel mailconversatie overheen gegaan. Eindstand hadden we beter 2 weken kunnen wachten en alles bundelen tot één geheel doormiddel van One drive of iets (ook handiger als je later iets wilt toevoegen of wijzigen). Wel probeerde de vrouw zo goed mogelijk mee te denken, maar je kon merken dat ze dit nog nooit had gedaan.
Ook leverde ze heel veel content aan waardoor de pagina’s ontzettend lang werden, vaak leek het meer op een boek, dus hier moest ik iets op bedenken, maar het mocht niet te fel of druk zijn vanwege de doelgroep. Daarom dat ik dingen heb opgedeeld in secties en sommige dingen een lichteblauw achtergrondkleur gaf.
Wat ik verder fijn vond aan Oxygen was dat het ontzettend snel is. Ook werkt het met Flexbox én Grid. Ik kan beide een beetje dus dat was wel ideaal
In de onderstaande bijlage vindt je mijn gehele werkproces.
Wat is Elementor?
Elementor is een visual page-builder waarme je net als met Divi en Oxygen makkelijk je website in elkaar kunt zetten. Elementor is wellicht de bekendste. Ik zag vaak ook dat heel veel plug-ins vaak een speciale versie voor Elementor hadden. Overigens vond ik zelf Elementor niet de fijnste, maar hier heb ik dan ook het minste mee gewerkt.
DitPracht Landingspagina (Elementor)
Mij werd gevraagd om voor een extern bedrijf (DitPracht) een landingspagina te maken. De pagina was bedoeld voor een actie die ze hadden. De reden dat wij (een extern bedrijf) deze opdracht kregen was omdat haar eigen webdeveloper niet het design kon maken die ze wilde.
Foto: Landingspagina DitPracht (uitgezoomd op 67%)
Deze opdracht moest ook zo snel mogelijk af zijn. Maar eigenlijk was ik het langst bezig met het verwijderen van de standaard header en footer die bij de website zat. Ik kende Elementor en haar gehele website niet en ik had schijnbaar ook niet de juiste rechten om zoiets aan te kunnen passen, uiteindelijk viel het Dylan op dat deze opties er met onze rechten simpelweg niet bij stonden.
Ik heb het design nagemaakt zoals zij het graag wilde en zoals ze het had aangeleverd. Het was alleen even moeilijk om te bepalen hoe dat dit er responsive uit zou komen te zien (zoals het vrouwtje rechtsboven).
In de onderstaande bijlage heb ik mijn verdere proces staan.
Three.js samen met WordPress
Foto: voorbeeld Three.js om overgang aan te duiden.
Nadat ik WordPress een beetje onder de knie had en nu ongeveer weet hoe WordPress in elkaar steekt ben ik gaan kijken of het ook samen kon werken met Three.js.
Het bleek dat Three.js een minder goed optie was omdat:
- De tientallen skins moeten vanuit een paar foto’s worden omgezet naar een kloppende 3D design.
- Er zou voor alleen het designen van de skins dan een aparte 3D designer aangenomen moeten worden.
- Het designen zou de het te duur maken
- De leverancier wilde hier ook niet aan meewerken
- Three.js dient dan gekoppeld te worden aan WooCommerce
- Plaatjes konden we wel gemakkelijk van de site afhalen
Maar ondanks dat heb ik alsnog de deelvragen geprobeerd op te lossen:
Werkt Three.js in WordPress?
Het antwoord was ‘ja, uiteindelijk wel‘, maar het was niet praktisch. Dit kwam mede ook omdat Three.js dan de gegevevens moest koppelen aan WooCommerce, want WooCommerce is de Shop / betalingssysteem dan Clever-gaming.nl gebruikt. En samen met de bovenstaande punten leek het mij ook beter om gebruik te maken van de afbeeldingen die we wel hadden en een configurator met afbeeldingen te maken. Uiteindelijk hadden we wel besloten dat ik hierin een Minimal Viable Product zou maken die ik zou kunnen gebruiken als advies rapport voor in de toekomst. In de toekomst zouden mensen met Three.js wellicht hun eigen controller met AR/VR in elkaar kunnen knutselen.
Plug-ins
Ik heb ook een aantal plug-ins geprobeert te gebruiken om Three.js in te kunnen laden maar deze plug-ins konden niet meer dan het inladen van een Object, dit was dan niet interactief.
Enkele plug-ins waren: ThreePress en Vrm 360 3D Model Viewer
Host opzetten
Het heeft even geduurd voordat ik WordPress werkend had omdat de installatie een aantal keren verkeerd ging. Ik mocht daarom de WordPress site van mijn oom gebruiken, hier mocht ik een extra subdomein op maken, maar uiteindelijk bleek dat hij maar 1 Database kon hebben. Mijn eigen server kon na veel trials en errors wel een WordPress site hosten, schijnbaar lag het aan de server settings die ik reeg van stage (want ik kreeg van Stage een host voor mijn eigen domein coencouwenberg.nl). Uiteindelijk kon ik beginnen met testen.
Three.js werkend
Na wat trial & errors was het me uiteindelijk toxh nog gelukt om Three.js werkend te krijgen op een WordPress pagina. Het was me uiteindelijk gelukt omdat ik via de back-end in de PHPMyAdmin Database de code rechtstreeks erin had gezet. Dit werkte niet op een andere manier omdat alles geëscaped werd. Het interactief maken van Three.js werkte alleen niet omdat het werkte via een blog Post en ik geen andere bestanden kon aanroepen zoals OrbitControls.
Foto: Three.js lijn werkend
WooCommerce
Nadat ik de Host werkend had ben ik WooCommerce gaan toevoegen aan mijn site. Dit wilde ik graag testen omdat een van mijn deelvragen was:
Hoe geef ik Values mee aan WooCommerce
Blijkbaar had ik hiervoor een child-theme nodig. Het is belangrijk dat wanneer je dingen in een Thema gaat bewerken je gebruik maakt van een Child Theme. In dit artikel wordt verteld hoe je het op de juiste manier moet doen. (logboek 18-10-2021) Hiermee kun je aanpassingen maken in een plugthema zonder dat het wordt overschreven.
Conclusie
Ik heb veel geleerd van WordPress, ik mocht een aantal sites maken waardoor ik het ook in de praktijk heb kunnen ervaren. Dit was ook iets wat ik graag wilde leren en leuk vond om te doen.
Uiteindelijk heb ik Three.js nog wel werkend weten te krijgen in WordPress, maar dit was geen efficiënte manier, ook omdat ik het niet met WooCommerce werkend kreeg. Dit maakte ook niet heel veel meer uit want ik had al gekozen dat ik gebruik ging maken van een plug-in om afbeeldingen over elkaar heen te positioneren onder andere omdat we hier voor de content wel konden aankomen.
Als M.V.P. maak ik een controller die zou kunnen worden gebruikt in het adviesrapport voor in de toekomst.
In de onderstaande bijlage een uitgebreider proces over Three.js in WordPress: