Javascript toevoegen aan WordPress-site - 7 stapsgewijze methoden

Er zijn doorgaans veel redenen waarom je Javascript aan WordPress wilt toevoegen, of het nu gaat om een ​​kleine aanpassing aan een functie of om een ​​script van een derde partij. Wat de reden ook is, je wilt er zeker van zijn dat je het niet verkeerd doet, want anders zou je website kapot kunnen gaan of een prestatiebottleneck kunnen creëren.

Het is niet mogelijk om Javascript rechtstreeks aan WordPress-pagina's en -berichten toe te voegen. Daarom stellen we een aantal verschillende manieren voor om Javascript-code aan websites toe te voegen. Ook bespreken we welke manieren u het beste kunt gebruiken in de verschillende omstandigheden. 

Als u haast heeft, kunt u via de onderstaande inhoudsopgave naar het relevante onderdeel van het artikel scrollen.

 

Dit artikel bevat wijzigingen in de WordPress-code. Als je niet zeker weet of je de code zelf kunt aanpassen, kun je het beste... Leer hoe u de beste WordPress-ontwikkelaar voor uw bedrijf kunt vinden of bekijk de volgende goedkope ontwikkelingsopties. 

Als je niet zeker weet of dit iets voor jou is en wat je snel gedaan moet krijgen, bekijk dan een paar Fiverr-klussen die dit snel voor je kunnen doen.

Klik hier om goedkope experts te vinden voor WordPress-reparaties

Wat is JavaScript?

Als u dit bericht leest, weet u waarschijnlijk al wat JavaScript is.

Om het voor iedereen toegankelijk te houden, leggen we kort uit wat JavaScript is en wat het doet. Je kunt dit deel gerust overslaan als je het al weet.

JavaScript is een programmeertaal die in een browser draait. Het kan worden aangeroepen vanaf de webserver, maar draait in de browser van de bezoeker.

Dit biedt heel veel mogelijkheden om leuke dingen te doen, zoals het insluiten van video's en het toevoegen van functies.

U kunt bijvoorbeeld JavaScript gebruiken om een ​​videospeler in te sluiten, zodat uw webserver dit niet hoeft te doen.

Hiermee wordt de gebruikerservaring verbeterd door video toe te voegen, zonder dat uw webserver belast wordt met het afspelen van de video.

JavaScript wordt ook gebruikt in mobiele apps, games, servertoepassingen, front-endontwikkeling en, meer recent, in AI-gerelateerde ontwikkeling.

Kun je JavaScript gebruiken in WordPress?

Ja, je kunt JavaScript gebruiken in WordPress. Gezien de inherente flexibiliteit van het CMS kun je JavaScript gebruiken om interactieve elementen toe te voegen of API's van derden op een pagina te plaatsen.

Er zijn veel verschillende toepassingen voor JavaScript, maar omdat JavaScript door de browser van de gebruiker wordt uitgevoerd, kan het veel doen zonder uw webserver te vertragen.

Je kunt op verschillende manieren script toevoegen, zoals we later zullen bespreken.

Voordat u wijzigingen in bestanden aanbrengt, raden wij u aan eerst een child-thema te maken en/of een back-up van uw website te maken.

Je kunt niet voorzichtig genoeg zijn!

Hoe u JavaScript aan WordPress toevoegt

Er zijn verschillende manieren om aangepaste Javascript-code aan uw WordPress-site toe te voegen, elk met zijn eigen toepassing:

1. Voeg een script toe aan geselecteerde pagina's met behulp van een plug-in zoals WPCode
2. Voeg het script toe aan een specifieke of enkele pagina van uw keuze, of aan meerdere pagina's met behulp van functies.php
3. Voeg JavaScript toe aan alle pagina's
4. Voeg een Javascript-bestand toe aan de header van uw thema
5. De wp_head-hook gebruiken om aangepaste JavaScript toe te voegen
6. Voeg JavaScript toe aan uw WordPress-voettekst
7. JavaScript toevoegen aan WordPress Video
8. JavaScript toevoegen aan een WordPress-widget

Laten we deze methoden eens nader bekijken.

Vervolgens leggen we kort uit hoe je JavaScript kunt debuggen nadat je het aan een pagina hebt toegevoegd.

