Dus deze blog gaan niet over “Off-page” SEO?

Dat klopt, dat gaat over factoren die niet direct op je pagina of zelfs website te vinden zijn. Dat betekent dat je bij off page SEO andere websites nodig hebt om je rankings te verbeteren. Dat doe je voornamelijk door te linkbuilden. Je kunt dat doen door je content onder de aandacht te brengen op social media maar een garantie dat ook echt backlinks gaat opleveren heb je niet. Het is dan ook lastiger te optimaliseren voor off page factoren dan voor on page factoren, omdat je op die laatste wel zelf invloed op hebt. Welke backlink zorgt voor betere SEO? Het draait allemaal om relevantie, dus kijk naar de inhoud, de website en de doelgroep. Ga niet in zee met linkfarms. Als je besluit om backlinks te krijgen, bouw deze dan geleidelijk op en wees geduldig. Kwaliteitslinks van relevante websites dragen bij aan betere SEO. Het web is enorm groot en de mogelijkheden om backlinks te krijgen zijn bijna eindeloos. Je positie in Google zal niet stijgen als je een backlink krijgt van een irrelevante site die niet past bij de content op je webste.

De pagina titel

Lengte van de titel

De titel van elke pagina is een belangrijke factor voor zoekmachineoptimalisatie. In tegenstelling tot een trefwoord, kan de titel van een pagina niet worden gewijzigd nadat de site is gemaakt en is dit vaak het enige dat wordt weergegeven in de zoekresultaten, dus het is belangrijk om deze zo relevant mogelijk te maken voor de zoekopdracht. Wat is de ideale lengte? Wat moet worden opgenomen? Wat moet er worden weggelaten? Elke pagina op internet heeft een title-tag en veel zoekmachines geven de title-tag weer in hun zoekresultaten. De title-tag is ook een van de eerste dingen die een bezoeker ziet nadat hij op uw website is aangekomen. Als de titel lang is, is de kans groot dat je bezoeker meer tijd zal besteden aan het lezen van de title-tag dan aan de inhoud op de pagina.

Zoektermen in de titel

Als je wilt dat uw inhoud wordt weergegeven in zoekresultaten wanneer gebruikers naar specifieke woorden zoeken, is het belangrijk om die zoektermen op te nemen in de titel. Zoekmachines gebruiken verschillende vormen van de zoekwoorden die je in de title-tag toevoegt om een ​​website te classificeren. Zo worden er bijvoorbeeld synoniemen, spelfouten en afkortingen gebruikt om je site beter te indexeren. Tenslotte gebruiken niet alle mensen dezelfde woorden, terwijl ze wel op zoek zijn naar dezelfde informatie. Badjas en duster is een mooi voorbeeld van 2 verschillende woorden voor hetzelfde product.

Begin de titel idealiter met een zoekterm

Als je wilt dat jouw title-tag de positie in de zoekresultaten beïnvloedt, moet deze nauw verband houden met de zoekopdracht. Als Google ziet dat de titel een zoekopdracht bevat, levert dit u een concurrentievoordeel op op de zoekpagina. Dit komt doordat de eerste title-tag wordt weergegeven in een grotere lettergrootte dan de andere title-tags. Het trekt daardoor meer aandacht van de zoeker en vergroot de kans dat ze op het resultaat klikken.
Als u de positie in de zoekmachines van uw website wilt verbeteren, is het belangrijk ervoor te zorgen dat de title-tag volledig is geoptimaliseerd. Door de doelzoekopdracht toe te voegen aan de title-tag, kunt u een hogere zoekmachine-ranking behalen dan wanneer u de zoekopdracht gewoon weglaat uit de title-tag. Dit komt omdat zoekmachines de voorkeur geven aan title-tags die relevanter zijn voor de zoekopdracht.

Vermijd dubbele titels

Dubbele titels kom je geregeld tegen. Over het algemeen zijn dubbele titels een slecht idee. Misschien wil je je ranking een boost geven met dubbele titels. Er zijn echter betere manieren om dit aan te pakken dan dit. Veel SEO-experts zijn van mening dat dubbele title-tags een van de redenen zijn waarom websites niet zo goed scoren als ze zouden kunnen. Het is soms niet zo eenvoudig om dubbele title-tags te ontdekken. Voor WordPress zijn er meerder plugins voor.

Meta teksten

Lengte van de meta beschrijving

Een metabeschrijving is bedoeld als een korte beschrijving van de inhoud van de webpagina. De zoekmachines gebruiken de beschrijving om de pagina in de zoekresultaten te rangschikken. Een metabeschrijving is niet bedoeld als een soort lokkertje om te klikken. Het moet een beknopte samenvatting te zijn van de inhoud van de pagina. Zoekmachines beperken de lengte van de metabeschrijving tot 160 tekens, daarom is de aanbevolen grootte 50-160 tekens. De lengte is geen vaste waarde, en zelfs de zoekmachines verschillen in hun benadering van de lengte van de metabeschrijving.

Zoektermen in de meta beschrijving

De metabeschrijvings is een stukje tekst dat wordt gebruikt om een ​​webpagina te beschrijven. Dit fragment wordt (soms) door zoekmachines gebruikt om een ​​fragment van een webpagina te maken voor weergave in de lijst resultaten. De metabeschrijving wordt ook gebruikt om gebruikers inzicht te geven in de inhoud van de webpagina en wat deze bevat. De meta description tag is een belangrijk hulpmiddel voor zowel zoekmachines als gebruikers.

Vermijd dubbele meta beschrijvingen

