WordPress har varit en del av våra liv i över 16 år, men metoden att lägga till skript till teman och plugins är fortfarande ett mysterium för många utvecklare. I den här artikeln har vi äntligen avslutat förvirringen.
Eftersom det är ett av de mest använda JavaScript-biblioteken diskuterar vi idag hur man lägger till jQuery-skript till dina teman eller Wordpress plugins.
Om jQuery-kompatibilitetsläge
Innan du börjar lägga till skript till WordPress är det viktigt att förstå kompatibilitetsläget för jQuery.
Som du antagligen vet, kommer WordPress med jQuery som redan ingår.
Versionen av jQuery på WordPress har också en " kompatibilitetsläge Vilket är en mekanism för att undvika konflikter med andra javascript-bibliotek.
En del av denna försvarsmekanism betyder att du ne pouvez pas använd $underteckna direkt som i andra projekt.
I stället bör du använda jQuery-kod för WordPress jQuery.
Här är ett exempel på den koden:
/ * JQuery régulier * /
$ ( '.hideable' ).on( 'click' , function () {
$ ( this ).hide();
})
/ * Mode de compatibilité * /
jQuery ( '.hideable' ).on( 'click' , function () {
jQuery( this ).hide();
})
Problemet är att skriva jQuery en miljon gånger tar längre tid, gör det svårare att läsa och kan väga ner ditt skript.
De goda nyheterna?
Med några få ändringar kan du igen använda vår söta lilla dollarsymbol.
Förresten, om du är det nytt för jQuery , $ -tecknet är bara ett alias för jQuery (), sedan ett alias för en funktion.
Grundstrukturen ser ut så här: $(selector).action(). Dollartecknet definierar jQuery ... "(selector)" frågar eller hittar HTML-element ... och slutligen "jQuery () action" är den åtgärd som ska utföras på elementen.
Tillbaka till hur vi kan hantera vårt kompatibilitetsproblem ... här är några hållbara alternativ:
1.Sätt in jQuery-stealth-läge
Det första sättet att komma runt kompatibilitetsläget är att smyga in koden.
Om du till exempel laddar ditt skript i sidfoten kan du radera din kod i en anonym funktion, som kommer att kartlägga jQuery $.
Som i exemplet nedan:
( fonction ( $ ) {
$ ( '.hideable' ).on( 'click' , function () {
$ ( this ).hide();
})
}) (jQuery);
Om du vill lägga till ditt skript i rubriken (som du bör undvika om möjligt, mer om det nedan), kan du lägga in allt i en dokumentklar funktion och passera $längs vägen.
jQuery( document ).ready( function( $ ) {
$ ( '.hideable' ).on( 'click' , function () {
$ ( this ).hide();
})
});
2. Gå till läget "Ingen konflikt"
Ett annat enkelt sätt att undvika stavning av jQuery är att växla till läge "Konfliktfri" och använd en annan genväg.
I det här fallet: $jistället för standard $.
Allt du behöver göra är att förklara det högst upp i ditt skript:var $j = jQuery.noConflict();
Okej, nu vet du mer om att skriva giltig jQuery-kod för WordPress, låt oss lägga till den i vår webbplats.
Hur man lägger till jQuery-skript till WordPress
Ett av de enklaste sätten att lägga till jQuery-skript till WordPress är genom en process som kallas inställning väntelinje ".
Till exempel, webbplats Klassisk HTML, vi skulle använda <link> objekt för att lägga till skript. WordPress slutar göra detsamma, men vi använder speciella WP-funktioner för att uppnå detta.
På detta sätt hanterar alla våra beroenden för oss (tack WP!).
Om du arbetar med ett tema kan du använda funktionen wp_enqueue_script() I din functions.php fil.
Så här ser det ut:
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');
Denna funktion tar fem argument:
- $ handle - ett unikt handtag som du kan använda för att hänvisa till manuset.
- $src – platsen för skriptfilen.
- $ deps - anger en rad beroenden.
- $ ver - skriptets versionsnummer.
- $ in_footer - låter WordPress veta var man ska lägga skriptet.
* En sak att notera $in_footer innebär att man som standard läser in skript i rubriken.
Detta är dålig praxis och kan sakta ner din webbplats avsevärt. Därför, om du vill placera ditt skript i sidfoten, se till att den här parametern är inställd på true.
Lägga till skript till WordPress-administratören
Du kan också lägga till skript till administratören. De funktioner som används är exakt samma, du behöver bara använda en annan krok.
Till exempel:
funktion my_admin_scripts () {
wp_enqueue_script ('my-great-script', plugin_dir_url (__FIL__). '/js/my-great-script.js', array ('jquery'), '1.0.0', true);
}
add_action ('admin_enqueue_scripts', 'my_admin_scripts');
Istället för att logga in, wp_enqueue_scriptsvi måste använda admin_enqueue_scripts.
Hur man avbokar jQuery från WordPress
Men vad händer om du vill använda en annan version av jQuery än den som laddats in av WordPress?
Du kan köa den ... men det betyder att det kommer att finnas två versioner av jQuery på sidan.
För att förhindra detta måste vi avregistrera WP-versionen.
Så här ser det ut:
// innehåller anpassad jQuery
formSpace_include_custom_jquery () -funktion {
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');Det är lika enkelt som att använda wp_deregister_script () för avregistrera jQuery från WP, därefter inkluderar jQuery-skriptet du vill lägga till.
I exemplet ovan använde vi jQuery-bibliotek värd av Google , men du kommer naturligtvis att ersätta den med webbadressen till ditt eget skript.
Ska du inte spara skript innan du köar dem?
Om du vill ladda dina skript efter behov istället för att ladda dem direkt på dina sidor - kan du spara skriptet tidigare.
Till exempel på wp_loaded:
add_action ('wp_loaded', 'register_all_scripts');
fonction register_all_scripts () {
wp_register_script (…);
}
När du har gjort det kan du sedan köa skripten när du behöver dem:
| add_action ('wp_enqueue_scripts', 'enqueue_front_scripts'); |
| add_action ('admin_enqueue_scripts', 'enqueue_back_scripts'); |
Kom ihåg att använda samma namn för att undvika kollision med andra skript.
Använda villkorade taggar
Använd villkorliga taggar för att endast ladda dina skript när det behövs.
Detta används oftare i admin, där du bara vill använda ett skript på en specifik sida (och inte över hela admin). Det sparar också bandbredd och bearbetningstid, vilket innebär snabbare laddningstider för din webbplats.
Ta en titt på dokumentation av köskript i WordPress Codex för mer information.
Lägg till jQuery till WordPress med hjälp av plugins
WP-plugin-katalogen innehåller också många intressanta plugins som du kan använda för att infoga skript i dina inlägg, sidor eller WordPress-teman.
Här är några exempel på välkända JavaScript / jQuery-plugins: avancerade anpassade fält , Enkel anpassad CSS och JS , skriptstilar n et rengöring av resurser.
Skapa ditt eget jQuery-projekt
En bättre förståelse för jQuery kommer bara att göra ditt arbete mer effektivt. Oavsett för din egen webbplats eller för kundprojekt.
jQuery är välkänt för sin enkelhet, och som du (förhoppningsvis) lärde dig i den här artikeln är det enkelt att lägga till enkla jQuery-skript till WordPress när du vet hur.
Ja, det finns lite overhead jämfört med att använda vanilj HTML, men det finns också den extra fördelen med beroendeshantering och tydlighet.
Inte bara det, genom att använda små knep som att kringgå jQuery WPs standardkompatibilitet, kommer du att spara mycket tid, ansträngning och uppblåst kod.