Note: Sommige van deze technieken vereisen het aanbrengen van wijzigingen in kernbestanden. Hoewel het meestal geen goed idee is om functies.php en andere kernbestanden van WordPress te wijzigen, willen we je alle manieren laten zien om code toe te voegen.

Wij raden niet per se aan om op deze manier wijzigingen aan te brengen, maar wij vinden het belangrijk dat u alle informatie krijgt en dat u vervolgens zelf een beslissing kunt nemen.

1. Gebruik een plugin zoals WPCode

Als u simpelweg een plugin wilt gebruiken om een ​​javascript-verwijzing in het header- of footerbestand van het WordPress-thema in te sluiten, is de WPCode-plugin een eenvoudige en gratis optie.

Wij adviseren om voor alle codewijzigingen een plug-in te gebruiken. Zo blijft alles overzichtelijk en voorkom je dat er later problemen ontstaan.

In plaats van dat u de bestanden van het thema rechtstreeks met de aangepaste Javascript-code aanpast, kunt u met een plug-in de code invoegen. Deze code wordt vervolgens toegevoegd aan de kop- of voettekst van uw site, afhankelijk van de opties die u hebt gekozen. 

Deze plugin ondersteunt verschillende opties. We beschrijven hier alleen de opties die u het meest nodig hebt.

Je kunt WPCode downloaden hier of installeer het via de Plugins-Installeren-functie van WordPress.

Installeer de WPCode-plugin:

• Meld u aan bij de backend of het beheer van uw site.
• Ga naar Plugins > Voeg nieuwe
• Zoek naar de plugin "WPCode" en klik op Installeer nu.
• Zodra het is geïnstalleerd, klikt u op Activeren

 

U kunt nu een aangepast script laden zonder bestand (bijvoorbeeld om een ​​script toe te voegen dat u hebt gekregen, zoals Google Analytics) of een aangepast Javascript-bestand uploaden. 

De meest voorkomende optie die u met deze plugin kunt gebruiken, is de optie om de code rechtstreeks aan WordPress toe te voegen.

Dit kan worden gebruikt wanneer u een dienst van derden gebruikt, zoals Google Analytics, Drip of een andere tool waarvoor een script aan uw site moet worden toegevoegd. Neem het script en plaats het in de Globale kop- en voettekst venster.

U kunt ervoor kiezen om het script toe te voegen aan de koptekst, hoofdtekst of voettekst. Vraag de leverancier van het script om advies over welke van deze secties u moet toevoegen.

Stel dat u het aan de header wilt toevoegen:

Klik Wijzigingen opslaan af te maken.

De WPCode-plugin voegt nu de code toe aan elke pagina van uw website.

Laad de front-end opnieuw en controleer de broncode van je website om er zeker van te zijn dat de code nu wordt weergegeven. Het is ook verstandig om een ​​paar pagina's te bekijken om te controleren of alles nog steeds goed werkt.

Met WPCode kunt u ook uw eigen codefragmenten maken.

U kunt codefragmenten ook overal op uw website invoegen, bijvoorbeeld in berichten of pagina's, voor of na een bericht, voor of na inhoud of op een van de vele andere manieren die u nodig hebt.

Navigeer gewoon naar code Snippets > Fragment toevoegen en selecteer vervolgens Creeër je eigen ontwerp.

U wordt nu naar een Aangepast fragment maken pagina waar u uw code een titel kunt geven en deze in de Codevoorbeeld doos.

Vervolgens van de Code Type dropdown menu, kies JavaScript-fragment.

Scroll dan gewoon naar beneden totdat u bij de Invoeging gebied.

Het enige dat nu nog rest is het kiezen van een locatie voor de code uit het dropdownmenu. Pagina, bericht, aangepast berichttype en geef aan waar u de code op de pagina of in het bericht wilt weergeven.

Als u wilt dat WPCode het fragment voor of na een alinea plaatst, kunt u opgeven voor welke alinea in het bericht het fragment moet verschijnen.

Als u bijvoorbeeld 1 invoert in het veld 'Nummer invoegen', verschijnt het codefragment vóór of na de eerste alinea. Voor de tweede alinea gebruikt u 2, enzovoort.

Daarna hoeft u alleen maar de schakelaar bovenaan het scherm om te zetten Actiefen klik vervolgens op de Sla fragment op optie ernaast.

