JavaScript verbergen wanneer je bent ingelogd

JavaScript verbergen wanneer je bent ingelogd

Specifieke JavaScript code verbergen, wanneer je bent ingelogd.

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')) {

   }
</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 || [];
  
  _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 || [];
      
      _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')) {

   }
</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')) {

   }
</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 :

  1. In de header
  2. Aan het begin van de <body> tag
  3. 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!

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.

Meer snippets

Checkout velden wel of niet verplicht maken
Hoe kan je checkout velden in WooCommerce wel of niet verplicht stellen?
Pagina redirecten naar aanleiding van een user role
Met deze code kan je afhankelijk van de gebruikersrol waarmee wordt ingelogd je gebruikers naar de juiste...
De 'search' functie in je site helemaal uitschakelen
In de meeste gevallen zal je willen dat mensen je website makkelijk kunnen doorzoeken. Maar wat nu als...
jQuery Migrate verwijderen voor meer snelheid
Voor de meeste WordPress websites is jQuery Migrate al heel lang niet meer nodig. Je kan enigszins de...
Beperk zoekresultaten tot bepaalde post-typen
Hoe beperk je de post typen die terug komen vanuit een zoekopdracht?
WooCommerce checkout velden verwijderen
Sommige velden in het bestelformulier van WooCommerce heb je absoluut niet nodig. En zo haal je ze weg!

Veiligheid voor alles!

Met betrekking tot de code die je hier aantreft een aantal waarschuwingen, voordat je deze code snippets toepast op je eigen website.

  1. Voer de code nooit direct uit op je eigen website, maar probeer deze eerst op een staging omgeving of een locale kopie van je website. 
  2. Voor je de geteste code installeert op je website, maak eerst een back up van je website.
  3. Zorg altijd voor alle zekerheid, dat je voor je een aanpassing live zet, je ook de FTP gegevens van je website bij de hand hebt.  
 
Voel je je onvoldoende vertrouwd met het toepassen van een dergelijke code snippet, bedenk dat je dit ook door een professional kan laten doen. De WordXPression support strippenkaart is een voordelige manier om dit soort aanpassingen te laten doen.
Heeft dit artikel je geholpen je probleem op te lossen?
Deel het met je vrienden via je favoriete social media.

Heb je vragen bij, of opmerkingen over deze code snippet, stel deze bij de commentaren hieronder.

Geef een antwoord

Het e-mailadres wordt niet gepubliceerd.

Word je website de baas. Neem vandaag nog contact op!

Contact Information

WordXPression 
Imkersdreef 525
7328DG Apeldoorn
06-10449807 (van 9:00 tot 17:00 van ma-vr)

KVK : 75580152 

Social media
Stuur een bericht

Flinke kortingen op cursussen van WordXPression.