18 december 2020
Bijgewerkt: 15 januari 2021

Oxygen versus het gebruik van WordPress themes

Bij het bouwen van een WordPress heb je altijd een theme nodig, maar dat hoeft nog niet te betekenen dat je aan de slag gaat met het naar je hand zetten van een bestaand stock theme waarvoor er een ruimte keuze is. Er is namelijk een alternatief voor het gebruik van zo’n bestaand theme met als grote voordeel dat je minder afhankelijk bent van het theme dat je gekozen hebt. Dat alternatief heeft Oxygen en daarmee kun je namelijk zelf je eigen theme bouwen, de basis ervan bouw je zonder kennis van code, moet het allemaal wat geavanceerder er uit zien en werken dat zul je aanvullend CSS code moeten toevoegen maar dat werkt net een stukje eenvoudiger dan de code invoeren in een leeg veld, Oxygen heeft namelijk hiervoor een interface waarbij je voor alle properties een veld hebt waarin je de gewenste waarden kunt invullen.

Waarom geen thema gebruiken?

De website die je bouwt met Oxygen zal veel flexibeler zijn, wat niet alleen bij de bouw goed uitkomt maar ook een groot voordeel zal zijn bij toekomstige aanpassingen/uitbreidingen.

Lichter, dus laadt sneller

Een andere reden om geen premium themes te gebruiken noem ik eigenlijk ook al elders op mijn site; die themes zijn niet geprogrammeerd met 1 bepaalde website als doel, ze zijn volgestopt met allerlei handige functies zodat er allerlei websites mee gemaakt kunnen worden. Hierdoor kan er weliswaar heel snel een website gebouwd worden maar met gevolg dat zo'n 80-90% van de code niet gebruikt wordt maar wel moet worden ingeladen. Daardoor is de laadtijd erg lang en vergt de website veel onderhoud, en als je dat niet doet wordt je website kwetsbaar voor aanvallen of kunnen bepaalde functies ophouden te werken na verloop van tijd.

Flexibeler

Als je klant toe is aan een nieuw theme, dan is het een stuk eenvoudiger en minder tijdrovend een nieuw theme te ontwikkelen in Oxygen en die vervolgens te gaan gebruiken met de bestaande content waardoor je deze content gewoon zou kunnen laten staan en niet hoeft over te hevelen naar een site waar een nieuw premium theme op geïnstalleerd staat.

Wat is oxygen?

Oxygen is een plugin die gebruikt wordt voor het bouwen van WordPress websites. Kennis van HTML en CSS kun je gebruiken in de visuele editor. Met Oxygen bouw je een theme(s) en pagina’s. Dat doe je m.b.v een almaar uitdijende verzameling Oxygen elementen. In feite kun je alles bouwen met Oxygen, en ook optimaliseren voor verschillende beeldschermen.

Hoeveel wordt Oxygen gebruikt

Ik tel meer dan 18.000 gebruikers in hun (besloten) facebook groep, in die groep zitten veelal ontwikkelaar die kennis delen over (het gebruik van) Oxygen. Het daadwerkelijk aantal gebruikers zal nog wat hoger liggen. Oxygen wint snel aan populariteit.
Voor mij is Oxygen de enige tool geworden waarmee ik websites bouw.

Kosten Oxygen licentie

Webdevelopers kunnen een lifetime licentie a $249,- aanschaffen, die kosten zijn wellicht een drempel voor website bouwers die gewend zijn $59,- dollar te betalen voor een premium theme. Een lifetime licentie kunnen ze echter voor al hun klanten gebruiken, een theme wordt vaak per klant aangeschaft en is dus eigenlijk onder de streep duurder.

Oxygen theme(s) ontwikkelen

Stel dat je hebt gekozen voor Oxygen, dan staat je het bouwen van een maatwerk theme te wachten. Als je dit idee te overrompelend vindt zou je ook een bestaand Oxygen theme als uitgangspunt kunnen gebruiken. Direct na de installatie van Oxygen kies je dan uit een van de ca. 20  ‘design sets’, een design set is in feite een theme. Je begint meestal bovenin te bouwen. Doorgaans zet je daar het logo in. Bij het werken met een design set zul je tegen beperkingen aanlopen die je doen denken aan het werken met een premium theme. Maar als je voortaan na de installatie ‘Start from scratch’ kiest zul je volledige vrijheid hebben in welke elementen je op welke plek gebruikt, en met welke css.

Global styles instellen in oxygen

Nadat je kleuren en fonts hebt gekozen kun je daar later bij het stylen van elementen, bijvoorbeeld het menu, gebruik van maken. Ben je na afloop niet tevreden over de gekozen kleuren dan hoef je die maar op 1 plek aan te passen, zo kun je efficient websites ontwikkelen. 

De meeste gebruikte elementen in Oxygen

Het aantal elementen in Oxygen is aanzienlijk, de ene zul je meer gebruiken dan de andere.

Section en div element

Een pagina of theme bestaat uit een verzameling divs, hoe een “div” eruit ziet hangt af van de CSS selectors die zijn toegepast op de div.