Dat is alles wat nodig is om JavaScript aan WordPress toe te voegen!

Het belangrijkste voordeel van een plugin is dat het een beginnersvriendelijke optie is. Je hoeft je geen zorgen te maken over het bewerken van de bestanden van je thema. De WPCode plugin kan ook handig zijn als je op zoek bent naar een naadloze manier om andere soorten code en aangepaste CSS toe te voegen.

Het nadeel van deze methode is echter dat er een plug-in van derden moet worden geïnstalleerd. Sommige website-eigenaren vermijden dit echter.

Als u het aantal extensions tot een minimum wilt beperken, kunt u beter een van de andere methoden gebruiken.  

Ook al lijkt dit vrij eenvoudig, het kan buiten je comfortzone liggen. Als je dit snel wilt doen, bekijk dan een aantal ontwikkelaars op Fiverr die dit voor u kan doen.

Klik hier om goedkope experts te vinden voor WordPress-reparaties

 

2. Voeg JavaScript toe aan een specifieke WordPress-pagina of -bericht

Deze code-aanpassing zal de functies bestand dat u in uw sjabloonmap vindt, kunt u een .JS-bestand van uw keuze toevoegen aan één enkele pagina van uw keuze.

Dit maakt gebruik van de IS_PAGINA functie die je kunt vinden hier: 

U kunt verschillende andere opties gebruiken als u het script alleen onder specifieke omstandigheden wilt toevoegen, zoals:

• is_single(),
• is_front_page(),
• is_home,
• is_admin enz. 

Als u het bestand aan alle pagina's wilt toevoegen, scroll dan verder om hieronder alternatieven voor deze methode te vinden.

• Eerst moet u de ID van de pagina identificeren waaraan u het script wilt toevoegen.
• Dit doe je door naar de pagina te gaan waaraan je het bestand wilt toevoegen, en te klikken Edit en haal vervolgens de ID van de pagina uit de URL, zoals u hieronder kunt zien. De ID is het nummer in de URL van de browserbalk.

• Nu je de ID van de pagina hebt, moet je het .js-bestand uploaden naar een locatie. We raden je aan het .js-bestand te uploaden naar je templatemap, bijvoorbeeld in de onderliggende map.
• Zodra je dat hebt geüpload, moet je de exacte map en de naam van het .JS-bestand noteren. Deze gebruiken we hieronder in plaats van PATH_TO_JS_FILE. Je bestand zou bijvoorbeeld in de map kunnen staan: https://www.yourwebsite.com/wp-content/themes/twentynineteen/js/myjsfile.js
• Noteer de volledige URL en vervang het PATH_T_JS_FILE hieronder. Je moet ook de ID vervangen die je hierboven hebt gevonden.
• Voeg de volledige code hieronder toe aan het einde van de functies bestand van uw sjabloon.

functie collectiveray_laad_js_script() {
  als(is_pagina(ID)) {
    wp_enqueue_script('js-bestand', 'PAD_NAAR_JS_BESTAND', array('jquery'), '', false);
    //of gebruik de onderstaande versie als u precies weet waar het bestand zich bevindt
    //wp_enqueue_script( 'js-bestand', get_template_directory_uri() . '/js/myscript.js');
  }
}

voeg_actie('wp_enqueue_scripts', 'collectiveray_laad_js_script');

Als u precies weet waar u het JS-bestand hebt geplaatst, kunt u een kleine variatie op het wp_enqueue_script gebruiken: 

wp_enqueue_script( 'js-bestand', get_template_directory_uri() . '/js/myscript.js');

In dit geval is het bestand /js/myscript.js de locatie van het bestand dat u wilt toevoegen.

Zodra je de pagina opnieuw laadt, zie je dat het bestand is toegevoegd. Je kunt dit controleren door op 'Bron weergeven' van de pagina te klikken.

Als u het Javascript-bestand niet aan een pagina wilt toevoegen, maar aan één pagina, kunnen we deze functie licht aanpassen om het op één bericht toe te passen. U kunt elke gewenste variant van het volgende gebruiken:

• is_single( '17' ) - gebruikt de post-ID
• is_single( 'Mijn berichttitel' ) - gebruikt de titel van het bericht om te controleren of dit het bericht is waaraan het bestand moet worden toegevoegd
• is_single( 'mijn-bericht-titel' ) - controleert op de slug van de post
• is_single( array( 17, 'my-post-title', 'Mijn berichttitel' ) ) - hiermee wordt gecontroleerd of een van de voorwaarden is: post-ID is "17", slug is "my-post-title" of titel is "My Post Title"
• is_single() - andere variaties van de is_single-functie waarbij een reeks waarden wordt gebruikt om te controleren

De code zou er in dit geval als volgt uitzien of een kleine variatie zijn, afhankelijk van de parameters van de functie is_single. 

functie collectiveray_laad_js_script() {
  als(is_single('17')) {
    wp_enqueue_script('js-bestand', 'PAD_NAAR_JS_BESTAND', array('jquery'), '', false);
    //of gebruik de onderstaande versie als u precies weet waar het bestand zich bevindt
    //wp_enqueue_script( 'js-bestand', get_template_directory_uri() . '/js/myscript.js');
  } 
}

voeg_actie('wp_enqueue_scripts', 'collectiveray_laad_js_script');

Als je de titel van het bericht hebt, kun je dit gebruiken in plaats van parameter "17". Ook hier kan wp_enqueue_script aangepast worden naar:

wp_enqueue_script( 'js-bestand', get_template_directory_uri() . '/js/myscript.js');

3. Voeg JavaScript toe aan alle pagina's

Zoals we hebben gezien, is de gemakkelijkste en schoonste methode om een ​​javascriptbestand aan uw WordPress-thema toe te voegen, door functions.php bestand met wp_enqueue_script.

In dit geval gaan we een algemene functie toevoegen in plaats van een voorwaarde te creëren om de inhoud aan specifieke pagina's toe te voegen.

Hier is hoe het te doen:

Open je functions.php bestand en kopieer het onderstaande codefragment ernaartoe. Zorg ervoor dat u de sjabloon-URL vervangt door die van uzelf voordat u het bestand opslaat.

functie collectiveray_thema_scripts_functie() {
  wp_enqueue_script( 'js-bestand', get_template_directory_uri() . '/js/myscript.js');
}
voeg_actie('wp_enqueue_scripts',' toecollectiveray_thema_scripts_functie');

Als je een onderliggend thema gebruiken, moet u get_stylesheet_directory_uri() gebruiken in plaats van get_template_directory_uri() 

Met deze methode hoeft u geen extra plugin te installeren als u uw functies.php-bestand bewerkt. Deze methode kan ook worden gebruikt om functies en functionaliteit toe te voegen aan zowel uw thema als WordPress zelf. Zo kunt u bijvoorbeeld JavaScript installeren in één bericht, pagina of op alle pagina's.

Het grootste nadeel van deze strategie is dat je code moet aanpassen en de bestanden van je website moet bijwerken. Als je geen ervaring hebt op dit gebied, is dit misschien niet de ideale optie.

Klik hier om goedkope experts te vinden voor WordPress-reparaties

4. Voeg JavaScript toe aan uw themaheader

In bepaalde gevallen wilt u wellicht dat het JavaScript-bestand op uw hele site wordt gebruikt, maar wilt u hiervoor geen plug-in gebruiken.

Als u bijvoorbeeld een script van een derde partij aan al uw pagina's wilt toevoegen (bijvoorbeeld het script instantpage.js om uw website sneller te maken), kunt u het script invoegen of het scriptbestand waarnaar wordt verwezen, toevoegen in de head van jouw header.php sjabloonbestand. 

DIT IS NIET IDEAALAls je je thema bijwerkt, kunnen deze wijzigingen verloren gaan. Als je dit toch direct wilt doen, is het sterk aan te raden een child-thema aan te maken.

Voor dit scenario, waarbij u wilt dat dit script overal wordt toegevoegd, kunt u het bestand rechtstreeks aan de sjabloon toevoegen volgens de onderstaande instructies:

Deze aanroep van het bestand (of script) moet worden toegevoegd tussen de metatags en de link naar het stijlblad. Dit is precies hetzelfde als wanneer u Javascript-code toevoegt aan een HTML-pagina. 

Om het Javascript-bestand aan uw site toe te voegen, klikt u op de knop head, gebruik je de volgende code:

Zorg ervoor dat u de type Correct, anders is je site ongeldig. Zorg er ook voor dat de map /scripts in het thema bestaat en dat je myscript.js eraan hebt toegevoegd.