Metabeschrijvingstags zijn niet altijd gemakkelijk te schrijven, niet alleen omdat ze kort zijn en veel informatie moeten bevatten, maar omdat ze ook uniek moeten zijn. Als uw site dubbele metatags gebruikt, zal uw site er niet alleen spam achtig uitzien voor Google, maar ook voor gebruikers, met een negatieve invloed op hoe goed je site scoort in Google, en dus op het aantal bezoekers.

URL

URL lengte

Hoe lang moeten urls zijn? Daarop is een definitief antwoord te geven. Maar hier is een vuistregel: Google geeft 78-80 tekens van een pagina-URL weer in de zoekresultaten pagina. Door beschrijvende namen voor webpagina's te gebruiken, kun je de inhoud van de website gemakkelijker en correcter laten crawlen door Google, wat uiteindelijk resulteert in een betere ranking. Uit Google-gegevens blijkt verder dat korte URL's twee keer zoveel klikken krijgen als langere. Zelf dat ik dat dit ook wel te maken heeft met dat de SEO mensen die achter die goed scorende sites zitten ook meer dingen goed gedaan hebben dan de lengte van de urls, maar dat is dus maar een aanname die ik doe.

URL moet een zoekterm bevatten

Voorzie de URL's van belangrijke zoektermen. Dat maakt het gemakkelijker om te onthouden en gemakkelijker om naar te linken. De URL wordt zichtbaar in de SERP en de zoekopdracht wordt gemarkeerd. Door de zoekopdracht in uw URL te gebruiken, worden zowel de URL als de zoekopdracht gemarkeerd in de SERP. Dit maakt het voor de gebruiker gemakkelijker om op het resultaat te klikken en door de website te navigeren. Bij een On-page SEO strategie is het zaak om het aantal zoektermen niet te overdrijven concentreer je op het gebruik van een klein aantal relevante zoekwoorden (2-3) die nuttig zullen zijn voor je gebruikers.

Gebruik in de URL een streepje tussen de woorden

Zoekmachines raden aan om koppeltekens te gebruiken in plaats van onderstrepingstekens, omdat zoekwoorden die door koppeltekens worden gescheiden, eigenlijk als gescheiden worden "gezien". Dus als een URL iets bevat in de trant van "koop_boeken", dan zullen zoekmachines dit tonen voor de zoekopdracht "koop_boeken", en wie zoekt daar nou op? Een pagina-URL die "boeken-kopen" bevat, zal als relevant worden beschouwd voor de beoogde zoekopdracht, namelijk "boeken kopen".

Het gebruik van hoofdletters

Het gebruik van hoofdletters in URL's is een manier die ooit werd gebruikt om het belang van een bepaalde pagina aan te geven. Net als bij andere, voorheen gangbare, maar dubieuze SEO-praktijken, heeft Google dit idee de rug toegekeerd. Vandaag de dag is het belangrijker dan ooit om je te houden aan de richtlijnen van zoekmachines in plaats van verouderde SEO-praktijken. Deze richtlijnen stellen dat je altijd kleine letters moet gebruiken in alle delen van de URL, inclusief het domein, protocol, pad en bestandsnaam.

Afbeeldingen

Naam en alt-attribuut van afbeeldingen

In de begintijd van SEO werden afbeeldingen vaak over het hoofd gezien. Het alt-attribuut werd gezien als een handige plek om trefwoorden voor een pagina in te voegen en er werd niet vaak aan veel meer gedacht. Maar naarmate zoekmachines evolueerden en geavanceerder werden, groeide ook hun begrip van alt-attributen en hoe deze zouden moeten worden gebruikt. Tegenwoordig zijn afbeeldingen een essentieel onderdeel van elke succesvolle SEO-campagne. Het verbeteren van de manier waarop u alt-attributen en afbeeldingsbestandsnamen gebruikt, is een van de gemakkelijkste manieren om uw SEO op de pagina te verbeteren. Wanneer u uw website optimaliseert, is het goed ervoor te zorgen dat uw afbeeldingen de juiste naam hebben en alt-attributen hebben die relevant zijn voor de bestandsnaam van de afbeelding. Bij het upload van een afbeelding wordt vaak de naam van de afbeelding niet gewijzigd, waardoor je een nietszeggende naam als ‘IMG_1234.jpg krijgt. Beter om deze naam aan te passen naar eene duidelijke naam zodat zoekmachines makkelijker te weten komen wat er op de foto staat.

Als je wilt dat een afbeelding goed scoort, moet je een alt-attribuut gebruiken dat de afbeelding goed beschrijft. Het alt-attribuut moet een korte beschrijving zijn van waar de afbeelding over gaat. Zorg er tevens voor, indien mogelijk, dat het alt-attribuut het trefwoord bevat. Het alt-attribuut is een tekst die wordt getoond als de afbeelding om wat voor reden dan ook niet kan worden getoond.

Streepje gebruiken ipv underscores in bestandsnamen

Een goede reden om onderstrepingstekens in bestandsnamen te vermijden, is dat sommige zoekmachines onderstrepingstekens, underscores (_)interpreteren als "lettertekens", terwijl koppeltekens, een streepje (-) worden "gezien" als een spatie. Dit geldt ook voor steepjes en underscores in URLs zoals ik hierboven al verteld heb. Gebruik dus geen onderstrepingstekens in de namen van afbeeldingsbestanden maar in plaats daarvan koppeltekens. De algoritmen van Google zullen de bestandsnaam eerder matchen met de gebruikte zoekterm.

Gebruik unieke afbeeldingen

Zoekmachines kunnen zoals hierboven (bij het vermijden van duplicate content) zien of een tekst uniek is. Dat geldt ook voor afbeeldingen. Het gebruik van unieke afbeeldingen wordt als een positieve ranking factor beschouwd. Dus bij het plaatsen van een afbeelding op de website of in het blog maak je een afweging tussen de kosten van een unieke foto en het nadelige effect van stock afbeeldingen. Ook kun je stock afbeeldingen aanpassen of combineren met andere afbeeldingen zodat ze toch als uniek gezien zullen worden door Google.

