Om gebruik te kunnen maken van scripts moeten we deze laden in WordPress. Dat doen we in de footer. In dit artikel laat ik je zien hoe je dat op de juiste manier moet doen.
Script registreren
Voordat we het bestand footer.php aanmaken gaan we eerst de scripts registreren die we nodig hebben voor Bootstrap. Op de site van Bootstrap kun je lezen hoe je de scripts kan invoegen met de CDN link.
Voor het registreren van een script gebruikt WordPress de functie wp_register_script();.
In de WordPress Developer documentatie staat hoe je wp_register_script kunt gebruiken.
wp_register_script( string $handle, string|bool $src, string[] $deps, string|bool|null $ver, bool $in_footer )
Zoals je ziet is de wp_register_script(); functie nagenoeg gelijk aan de wp_register_style(); functie. Het verschil is de laatste parameter. In de wp_register_script(); functie kun je aangeven of je het script wilt laden in de footer. Open het bestand enqueue.php en voeg de wp_register_script(); functie toe.
enqueue.php
<?php
function wg_enqueue(){
wp_register_style( 'wg_bootstrap', 'https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css' );
wp_enqueue_style( 'wg_bootstrap' );
wp_register_script( 'wg_bootstrap_script', 'https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js', [], false, true );
}
Maar wat hebben we nu ingevuld. Laten we daar eens naar kijken.
$handle
Voor onze handle naam gebruiken we wg_bootstrap_script. Deze naam hebben we straks nodig om ons script in de wachtrij te plaatsen (enqueue).
$src
Als source gebruiken we de CDN link voor het Bootstrap script. Deze link kun je hier vinden.
$deps
Ons script is op dit moment niet afhankelijk van andere scripts. We kunnen dus een lege array invoeren. Mocht het script later afhankelijk zijn van andere scripts, dan vullen we daar een array van $handle namen in van de andere scripts.
$ver
We gebruiken geen versie nummer voor het script. We voeren hier de waarde false in.
$in_footer
Daar is het dan. Hier geven we aan of we het script in de footer willen laden. De waarde true geeft aan, dat we dat willen. Standaard is deze waarde false.
Nu het script geregistreerd is, kunnen we het in de wachtrij plaatsen. Dat doen we met de functie wp_enqueue_script();. Voeg deze functie toe aan het enqueue.php bestand.
enqueue.php
<?php
function wg_enqueue(){
wp_register_style( 'wg_bootstrap', 'https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css' );
wp_enqueue_style( 'wg_bootstrap' );
wp_register_script( 'wg_bootstrap_script', 'https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js', [], false, true );
wp_enqueue_script( 'wg_bootstrap_script' );
}
Nu we het script hebben geregistreerd en in de wachtrij hebben geplaatst is het tijd om WordPress te vertellen waar het uitgevoerd moet worden zodat we er gebruik van kunnen maken.
Om dit script in de footer te laden, gaan we nu eerst een footer aanmaken.
Footer.php
Open je teksteditor en maak in je thema map het bestand footer.php aan. In de WordPress Developer documentatie staat wat er in het footer.php bestand moet komen.
footer.php <?php wp_footer() ?> </body> </html>
Je ziet dat we in de footer de functie wp_footer(); gebruiken. Met deze functie vertel je WordPress dat je de gegevens van de footer op de website wilt laden. In het footer.php bestand sluiten we ook de </body> en de</html> tags. In het header.php bestand hadden we deze namelijk geopend, zonder ze te sluiten.
Om te testen of ons script daadwerkelijk geladen wordt, kunnen we opnieuw het index.php bestand gebruiken. In het index.php bestand gaan we de footer aanroepen met de functie get_footer();.
Open het index.php bestand en voeg de functie get_footer(); toe.
index.php <?php get_header(); get_footer();
Open het index.php bestand in je webbrowser. Je zult zien dat je nog steeds een lege, witte pagina hebt. Geen zorgen, daar gaan we snel genoeg verandering in brengen! Maar wacht eens… ik zie wel een zwarte balk bovenin de pagina?
Aha! Omdat wij de footer aanroepen zal WordPress zelf ook scripts laden. Eén van die scripts zorgt er voor dat de Worpress Admin Bar geladen wordt. Gaaf hè?
Weet je nog, toen we na het installeren van WordPress de verschillende thema’s hebben bekeken. Toen hebben we al gebruik gemaakt van deze Admin Bar.
Opmerking: Je ziet de Admin Bar alleen als je bent ingelogd.
Om te zien of ons script daadwerkelijk geladen is, kun je de Chrome DevTools weer openen. Weet je nog hoe dat moet? Klik in je webbrowser op de rechtermuisknop en kies voor inspecteren.
Klik in de DevTools op het pijltje naast de <body> tag. De <body> sectie klapt nu open. Zoek naar het script wat we hebben geladen. In de video hieronder laat ik zien, waar het script staat. Je vindt ook het script van de Admin Bar terug met het id: admin-bar-js.
JQuery
Veel plugins en thema’s maken gebruik van JQuery of JQueryUI. WordPress komt standaard met JQuery en die hoeft niet geregistreerd te worden.
Je kunt JQuery gelijk in de wachtrij plaatsen . Dat gaan we nu doen. Belangrijk is dat JQuery voor alle andere scripts aangeroepen wordt. Voeg het volgende toe aan enqueue.php:
enqueue.php
<?php
function wg_enqueue(){
wp_register_style( 'wg_bootstrap', 'https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css' );
wp_enqueue_style( 'wg_bootstrap' );
wp_register_script( 'wg_bootstrap_script', 'https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js', [], false, true );
wp_enqueue_script( 'jquery' );
wp_enqueue_script( 'wg_bootstrap_script' );
}
Top! We hebben nu ook een footer toegevoegd aan ons thema. Hiermee zorgen we er voor dat de scripts in ons thema geladen worden. Het wordt tijd dat we content gaan plaatsen! Kun je niet wachten? Lees dan snel WP Themedevelopment (7): Dummy content
