Javascript (bestanden of scripts) toevoegen zonder uw WordPress-site te breken (functions.php, sjabloon of plug-in)

Er zijn meestal veel redenen waarom u Javascript aan WordPress wilt toevoegen, ofwel een kleine aanpassing aan een functie of misschien wilt u een script van een derde partij toevoegen. Groetless van de reden waarom u het wilt doen, wilt u ervoor zorgen dat u het niet verkeerd doet - omdat u uw website zou kunnen verpesten.

Er is een goede manier om Javascript aan WordPress toe te voegen. En dan zijn er nog de slechte manieren, die ofwel uw website kapot kunnen maken of een negatieve invloed kunnen hebben op de prestaties.

In dit artikel zullen we een aantal verschillende manieren voorstellen om Javascript-code aan websites toe te voegen en welke je moet gebruiken in de verschillende omstandigheden die je kunt tegenkomen.

WordPress is zo uitbreidbaar dat u eenvoudig nieuwe functies en functionaliteiten aan uw website kunt toevoegen zonder dat u uw hele thema opnieuw hoeft te ontwerpen of vervangen. In plaats van het WordPress-thema helemaal opnieuw te maken, kunt u de functionaliteit toevoegen door eenvoudig plug-ins toe te voegen.

En als de functionaliteit die u wilt toevoegen nogal klein is en het niet nodig 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 een aparte plug-in te hoeven maken.

(Speciale opmerking: Ben je op zoek naar een lijst met tweaks/trucs die je gemakkelijk op je WordPress-site kunt maken zonder een plug-in te gebruiken? U kunt onze gids hier raadplegen: 101 WordPress-trucs die elke serieuze blogger moet kennen.)

Het beste ding over de functies bestand is dat het werkt als een plug-in, die kan worden gebruikt 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, is er een probleem met deze methode.

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

In dit artikel door CollectiveRay, kijken we naar de juiste manier om javascript toe te voegen aan WordPress-thema's. Als WordPress-ontwikkelaars is dit een van de dingen die we heel vaak zullen moeten doen.

Als je er niet zeker van bent om de code zelf aan te passen, wil je misschien dit artikel bekijken om te leren hoe je de beste WordPress-ontwikkelaar voor je bedrijf kunt werven: https://www.collectiveray.com/wordpress-developers-for-hire, of bekijk de volgende goedkope ontwikkelingsopties. 

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

Klik hier om goedkope experts te vinden over WordPress-oplossingen

JavaScript toevoegen aan WordPress

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

1. Voeg het script toe aan een specifieke of enkele pagina naar keuze, of meerdere pagina's met functions.php
2. Voeg een script toe aan geselecteerde pagina's met behulp van plug-ins zoals kop- en voetteksten
3. Voeg een Javascript-bestand toe aan uw themakop

1. Functions.php gebruiken

Enkele pagina of bericht

Deze code tweak gebruikt de functies bestand gevonden in uw sjabloonmap om een ​​.JS-bestand van uw eigen keuze toe te voegen aan een enkele pagina van uw eigen keuze.

Dit maakt gebruik van de IS_PAGE-functie die u hier kunt vinden: https://developer.wordpress.org/themes/basics/conditional-tags/. U kunt verschillende andere opties gebruiken als u het script alleen in specifieke omstandigheden wilt toevoegen, zoals:

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

Als je liever een video op YouTube bekijkt over hoe je dit moet doen, dan is deze korte video best een goede, over hoe je Javascript aan een enkele pagina kunt toevoegen:

We hebben gedetailleerde instructies op de pagina, dus als je de video eenmaal hebt gezien, kun je dit artikel als referentie gebruiken.

Als u het bestand aan alle pagina's moet toevoegen, blijf dan scrollen om andere alternatieven voor deze methode hieronder te vinden.

• Eerst moet u de ID identificeren van de pagina waaraan u het script wilt toevoegen. Dit doe je door naar de pagina te gaan waaraan je het bestand wilt toevoegen, klik op Edit en haal vervolgens de ID van de pagina op van de URL, zoals u hieronder kunt zien. De ID is het nummer dat wordt gevonden 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 u aan het .js-bestand te uploaden naar uw sjabloonmap, misschien in de onderliggende map.
• Als je dat eenmaal hebt geüpload, moet je precies de map en de naam van het .JS-bestand noteren, dat we gebruiken in plaats van PATH_TO_JS_FILE hieronder. Uw bestand kan zich bijvoorbeeld bevinden in: https://www.yourwebsite.com/wp-content/themes/twentynineteen/js/myjsfile.js
• Noteer die volledige URL volledig en vervang het PATH_T_JS_FILE hieronder. U moet ook de ID vervangen die u hierboven hebt gevonden.
• Voeg de volledige code hieronder toe aan het einde van de functies bestand van uw sjabloon.

