Aangepast JavaScript toevoegen aan WordPress (3 methoden)

Een van de beste manieren om de front-end functionaliteit van uw website te verbeteren, is door WordPress custom JavaScript toe te voegen. Het kan echter lastig zijn om erachter te komen hoe u dit moet doen, vooral als u gewend bent om met de Customizer te werken om aangepaste CSS in te voegen.

Gelukkig kun je een paar verschillende strategieën gebruiken, afhankelijk van je ervaringsniveau en wat je probeert te bereiken. Zodra u weet wat uw opties zijn, kunt u de aangepaste JavaScript-oplossing kiezen die voor u het meest logisch is.

In dit bericht laten we je drie methoden zien die je kunt gebruiken om aangepast JavaScript aan je WordPress-site toe te voegen, en bespreken we de voor- en nadelen van elke optie. Dit zijn de drie methoden die we behandelen. U kunt klikken om direct naar een specifieke methode te gaan:

1. Gebruik de Head & Footer Code-plug-in (de eenvoudigste optie voor niet-technische gebruikers)
2. Voeg code toe aan het bestand functions.php
3. Voeg code toe aan de koptekst (met behulp van de functie wp_enqueue_script of de haak wp_head)

Laten we erin springen!

1. Installeer een plug-in zoals Head & Footer Code

Het gebruik van een plug-in is een van de gemakkelijkste manieren om WordPress aangepast JavaScript aan uw website toe te voegen. Kop- en voettekstcode is bijvoorbeeld een goed hulpmiddel:

Met deze gratis plug-in kunt u op verschillende manieren code invoegen. Je kunt het gebruiken voor Facebook Pixel, Google Analytics, aangepaste CSS en meer.

Om aan de slag te gaan, voegt u de plug-in toe aan uw site door te navigeren naar Plug-ins → Nieuw toevoegen vanuit uw beheerdersdashboard en zoek vervolgens naar “Kop- en voettekstcode”.

Zodra u op de Installeer nu en Activeren knoppen, kunt u de instellingen van de plug-in vinden door naar Hulpmiddelen → Kop- en voettekstcode. Op dit scherm zijn er drie vakken voor de secties koptekst, voettekst en hoofdtekst:

U kunt uw WordPress aangepaste JavaScript in een van deze vakken invoeren. Als u klaar bent, selecteert u de Wijzigingen opslaan knop onderaan het scherm. De code wordt vervolgens op elke pagina van uw site geladen.

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 Head & Footer Code-plug-in kan ook handig zijn als u 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 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. Bovendien is de plug-in ontworpen voor sitebrede JavaScript-wijzigingen in plaats van specifieke pagina’s of berichten.

2. Gebruik uw functions.php-bestand

Een andere methode om WordPress custom JavaScript aan je website toe te voegen, is door gebruik te maken van de ingebouwde functies en hooks om de functies.php het dossier. Deze aanpak omvat het handmatig uploaden van de scripts naar uw server.

Voordat we aan de slag gaan, raden we aan om een ​​kindthema te maken. Deze stap helpt ervoor te zorgen dat je het bovenliggende thema nog steeds veilig kunt updaten. U moet ook een back-up van uw site maken voor het geval er iets misgaat.

Deze methode omvat het gebruik van de IS_PAGINA functie. U kunt voorwaardelijke logica toevoegen om uw aangepaste JavaScript toe te passen op één bericht of pagina.

Zoek en open uw functies.php bestand en kopieer en plak vervolgens het volgende codefragment:

function ti_custom_javascript() {
    ?>
        <script>
          // your javscript code goes here
        </script>
    <?php
}
add_action('wp_head', 'ti_custom_javascript');

Deze code voegt JavaScript toe aan uw header. Om het toe te passen op een enkel bericht, kunt u het volgende gebruiken:

function ti_custom_javascript() {
  if (is_single ('3')) { 
    ?>
        <script type="text/javascript">
          // your javscript code goes here
        </script>
    <?php
  }
}
add_action('wp_head', 'ti_custom_javascript');

Houd er rekening mee dat u de 3 in het bovenstaande voorbeeld met het post-ID-nummer waaraan u de code wilt toevoegen. Om dat nummer te vinden, navigeert u naar het bericht vanuit uw beheerdersdashboard en klikt u vervolgens op Bewerk. In de URL van de browserbalk is het ID-nummer het nummer naast “post=”:

Sla uw bestand op zodra u het ID-nummer hebt vervangen en voeg uw aangepaste JavaScript toe aan het daarvoor bestemde gebied. U kunt hetzelfde proces ook herhalen voor een enkele WordPress-pagina.

Voors en tegens van het bewerken van uw functions.php-bestand

