JavaScript verbergen wanneer je bent ingelogd

Specifieke JavaScript code verbergen, wanneer je bent ingelogd.

Wil je direct een mail ontvangen wanneer nieuwe snippets zijn toegevoegd?

Vul dan onderstaand formulier in en je krijgt direct na het toevoegen van nieuwe snippets een email. Zo blijf je altijd bij!

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 :

  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!

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.

Meer snippets

Bestel en ontvang het morgen badge voor WooCommerce
Voer de 'koop druk' een beetje op, door aan te geven hoe snel iemand iets in huis kan krijgen
Shortcodes voor het tonen en verbergen van content
Hoe maak ik een shortcode waarmee ik content van mijn posts kan verbergen?
Het aanpassen van je WordPress systeem e-mails
WordPress verstuurt de welkom en de wachtwoord vergeten email vanuit een email adres, wat je niet aan...
WooCommerce checkout velden verwijderen
Sommige velden in het bestelformulier van WooCommerce heb je absoluut niet nodig. En zo haal je ze w...
WooCommerce product titel inkorten
Past de titel in je WooCommerce product matrix niet? Zo pas je het aan.
Een redirect na aankoop van een specifiek product
Hoe zorg je ervoor, dat na aankoop van een product iemand naar een specifieke pagina gaat?

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 reactie

Je e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

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

Contact Information

WordXPression 

Bezoekadres
Eperweg 135 (op afspraak)
8072 PL Nunspeet

Postadres
Aardoliestraat 14-I
7553GT Hengelo

06-10449807 (van 9:00 tot 17:00 van ma-vr)

KVK : 75580152 

Social media
Stuur een bericht

Introductiecursus Plugins Programmeren

wordpress coding Can use php code as background in html

Ontdek de wereld van WordPress Plugin ontwikkeling met WordXPression's introductiecursus