functie collectiveray_load_js_script() {
  if( is_page(ID) ) {
    wp_enqueue_script('js-file', 'PATH_TO_JS_FILE', array('jQuery'), '', false);
    //of gebruik de onderstaande versie als je precies weet waar het bestand zich bevindt
    //wp_enqueue_script( 'js-file', get_template_directory_uri() . '/js/myscript.js');
  }
}

add_action('wp_enqueue_scripts', 'collectiveray_load_js_script');

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

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

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

Zodra u de pagina opnieuw laadt, zult u zien dat het bestand is toegevoegd. U kunt dit bevestigen door op Bron van de pagina te klikken.

Als je in plaats van het Javascript-bestand aan een pagina toe te voegen, het aan een enkele pagina wilt toevoegen, kunnen we een kleine aanpassing van deze functie gebruiken, zodat het van toepassing is op een enkele post. U kunt elke variatie 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-post-titel') - controleert tegen de slak van de post
• is_single( array( 17, 'mijn-post-titel', 'Mijn berichttitel')) - dit controleert of een van de voorwaarden post-ID "17", slug is "my-post-title", of titel "My Post Title" is
• is alleenstaand() - andere variaties van de functie is_single met behulp van een reeks waarden om tegen te controleren

De code zou in dit geval de volgende zijn of een kleine variatie, afhankelijk van de parameters van de functie is_single. 

functie collectiveray_load_js_script() {
  if( is_single('17') ) {
    wp_enqueue_script('js-file', 'PATH_TO_JS_FILE', array('jQuery'), '', false);
    //of gebruik de onderstaande versie als je precies weet waar het bestand zich bevindt
    //wp_enqueue_script( 'js-file', get_template_directory_uri() . '/js/myscript.js');
  } 
}

add_action('wp_enqueue_scripts', 'collectiveray_load_js_script');

Als je de titel van het bericht hebt, kun je deze gebruiken in plaats van de parameter "17". Nogmaals, het wp_enqueue_script kan ook worden aangepast om:

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

Javascript toevoegen aan alle pagina's 

Zoals we hebben gezien, is de eenvoudigste en schoonste methode om een ​​javascript-bestand aan uw WordPress-thema toe te voegen, het gebruik van functions.php bestand met wp_enqueue_script. In dit geval gaan we, in plaats van een voorwaarde te creëren om de inhoud aan specifieke pagina's toe te voegen, een generieke functie toevoegen.

Hier is hoe het te doen:

Open je functions.php bestand en kopieer het onderstaande codefragment ernaar. Zorg ervoor dat u de sjabloon-URL vervangt door de uwe voordat u opslaat.

functie collectiveray_theme_scripts_function() {
  wp_enqueue_script( 'js-file', get_template_directory_uri() . '/js/myscript.js');
}
add_action('wp_enqueue_scripts','collectiveray_theme_scripts_function');

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

2. Plugins gebruiken

Als je gewoon een plug-in wilt gebruiken voor het insluiten van een javascript-verwijzing naar het kop- of voettekstbestand van het WordPress-thema, dan is de plug-in 'Insert Headers and Footers' een gemakkelijke optie.

Zoals de naam al zegt, kun je scripts toevoegen aan de kop- en voettekstbestanden door in te haken in wp_head als wp_footer functies van WordPress. 

Deze plug-in is een goede optie omdat je hiermee elk script kunt toevoegen zonder het risico te lopen dingen kapot te maken. Bovendien hoef je zelf geen code te wijzigen of aan te passen (als je dat niet prettig vindt), zoals we in het vorige voorbeeld moesten doen.

Het rechtstreeks wijzigen van code is doorgaans een betere optie voor webontwerpers. De methode om deze plug-in te gebruiken is eenvoudiger.

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

Deze plug-in ondersteunt twee opties:

1. Het pad toevoegen aan een specifiek Javascript-bestand dat u uploadt
2. Het script rechtstreeks toevoegen (bijvoorbeeld voor Analytics of andere scripts van derden)

Laten we beginnen: 

Je kunt download Kop- en voetteksten invoegen hier

Installeer de plug-in:

• Log in op de backend of beheerder van uw site.
• Ga naar Plug-ins > Nieuwe toevoegen
• Zoek naar de plug-in "Headers and Footers" en klik op Nu installeren.
• Zodra het is geïnstalleerd, klikt u op Activeren

Optie 1: Upload een aangepast Javascript-bestand

• Eerst moet u het bestand voorbereiden voor opname
• Sla uw JavaScript-code of bestand op in een nieuw testbestand met de . Js verlenging.
• Upload het naar uw site naar de volgende map: wp-content/themes/ /js/
• Ga naar Instellingen > Kop- en voetteksten invoegen.

We hebben nu een aantal keuzes om ons bestand te laden:

1. Scripts in header (binnen laden) label)
2. Scripts in voettekst (laden voor sluiten label)

Gebruik de locatie die het beste past bij uw specifieke behoeften en gebruik het volgende als voorbeeld. Let daar op moet worden gewijzigd in de naam van de map van het thema dat u gebruikt, bijv. Twentytwenty

/js/file.js">