Styling van divs

Een div kan een ID zijn, of een class. Een ID wordt aangeduid met #, een class herken je aan een . (een punt).  IDs gebruik je wanneer de styling maar voor 1 specifieke div bedoeld is, terwijl classes gebruikt worden voor alle divs met de betreffende class. Zelf gebruik ik vaak een combinatie van IDs en meerdere classes, bijvoorbeeld voor een knop. Omdat ik vaak meerdere classes gebruik kan ik dus ook soms een class soms achterwege laten. Bijvoorbeeld de class voor de schaduw, zodat ik 1 bepaalde knop juist meer of minder schaduw kan geven, dat doe ik dan door niet de .schaduw class toe te passen maar de ID #schaduw-groot toe te voegen. 

Voor een footer, vaak de balk onderaan de pagina, hoef je geen apart template te maken, zoals dat bijvoorbeeld moet in Elementor. In Oxygen is de footer zelfs geen apart element, en header is dat overigens wel, zie volgende paragraaf. Een footer kan eenvoudig worden opgebouwd een section, divs en de nodige elementen voor het weergeven van bijvoorbeeld contactgegevens, social media knoppen, link naar privacy voorwaarden een copyright etc.

Samen met de header zit de footer in the ‘theme’, daar tussenin bevindt zich een element dat ‘Innercontent’ heeft, daarin komt alles terecht wat je maakt voor de afzonderlijke pagina’s. Als je de homepage bijvoorbeeld begint met een slider dan zal die slider dus direct onder de header te zien zijn. (Als er een overlay is insteld zal ie er overigens letterlijk onder vallen, anders sluit de slider aan op de header.) 

Header element

Bovenin bijna iedere website zit een header. Meestal zit daarin in ieder geval het logo en een menu. Ook komt het voor dat er contactgegevens (telefoonnummer) en/of social media buttons in te vinden zijn. Op alle pagina’s is de header te zien. Zie mijn blog artikel over de Header voor een volledige omschrijving van de Header.

Ben je ‘from scratch’ begonnen dan kun je bij een totaal gebrek aan inspiratie toch nog terugvallen op het gebruik van een bestaande header, daarvoor klik je op ‘Add’ en ga je naar de Design library, hier kunnen overigens alleen complete design sets worden geopend, dus die zou je moeten ontdoen van alles wat er onder de header staat. Zelf houd ik lijstjes bij van site onderdelen, zoals headers, die ik goed gekozen vind om daar ideeën uit te halen voor als ik inspiratie nodig heb.

Woocommerce elementen

Productpagina’s van WooCommerce zien er niet altijd even verrassend uit, vaak hebben ze dezelfde indeling. Een productpagina in WooCommerce op verschillende manieren aan te passen. De manier die ik hier ga toelichten is die met Oxygen. Naast een productpagina kun je ook een template maken voor specifieke productcategorieën, of een productpagina template voor specifieke producten.
Er bestaan voor het maken van o.a een productpagina, een afrekenpagina en een (categorie) overzichtspagina uiteenlopende Oxygen elementen. Die elementen zitten in de Woocommerce plugin voor Oxygen. Welke elementen dat precies zijn zie je in de 2 afbeeldingen hieronder.

Voor een webshop waar ik momenteel aan werk heb ik dit template voor de productpagina gemaakt:

Naast specifieke Woocommerce elementen heb ik ook gewoon algemene Oxygen elementen toegepast voor deze productpagina
Woocommerce elementen in Oxyextras

Mocht je in het bezig zijn van een Oxyextras.com licentie (aanrader!) dan kun je aanvullend gebruik maken van twee eigenlijk onmisbare Woocommerce elementen. Dat zijn de "Cart Counter", om aan te geven hoeveel producten in de cart zitten, en de "Mini Cart". Daarmee krijgt de bezoeker snel een beknopt overzicht van de inhoud van de winkelwagen.

Meest gebruikte elementen binnen een blog template

In Oxygen kun je naast een template voor een losse pagina ook een template maken voor een post type, dat type kan bijvoorbeeld zijn “blog artikel”.
Bij het maken van een blog template is het handig al wat berichten klaar te hebben, want in Oxygen kan de inhoud ervan direct getoond worden, als voorbeeld, terwijl je de template aan het opbouwen bent. Hierdoor gaat dat bouwen een stuk sneller.

Zoals je in de "structuur panel" in bovenstaande afbeeling kunt zien gebruik ik de volgende blog-specifieke elementen:

  • Reading progress bar element (Oxyextras)
  • Post modified date element (Oxyextras)
  • Table of contents element
  • Adjacient posts element (Oxyextras)
  • Author box element (Oxyextras)

De volgende elementen zijn geen specifieke blog elementen maar wel gevuld met specifieke blog informatie:

  • Date. Dit is een text element dat een dynamische waarde laat zien, namelijk de datum.
  • Introtext. Dit is eveneens een text element, dat dit keer gevuld wordt door de waarde van het custom field ‘Introtekst’ van het blog bericht dat getoond wordt. Dit veld heb ik aangemaakt met de plugin ACF en heb ik toegewezen aan alle berichten van het type “Blog post”.
  • Afbeelding, hiervoor gebruik ik een Image element, dat een dynamische afbeelding toont, de afbeelding die de webmaster heeft toegevoegd aan het blog bericht.

