WordPress - Code Snippets

JavaScripts worden veelal ingezet om bepaalde animaties als bijvoorbeeld het fade-in effect of bepaalde interactieve functies toe te voegen aan een website.

Een contactformulier kan bijvoorbeeld geupdate worden op het scherm zonder dat daar een pagina-refresh voor nodig is. Een datum-veld kan voorzien worden van een popup-kalender. Bij de “Voor/Na Foto” -slider wordt de éne foto over de andere verschoven. Al dat soort “effecten” worden bereikt met JavaScript.

Die scripts worden dan ingeladen en dienen door de browser van de bezoeker ondersteund te worden.

Net als de php-code-snippets kunnen we die JavaScript snippets ook toevoegen aan onze WordPress website. Ondanks dat die js-bestanden klein zijn, kunnen ze veel impact hebben op de snelheid van de website. Ook kunnen ze voor conflicten zorgen met JavaScripts die bijvoorbeeld door het thema of actieve plugins gebruikt worden. Het is dus raadzaam om de scripts correct in te laden, goed te testen en bovenal een backup bij de hand te hebben.

Code Snippets zijn kleine stukjes code (meestal PHP in combinatie met HTML) welke de functionaliteit van WordPress uitbreiden of kunnen inperken. De standaard lengte van de samenvatting (lees ook: Samenvatting gebruiken) is meestal ingesteld op 55 woorden. Wil je die langer of juist korter maken dan kan dat door een stukje code op te nemen in het functions.php bestand van je thema.

Zo kun je door middel van de juiste code (snippet) aan het functions.php bestand toe te voegen of juist stukjes code aan te passen het gebruikte thema aanpassen naar eigen wens.

Veel van die code snippets zijn te vinden op WordPress.org

Ook zijn er op het web vele JavaScripts snippets te vinden om, vooral leuke maar ook functionele uitbreidingen aan de website toe te voegen. Het gebruik van een JavaScript snippet kan op verschillende manieren.

JavaScript functies toevoegen worden meestal toegevoegd aan de header van de pagina. Voorheen werden JavaScripts direct aan de header van het index-bestand (het eerste bestand wat iedere website opstart) toegevoegd. Dat script werkte dan gelijk voor alle onderliggende pagina’s.

Doordat snelheid een belangrijke factor is geworden voor de bezoekers-tevredenheid en ook voor de ranking-positie in Google is het niet altijd even slim om het JavaScript bestand direct in te laden bij het opstarten van de website of een bepaalde pagina die direct door de bezoeker benaderd wordt (bijv. via een link vanuit een zoekmachine).

De eerste vraag die we ons dienen te stellen is: is het script nodig voor bepaalde functies op die pagina ?

Zo ja, dan dient het script geladen te worden; zo nee, dan niet.

Alles wat vroegtijdig ingeladen moet worden voordat de pagina getoond wordt aan de bezoeker, vertraagd !

Het advies is dan ook om alleen het script in te laden, daar waar nodig.

De tweede vraag is dan: is het script nodig om bepaalde grafische elementen te tonen op de pagina ?

Zo ja, dan dient het script vroeg ingeladen te worden (de header), zo nee, dan kan het script geladen worden nadat de pagina getoond is (dus in de footer).

JavaScript voor alle pagina’s

Indien een JavaScript nodig is voor alle pagina’s van de website, dan dient dat script in of de header of de footer van het hoofdbestand (doorgaans index.php) ingelezen te worden.

Wil je bijvoorbeeld gebruik maken Google Analytics moet je na aanmelding bij GA een code toevoegen zodat GA werkt voor iedere pagina van de website. Dat stukje code dient dan handmatig geplaatst te worden in het header.php of footer.php bestand van het thema. Om dan overschrijving bij een update van het thema te voorkomen dien je dat dan te doen via het Child-Theme.

Doe je dat liever niet handmatig, dan kun je daar ook de plugin “Insert Headers and Footers” voor gebruiken:

Insert Header Footer Plugin

Daar wij geen voorstander zijn van het hebben van veel (actieve) plugins, in verband met conflicten, updates en met name de snelheid van de website; voegen we de scripts het beste handmatig toe.

Ook hier geldt als gouden regel dat voordat je een script ergens toevoegt je minimaal een backup hebt (maakt) van het bestand waar je het script aan toevoegt. Gaat er iets fout (en een typefout of kopieer-fout is snel gemaakt) dan kun je het originele bestand altijd snel terug zetten.

Om een JavaScript toe te voegen dienen we het volgend stukje code aan het functions.php bestand van ons Child-Theme toe te voegen:

function qwain_hook_javascript() {
    ?>
        <script>
          // Plaats hier de JavaScript Code
        </script>
    <?php
}
add_action('wp_head', 'qwain_hook_javascript');

Op regel 4 plaatsen we dan het gewenste stukje JavaScript. De JavaScript zal dan aan de header worden toegevoegd en op iedere pagina van de website actief zijn.

We gaven al aan dat het niet altijd noodzakelijk is om het script in te laden voor iedere pagina of bericht. WooCommerce is zo’n voorbeeld die alle scripts die nodig zijn voor WooCommerce deze inlaad voor alle pagina’s. Dat is niet persé noodzakelijk. Bij een webshop met ook veel informatieve pagina’s zijn die scripts niet nodig op die informatieve pagina’s. Het inladen zou dan alleen moeten gebeuren bij de shop-pagina’s (zie ook dit artikel: WooCommerce Scripts Uitschakelen).