Content

Lengte content

De aanbevolen lengte voor een WordPress-pagina is 500-1000 woorden. Dit varieert afhankelijk van het type pagina, maar de meeste experts zijn het erover eens dat een goed startpunt 500 woorden is. Dit omvat alle inhoud op de pagina, inclusief de titel, de inhoud, de metabeschrijving, het metatrefwoord en de metatags.

Unieke content

Het uniekheidspercentage is een maatstaf voor hoe vaak Google de inhoud van een website is tegengekomen op andere websites. Zoekmachines herkennen de unieke inhoud als origineel en kunnen deze sites een betere positie geven in de zoekresultaten.

Dubbele inhoud

Dubbele inhoud kan een reëel probleem zijn voor SEO. Een van de belangrijkste redenen waarom spiders van zoekmachines uw site negeren of zelfs bestraffen, is dubbele inhoud. Wanneer dezelfde tekst (of in ieder geval vergelijkbare tekst) op meerdere pagina's voorkomt, zien de spiders van zoekmachines dit als een probleem, omdat ze niet weten welke van de pagina's ze moeten rangschikken, omdat ze allemaal in wezen hetzelfde zeggen. Als je dezelfde inhoud hebt op je site als een concurrent, loopt je mogelijk waardevolle kansen mis in Google.

De "canonical link"

De "canonical link" is een HTML-element dat webmasters gebruiken om problemen met dubbele inhoud te voorkomen. Met het rel = "canonical" -element kun je aangeven welke versie van een webpagina je beschouwt als de voorkeur versie. Als er meerdere versies van de pagina zijn, zullen de zoekmachines de gewenste pagina in de zoekresultaten tonen.

Voorzie content (aan het begin) van de juiste zoektermen

Zoekmachines als Google gebruiken woorden op webpagina's om hun relevantie voor bepaalde zoekopdrachten te bepalen. Daarom is het belangrijk de zoektermen waarop jouw organisatie zich richt te gebruiken in de inhoud van de pagina, klinkt als een open deur maar wordt nog vaak vergeten. Vroeger zoekwoordgerichte SEO voldoende om goed gevonden te worden, tegenwoordig komt er meer bij kijken om goed gevonden te worden zoals ik in deze blog post laat zien.

Als u van plan bent content te schrijven voor een WordPress site, is je uiteindelijke doel om deze inhoud te optimaliseren voor de zoekopdracht en te ranken in Google, zodat de content de doelgroep bereikt, zonder vindbaarheid, geen lezers. Zoektermen die aan het eind van een pagina geplaatst worden zullen minder bijdragen aan de ranking dan zoektermen die in de eerste 100 woorden gebruikt worden. Bij uw zoekmachineoptimalisatie (SEO) draait het erom bezoekers naar uw website te halen en ze vervolgens lang genoeg te laten blijven om uw inhoud te lezen, interessant te vinden en over te gaan tot conversie, bijvoorbeeld contact opnemen.

Zoekterm dichtheid

Zoekterm dichtheid is de verhouding tussen (zoekopdrachten) in de tekst en het totale aantal woorden op de pagina. WordPress-pagina's met een geoptimaliseerde zoekwoorddichtheid scoren hoger bij zoekmachines, tenzij een overload aan zoektermen in een zin de leesbaarheid nadelig beinvloed, dan is het natuurlijk juist een nadeel. Aangezien de algoritmen van zoekmachines echter voortdurend veranderen, kan de waarde van de trefwoorddichtheid ook variëren.

(Paragraaf) koppen

Google is altijd op zoek naar manieren om de gebruikerservaring van hun zoekmachine te verbeteren. Met H-tags kun je de leesbaarheid van de inhoud verbeteren en op die manier de gebruikerservaring verbeteren. Het gebruik van H1-H6-tags is bedacht om zoekmachines een structuur te bieden voor de onderwerpen op een webpagina. Elke keer dat de webmaster een nieuwe post maakt moet hij de H-tags invullen waar ze nodig zijn. Als het bericht bijvoorbeeld gaat over de rechten van kinderen en je schrijft het eerste paragraaf over de rechten van kinderen op van de leeftijd 0-4 jaar, dan zul je daarvoor de H2-tag moeten gebruiken.

De H1 wordt gebruikt om de titel van de pagina te definiëren. Op deze WordPress blog pagina gebruik ik de H1-tag en meerdere H2-, en H3-tags

Zoektermen in H1-H6 tags

H1-H6-tags zijn tekstkoppen die worden gebruikt om de inhoud van een pagina op de juiste manier te structureren en om zoekmachines en gebruikers te helpen snel een beeld te krijgen van de de inhoud van de pagina, om die reden zet ik ze ook altijd nog even onder elkaar in een kader, direct onder de intro van een blog artikel. Dat doel ik overigens met het TOC element van Oxygen.
Dus als je wilt dat bezoekersaantallen door het dak gaan, gebruik dan je zoektermen in de H1-H6-tags van je pagina. Zoekmachines hechten meer waarde aan de zoektermen in de hoofdkop van je pagina, dus maak daar gebruik van.

Totaal aantal zoektermen

Het doel van een website is om geïnteresseerde mensen aan te trekken en hen de informatie te geven die ze nodig hebben om, uiteindelijk een ​​aankoop te doen of zich aan te melden voor een dienst. Om dat te doen, moet een website-eigenaar goed weten welke zoektermen zijn potentiële bezoekers gebruiken om de informatie te vinden die ze nodig hebben. Hoe relevanter die zoekwoorden zijn voor de doelgroep, hoe hoger je scoort op Google, wat meer meer hits voor je website betekent.

