Hvordan at tilføje jQuery kode på WordPress korrekt

WordPress har været en del af vores liv i over 16 år, men metoden til at tilføje scripts til temaer og plugins er stadig et mysterium for mange udviklere. I denne artikel har vi endelig sat en stopper for forvirringen.

Da det er et af de mest anvendte Javascript-biblioteker, diskuterer vi i dag, hvordan du tilføjer jQuery-scripts til dine WordPress-temaer eller plugins.

Om jQuery-kompatibilitetstilstand

Før du begynder at tilføje scripts til WordPress, er det vigtigt at forstå kompatibilitetstilstanden for jQuery.

Som du sikkert ved, kommer WordPress med jQuery, der allerede er inkluderet.

WordPress-versionen af jQuery har også en " kompatibilitetstilstand ", som er en mekanisme til at undgå konflikter med andre JavaScript-biblioteker.

En del af denne forsvarsmekanisme betyder, at du ne pouvez pas brug $underskriv direkte, ligesom du ville gøre i andre projekter.

Når du skriver jQuery-kode til WordPress, bør du i stedet bruge jQuery.

Her er et eksempel på den kode:

/ * JQuery régulier * / $ ( '.hideable' ).on( 'click' , function () { $ ( this ).hide(); })

/ * Mode de compatibilité * / jQuery ( '.hideable' ).on( 'click' , function () { jQuery( this ).hide(); })

Problemet er, at det tager længere tid at skrive jQuery en million gange, gør det sværere at læse og kan gøre dit script tungere.

Den gode nyhed?

Med et par ændringer kan du igen bruge vores søde lille dollarsymbol.

Forresten, hvis du er nyt i jQuery , $ -tegnet er bare et alias for jQuery (), derefter et alias for en funktion.

Grundstrukturen ser sådan ud: $(selector).action()Dollartegnet definerer jQuery ... "(selector)" forespørger eller finder HTML-elementer ... og endelig er "jQuery() action" den handling, der skal udføres på elementerne.

Tilbage til hvordan vi kan løse vores kompatibilitetsproblem ... her er nogle levedygtige muligheder:

1.Angiv jQuery-stealth-tilstand

Den første måde at komme omkring kompatibilitetstilstand på er at snige koden ind.

Hvis du f.eks. Indlæser dit script i sidefoden, kan du indpakke din kode i en anonym funktion, som vil kortlægge jQuery $.

Som i eksemplet nedenfor:

( fonction ( $ ) { $ ( '.hideable' ).on( 'click' , function () { $ ( this ).hide(); }) }) (jQuery);

Hvis du vil tilføje dit script til headeren (hvilket du bør undgå hvis muligt, mere om det nedenfor), kan du pakke alt ind i en dokumentklar funktion og sende $undervejs.

jQuery( document ).ready( function( $ ) { $ ( '.hideable' ).on( 'click' , function () { $ ( this ).hide(); }) });

2. Gå ind i tilstanden "Ingen konflikt"

En anden simpel måde at undgå at angive jQuery på er at skifte til mode "Konfliktfri" og brug en anden genvej.

I dette tilfælde: $ji stedet for standard $.

Alt hvad du skal gøre er at erklære det øverst på dit script:var $j = jQuery.noConflict();

Okay, nu hvor du ved mere om at skrive gyldig jQuery-kode til WordPress, lad os tilføje det til vores hjemmeside.

Sådan tilføjes jQuery-scripts til WordPress

En af de nemmeste måder at tilføje jQuery-scripts til WordPress er gennem en proces kaldet "opdatering". kø '.

For en typisk HTML-hjemmeside ville vi bruge <link> element for at tilføje scripts. WordPress ender med at gøre det samme, men vi bruger specielle WP-funktioner til at opnå dette.

På denne måde administrerer det alle vores afhængigheder for os (tak WP!).

Hvis du arbejder på et tema, kan du bruge funktionen wp_enqueue_script() i din functions.php fil.

Sådan ser det ud:

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');

Denne funktion tager fem argumenter:

