Gå till innehållet

Hur korrekt lägga jQuery koden på Wordpress

Divi: det enklaste WordPress-temat att använda

Skapa enkelt din webbplats med Elementor

Med Elementor kan du enkelt skapa en webbdesign med ett professionellt utseende. Sluta betala dyra för vad du kan göra själv. [Fritt]

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 detta är ett av de mest använda JavaScript-biblioteken, diskuterar vi idag hur man lägger till jQuery-skript till dina WordPress-teman eller 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.

Divi: Det bästa WordPress-temat hela tiden!

mer 901.000-nedladdningar, Divi är det mest populära WordPress-temat i världen. Den är komplett, lätt att använda och levereras med mer än 62 gratis mallar. [Rekommenderas]

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 på 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 ".

För en klassisk HTML-webbplats använder vi  <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:

  1. $ handle - ett unikt handtag som du kan använda för att hänvisa till manuset.
  2. $ src - platsen för skriptfilen.
  3. $ deps - anger en rad beroenden.
  4. $ ver - skriptets versionsnummer.
  5. $ 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.

Letar du efter de bästa WordPress-teman och plugins?

Ladda ner de bästa plugins och WordPress-teman på Envato och enkelt skapa din webbplats. Redan mer än 49.720.000-nedladdningar. [EXKLUSIV]

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 administrationen, där du bara vill använda ett skript på en specifik sida (och inte i hela administrationen). 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.

Skapa enkelt din webbutik

Ladda ner gratis WooCommerce, de bästa e-handelspluggarna för att sälja dina fysiska och digitala produkter på WordPress. [Rekommenderas]

Lägg till jQuery till WordPress med hjälp av plugins

Katalogen för WP-plugins innehåller också många intressanta plugins som du kan använda för att infoga skript i dina WordPress-publikationer, sidor eller 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.

Den här artikeln innehåller kommentarer 0

Lämna en kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade *

Den här webbplatsen använder Akismet för att minska oönskade. Läs mer om hur dina kommentarer data används.

Tillbaka till toppen
2 aktier
del2
tweet
Enregistrer