Outbound en internal links

Om hoog te scoren in Google moet je o.a linken naar relevante sites. Links van andere sites zijn belangrijk voor zoekmachineoptimalisatie (SEO). Zoekmachines zoals Google gebruiken die links om de populariteit en relevantie van een site en de positie ervan te bepalen.

Interne links zijn links naar een een ander pagina's op dezelfde website. Interne links zijn een belangrijk onderdeel van de SEO-inspanningen van een website. Door te linken naar andere pagina's op de website, krijgen de zoekmachines informatie dat de website met elkaar verweven en samenhangend is. Ook hier geldt, overdaad schaadt, het beste is alleen relevante links te maken.

Laadtijd van een website

Dat de score voor de laadsnelheid belangrijk is realiseer je je pas echt als je lang moet wachten totdat een webpagina (helemaal) geladen is. Voor een pagina met een goede laadsnelheid score is de gemiddelde laadsnelheid van de pagina ongeveer twee seconden. De score voor laadsnelheid van pagina's, geschat door Google, vergelijkt de laadsnelheid van een website met miljoenen andere websites in de database van Google op een schaal van 0 tot 100. Hoe hoger de waarde, des te beter. Als de laadsnelheidsscore van een webpagina ergens tussen de 85 en 100 ligt, wordt dat als uitstekend beschouwd. De beste manier om je bezoekers de frustratie van lang moeten wachten te besparen, is door je pagina te optimaliseren, dit doe je door je afbeeldingen te optimaliseren, de hoeveelheid javascript, CSS op je pagina zoveel mogelijk te verminderen en door je website te comprimeren. Zelf heb ik me jarenlang bezig gehouden met het uitvoeren van optiimalisaties maar gelukkig nu een stuk minder, want met de builder waar ik veel mee werk, Oxygen builder brengt geen overbodige code met zich mee.

"Trage websites suck” is een uitdrukking die je vaak zult tegenkomen op SEO-forums. En ook Google neemt snelheid mee als ranking factor en bepaalt of je site hoog in de zoekresultaten komt te staan ​​bij gewenste keywords en verhoogt de conversieratio. Want wanneer een bezoeker op je website terechtkomt, kijken ze een seconde of twee naar je pagina en als deze in die tijd niet wordt geladen, gaan ze er van uit dat er problemen zijn, verlaten ze de pagina en komen wellicht ook niet meer terug. Het bouncepercentage neemt hierdoor onnodig toe. Ook zoekmachine Bing heeft aangegeven dat als een site langzaam laadt, dit ervoor kan zorgen dat mensen een frustrerende ervaring hebben en dat ze de site zullen verlaten voordat ze hebben gevonden wat ze zochten.
Dus als uw website traag is, loopt u potentiële bezoekers mis. Als je een betere positie wilt, helpt het om een ​​site te hebben die in minder dan 2 seconden wordt geladen, wat bijna twee keer zo snel is als de gemiddelde site. Die 2 seconde gaan in wanneer de browser een verzoek verzendt om een ​​pagina te laden en eindigt wanneer alle inhoud van de pagina is geladen. Webbrowsers laten meestal een kleine "spinner" zien om aan te geven dat de pagina nog steeds wordt geladen.

Social media

Online beoordelingen en recensies, via sociale media als Instagram, facebook, linkedin, zijn een van de meest prominente ranking factoren voor zoekmachines geworden. De verbinding tussen SEO en sociale media is sterker dan ooit. Grote zoekmachines zijn zich ervan bewust dat sociale media een belangrijke plek heeft ingenomen. Het aantal gebruikers op sociale medianetwerken is exponentieel gestegen en de platforms worden met de dag populairder en belangrijker. Voor velen is het onderdeel van het dagelijks leven geworden. Naarmate het gebruik van sociale media groeit, verandert dit de manier waarop we zaken doen. Sociale media worden niet alleen gebruikt om mensen in de sociale kring op de hoogte te houden van ditjes en datjes maar worden ook gebruikt om producten/diensten te (ver)kopen en verkopen, een baan te vinden, contact te leggen met potentiële werkgevers etc. Google en andere zoekmachines houden nauwlettend in de gaten hoe populair een bepaalde WordPress-webpagina is op sociale media en passen de rangschikking dienovereenkomstig aan. “Social media authority” is een maatstaf voor deze populariteit. Tegenwoordig zijn de meeste organisaties actief op minstens één social media kanaal, en de meest populaire hebben zelfs miljoenen volgers.

Social media buttons zorgen ervoor dat meer mensen de inhoud van je website delen op social media. Uit een onderzoek van Brightedge.com bleek dat het toevoegen van de juiste share-knoppen tot 7x meer delen kan leiden. Met share-knoppen kunnen je bezoekers de pagina met een enkele klik op Facebook en Twitter delen. Social media is de meest effectieve manier voor merken om hun doelgroep te bereiken.

Gebruiksvriendelijkheid

Favicon

Een favicon is een kleine, vierkante afbeelding die in de adresbalk van een browser verschijnt. Het dient als branding voor je website en een handige manier voor bezoekers om je pagina te vinden wanneer ze meerdere tabbladen hebben geopend. En het feit dat ze zo klein zijn, maakt ze perfect voor mobiele apparaten.

Frames

Als je je WordPress site zo SEO-vriendelijk mogelijk wilt houden gebruik dan geen frames. Google heeft moeite om pagina's te indexeren die niet boven in een browservenster worden weergegeven. In plaats daarvan zal Google proberen de pagina te bezoeken waar naar via het frame is gelinkt, en dat wil je niet