Een voordeel van het bewerken van uw functies.php bestand is dat u geen andere plug-in hoeft te installeren. U kunt deze techniek ook gebruiken om functies en functionaliteit toe te voegen aan zowel uw thema als WordPress zelf. Deze methode kan bijvoorbeeld JavaScript invoegen in een enkele post of pagina of in alle pagina’s.

Het enige nadeel van deze methode is dat je met code moet werken en de bestanden van je site moet bewerken. Daarom is het misschien niet de beste optie als je geen ervaring hebt op deze afdeling.

Er is een manier om aangepast WordPress JavaScript toe te voegen door de <script> tag rechtstreeks in uw header.php het dossier. Deze methode wordt echter niet aanbevolen. Het kan de laadvolgorde van WordPress verstoren en conflicten veroorzaken met andere thema’s en plug-ins.

Als u aangepast JavaScript aan al uw pagina’s wilt toevoegen via de koptekst van uw site, kunt u dit op twee manieren doen. U kunt de functies.php bestand en gebruik de wp_enqueue_script functie, die een generieke functie creëert. Als alternatief kunt u de wp_head actie haak.

Laten we beide opties eens bekijken…

Voeg JavaScript toe aan uw header met behulp van de functie wp_enqueue_script

Eerst wil je je aangepaste JavaScript-bestand uploaden naar de map van je sjabloon. U kunt dit doen via een File Transfer Protocol (FTP)-client of File Manager.

Navigeer naar de sjabloonmap van uw site (wp_content → thema’s → [yourtheme]). Selecteer vervolgens Uploaden:

Noteer het exacte bestandspad van dit bestand. Het moet bijvoorbeeld zoiets zijn als “

Zoek en open vervolgens uw functies.php bestand en kopieer en plak vervolgens het volgende codefragment:

function ti_custom_javascript() {
wp_enqueue_script( 'example-script', get_template_directory_uri() . '/js/examplescript.js');
}
add_action('wp_enqueue_scripts', 'ti_custom_javascript');

Zorg ervoor dat u de sjabloon-URL vervangt door die van uzelf. Sla ten slotte uw bestand op.

Voeg aangepast JavaScript toe met behulp van de wp_head hook

U kunt ook de wp_hoofd actie haak om aangepast JavaScript aan uw header toe te voegen via inline script. Nogmaals, deze methode verdient niet de voorkeur omdat er te veel scripts kunnen worden gemaakt. Het is echter beter dan de scripts rechtstreeks in uw header.php het dossier.

Deze methode, die je ook voor de footer kunt gebruiken, gebruikt de action hook(s) om inline scripts aan je site toe te voegen. Terwijl de wp_enqueue_script functie plaatst aangepaste scripts in de wachtrij, de wp_hoofd approach drukt de scripts af in uw koptekstsjabloon (en voettekst, als u de wp_voettekst haak).

Om aan de slag te gaan, navigeert u naar uw functies.php bestand en kopieer en plak het volgende:

function ti_custom_javascript() {
?>
<script>
// your javascript code goes here
</script>
<?php
}
add_action('wp_head', 'ti_custom_javascript');

Merk op dat de wp_hoofd hook werkt alleen aan de voorkant van uw website. Dit betekent dat elk aangepast JavaScript dat u met deze methode toevoegt, niet wordt weergegeven in het beheerders- of aanmeldingsgedeelte. Als u echter JavaScript aan die gebieden wilt toevoegen, kunt u de beheerder_hoofd en inloggen_hoofd actiehaken, respectievelijk.

Voors en tegens van het toevoegen van JavaScript aan uw header

De wp_enqueue_script functie heeft de voorkeur onder ontwikkelaars omdat het conflicten voorkomt die kunnen ontstaan ​​met andere opties, zoals het rechtstreeks toevoegen van scripts aan uw header.php het dossier. Bovendien maakt het gebruik van deze methode geen afhankelijke scripts.

Het grootste probleem met het toevoegen van aangepast WordPress JavaScript aan de koptekst van uw site is dat dit problemen kan veroorzaken met andere plug-ins die hun eigen scripts laden. Deze instelling kan er ook voor zorgen dat meerdere scripts meer dan eens worden geladen, wat de algehele snelheid en prestaties van uw website kan belemmeren.

Ga aan de slag met WordPress aangepast JavaScript

Zoals we in dit bericht hebben besproken, zijn er drie manieren waarop u WordPress aangepast JavaScript aan uw website kunt toevoegen:

1. Installeer een plug-in zoals Head & Footer Code.
2. Gebruik jouw functies.php bestand om aangepast JavaScript toe te voegen aan een enkele pagina of bericht.
3. Voeg JavaScript toe aan uw header met behulp van de wp_enqueue_script functie of wp_hoofd haak.

Nu u weet hoe u aangepast JavaScript aan WordPress kunt toevoegen, bent u wellicht geïnteresseerd in onze andere gids over het toevoegen van aangepaste CSS aan WordPress.