Schrijf je in voor de nieuwsbrief:
Wanneer je een JavaScript snippet op hebt moeten nemen in je WordPress pagina’s, bijvoorbeeld omdat dit iets meet, dan wil je vaak niet, dat dit script ook wordt geladen, wanneer je zelf bent ingelogd.
Je wilt namelijk niet, dat iedere visite van jou ook meegeteld wordt. Wanneer je je site regelmatig bezoekt, dan zou dat de statistieken ernstig kunnen vervuilen.
Of het JavaScript zou zo vertragend kunnen werken, dat je het liever niet wil laden.
Dat laatste, daar liep ik tegenaan toen ik SalesIQ, het chatprogramma van ZohoOne op de website installeerde.
Op zich geen enkel probleem, totdat ik het samen met Elementor ging gebruiken. Het JavaScript van SalesIQ en dat van de Elementor Pro visuele Editor werkten niet echt leuk met elkaar samen.
Maar ook… waarom zou ik iedere keer mijzelf in het overzicht van mogelijke chats als ‘online’ willen zien staan. Ik ga niet met mijzelf praten.
Kortom het gebeurt wel eens, dat je bepaalde JavaScript snippets niet actief wilt hebben, wanneer je bent ingelogd (als administrator) in de site.
Hoe lossen we dat op?
Helaas is WordPress niet in staat om via JavaScript te controleren of je wel of niet bent ingelogd als beheerder. Wat wel makkelijk is, is controleren, of er wel of geen ‘admin bar’, de zwarte balk boven de website, wanneer je met sommige rollen bent ingelogd, zichtbaar is, of in zijn algemeenheid, of je wel of niet bent ingelogd.
Laten we die verschillende opties eens bekijken.
Optie 1 : Een code snippet moet niet geladen worden wanneer iemand is ingelogd.
Dit is bijvoorbeeld goed bruikbaar, wanneer je een pop up hebt, die je wel aan niet-ingelogde gebruikers, maar niet aan ingelogde gebruikers wilt tonen. Of wanneer je bijvoorbeeld de enige persoon bent die kan inloggen op je website en je niet wilt dat een specifieke JavaScript code snippet wordt uitgevoerd.
In de HTML van WordPress houdt WordPress eigenlijk heel veel zaken bij in de zogenaamde ‘body tag’. Door dit te doen, kan je vrij makkelijk via CSS de weergave voor specifieke posts aanpassen. Zo’n body tag kan er bijvoorbeeld als volgt uitzien:
<body class="post-template-default single single-post postid-57540 single-format-standard logged-in admin-bar wp-custom-logo theme-hello-elementor mt-57540 mt-post-chatten-op-je-website woocommerce-js elementor-default elementor-kit-17 elementor-page-51 customize-support e--ua-blink e--ua-chrome e--ua-webkit dialog-body dialog-lightbox-body dialog-container dialog-lightbox-container">Ik zal er niet op ingaan, wat dit allemaal betekent (van sommige zaken weet ik het zelf niet eens), maar dit is een opsomming van welke classes volgens WordPress, het actieve thema en sommige plugins belangrijk zijn voor WordPress.
En hier wil ik dus heel specifiek kijken naar ‘logged-in’. Want die class komt alleen voor, wanneer ik ben ingelogd in WordPress.
Ik hoef dus eigenlijk alleen maar een heel simpele controle te doen. Komt de class ‘logged-in’ voor in de ‘body’ tag?
En die simpele controle ziet er als volgt uit :
<script>
if (document.body.classList.contains('logged-in')) {
//voeg hier het gewenste code fragment toe.
}
</script>Nu moeten we voor het invoegen van dit gewenste code fragment wel even goed nadenken.
Want meestal zal dat code fragment tussen <script> tags staan, net zoals in de code hierboven. We kunnen deze niet nesten, dus we zullen ze eerst moeten verwijderen.
Stel je voor, dat we het volgende script in hadden moeten voegen :
<!-- Matomo -->
<script>
var _paq = window._paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="https://stats.websitemetmatomo.nl/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '1']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
</script>
<!-- End Matomo Code -->Mocht je bovenstaande code niet begrijpen, geen probleem. Dat hoeft ook niet. Het is gewoon een voorbeeld van een wat complexer JavaScript fragment, wat je mogelijk in je site toe zou moeten voegen.
Om precies te zijn, om je statistieken met Matomo bij te laten houden.
Stel nu dat ik dit op wil nemen, maar niet wanneer iemand op de site is ingelogd. Dan is het ‘eindresultaat van de code dus:
<!-- Matomo -->
<script>
if (document.body.classList.contains('logged-in')) {
var _paq = window._paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="https://stats.wordxpression.nl/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '1']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
}
</script>
<!-- End Matomo Code -->De regel direct achter ‘<script>’ en de accolade net voor </script> hebben we hier extra aan toegevoegd.
Optie 2: Je wilt alleen zaken uitsluiten wanneer de admin is ingelogd
Maar stel nu dat je een webshop hebt. Dan wil je natuurlijk de zaken wel bijhouden, wanneer de klant is ingelogd. De bovenstaande code is dan helemaal ongewenst. In dat geval heb je een andere controle nodig.
En gelukkig is die er ook. Want bij een webshop zal voor een ‘klant’ geen ‘admin bar’, de zwarte balk boven aan de website, beschikbaar zijn.
Houdt er wel rekening mee, dat deze wel beschikbaar zal zijn voor andere gebruikersrollen, zoals ‘Redacteur’ of ‘Schrijver’, wanneer je dus meerdere rollen actief hebt op de website, moet je wat meer omzichtig te werk gaan, of voor de derde optie kiezen.
Wat we nu willen testen is of de class ‘admin-bar’ voorkomt in de body tag.
En je raadt het natuurlijk al, het is niet veel anders dan het eerste voorbeeld, we testen alleen op een andere class.
<script>
if (document.body.classList.contains('admin-bar')) {
//voeg hier het gewenste code fragment toe.
}
</script>Nog steeds geen rocket science dus.
Laten we nu eens naar de derde optie kijken.
Optie 3: Je wilt code specifiek in de Elementor Editor verbergen
Maar nu. Je wilt de code heel specifiek in de Elementor Editor verbergen. Wat nu?
Ook dat is eigenlijk best eenvoudig. Je moet hier echter rekening mee houden dat de Elementor Editor verschillende ‘statussen’ kent.
De status ‘elementor-editor-active’ wil zeggen, dat je bezig bent te editen in de Elementor editor.
De status ‘elementor-editor-preview’ wil zeggen, dat je kijkt in de preview modus en tenslotte
De status ‘e-route-notes’ geeft aan dat je in de -sinds 3.7 pro nieuwe- ‘notes’ mode zit.
Je zal hier dus iets meer moeten controleren
<script>
if (document.body.classList.contains('elementor-editor-active') ||
document.body.classList.contains('elementor-editor-preview') ||
document.body.classList.contains('e-route-notes')) {
//voeg hier het gewenste code fragment toe.
}
</script>JavaScript
Al deze voorbeelden zijn in JavaScript. De plaats waar je deze code moet plaatsen is sterk afhankelijk van de instructies die je krijgt bij het eigenlijke fragment wat je toe wilt voegen.
Er zijn eigenlijk drie mogelijke posities :
- In de header
- Aan het begin van de <body> tag
- Aan het einde, net voor de </body> tag.
Deze code plaats je typisch in een child theme, via een plugin voor ‘header en footer code’, of wanneer je werkt met Elementor in de ‘Custom Code’ van Elementor.
Succes ermee!
Codesnippet verbeteren
Het doel van deze code snippet is een probleem op te lossen in een specifieke situatie. Daarom zie je regelmatig voorbeelden waar je specifiek tekst moet aanpassen om te krijgen wat je wilt.
Wil jij leren hoe je complete plugins zelf kunt programmeren inclusief ‘admin’ schermen voor het instellen en de output in de gewenste taal, dan is misschien de cursus ‘Introductiecursus Plugins Programmeren‘ iets voor jou.
Wil je als ‘full stack’ WordPress programmeur aan de gang gaan, dan biedt WordXPression ook een compleet traject ‘WordPress Developer‘ aan. Dit is een traject wat deels online, deels klassikaal wordt gegeven.
WordPress Developer worden?
Wil je leren hoe je zelf plugins, thema's, shortcodes, widgets, Gutenberg blocks en meer kan maken?
Schrijf je dan in voor de cursus WordPress Developer.
Schrijf je dan in voor de cursus WordPress Developer.