Redirect HTTP naar HTTPS

Sinds Google heeft aangekondigd dat HTTPS een ranking factor zal zijn, hebben veel online bedrijven besloten over te schakelen naar zo’sn beveiligde site en niet meer vanaf HTTP. Het enkel verhuizen van niet-beveiligde HTTP naar beveiligde HTTPS, is niet genoeg, je moet ook al het verkeer omleiden naar het nieuwe domein. Anders zullen de zoekmachines beide domeinen als totaal verschillende sites zien.

Robots.txt

Het robots.txt-bestand is een tekstbestand met een lijst van pagina’s die zoekmachines moeten crawlen of juist niet. Het robots.txt-bestand bevat informatie over het aantal pagina's van uw website en de inhoud van die pagina's. De basis voor de informatie in het robots.txt-bestand is de broncode van de website. De structuur en inhoud van het robots.txt-bestand wordt bepaald door de broncode. Met behulp van robots.txt kunt u bijvoorbeeld zoekmachines blokkeren om delen van uw site te crawlen, of ze blokkeren voor het indexeren van bepaalde afbeeldingen of CSS-bestanden.

XML sitemap

Een sitemap is een XML-bestand dat alle pagina's van een website weergeeft. Sitemaps helpen zoekmachine-bots websites te indexeren. Zo’n sitemap moet eerst worden ingediend bij Google, dat doe je via Search Console. Sitemaps kunnen worden gegenereerd voor URL's maar ook voor afbeeldingen, video's, nieuws en mobiele inhoud.
Specificeer in de sitemap de locatie, de frequentie van wijzigingen, crawl-instellingen, prioriteit en het type inhoud dat naar de zoekmachine wordt verzonden.Het XML-bestand wordt gegenereerd door de webmaster. Samen met robots.txt informeert een XML-sitemap Google en andere zoekmachines over de pagina's op je website.

Websitebeveiliging

Google heeft aangekondigd dat ze van plan zijn actie te ondernemen tegen websites die worden gehackt en malware aanbieden. Als online bedrijf of website-eigenaar wil je dat uw bezoekers veilige toegang hebben tot de website. Kunnen bezoekers op jouw site terechtkomen zonder te worden aangevallen door malware? Als het antwoord ja is leidt dit tot verhoogde gebruikers loyaliteit maar eigenlijk is het een basisvoorwaarde. De meest effectieve manier om malware aanvallen te voorkomen, is door ze te detecteren en te blokkeren. Websitebescherming is geen eenmalige actie, maar een continu proces. Ik zet regelmatig de WordPress plugin Admin Tools in waarmee ik talloze beveiligingsinstellingen kan doen.

Alles op internet brengt beveiligingsproblemen met zich mee, een website loopt dus altijd het risico gehackt te worden. Het is belangrijk dat risico zo klein mogelijk te houden. Zo kan bijvoorbeeld worden ingesteld dat (kleine) WordPress CMS updates automatisch mogen worden uitgevoerd, dat is kostenloos. Die updates verschijnen echter pas wanneer beveiligingslekken ontstaan zijn..

Een website bestaat uit de basissoftware en (meestal) een aantal geïnstalleerde plugins. In de software kunnen fouten in de code zitten, van zowel WordPress als de daarop geinstalleerde plugins. Een hacker kan die fouten gebruiken om bijvoorbeeld de homepage te vervangen door een pagina van de hacker zelf. Jou bedrijf of organisatie kan schade ondervinden van een dergelijke aanval. Het is daarom belangrijk maatregelen te nemen. Vertrouw niet alleen op het updaten naar 'de laatste software update', voor WordPress (of ander CMS) en alle gebruikte plugins, want elke dag worden er weer nieuwe lekken gevonden.

Aanvullende maatregelen die ik desgewenst neem

Webdegelijk neemt al bij de bouw van een website beveiligingsmaatregelen. Een greep uit de beveiligingsmaatregelen die ik doorgaans neem vind je hieronder.

• Aan ../wp-admin een parameter toegevoegen zoals bijvoorbeeld lk4$#@rkj
• Een SQLki shield aanzetten om SQL injections te voorkomen
• Verdachte gebruikers filteren
• Direct en Remote file inclusion shield aanzetten
• Upload scanner toepassen
• Voorkomen dat een admin op de front-end kan inloggen
• Herhaaldelijk verkeerd inloggen behandelen als veiligheidsrisico
• Beveiliging tegen veelvoorkomende file injection attacks
• PHP Easter Eggs onmogelijk maken
• Beveiliging tegen clickjacking
• Reduceren MIME type beveiligingsrisico
• XSS preventie
• Apache en PHP version signature verwijderen
• Content transformation voorkomen
• Toegang van bepaalde user agents ontzeggen
• Server beveiliging
• Toggles Back-end beveiliging
• Redirect index.php naar de root

W3C HTML validity test

Wanneer je HTML-code wijzigt, is het altijd een goed idee om te controleren of deze nog geldig is. Als dit het geval is, kunt u er zeker van zijn dat de website nog steeds correct wordt weergegeven in de browser. Dit zal bijdragen aan een hogere ranking in Google. De W3C HTML validiteitstest toetst de HTML-structuur van je website aan de norm. Als de W3C HTML validiteitstest niet doorstaan wordt is er werk aan de winkel; het probleem moet onderzocht en indien mogelijk opgelost worden.

Benieuwd hoe jouw site ervoor staat op alle hierboven genoemde onderdelen?

Met behulp van mijn (Optimum) abonnement op SE Ranking maak ik een analyse van hoe jouw site ervoor staat. Vervolgens zal ik dat rapport aan je voorleggen en gaan toelichten. Hiervoor breng ik eenmalig €79,- in rekening.
Eventuele knelpunten oplossen valt er dus niet onder, wel kan hiervoor desgewenst een offerte maken.