$ handle - et unikt handle, som du kan bruge til at referere til scriptet.
$ src - placeringen af scriptfilen.
$ deps - angiver et array af afhængigheder.
$ ver - versionsnummeret på dit script.
$ in_footer - tillader WordPress at vide, hvor scriptet skal placeres.

* En ting at bemærke $in_footer Det betyder, at scripts som standard indlæses i headeren.

Dette er dårlig praksis og kan bremse dit websted betydeligt. Derfor, hvis du vil placere dit script i sidefoden, skal du sørge for, at denne parameter er indstillet til sand.

Tilføjelse af scripts til WordPress-administrationspanelet

Du kan også tilføje scripts til administratoren. De anvendte funktioner er præcis de samme; du skal bare bruge en anden hook.

For eksempel:

funktion my_admin_scripts () {
wp_enqueue_script ('mit-fantastiske-script', plugin_dir_url (__)FILE__). '/js/mit-fantastiske-script.js', array('jquery'), '1.0.0', sand);
}
add_action ('admin_enqueue_scripts', 'my_admin_scripts');

I stedet for at logge ind, wp_enqueue_scriptsvi skal bruge admin_enqueue_scripts.

Sådan afmeldes jQuery fra WordPress

Men hvad nu hvis du vil bruge en anden version af jQuery end den, der er forudindlæst af WordPress?

Du kan sætte den i kø ... men det betyder, at der vil være to versioner af jQuery på siden.

For at undgå dette, er vi nødt til at afregistrere WP-versionen.

Sådan ser det ud:

// inkluderer tilpasset 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 er så simpelt som at bruge wp_deregister_script () for afmelde jQuery fra WP, inklusive det jQuery-script, du vil tilføje.

I eksemplet ovenfor brugte vi jQuery-bibliotek hostet af Google , men du vil naturligvis erstatte den med URL'en til dit eget script.

Burde man ikke gemme scripts, før man sætter dem i kø?

Hvis du vil indlæse dine scripts efter behov i stedet for at indlæse dem direkte på dine sider, kan du gemme scriptet tidligere.

For eksempel tændt wp_loaded:

add_action ('wp_loaded', 'register_all_scripts'); fonction register_all_scripts () { wp_register_script (…); }

Når du har gjort det, kan du sætte scriptene i kø, når du har brug for dem:

add_action('wp_enqueue_scripts', 'enqueue_front_scripts');

add_action('admin_enqueue_scripts', 'enqueue_back_scripts');

Husk at bruge de samme navne for at undgå konflikter med andre scripts.

Brug af betingede tags

Brug betingede tags til kun at indlæse dine scripts, når det er nødvendigt.

Dette bruges oftest i administrationspanelet, hvor du kun vil bruge et script på en bestemt side (og ikke på tværs af hele administrationspanelet). Dette sparer også båndbredde og behandlingstid, hvilket resulterer i hurtigere indlæsningstider for dit websted.

Se på dokumentation til køscripts Se WordPress Codex for yderligere information.

Tilføj jQuery til WordPress ved hjælp af plugins

WP Plugins Directory indeholder også mange interessante plugins, som du kan bruge til at indsætte scripts i dine WordPress-indlæg, -sider eller -temaer.

Her er nogle eksempler på kendte JavaScript / jQuery-plugins: avancerede brugerdefinerede felter , Enkel tilpasset CSS og JS , script-stilarter n et rengøring af ressourcer.

Opret dit eget jQuery-projekt

En bedre forståelse af jQuery vil kun gøre dit arbejde mere effektivt. Uanset om dit eget websted eller til klientprojekter.

jQuery er kendt for sin enkelhed, og som du (forhåbentlig) har lært i denne artikel, er det en barneleg at tilføje simple jQuery-scripts til WordPress, når du først ved hvordan.

Ja, der er lidt ekstra overhead sammenlignet med at bruge vanilla HTML, men der er også den ekstra fordel af afhængighedsstyring og klarhed.

Ikke nok med det, ved at bruge små tricks som at omgå standardkompatibiliteten i jQuery WP, sparer du dig selv en masse tid, kræfter og oppustet kode.