WordPress maakt al meer dan 16 jaar deel uit van ons leven, maar de methode om scripts toe te voegen aan thema's en plug-ins blijft voor veel ontwikkelaars een raadsel. In dit artikel hebben we eindelijk een einde gemaakt aan de verwarring.
Omdat het een van de meest gebruikte JavaScript-bibliotheken is, bespreken we vandaag hoe u jQuery-scripts aan uw thema's of WordPress plugins.
Over de jQuery-compatibiliteitsmodus
Voordat u begint met het toevoegen van scripts aan WordPress, is het belangrijk om de compatibiliteitsmodus van jQuery te begrijpen.
Zoals u waarschijnlijk weet, wordt WordPress geleverd met jQuery al inbegrepen.
De versie van jQuery op WordPress heeft ook een " compatibiliteitsmodus Dit is een mechanisme om conflicten met andere javascript-bibliotheken te voorkomen.
Een deel van dit afweermechanisme betekent dat jij ne pouvez pas gebruik de $teken direct zoals je zou doen in andere projecten.
In plaats daarvan moet u bij het schrijven van jQuery-code voor WordPress jQuery.
Hier is een voorbeeld van die code:
/ * JQuery régulier * /
$ ( '.hideable' ).on( 'click' , function () {
$ ( this ).hide();
})
/ * Mode de compatibilité * /
jQuery ( '.hideable' ).on( 'click' , function () {
jQuery( this ).hide();
})
Het probleem is dat het schrijven van jQuery een miljoen keer langer duurt, het moeilijker leesbaar maakt en uw script kan verzwaren.
Het goede nieuws?
Met een paar wijzigingen kunt u ons schattige kleine dollarteken opnieuw gebruiken.
Trouwens, als je dat bent nieuw bij jQuery , het $ -teken is slechts een alias voor jQuery () en vervolgens een alias voor een functie.
De basisstructuur ziet er als volgt uit: $(selector).action(). Het dollarteken definieert jQuery… de “(selector)” vraagt of vindt HTML-elementen… en tenslotte is “jQuery () action” de actie die op de elementen moet worden uitgevoerd.
Terug naar hoe we ons compatibiliteitsprobleem kunnen omzeilen ... hier zijn enkele uitvoerbare opties:
1.Voer jQuery stealth-modus in
De eerste manier om de compatibiliteitsmodus te omzeilen is door de code in te sluipen.
Als u bijvoorbeeld uw script in de voettekst laadt, kunt u uw code in een anonieme functie plaatsen, waardoor jQuery wordt toegewezen $.
Zoals in het onderstaande voorbeeld:
( fonction ( $ ) {
$ ( '.hideable' ).on( 'click' , function () {
$ ( this ).hide();
})
}) (jQuery);
Als u uw script in de koptekst wilt toevoegen (wat u indien mogelijk moet vermijden, daarover hieronder meer), kunt u alles in een document-ready-functie verpakken en de $onderweg.
jQuery( document ).ready( function( $ ) {
$ ( '.hideable' ).on( 'click' , function () {
$ ( this ).hide();
})
});
2. Ga naar de modus "Geen conflict"
Een andere gemakkelijke manier om te voorkomen dat jQuery wordt gespeld, is door over te schakelen naar de modus "Conflictvrij" en gebruik een andere snelkoppeling.
In dit geval: $jin plaats van de standaard $.
Het enige dat u hoeft te doen, is dit bovenaan uw script aan te geven:var $j = jQuery.noConflict();
Oké, nu weet je meer over het schrijven van geldige jQuery-code voor WordPress, laten we het toevoegen aan onze Site web.
Hoe jQuery-scripts aan WordPress toe te voegen
Een van de gemakkelijkste manieren om jQuery-scripts aan WordPress toe te voegen, is via een proces dat 'setting wachtrij .
Voor Site web Klassieke HTML, we zouden de . gebruiken <link> item om scripts toe te voegen. WordPress doet hetzelfde, maar we zullen speciale WP-functies gebruiken om dit te bereiken.
Op deze manier beheert het al onze afhankelijkheden voor ons (bedankt WP!).
Als u aan een thema werkt, kunt u de functie gebruiken wp_enqueue_script() in uw functions.php bestand.
Zo ziet het eruit:
function my_theme_scripts () {
wp_enqueue_script('mon-grand-script', get_template_directory_uri(). '/js/my-great-script.js', array('jquery'), '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'my_theme_scripts');
Deze functie neemt vijf argumenten:
- $ handle - een unieke handle die u kunt gebruiken om naar het script te verwijzen.
- $src – de locatie van het scriptbestand.
- $ deps - specificeert een reeks afhankelijkheden.
- $ ver - het versienummer van uw script.
- $ in_footer - laat WordPress weten waar het script moet worden neergezet.
* Eén ding om op te merken $in_footer betekent dat standaard scripts in de header worden geladen.
Dit is een slechte gewoonte en kan uw site aanzienlijk vertragen. Als u uw script in de voettekst wilt plaatsen, zorg er dan voor dat deze parameter is ingesteld op true.
Scripts toevoegen aan de WordPress-beheerder
U kunt ook scripts toevoegen aan de beheerder. De gebruikte functies zijn precies hetzelfde, u hoeft alleen een andere haak te gebruiken.
Bijvoorbeeld:
functie my_admin_scripts () {
wp_enqueue_script ('mijn-geweldige-script', plugin_dir_url (__FILE__). '/js/my-great-script.js', array ('jquery'), '1.0.0', true);
}
add_action ('admin_enqueue_scripts', 'my_admin_scripts');
In plaats van in te loggen, wp_enqueue_scriptswe moeten gebruiken admin_enqueue_scripts.
Hoe u zich kunt afmelden voor jQuery van WordPress
Maar wat als u een andere versie van jQuery wilt gebruiken dan die vooraf geïnstalleerd door WordPress?
Je kunt het in de wachtrij plaatsen ... maar dat betekent dat er twee versies van jQuery op de pagina zullen staan.
Om dit te voorkomen, moeten we de WP-versie uitschrijven.
Zo ziet het eruit:
// bevat aangepaste jQuery
shapeSpace_include_custom_jquery () function {
wp_deregister_script ('jquery');
wp_enqueue_script(
'jquery',
'https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js',
array(),
null,
true);
}
add_action ('wp_enqueue_scripts', 'shapeSpace_include_custom_jquery');Het is net zo eenvoudig als het gebruik van de wp_deregister_script () voor uitschrijven jQuery van WP, inclusief het jQuery-script dat u wilt toevoegen.
In het bovenstaande voorbeeld hebben we de jQuery-bibliotheek gehost door Google , maar u vervangt het uiteraard door de URL van uw eigen script.
Moet u scripts niet opslaan voordat u ze in de wachtrij plaatst?
Als u uw scripts naar behoefte wilt laden in plaats van ze rechtstreeks in uw pagina's te laden, kunt u het script eerder opslaan.
Bijvoorbeeld op wp_loaded:
add_action ('wp_loaded', 'register_all_scripts');
fonction register_all_scripts () {
wp_register_script (…);
}
Als je dat eenmaal hebt gedaan, kun je de scripts in de wachtrij plaatsen wanneer je ze nodig hebt:
| add_action ('wp_enqueue_scripts', 'enqueue_front_scripts'); |
| add_action ('admin_enqueue_scripts', 'enqueue_back_scripts'); |
Denk eraan om dezelfde namen te gebruiken om botsingen met andere scripts te voorkomen.
Voorwaardelijke tags gebruiken
Gebruik voorwaardelijke tags om uw scripts alleen te laden als dat nodig is.
Dit wordt vaker gebruikt in admin, waar je een script alleen op een specifieke pagina wilt gebruiken (en niet voor de hele admin). Het bespaart ook bandbreedte en verwerkingstijd, wat snellere laadtijden voor uw betekent Site web.
Bekijk de documentatie van wachtrijscripts in de WordPress Codex voor meer informatie.
Voeg jQuery toe aan WordPress met behulp van plug-ins
De directory met WP-plug-ins bevat ook veel interessante plug-ins die u kunt gebruiken om scripts in uw berichten, pagina's of WordPress-thema's.
Hier zijn enkele voorbeelden van bekende JavaScript / jQuery-plug-ins: geavanceerde aangepaste velden , Eenvoudige aangepaste CSS en JS , scriptstijlen n et grondstof schoonmaken.
Maak je eigen jQuery-project
Een beter begrip van jQuery zal uw werk alleen maar effectiever maken. Of het nu voor uw eigen website is of voor klantprojecten.
jQuery staat bekend om zijn eenvoud, en zoals je (hopelijk) uit dit artikel hebt geleerd, is het toevoegen van eenvoudige jQuery-scripts aan WordPress een fluitje van een cent als je eenmaal weet hoe.
Ja, er is een beetje overhead in vergelijking met het gebruik van vanilla HTML, maar er is ook het extra voordeel van afhankelijkheidsbeheer en duidelijkheid.
Niet alleen dat, door kleine trucs te gebruiken, zoals het omzeilen van de standaardcompatibiliteit van jQuery WP, bespaart u uzelf veel tijd, moeite en opgeblazen code.
