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:
- Voeg een script toe aan geselecteerde pagina's met behulp van plug-ins zoals kop- en voetteksten
- Voeg het script toe aan een specifieke of enkele pagina naar keuze, of meerdere pagina's met functions.php
- Voeg een Javascript-bestand toe aan uw themakop
1. Gebruik de plug-in voor kop- en voettekst
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 en 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:
- Het pad toevoegen aan een specifiek Javascript-bestand dat u uploadt
- 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:
- Scripts in header (binnen laden) label)
- 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.
Voor- en nadelen van het gebruik van een plug-in
Het belangrijkste voordeel van het gebruik van een plug-in is dat het een beginnersvriendelijke optie is. U hoeft zich geen zorgen te maken over het bewerken van de bestanden van uw thema. De plug-in Header & Footer Code kan ook van pas komen als u op zoek bent naar een naadless 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, wat sommige site-eigenaren proberen te vermijden. Als u uw extensies tot een minimum wilt beperken, kunt u misschien beter een van de andere methoden gebruiken.
Hoewel dit vrij eenvoudig lijkt, is het misschien buiten je comfortzone, dus als je dit snel voor elkaar wilt krijgen, bekijk dan een aantal ontwikkelaars op Fiverr die dit voor je kan 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.
2. 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_adminenz.
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()
Voor- en nadelen van het wijzigen van uw Functions.php-bestand
U hoeft geen andere plug-in te installeren als u uw functions.php-bestand bewerkt. Deze methode kan ook worden gebruikt om functies en functionaliteit toe te voegen aan zowel uw thema als WordPress zelf. Deze aanpak kan bijvoorbeeld JavaScript installeren in een enkele post of pagina of alle pagina's.
Het belangrijkste nadeel van deze strategie is dat je met code moet omgaan en de bestanden van je website moet bijwerken. Als u dus geen ervaring op dit gebied heeft, is dit misschien niet het ideale alternatief.
Klik hier om goedkope experts te vinden over WordPress-oplossingen
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
De wp_head hook gebruiken om aangepast JavaScript toe te voegen
U kunt ook aangepast JavaScript aan uw koptekst toevoegen met behulp van de wp_head actie haak. Nogmaals, deze oplossing heeft niet de voorkeur omdat deze een buitensporig aantal scripts genereert. Het is, nooitless, te verkiezen boven het handmatig invoegen van de scripts in uw header.php-bestand.
Deze methode, die ook voor de footer kan worden gebruikt, maakt gebruik van de action hook(s) om inline scripts in uw site in te voegen. In tegenstelling tot de wp enqueue-scriptfunctie, die aangepaste scripts in de wachtrij plaatst, drukt de wp head-methode de scripts af in uw koptekstsjabloon (en voettekst, als u de wp_footer haak).
Navigeer om te beginnen naar uw functions.php-bestand en kopieer en plak de volgende code:
function collectr_custom_javascript() { ?>
<?php } add_action('wp_head', 'collective_custom_javascript');
Het is vermeldenswaard dat de wp-head hook alleen werkt aan de voorkant van uw website. Dit houdt in dat elk aangepast JavaScript dat via deze benadering wordt toegevoegd, niet wordt weergegeven in de beheerders- of inloggebieden. Als u echter JavaScript aan die locaties wilt toevoegen, kunt u dit doen door de haken voor beheerderskop en inlogkop te gebruiken.
Voor- en nadelen van het opnemen van JavaScript in uw koptekst
Ontwikkelaars houden van de wp enqueue-scriptfunctie omdat het conflicten vermijdt die kunnen optreden met andere oplossingen, zoals het rechtstreeks toevoegen van scripts aan uw header.php-bestand. Bovendien genereert deze oplossing geen afhankelijke scripts.
Het grootste probleem met het toevoegen van aangepast WordPress JavaScript aan de koptekst van uw site is dat het andere plug-ins kan verstoren die hun eigen scripts laden. Deze configuratie kan er ook voor zorgen dat verschillende scripts meerdere keren worden geladen, wat de algehele snelheid en prestaties van uw website kan vertragen.
Wil je zien hoe je Javascript toevoegt aan WordPress op een YouTube-video? Dit is een goed horloge:
Veelgestelde Vragen/FAQ
Wat is Javascript?
JavaScript is een computertaal die wordt uitgevoerd in de browser van de gebruiker in plaats van op uw server. Programmeren aan de clientzijde stelt ontwikkelaars in staat een verscheidenheid aan interessante dingen te bereiken zonder uw website te vertragen. U kunt vaak worden gevraagd om een JavaScript-codefragment te kopiëren en in uw WordPress-website te plakken als u een videospeler wilt insluiten, rekenmachines of een andere service van derden wilt toevoegen.
Hoe voeg ik een Javascript-bestand toe aan WordPress?
De eenvoudigste manier om een Javascript-bestand aan WordPress toe te voegen, is door de plug-in Kop- en voetteksten invoegen te gebruiken.
- Log in op uw site en installeer de plug-in voor kop- en voetteksten.
- Zodra het is geïnstalleerd, klikt u op Activeren
- Sla uw JavaScript-code of bestand op in een nieuw bestand met de . Js verlenging.
- Upload het naar uw site naar de volgende map: wp-content/themes/ /js/
- Ga naar Instellingen > Kop- en voetteksten invoegen.
- Voeg het volgende toe aan de Scripts in Header:
<script src="https://www.website.com/wp-content/themes/<theme-you-are-using>/js/file.js"></script>
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
Alstublieft laat een nuttig geef commentaar met je mening, deel dit dan op je Facebook-groep (en) die dit nuttig zouden vinden en laten we samen de vruchten plukken. Bedankt voor het delen en aardig zijn!
Disclosure: Deze pagina kan links bevatten naar externe sites voor producten die we geweldig vinden en die we van harte aanbevelen. Als u producten koopt die we aanbevelen, kunnen we een verwijzingsvergoeding verdienen. Dergelijke vergoedingen hebben geen invloed op onze aanbevelingen en we accepteren geen betalingen voor positieve beoordelingen.
en nog veel meer ...