Header maken met Oxygen

Stap in de wereld van WordPress met Oxygen en maak kennis met het ultiem flexible “Header builder” element. Het vullen van de Header Builder werkt werkt min of meer hetzelfde als het vullen van andere secties in je template, of op je pagina’s. Je kunt het zo geavanceerd en uitgebreid maken als je klant/designer/ het je voorschrijft, of je jezelf hebt voorgeschreven. Wel bestaat een Header Builder altijd uit maximaal 3 kolommen. 

Minder dan 3 kolommen nodig? Heb je voldoende aan 2 kolommen, bijvoorbeeld omdat je alleen een logo en een menu hebt te plaatsen in de header dan verberg je de derde kolom, dat doe je met de CSS selector Display, die zet je op None, komt verderop in dit artikel aan bod. 

Header element plaatsen

Ik er van uit dat je een menu gemaakt hebt in WordPress (via Weergave > Menu’s) dat je wilt gaan gebruiken in de header van de website. Anders dan wat je misschien gewend bent bij het werken met WordPress premium themes is dat het uploaden van een logo niet nodig is in Oxygen. Het logo toevoegen doe je gewoon rechtstreeks in het “Header builder” element. 

Het invoegen van het Header builder element doe je zoals gezegd op dezelfde manier als het plaatsen van andere elementen. 

1. Open het template waarin je de header wilt plaatsen, dat zal over het algemeen het main template zijn (andere template erven de header vaak over uit het main template waardoor je de header dus maar eenmalig hoeft aan te maken). 
2. Voeg het Header Builder element toe door op de blauwe Add knop te klikken links bovenin Oxygen.

Functies van de Header Builder

In het Header Builder element kun je aangeven of de header: 

• Sticky moet zijn, dat betekend of ie bovenaan je browser window vastgeplakt moet blijven terwijl je naar beneden scrollt.
• Overlay moet zijn, dus over de eerste sectie heen moet vallen in plaats van dat de volgende sectie onderaan de header moet aansluiten. 

Elementen die je altijd zult gebruiken in de Header Builder

Een header van een WordPress site, of elke andere site, bestaat doorgaans uit verschillende elementen. 

Logo in de header

Wat er in ieder geval in de header staat is het logo. Hiervoor heeft Oxygen geen specifiek element, er is geen element dat Logo heet. Dat is juist goed want aangezien het gewoon een afbeelding is (vooruit, met daarin een link naar de homepage) kun je een logo plaatsen in een, je raad het al, Afbeeldings element. 

Een logo in svg formaat werkt het beste, altijd scherp, ook op kleinere schermen en de bestandsgrootte is gering, en aangezien het bestand op iedere pagina geladen moet worden zal het in belangrijke mate bijdragen aan de laadtijd van je website.

Menu in de header

Voor het plaatsen van het menu kun je kiezen uit maar liefst 6 elementen. Heb je geen dropdown knoppen nodig, laat staan een heel mega enu, kies dan voor het element Pro Menu. In de instellingen geef je aan welk menu daarin gebruikt moet worden. 

Mega menu en Mega menu? Wat is het verschil?

Het Mega Menu element in de afbeelding hierboven waar je een paarse ‘O’ in ziet staan is een zogenaamd samengesteld element. Dat zijn dus elementen die bestaan uit een combinatie van andere elementen. Daarnaast is er stuk code aan toegevoegd voor de gewenste functionaliteit. Een Mega menu element bijvoorbeeld bestaat zoals je in de afbeeling hieronder ziet uit de volgende elementen:

• Code block element
• Link wrapper element
• Columns element
• Text element
• Div element
• Icon element.

Het andere Mega menu, dus zonder die ‘O’ is eigenlijk ook een samengesteld element maar niet als zodanig aangeduid want van Oxyextras.

Meerdere menu’s in de header

Het komt voor dat je niet alle knoppen kwijt kunt in 1 menu, dan zie je vaak dat knoppen als ‘Contact’, ‘Over ons’, en ‘Blog’ in een ander menu gezet worden, vaak in kleiner lettertype en minder styling.

Styling van het menu 

Voor het stylen van het menu beschik je, zoals voor elk element, voor het hele arcenaal aan CSS selectors onder de Advanced tab. Daarnaast uit de volgende aanvullende instelmogelijkheden: 

Typografie (lettertype) 

Spacing (Ruimte om de tekst in de menu knop heen en tussen de menu knoppen onderling)

Hover & active 

Een knop ziet er niet altijd hetzelfde uit. Bepaal hier hoe de knoppen er uit moeten zien wanneer:
Er overheen bewogen worden (hover)
Je je op de betreffende pagina bevindt (active). 

In Oxygen heb je in Pro Menu, nog een aantal extra opties tot je beschikking. 

Social media knoppen in header of elders

Wil je de links naar de social media kanalen een prominente plek geven op de WordPress site kies dan voor een plek in de header. Het element Social Icons kun je daarvoor gebruiken. Daarin kun je kiezen voor brandcolor of je kiest zelf je kleuren, bijvoorbeeld uit de centraal ingestelde (huisstijl) kleuren. Voor recherchebureaudaniluk.nl deed ik beide; brandcolored icons in de footer, zelf gekozen kleuren op de contactpagina om niet te veel de aandacht daar naartoe te leiden: 

Hier kun je ook instellen of de icons afgerond of hoekig moeten worden, wat de grootte en de onderlinge afstand moet zijn.