• Klik op de knop "Opslaan" om te voltooien en op te slaan.

Optie 2: Aangepast script laden zonder bestand

De 2e optie die u met deze plug-in kunt gebruiken, is de optie om de code rechtstreeks in WordPress toe te voegen zonder dat u een specifiek bestand hoeft te gebruiken.

Dit kan worden gebruikt wanneer u een service van derden gebruikt, zoals Google Analytics, Drip of een andere tool waarvoor een script aan uw site moet worden toegevoegd. Neem gewoon het script en plaats het in de Scripts in koptekst venster:

Laad de front-end opnieuw en controleer de bron van uw website om er zeker van te zijn dat de code nu wordt weergegeven. Het is ook een goed idee om een ​​paar pagina's door te bladeren om te controleren of alles nog goed werkt.

Hoewel dit vrij eenvoudig lijkt, is het misschien buiten je comfortzone, dus als je dit snel voor elkaar wilt krijgen, bekijk dan enkele ontwikkelaars op Fiverr die dit voor je kunnen doen.

Klik hier om goedkope experts te vinden over WordPress-oplossingen

Als je deze tip nuttig vond, wil je misschien meer van onze WordPress-tips bekijken in het relevante menu bovenaan de pagina.

3. JavaScript toevoegen aan uw themakoptekst

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

Als u bijvoorbeeld een script van derden aan al uw pagina's wilt toevoegen (bijv. het instantpage.js-script om uw website sneller te maken), kunt u het script invoegen, of het scriptbestand waarnaar wordt verwezen zelf, in de head van uw header.php sjabloon bestand. 

DIT IS NIET IDEAAL. Als u uw thema bijwerkt, kunt u deze wijzigingen kwijtraken. Als je dit toch direct wilt doen, is het ten zeerste aan te raden om 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 naar het bestand (of script) moet worden toegevoegd tussen de metatags en de stylesheetlink. Dit is precies hetzelfde als wanneer u Javascript-code zou toevoegen aan een HTML-pagina. 

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

Zorg ervoor dat u de . hebt gedefinieerd type correct, anders is uw site niet geldig. Zorg er ook voor dat de directory /scripts in het thema bestaat en dat je de myscript.js eraan hebt toegevoegd.

U kunt vervolgens elke verwijzing naar functies die worden gebruikt in het bestand dat u zojuist hebt toegevoegd, toevoegen aan de HTML waar u het moet gebruiken. 

Dit is bijvoorbeeld een voorbeeld van het gebruik van de functie die u zojuist hebt toegevoegd.

" >Kop gaat hier

Veelgestelde Vragen

Hoe voeg ik een Javascript-bestand toe aan WordPress?

Kan ik Javascript gebruiken in WordPress?

Ja, er zijn veel manieren om Javascript te gebruiken in WordPress. Als u een eenvoudig script wilt toevoegen, kunt u de plug-in Kopteksten en voetteksten invoegen gebruiken om het script aan de koptekst toe te voegen en vervolgens het script aanroepen vanuit welk deel van het thema, de post of de plug-in dan ook waarvan u het wilt gebruiken.

Hoe voeg ik mijn eigen code toe aan WordPress?

De beste manier om uw eigen code aan WordPress toe te voegen, is via het bestand Functions.php. Het wordt aanbevolen dat u een child-thema maakt en vervolgens uw eigen wijzigingen aan het child-thema toevoegt, zodat u de upgradebaarheid van uw thema niet verbreekt.

Hoe bewerk ik Javascript in WordPress?

De beste manier om Javascript in WordPress te bewerken, is door een child-thema te maken en vervolgens uw bewerkingen van Javascript of aanpassing van andere functies in het child-thema toe te voegen. Hiermee kunt u Javascript naar behoefte bewerken zonder de rest van uw thema of de upgradebaarheid van het thema te verbreken.

Conclusie

De bovenstaande drie methoden zijn de schoonste manier om Javascript aan WordPress toe te voegen. Over het algemeen moet het rechtstreeks aanpassen van de code worden gedaan door geavanceerde gebruikers die aanzienlijke code-ervaring hebben en er zeker van kunnen zijn dat ze weten hoe ze eventuele wijzigingen ongedaan kunnen maken. Anders is het het beste om bij plug-ins te blijven. Als je het niet prettig vindt om de code zelf aan te passen, zou het geweldig zijn om contact op te nemen met onze partners op Fiverr die het vandaag voor je kunnen doen

Klik hier om goedkope experts te vinden over WordPress-oplossingen

Over de auteur

Auteur: David AttardWebsite: https://www.linkedin.com/in/dattard/

David heeft de afgelopen 18 jaar in of rond de online / digitale industrie gewerkt. Hij heeft uitgebreide ervaring in de software- en webdesign-industrie met WordPress, Joomla en niches eromheen. Als digitale consultant richt hij zich op het helpen van bedrijven om een ​​concurrentievoordeel te behalen door een combinatie van hun website en digitale platforms die vandaag beschikbaar zijn.