Ons advies is dan ook, vraag jezelf af waar, op welke pagina of bericht het script actief moet zijn en gebruik dan de volgende methodes.

JavaScript bij bepaalde berichten

Indien het script (de functionaliteit dus…) alleen bij een bepaalde bericht nodig is het raadzaam, ten behoeve van de snelheid van de website, dat script alleen in te laden bij dat betreffende bericht.

Om dat te bewerkstelligen hebben we voorgaande code uitgebreid met een “post selector”:

function qwain_hook_javascript() {
  // vervang ID door het ID van het bericht
  if (is_single ('ID')) { 
    ?>
        <script type="text/javascript">
          // Plaats hier de JavaScript Code
        </script>
    <?php
  }
}
add_action('wp_head', 'qwain_hook_javascript');

Vervang hier op regel 3, ID door het ID-nummer van het bericht alwaar het script actief moet zijn en plaats op regel 6 de JavaScript code.

Om het ID-nummer van een bericht of pagina te vinden, lees dit artikel: WordPress ID Nummers

JavaScript bij bepaalde pagina’s

Voorgaande code werkt alleen bij berichten. Gebruik de volgende code voor pagina’s:

function qwain_hook_javascript() {
  // vervang ID door het ID van de pagina
  if (is_page ('ID')) { 
    ?>
        <script type="text/javascript">
          // Plaats hier de JavaScript Code
        </script>
    <?php
  }
}
add_action('wp_head', 'qwain_hook_javascript');

Net als bij de snippet voor de berichten dient ook hier ‘ID’ door het pagina ID-nummer gewijzigd te worden en de JavaScript code op regel 6 toegevoegd te worden.

JavaScripts in Footer

In voorgaande snippets laten we de JavaScript code in de header inladen via de “wp_head” opdracht. Zoals gezegd zal dit het laden van de pagina vertragen (hoeveel, dat dien je per JavaScript code apart te testen). Is het niet persé noodzakelijk om het script vroegtijdig in te laden dan kan dat script ook in de footer geplaatst worden.

Vervang hiervoor in de voorgaande voorbeelden “wp_head” door “wp_footer” op de laatste regel bij “add_action”.

Voorbeeld:

function qwain_hook_javascript() {
    ?>
        <script>
          // plaats hier de Javascript code
        </script>
    <?php
}
add_action('wp_footer', 'qwain_hook_javascript');

Willen we bijvoorbeeld een countdown timer ergens op een pagina dan kunnen we het volgend stukje JavaScript daarvoor gebruiken:

(function() {
  var start = new Date;
  start.setHours(23, 0, 0);

  function pad(num) {
    return ("0" + parseInt(num)).substr(-2);
  }

  function tick() {
    var now = new Date;
    if (now > start) { 
      start.setDate(start.getDate() + 1);
    }
    var remain = ((start - now) / 1000);
    var hh = pad((remain / 60 / 60) % 60);
    var mm = pad((remain / 60) % 60);
    var ss = pad(remain % 60);
    document.getElementById('time').innerHTML =
      hh + ":" + mm + ":" + ss;
    setTimeout(tick, 1000);
  }

  document.addEventListener('DOMContentLoaded', tick);
})();

Deze voegen we dan op de volgende manier toe aan ons functions.php bestand:

function qwain_countdowntimer() {
  if (is_single ('ID')) { 
    ?>
        <script type="text/javascript">
           (function() {
             var start = new Date;
             start.setHours(23, 0, 0); // 11pm

           function pad(num) {
            return ("0" + parseInt(num)).substr(-2);
           }

       function tick() {
         var now = new Date;
         if (now > start) {
         start.setDate(start.getDate() + 1);
         }
         var remain = ((start - now) / 1000);
         var hh = pad((remain / 60 / 60) % 60);
         var mm = pad((remain / 60) % 60);
         var ss = pad(remain % 60);
         document.getElementById('time').innerHTML =
         hh + ":" + mm + ":" + ss;
         setTimeout(tick, 1000);
       }

        document.addEventListener('DOMContentLoaded', tick);
       })();
      </script>
  <?php
  }
}
add_action('wp_footer', 'qwain_countdowntimer');

Om nu de countdown-timer in een bericht te tonen, vervangen we het ID-nummer door het ID-nummer van dat bericht en plaatsen dan de code in het functions.php bestand.

In het bericht plaatsen we dan de volgende html-code: “<span id=’time’></span>” en de timer zal getoond worden.

Voorbeeld:

Deze actie stopt over , bestel snel !

JavaScript bestanden gebruiken

In voorgaande voorbeelden hebben we de JavaScript code direct toegevoegd aan het functions.php bestand. Nu kan het voorkomen dat we bepaalde scripts op meerdere websites willen gebruiken, dan zouden we het script aan ieder functions.php bestand van het thema van iedere website moeten toevoegen.

Bij een wijziging in het script dienen we die wijziging dan bij ieder functions.php bestand van alle websites aan te brengen.

In het volgend artikel gaan we in op het gebruik van JavaScript bestanden die we ergens in een map opslaan en hoe we die dan moeten inlezen. Het voordeel is dan dat bij een wijziging we alleen het bestandje dienen te kopiëren naar alle websites waar we het script gebruiken en kunnen we het functions.php bij een wijziging van het script ongemoeid laten.

Overige Artikelen