Je hebt binnen het element Social icons geen controle over de volgorde, dat vind ik persoonlijk een nadeel. Om dit probleem te ondervangen gebruik ik daarvoor custom css, dat is in dit geval css die niet te genereren is via de Advanded tab, de handgeschreven CSS voeg je toe in het veld ‘custom css’. Voor het in een aandere volgorde zetten van items binnen een element (Linkedin icon vooraan zetten in het Social icons element) gebruik ik de Flex selector:

.oxy-social-icons a.oxy-social-icons-linkedin {
order: 1;
}
.oxy-social-icons a.oxy-social-icons-twitter {
order: 2;
}
.oxy-social-icons a.oxy-social-icons-instagram {
order: 3;
}

Omdat je social icons bestaan uit icons, kun je er ook voor kiezen icon elementen te gaan gebruiken, dan kun je niet aanklikken ‘Use brand colors’ maar zo ingewikkeld is het niet om die kleuren zelf op te geven in de CSS instellingen.

Contactgegevens in de header

Contactgegevens zie je wel eens helemaal bovenin de site staan, technisch gezien staan ze niet in de header maar in de een sectie die veelal ‘topbar’ genoemd word. In Oxygen voeg je een nieuwe row to in de header, van die nieuwe row verberg je 2 van de 3 kolommen en in de overgebleven kolom plaats je een Text element, eventueel doe je dat binnen een div als je extra eigenschappen wilt toevoegen. 

Zoekveld in de header

Een WordPress website met veel content worden vaak uitgerust met een zoekveld in de header. Je kunt gebruik maken van het Oxygen element ‘Search Form’ maar die is eigenlijk vrij beperkt in mogelijkheden. 

Als je een Oxyextras licentie hebt, ga dan voor het element ‘Header Search’, daarin heb je een stuk meer mogelijkheden, zie hieronder de toepassing ervan in de jarabee.nl website: 

Meerdere Header Builders gebruiken

Heb je aan meerdere rijen niet voldoen kies er dan voor meerdere Header Builder elementen in te zetten. Ik koos daarvoor in de situatie dat het ene deel van de header sticky moest zijn maar tegelijkertijd toch ook direct al in beeld moest komen. Dus een extra rij voldeed niet want die kan alleen op ‘Only show in sticky’ of ‘Hide in sticky’ gezet worden en het menu moest juist in plaats van only ‘always’ getoond worden, en in plaats van hide moest ik ‘m ‘show’ in sticky hebben.

Mocht je nu door de bomen het bos niet meer zien. Het wordt je vanzelf duidelijk wanneer je er zelf mee aan de slag gaat en gewoon ‘ns wat gaat uitproberen.

Header geschikt maken voor mobiel

Sinds Google “Mobile first” uit rolde, of eigenlijk al daarvoor, is het erg belangrijk dat een (WordPress) website ook op mobiele apparaten goed toegankelijk is. 

De header is een belangrijk onderdeel van de website dus je wilt voorkomen dat het logo of menu daarop slecht wordt uitgelijnd of überhaupt niet werkt. Ook dat kan relatief eenvoudig met Oxygen geregeld worden. 

Responsive menu

Zodra je de header af is voor mobiel begin je aan de instellingen voor mobiel. Het breakpoint heb ik hieronder ingesteld “Toon het mobiele menu bij schermen smaller dan 768px”. Op schermen die kleiner zijn verschijnt daardoor niet het menu maar de hamburger knop. Overigens kun je de breakpoints zelfs wijzigen in de van Oxygen.

Via de knoppen Mobile Menu en Mobile Dropdowns heb je weer een groot aantal instelmogelijkheden zoals uitlijnen, kleuren, animatie, submenu indicator (icoon om aan te geven dat er zich een dropdown onder het menu item bevindt) etcetc.

Voor het logo heb ik @media regels gemaakt, maar dan met behulp van Oxygen, dus veel intuïtiever. Een voor schermen kleiner dan 1120 px breed en een voor schermen kleiner dan 992 px breed. Van die tweede laat ik weer een printscreen zien. Omdat er op schermen kleiner dan 992px toch geen menu te zien zal zijn (alleen de hamburger knop) kies ik ervoor het logo meer ruimte te geven, dus een groter deel van de header te laten beslaan.

Divs (met elementen) onzichtbaar maken op mobiel

Tenslotte kun je er nog voor zorgen dat bepaalde onderdelen van de header helemaal niet te zien zullen zijn op klein beeldscherm. Dat doe je weer door de css selector ‘Display’ te gebruiken, en op ‘None’ te zetten. Ook voor deze selector hoeft geen css regel geschreven te worden want ook hierin voorziet Oxygen: 

Let op. Anders dan in een WordPress Builder zoals Elementor heb je nergens een schuifjes ‘Toon op mobiel’, ‘Toon op tablet’ en ‘Toon op desktop’, die je alleen maar even aan en uit hoeft te zetten; in Oxygen wordt je helaas (of gelukkig!) overgeleverd aan je kennis van CSS, met als beloning dat je veel meer mogelijkheden hebt. Zo hoeft je bijvoorbeeld geen verschillende knoppen aan te maken voor groot beeldscherm en voor klein beeldscherm. Bijvoorbeeld omdat je op een klein beeldscherm te weinig ruimte hebt om een icon te laten zien in een button.  In bijvoorbeeld Elementor wil dit nog wel eens de ‘minst slechte’ methode is om tegemoet te komen aan de gewenste afmetingen van een knop in zowel groot als klein beeldscherm: 

1. Maak een knop voor groot beeldscherm die je verbergt op klein beeldscherm
2. Maak een knop voor klein beeldscherm, die je dus verbergt op groot beeldscherm 

De CSS selector die je tot je beschikking hebt vind je overigens in elk element onder de tab ‘Advanced’. 