Vervolgens kunt u in de HTML-code op de plek waar u deze wilt gebruiken, een verwijzing opnemen naar functies die in het zojuist toegevoegde bestand worden gebruikt. 

Dit is een voorbeeld van hoe de functie die u zojuist hebt toegevoegd, wordt gebruikt.

" >Kop komt hier

4. De wp_head-hook gebruiken om aangepaste JavaScript toe te voegen

U kunt ook aangepaste JavaScript toevoegen aan uw header met behulp van de wp_hoofd actie-hook. Ook deze oplossing verdient niet de voorkeur omdat het een overmatig aantal scripts genereert. Het is echter wel beter dan het handmatig invoegen van de scripts in je header.php-bestand.

Deze methode, die ook voor de voettekst kan worden gebruikt, maakt gebruik van de actiehook(s) om inline scripts in uw site in te voegen. In tegenstelling tot de wp enqueue scriptfunctie, die aangepaste scripts in de wachtrij plaatst, print de wp head-methode de scripts in uw headersjabloon (en voettekst, als u de wp_footer haak).

Om te beginnen navigeert u naar het bestand 'functions.php' en kopieert en plakt u de volgende code:

functie collectiver_custom_javascript() { ?>

<?php } add_action('wp_head', 'collective_custom_javascript');

Het is belangrijk om te weten dat de wp head-hook alleen werkt aan de voorkant van je website. Dit betekent dat aangepaste JavaScript die via deze aanpak wordt toegevoegd, niet in de admin- of login-omgevingen verschijnt. Als je echter JavaScript aan deze locaties wilt toevoegen, kun je dit doen met behulp van de admin head- en login head-actionhooks.

Ontwikkelaars zijn enthousiast over de wp enqueue scriptfunctie omdat deze conflicten voorkomt die kunnen optreden met andere oplossingen, zoals het rechtstreeks toevoegen van scripts aan je header.php-bestand. Bovendien genereert deze oplossing geen afhankelijke scripts.

Het grootste probleem met het toevoegen van aangepaste WordPress JavaScript aan de header van je site is dat het andere plugins kan hinderen die hun eigen scripts laden. Deze configuratie kan er ook voor zorgen dat meerdere scripts meerdere keren worden geladen, wat de algehele snelheid en prestaties van je website kan vertragen.

5. Voeg JavaScript toe aan uw WordPress-voettekst

Het toevoegen van JavaScript aan je WordPress-footer is relatief eenvoudig. Je kunt code toevoegen aan het header- of footerbestand, een aangepast code-element gebruiken in je paginabuilder of thema, of een specifieke header- en footer-plugin gebruiken.

Omdat u geen JavaScript aan uw header.php- of footer.php-bestanden moet toevoegen, gebruiken we een plug-in.

Ik beveel het aan WPCode – Kopteksten en voetteksten invoegen + aangepaste codefragmenten plugin.

Selecteren Instellingen en Insert Headers en Footers menu.

Plak vervolgens uw JavaScript-code in de voettekst van de pagina.

Sla uw wijzigingen op wanneer u klaar bent.

6. JavaScript toevoegen aan WordPress Video

hood.discount is zo uitbreidbaar dat je eenvoudig nieuwe functies en functionaliteiten aan je website kunt toevoegen zonder dat je je hele thema hoeft te herontwerpen of te vervangen. In plaats van het WordPress-thema helemaal opnieuw te maken, kun je de functionaliteit toevoegen door simpelweg plugins toe te voegen.

En als de functionaliteit die u wilt toevoegen nogal klein is en er geen behoefte is om een ​​plug-in te maken of te installeren, kunt u de functions.php-bestand of verschillende andere manieren om Javascript aan WordPress toe te voegen zonder dat u een aparte plug-in hoeft te maken.

Het beste ding over de functiesbestand is dat het werkt als een plugin, die gebruikt kan worden om functies toe te voegen en de functionaliteit van zowel het thema als WordPress zelf uit te breiden.

Hoewel je gemakkelijk kunt toevoegen Javascript-code rechtstreeks naar uw header.php-bestand, maar er is een probleem met deze methode.

Het kan zelfs conflicten veroorzaken met andere plugins wanneer ze hun eigen JS-scripts laden.