Wat misschien opvalt, als je gewend bent te werken met Elementor, is dat je niet hele specifiele widgets kunt kiezen. Dus widgets als Post title, Post Excerpt, Post content, Featured image etc bestaan niet in Oxygen. Je gebruikt in plaats hiervan algemene elementen die je vult met specifieke (dynamische) data. Voordeel hiervan is dat je een ruimere keuze hebt in de data die je wilt laten zien.

Zodra je alle elementen hebt toegevoegd en de styling helemaal naar wens is begin je aan de indeling en styling voor de kleinere beeldschermen.

Pagina-specifieke templates maken

Zoals hierboven gemeld kun je in Oxygen ook templates maken die geladen moeten worden wanneer er een bepaald post type, category etc getoond wordt. 

Voor zo’n single template hoef je niet opnieuw een header en footer te gaan maken, het volstaat om in het single template aan te geven dat er “overgeërfd” moet worden, en wel uit het basis template. Hierdoor hoef je je alleen maar bezig te houden met wat er tussen de header en de footer (de “innercontent”) moet komen. In mijn blog post over single templates geef ik voorbeelden van single templates die ik gemaakt heb, daarvan noem ik er nu 2:  

  • Een nieuwspagina template wordt getoond wanneer er een post van het custom post type ‘Nieuws’ wordt getoond.
  • Een profielpagina template wordt getoond wanneer er een post van het custom post type ‘Teamleden’ wordt getoond. 

Door middel van dynamische content verschijnen er automatisch de gegevens die de webmaster heeft ingevoerd in de betreffende post, eventueel aangevuld met custom fields. Voorbeeld: Bovenaan een profielpagina komt de naam te staan van de persoon. Het veld ‘Naam’ is een dynamisch veld dat is gevuld door de webmaster. In een template voor een blog pagina moet doorgaans worden aangegeven waar onderstaande gegevens terecht moeten komen:

  • De uitgelichte afbeelding.
  • Dat datum van publicatie en eventueel de datum van updaten.
  • De info over de schrijver.

In de meeste premium thema’s zitten custom post types voor bijvoorbeeld cases en profielen van personeelsleden. Ik raad aan zelf custom post types te maken (en pas wanneer je ze nodig hebt). Dat doe ik met CPT UI, die bevalt mij goed.

Ook kun je een template toewijzen aan bijvoorbeeld ‘Woocommerce producten'. Met Oxygen kun je zo'n template geheel naar wens indelen/stylen, dankzij de Oxygen Woocommerce plugin, zodat je niet vastzit aan de geijkte indeling van links de afbeeldingen met thumbs daaronder en rechts de tekst.

Wat ik ook vaak gebruik is een template voor zoekresultaten. Een bezoeker krijgt een zoekresultatenpagina te zien wanneer er een zoekopdracht op de website is uitgevoerd. Ook voor dit template heb je weer alle mogelijke elementen en dynamische data tot je beschikking, voor Jarabee leidde dit tot deze pagina: 

De titel van het zoekresultaat licht ik er hier uit (groe). Het is een dynamisch veld en kan van A to Z worden gestyled.

Ook andere archief templates kun je maken met Oxygen, denk aan categorie pagina’s, artikelen van een bepaalde gebruiken etc.

404 template

Een template dat je toewijst aan ‘404’ wordt gebruikt wanneer er een url bezocht wordt die niet meer bestaat, bijvoorbeeld omdat je de pagina verwijderd hebt. Uiteraard kun je het beste 404 pagina’s helemaal verwijderen, bijvoorbeeld door er redirects van te maken. Maar als er dan toch nog bezoekers op een 404 terecht komen dan wil je natuurlijk dat dit er goed uitziet. Gebruik je WordPress een standaard premium theme dan zit er vaak al een rudimentaire 404 pagina in, die neit veel meer laat zien dan “Sorry, de pagina die u probeerde te bezoeken bestaat helaas niet meer”, met soms een zoekveld, die je meestal daar niet wilt hebben en een knop ‘Terug naar de homepage’. In Oxygen moet er een custom 404 pagina gebouwd worden, dus je heb alle vrijheid.

Het 404 template dat ik voor Jarabee maakte.
Edit Template ‹ Webdegelijk — WordPress - Google Chrome 2020-12-18 at 10.58.36 AM.png
Toewijzen van het template aan de juiste "pagina's".
Geschreven door Paul Borkent

Als zzp'er ontwikkel ik websites en Google Ads campagnes voor verschillende branches zoals zakelijke dienstverlening, metaal, zorg, wetenschap. Dat doe ik voor zowel B2B als B2C.
Ik verdiep me regelmatig in de actuele stand van de techniek, marketing en design om de ambities van mijn klanten te kunnen blijven bijbenen.

© 2004-2020 Webdegelijk
chevron-leftchevron-right