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 stoppet forvirringen.
Da det er et af de mest udbredte JavaScript-biblioteker, diskuterer vi i dag, hvordan man tilføjer jQuery-scripts til dine temaer eller WordPress 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.
Versionen af jQuery på WordPress har også en " kompatibilitetstilstand Hvilket er en mekanisme til at undgå konflikter med andre javascript-biblioteker.
En del af denne forsvarsmekanisme betyder, at du ne pouvez pas brug $underskrive direkte som du ville gjort i andre projekter.
I stedet, når du skriver jQuery-kode til WordPress, skal du 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 afveje dit script.
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 til sidst "jQuery () -handling" er 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 i overskriften (som du bør undgå, hvis det er muligt, mere om det nedenfor), kan du pakke alt sammen i en dokumentklar funktion og passere $undervejs.
jQuery( document ).ready( function( $ ) {
$ ( '.hideable' ).on( 'click' , function () {
$ ( this ).hide();
})
});
2. Gå ind i tilstanden "Ingen konflikt"
En anden nem måde at undgå at stave jQuery på er at skifte til tilstand "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 ved du mere om at skrive gyldig jQuery-kode til WordPress, lad os føje den til vores Websted.
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 'indstilling ventelinje '.
For a Websted Klassisk HTML, vi ville 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 håndtag, som du kan bruge til at henvise til scriptet.
- $src – placeringen af scriptfilen.
- $ deps - specificerer en række afhængigheder.
- $ ver - versionsnummeret på dit script.
- $ in_footer - lader WordPress vide, hvor man skal sætte scriptet.
* En ting at bemærke $in_footer betyder, at der som standard scripts indlæses i overskriften.
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-administratoren
Du kan også tilføje scripts til administratoren. De anvendte funktioner er nøjagtigt de samme, du skal bare bruge en anden krog.
For eksempel:
funktion my_admin_scripts () {
wp_enqueue_script ('my-great-script', plugin_dir_url (__FILE__). '/js/my-great-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 forhindre dette sker, skal vi afmelde 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 lige så let 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 det med URL'en til dit eget script.
Bør du ikke gemme scripts, før du 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 derefter sætte scripts 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å at kollidere 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 oftere i admin, hvor du kun vil bruge et script på en bestemt side (og ikke på tværs af hele admin). Det sparer også båndbredde og behandlingstid, hvilket betyder hurtigere indlæsningstider for din Websted.
Se på dokumentation af kø-scripts i WordPress Codex for at få flere oplysninger.
Føj jQuery til WordPress ved hjælp af plugins
WP plugins biblioteket indeholder også mange interessante plugins, som du kan bruge til at indsætte scripts i dine indlæg, sider eller WordPress-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) lærte i denne artikel, er det nemt at tilføje enkle jQuery-scripts til WordPress som pie når du ved hvordan.
Ja, der er lidt overhead i forhold til at bruge vanilje HTML, men der er også den ekstra fordel ved afhængighedsstyring og klarhed.
Ikke kun det, ved at bruge små tricks som at omgå jQuery WPs standardkompatibilitet, sparer du dig meget tid, kræfter og oppustet kode.