In dit artikel door CollectiveRayWe bekijken de juiste manier om JavaScript toe te voegen aan WordPress-thema's. Als WordPress-ontwikkelaars is dit een van de dingen die we vaak zullen moeten doen.

(Speciale opmerking: Bent u op zoek naar een lijst met tweaks/trucs die u eenvoudig op uw WordPress-site kunt toepassen zonder een plugin te gebruiken? Raadpleeg dan onze gids hier: 101 WordPress-trucs die elke serieuze blogger moet kennen.)

7. JavaScript toevoegen aan een WordPress-widget

Als u JavaScript aan een WordPress-widget wilt toevoegen, is dat heel eenvoudig.

Voeg een widget toe, selecteer het menu en selecteer Bewerken als HTML.

Voeg uw JavaScript toe binnen tags and select bijwerken.

De code die u hebt toegevoegd, zou direct zichtbaar moeten zijn wanneer u de widget op de voorkant van uw site bekijkt.

Hoe u een JavaScript-fout op een WordPress-pagina kunt debuggen

Het debuggen van JavaScript is een tijdrovend proces, maar voor beginners is het onvermijdelijk.

Gelukkig beschikt u over de hulpmiddelen waarmee u op fouten kunt controleren.

Open een pagina in je browser en druk op F12 of selecteer Developer Tools in het menu (Chrome). Je kunt ook Ctrl + Shift + J (Windows/Linux) of Cmd + Option + J (Mac) gebruiken.

Selecteer het troosten tabblad van het nieuwe gedeelte van het scherm dat wordt geopend. Eventuele JavaScript-fouten worden rood gemarkeerd.

Bepaal waar de fout vandaan komt en corrigeer het relevante deel van de JavaScript die u hebt toegevoegd.

Ga door totdat alle fouten zijn opgelost.

WordPress heeft een eigen debugmodus, maar die kan wat ingewikkeld zijn in gebruik. Ik raad aan om de officiële debugpagina voor meer informatie.

Veelgestelde vragen over het toevoegen van Javascript aan WordPress

Wat is Javascript?

JavaScript is een computertaal die in de browser van de gebruiker wordt uitgevoerd in plaats van op uw server. Client-side programmeren stelt ontwikkelaars in staat om allerlei interessante dingen te bereiken zonder uw website te vertragen. U wordt mogelijk vaak gevraagd om een ​​JavaScript-codefragment te kopiëren en te plakken in uw WordPress-website als u een videospeler, rekenmachines of een andere dienst van derden wilt toevoegen.

Hoe voeg ik een Javascript-bestand toe aan WordPress?

Kan ik Javascript gebruiken in WordPress?

Ja, er zijn veel manieren om Javascript in WordPress te gebruiken. Als je een eenvoudig script wilt toevoegen, kun je de plugin Insert WPCode gebruiken om het script aan de header toe te voegen en het vervolgens aan te roepen vanuit het thema, het bericht of de plugin waar je het wilt gebruiken.

Hoe voeg ik mijn eigen code toe aan WordPress?

De beste manier om je eigen code aan WordPress toe te voegen is via het bestand 'functions.php'. Het is aan te raden om een ​​'child theme' aan te maken en vervolgens je eigen wijzigingen aan te brengen in het child theme, zodat de upgradebaarheid van je theme niet wordt verstoord.

Hoe bewerk ik Javascript in WordPress?

De beste manier om Javascript in WordPress te bewerken is door een child theme aan te maken en vervolgens je Javascript-bewerkingen of andere functies aan het child theme toe te voegen. Zo kun je Javascript naar behoefte bewerken zonder de rest van je thema of de upgrademogelijkheden ervan te verstoren.

Conclusie

De bovenstaande drie methoden zijn de meest overzichtelijke manier om Javascript aan WordPress toe te voegen. Over het algemeen is het aanpassen van de code het beste voor gevorderde gebruikers met aanzienlijke code-ervaring die weten hoe ze wijzigingen ongedaan kunnen maken. Anders is het beter om plug-ins te gebruiken. Als je je niet op je gemak voelt bij het zelf aanpassen van de code, kun je het beste contact opnemen met onze partners op Fiverr die het vandaag nog voor je kunnen doen.

Klik hier om goedkope experts te vinden voor WordPress-reparaties