@dennisjanssen

Go back
jQuery & Wordpress

jQuery & WordPress

Sinds Prototype, maar zeker sinds jQuery hebben webdesigners/developers een handige library waarmee ze gemakkelijk een hoop dynamische effecten op onze schermen toveren. Je hebt er geen Flash voor nodig, zowat iedereen kan er van genieten en het is dodelijk simpel uit te breiden. Toch kan het starten ermee wat moeilijkheden meebrengen. WordPress heeft een verleden met Prototype en die sporen zitten nog diep in WordPress geworteld. WordPress kon natuurlijk niet achterblijven met jQuery, en besloot dus ook jQuery te gaan integreren. Iedereen die beide al eens heeft gebruikt in 1 project weet dat dit vuurwerk geeft…

Nochtans is de oplossing relatief simpel, maar toch moeilijk te vinden op het web. Zoals je zou moeten weten als je hier terechtkwam, jQuery en Prototype delen het dollar-teken, en hebben dus een conflict wanneer beide toegevoegd zijn in je header. WordPress voegt beide automatisch toe, maar plaatst jQuery in een no-conflict-mode, waardoor het dollarteken niet werkt voor jQuery. Je zou in je WordPress bestanden vast wel een weg vinden om prototype eruit te slopen en jQuery zo gewoon met het dollarteken te gebruiken, maar er is een simpelere oplossing.

Je opent je header.php in de map van je theme, en voegt daar alle plugins voor jQuery in die je wilt gaan gebruiken, maar jQuery zelf hoeft zelfs niet. Belangrijk is dan wel dat je ze na de <?php wp_head(); ?> – tag plaatst, aangezien hij hier zijn eigen JS gaat inladen. Vervolgens gebruik je gewoon de code die je vond op de site van de plugin, maar je vervangt het dollarteken door ‘jQuery’.

Dus:
<script type=”text/javascript”>
$(function () {
$(“.lavaLampBottomStyle”).lavaLamp({ fx: “backout”, speed: 700 });
});
</script>

wordt

<script type=”text/javascript”>
jQuery(function () {
jQuery(“.lavaLampBottomStyle”).lavaLamp({ fx: “backout”, speed: 700 });
});
</script>
Op deze manier ontwijken we het omstreden dollarteken en zou je jQuery vlotjes moeten werken.