Javascript toevoegen aan WordPress-site - 7 stapsgewijze methoden

Javascript toevoegen aan WordPress

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 breken of een prestatieknelpunt zou kunnen veroorzaken.

Javascript rechtstreeks toevoegen aan WordPress-pagina's en -berichten is niet mogelijk, dus we zullen een aantal verschillende manieren voorstellen om Javascript-code aan websites toe te voegen en welke u moet gebruiken in de verschillende omstandigheden die u kunt tegenkomen. 

Als je haast hebt, gebruik dan de inhoudsopgave hieronder om naar het relevante deel van het artikel te scrollen.

 

Dit artikel bevat wijzigingen in de WordPress-code. Als u er niet zeker van bent dat u de code zelf kunt aanpassen, wilt u dat misschien doen leer hoe u de beste WordPress-ontwikkelaar voor uw bedrijf kunt werven 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

fiverr-logo

Klik hier om goedkope experts te vinden over WordPress-oplossingen

Wat is JavaScript?

Als je dit bericht leest, ben je waarschijnlijk al bekend met wat JavaScript is.

Om het echter voor iedereen toegankelijk te houden, zullen we snel schetsen wat JavaScript is en wat het doet. Sla dit deel gerust over 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 behoorlijk wat mogelijkheden om het coole dingen te laten doen, zoals het insluiten van video en het toevoegen van functies.

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

Dit verbetert de gebruikerservaring door video op te nemen, zonder uw webserver te belasten om de video af te spelen.

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

Kun je JavaScript gebruiken in WordPress?

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

Het gebruik is talrijk en gevarieerd, maar aangezien JavaScript wordt uitgevoerd door de browser van de gebruiker, kan het veel doen zonder uw webserver te vertragen.

U kunt script op een aantal manieren toevoegen, zoals we later zullen bespreken.

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

Je kunt niet voorzichtig genoeg zijn!

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 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 naar keuze, of meerdere pagina's met functions.php
  3. Voeg JavaScript toe aan alle pagina's
  4. Voeg een Javascript-bestand toe aan uw themakop
  5. De wp_head Hook gebruiken om aangepast JavaScript toe te voegen
  6. Voeg JavaScript toe aan uw WordPress-voettekst
  7. JavaScript toevoegen aan WordPress Video
  8. Voeg JavaScript toe aan een WordPress-widget

Laten we elk van deze methoden in detail doornemen.

Vervolgens delen we snel hoe u JavaScript kunt debuggen nadat u het aan een pagina heeft toegevoegd.

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

We raden niet noodzakelijkerwijs aan om op deze manier wijzigingen aan te brengen, maar we geloven erin u alle informatie te geven en vervolgens uw eigen beslissing te nemen.

1. Gebruik een plug-in zoals WPCode

Als u gewoon een plug-in wilt gebruiken om een ​​javascript-referentie in het kop- of voettekstbestand van het WordPress-thema in te sluiten, is de WPCode-plug-in een gemakkelijke en gratis optie.

We raden aan om voor alle codewijzigingen een plug-in te gebruiken, omdat deze alles schoon houdt en problemen in de toekomst kan voorkomen.

In plaats van de bestanden van het thema rechtstreeks te wijzigen met de aangepaste Javascript-code, kunt u met een 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 verschillende opties, dus we zullen alleen de meest voorkomende beschrijven die u moet gebruiken.

Je kunt WPCode downloaden hier of installeer het met behulp van de functie Plugins installeren van WordPress.

Installeer de WPCode-plug-in:

  • Log in op de backend of beheerder van uw site.
  • Ga naar Plugins > Voeg nieuwe
  • Zoek naar de plug-in "WPCode" en klik op Installeer nu.
  • Zodra het is geïnstalleerd, klikt u op Activeren

installeer wpcode

 

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

De meest gebruikelijke optie die u met deze plug-in kunt gebruiken, is de optie om de code rechtstreeks in WordPress toe te voegen.

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 Globale kop- en voettekst venster.

U kunt ervoor kiezen om het script toe te voegen aan Header, Body of Footer. U moet advies hebben van de leverancier van het script in welke van deze secties u het script moet toevoegen.

Stel dat u het aan de koptekst wilt toevoegen:

javascript-code toevoegen aan wordpress-header

Klik Wijzigingen opslaan af te maken.

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

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.

Met WPCode kunt u ook uw eigen codefragmenten maken.

U kunt ook overal op uw website codefragmenten invoegen, zoals in berichten of pagina's, voor of na een bericht, voor of na inhoud, of een aantal andere opties die u mogelijk nodig heeft.

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

voeg uw aangepaste code toe

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

maak een aangepast javascript-fragment

Vervolgens van de Code Type vervolgkeuzemenu, kies JavaScript-fragment.

javascript-fragment

Scroll dan gewoon naar beneden tot je bij de Invoeging gebied.

Het enige dat overblijft is om een ​​locatie voor de code te kiezen in het vervolgkeuzemenu. bevind zich Pagina, bericht, aangepast berichttype en specificeer waar u de code op de pagina of het bericht wilt weergeven.

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

Als u bijvoorbeeld 1 invoert in het veld 'Nummer invoegen', verschijnt het codefragment voor of na de eerste alinea. Gebruik voor de tweede alinea 2, enzovoort.

Schakel daarna eenvoudigweg de schakelaar boven aan het scherm naar 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 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 WPCode-plug-in 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 het gaat om het installeren van een plug-in van derden, wat sommige site-eigenaren proberen te vermijden.

Als u uw extensies tot een minimum wilt beperken, kunt u 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.

fiverr-logo