Header uitschakelen

Stel dat je een landingspagina bouwt waar de header niet te zien moet zijn, om te voorkomen dat mensen naar een andere pagina gaan, dan kun je dat instellen bij Conditions.

Header met verticaal menu

De header builder is niet geschikt voor het maken van een verticaal menu. Het element dat je wel gebruikt als je een template bouwt voor een site met een verticaal menu is een basaal Div element, met als instelling dat de child divs horizontaal achter elkaar getoond moeten worden. In het eerste child div dat je plaatst zet je het menu, in de volgende child div plaats je het Innercontent element, dat is zoals gezegd het element dat de pagina (of post) inhoud laat zien. De breedte van div met het verticale menu stel je in op bijvoorbeeld 200px. De hoogte ervan is meestal de hoogte van het beeldscherm, hoe hoog dat beeldscherm ook moge zijn, kies daarom de eenheid ‘vh’ (viewport height) en de waarde ‘100’ . In het Pro Menu stel je bij Orientation in dat het menu verticaal moet worden weergegeven, dus met de knoppen onder elkaar ipv naast elkaar. 

Verticaal menu voor kleine beeldschermen

Ook een verticaal menu gebruikt moet natuurlijk te gebruiken zijn op kleinere beeldschermen. Voor tablet kun je nog de breedte van de kolom wat kleiner maken, voor mobiel zal dat niet mogelijk zijn, op mobiel zal een hamburger knop te zien moeten zijn, die je maakt met een icon (de hamburger knop zelf) en een Modal element met daarin het menu. De Modal wordt getriggerd, geopend in dit geval, door een klik (of een hover) op de hamburger knop, eigenlijk hetzelfde dus als hoe een horizontaal menu zich “gedraagt” op mobiel, maar dan nu maak je ‘m zelf, dus met een icoon en een Modal element. Alle ins en outs van een verticaal menu in Oxygen kan ik je nog niet mededelen want heb zo’n menu simpelweg nog niet gemaakt.. 

Custom post types maken

Aangezien de webmaster vaak degene zal zijn die profielen toevoegd, aanpast, en verwijderd is het handig dat er een apart menu item voor is. Als je dat niet doet zouden de profielen onder Berichten (Posts) komen te staan Ik noem het menu item 'Mijn teamleden'. Het aanmaken van custom post types doe je met Custom Post Types UI, maar er zijn meerdere plugin om uit te kiezen.  

Custom velden aanmaken

De velden die je nodig gaat zijn, zoals 'Titel' of 'Naam' zitten niet standaar in WordPress. De plugin die ik gebruik voor het maken van nieuwe velden is ACF, dat staat voor Advanced Custom Fields, maar je kunt ook kiezen voor andere plugins. 

Nadat je in ACF de field groep ‘Teamleden’ hebt aangemaakt voeg je de benodigde velden toe.

Onderin de afbeelding zie je dat ik deze groep, dus met alle velden die erin zitten, heb toegewezen aan het post type die ik daarvoor al had aangemaakt, het post type 'Teamlid'.

Het toevoegen van een profiel

Je kunt nu beginnen met het toevoegen van de profielen, dat zal er ongeveer zo uitzien. 

De profielen op de website zetten

Uiteindelijk wil je dat alle medewerkers een eigen pagina krijgen met daarop dus de ingevoerde gegevens. Maar daarnaast moet er ook een overzichts pagina komen, die kun je het beste maken met de zogenaamde 'Repeater', dat is een element in Oxygen. 

In de repeater geef je eerst aan welke items er in de repeater terecht moet komen. Berichten van het type ‘team’ kies je dus.

Alle teamleden die ingevoerd zijn worden dus nu getoond op de pagina. Dt gebeurd echter pas als je hebt aangegeven welke informatie geladen moet worden.
Stel je wilt in ieder geval de featured image laten zien. Daarvoor plaats je binnen die repeater de featured image door in de structuur lint aan de rechterkant van je beeldscherm de Repeater te selecteren en vervolgens links bovenin op de blauwe knop ‘+ Add’ te klikken.
Omdat het geen afbeelding moet zijn uit de media bibliotheek klik je op 'Data' en selecteer je ‘Featured image’.

Layout aanpassen

Hover-state

Een hover-state is altijd goed om toe te voegen, dat zorgt voor interactie tussen de site en de bezoeker. Ik koos voor het naar boven bewegen van de afbeelding. Degenen die bekend zijn met CSS weten dat je dat kunt doen met de 'Translate' selector. Om het naar boven bewegen van de afbeelding geleidelijk te laten verlopen, zodat het niet zo schokkerig wordt, voeg je ook een Transition selector toe, 0,4 sec is meestal prima.  

Kolommen

Het aantal kolommen, dus het aantal mensen naast elkaar, kun je niet rechtstreeks instellen, is er nergens een vakje waarin je kunt kiezen voor bijvoorbeeld '4'.
Het aantal kolommen in een repeater wordt bepaald aan de hand van de breedte van de div in de repeater. Voor het maken van 4 kolommen kies je een breedte die net onder de 25% ligt, omdat je vaak ook tussenruimte wilt hebben.
Dit kun je per beeldscherm breedte instellen. Bij de kleinste afmeting (alles onder 480 px) kies ik doorgaans voor 100%, zodat op mobiel alle personen onder elkaar komen te staan.

Andere effecten die ik vaak toegepast zie worden nasst translate zijn 'Scale', om te vergroten/verkleinen, ‘Opacity’, waarmee je de helderheid (letterlijk doorzichtigheid) laat toe- of afnemen wanneer er met de cursor overheen bewogen wordt. Of een combinatie van verschillende selectors.

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.

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: 

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.