Klik hier om goedkope experts te vinden over WordPress-oplossingen

 

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

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_PAGINA functie die u kunt vinden hier

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

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

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, waar je het bestand aan wilt toevoegen, klikken 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.

wordpress pagina-ID

  • 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() {
  als( is_pagina(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');

3. Voeg JavaScript toe 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() 


Met deze methode hoeft u 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.

fiverr-logo

Klik hier om goedkope experts te vinden over WordPress-oplossingen

4. 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 een derde partij aan al uw pagina's wilt toevoegen (bijvoorbeeld het instantpage.js-script om uw website sneller te maken), kunt u het script invoegen of het scriptbestand waarnaar wordt verwezen zelf toevoegen in de head van jouw 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 sterk 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

4. 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.

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.

Het toevoegen van JavaScript aan uw WordPress-voettekst is relatief eenvoudig. U kunt code toevoegen aan het kop- of voettekstbestand, een aangepast code-element gebruiken binnen uw paginabuilder of thema of een specifieke kop- en voettekst-plug-in gebruiken.

Voeg JavaScript toe aan uw WordPress-voettekst

Aangezien u moet voorkomen dat u JavaScript toevoegt aan uw header.php- of footer.php-bestanden, gebruiken we een plug-in.

Ik beveel het aan WPCode - Voeg kop- en voetteksten + aangepaste codefragmenten in plugin.

kies Instellingen en Insert Headers en Footers menu.

Plak vervolgens uw JavaScript-code in het voettekstgedeelte van de pagina.

Sla uw wijzigingen op als u klaar bent.

IMH

Wil je een snelle website?

Wie ben ik voor de gek aan het houden? Doen we dat niet allemaal?

Dus waarom worstelen zovelen van ons?

De grootste uitdaging is meestal het vinden van een snel, betrouwbaar hostingbedrijf.

We hebben allemaal de nachtmerries meegemaakt - ondersteuning duurt een eeuwigheid of lost ons probleem niet op, altijd iets aan jouw kant de schuld geven... 

Maar het grootste minpunt is dat de website altijd traag aanvoelt.

At CollectiveRay we hosten met InMotion-hosting en onze website is stom snel. We draaien op een custom stack van LightSpeed ​​server setup op MariaDB met een PHP7.4 engine en via Cloudflare. 

Gecombineerd met onze front-end optimalisaties bedienen we elke dag betrouwbaar 6000 gebruikers, met pieken van 50+ gelijktijdige gebruikers. 

Wil je een snelle installatie zoals de onze? Breng uw site gratis over naar InMotion-hosting en ontvang onze 50% KORTING op de huidige prijzen.

Probeer InMotion Hosting met 50% KORTING voor CollectiveRay bezoekers ALLEEN in april 2024!

InMotion-hosting 50% KORTING voor CollectiveRay bezoekers

6. JavaScript toevoegen aan WordPress Video

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.

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, maar er is 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.

(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.)

7. Voeg JavaScript toe aan een WordPress-widget

Als u wat JavaScript wilt toevoegen aan een WordPress-widget, kan het niet eenvoudiger.

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

Voeg uw JavaScript toe tags and select bijwerken.

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

Hoe een JavaScript-fout op een WordPress-pagina te debuggen

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

Gelukkig heb je de tools bij de hand om te controleren op fouten.

Open een pagina in uw browser en druk op F12 of selecteer Ontwikkelhulpprogramma's in het menu (Chrome). U kunt ook Ctrl + Shift + J (Windows/Linux) of Cmd + Option + J (Mac) gebruiken.

Selecteer het troosten tabblad van het nieuwe deel van het scherm dat wordt geopend en u ziet eventuele JavaScript-fouten rood gemarkeerd.

Identificeer waar de fout vandaan komt en corrigeer het relevante deel van het JavaScript dat je hebt toegevoegd.

Werk je een weg door totdat alle fouten zijn verholpen.

WordPress heeft zijn eigen foutopsporingsmodus, maar deze kan een beetje ingewikkeld zijn om te gebruiken. Ik zou aanraden om de officiële foutopsporingspagina voor meer informatie.

Veelgestelde vragen over Javascript toevoegen aan WordPress

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 WPCode invoegen te gebruiken. 

  • Log in op uw site en installeer de WPCode-plug-in.
  • 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 > WPCode 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 WPCode 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 van waaruit 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

fiverr-logo

Klik hier om goedkope experts te vinden over WordPress-oplossingen

Over de auteur
David Attard
David heeft de afgelopen 21 jaar in of rond de online en digitale industrie gewerkt. Hij heeft ruime ervaring in de software- en webontwerpindustrie met behulp van WordPress, Joomla en de niches eromheen. Hij heeft gewerkt met softwareontwikkelingsbureaus, internationale softwarebedrijven, lokale marketingbureaus en is nu hoofd Marketing Operations bij Aphex Media - een SEO-bureau. Als digitale consultant ligt zijn focus op het helpen van bedrijven om een ​​concurrentievoordeel te behalen door gebruik te maken van een combinatie van hun website en digitale platforms die vandaag de dag beschikbaar zijn. Zijn mix van technologische expertise gecombineerd met een sterk zakelijk inzicht geeft zijn geschriften een concurrentievoordeel.

Nog een ding... Wist je dat mensen die nuttige dingen zoals dit bericht delen er ook GEWELDIG uitzien? ​
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.

Auteur (s) Uitgelicht op:  Inc Magazine-logo   Sitepoint-logo   CSS Tricks-logo    webdesignerdepot-logo   WPMU DEV-logo   en nog veel meer ...