WordPress har vært en del av livet vårt i over 16 år, men metoden for å legge til skript til temaer og plugins er fortsatt et mysterium for mange utviklere. I denne artikkelen har vi endelig satt en stopper for forvirringen.
Siden det er et av de mest brukte JavaScript-bibliotekene, diskuterer vi i dag hvordan du legger til jQuery-skript til dine temaer eller WordPress plugins.
Om jQuery-kompatibilitetsmodus
Før du begynner å legge til skript til WordPress, er det viktig å forstå kompatibilitetsmodusen til jQuery.
Som du sikkert vet, kommer WordPress med jQuery allerede inkludert.
Versjonen av jQuery på WordPress har også en " kompatibilitetsmodus Som er en mekanisme for å unngå konflikter med andre javascript-biblioteker.
En del av denne forsvarsmekanismen betyr at du kan ikke bruk $signer direkte som du ville gjort i andre prosjekter.
I stedet, når du skriver jQuery-kode for WordPress, bør du bruke jQuery.
Her er et eksempel på den koden:
/ * JQuery régulier * /
$ ( '.hideable' ).on( 'click' , function () {
$ ( this ).hide();
})
/ * Mode de compatibilité * /
jQuery ( '.hideable' ).on( 'click' , function () {
jQuery( this ).hide();
})
Problemet er at det å skrive jQuery en million ganger tar lengre tid, gjør det vanskeligere å lese, og kan veie ned skriptet ditt.
Den gode nyheten?
Med noen få modifikasjoner kan du igjen bruke det søte lille dollarsymbolet vårt.
Forresten, hvis du er det nytt for jQuery , er $ -tegnet bare et alias for jQuery (), deretter et alias for en funksjon.
Den grunnleggende strukturen ser slik ut: $(selector).action(). Dollartegnet definerer jQuery ... "(selector)" spør eller finner HTML-elementer ... og til slutt er "jQuery () action" handlingen som skal utføres på elementene.
Tilbake til hvordan vi kan løse kompatibilitetsproblemet vårt ... her er noen levedyktige alternativer:
1. Gå inn i jQuery-stealth-modus
Den første måten å komme seg rundt kompatibilitetsmodus er å snike inn koden.
Hvis du for eksempel laster skriptet i bunnteksten, kan du pakke koden din i en anonym funksjon, som vil kartlegge jQuery $.
Som i eksemplet nedenfor:
( fonction ( $ ) {
$ ( '.hideable' ).on( 'click' , function () {
$ ( this ).hide();
})
}) (jQuery);
Hvis du vil legge til skriptet ditt i overskriften (som du bør unngå hvis mulig, mer om det nedenfor), kan du pakke alt inn i en dokumentklar funksjon og passere $underveis.
jQuery( document ).ready( function( $ ) {
$ ( '.hideable' ).on( 'click' , function () {
$ ( this ).hide();
})
});
2. Gå inn i "Ingen konflikt" -modus
En annen enkel måte å unngå å stave ut jQuery er å bytte til modus "Konfliktfri" og bruk en annen snarvei.
I dette tilfellet: $ji stedet for standard $.
Alt du trenger å gjøre er å erklære det på toppen av manuset:var $j = jQuery.noConflict();
Ok, nå vet du mer om å skrive gyldig jQuery-kode for WordPress, la oss legge den til vår nettstedet Web.
Slik legger du til jQuery-skript til WordPress
En av de enkleste måtene å legge til jQuery-skript til WordPress er gjennom en prosess som kalles 'setting' ventelinje '.
For a nettstedet Web Klassisk HTML, vi ville bruke <link> element for å legge til skript. WordPress ender med å gjøre det samme, men vi bruker spesielle WP-funksjoner for å oppnå dette.
På denne måten administrerer den alle avhengighetene for oss (takk WP!).
Hvis du jobber med et tema, kan du bruke funksjonen wp_enqueue_script() i din functions.php fil.
Slik 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');
Denne funksjonen tar fem argumenter:
- $ handle - et unikt håndtak som du kan bruke til å henvise til skriptet.
- $src – plasseringen av skriptfilen.
- $ deps - spesifiserer en rekke avhengigheter.
- $ ver - versjonsnummeret til skriptet ditt.
- $ in_footer - lar WordPress vite hvor man skal sette skriptet.
* En ting å merke seg $in_footer betyr at man som standard vil laste inn skript i overskriften.
Dette er dårlig praksis og kan redusere nettstedet ditt betraktelig. Derfor, hvis du vil plassere skriptet i bunnteksten, må du sørge for at denne parameteren er satt til sant.
Legge til skript til WordPress-administratoren
Du kan også legge til skript til administratoren. Funksjonene som brukes er nøyaktig de samme, du trenger bare å bruke en annen krok.
For eksempel:
funksjon my_admin_scripts () {
wp_enqueue_script ('my-great-script', plugin_dir_url (__Filer__). '/js/my-great-script.js', array ('jquery'), '1.0.0', true);
}
add_action ('admin_enqueue_scripts', 'my_admin_scripts');
I stedet for å logge inn, wp_enqueue_scriptsvi må bruke admin_enqueue_scripts.
Hvordan avmelde jQuery fra WordPress
Men hva hvis du vil bruke en annen versjon av jQuery enn den som er forhåndsinnlastet av WordPress?
Du kan stille den i kø ... men det betyr at det vil være to versjoner av jQuery på siden.
For å forhindre at dette skjer, må vi avregistrere WP-versjonen.
Slik ser det ut:
// inkluderer tilpasset jQuery
formSpace_include_custom_jquery () -funksjon {
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 like enkelt som å bruke wp_deregister_script () for avregistrere jQuery fra WP, og deretter inkludere jQuery-skriptet du vil legge til.
I eksemplet ovenfor brukte vi jQuery-biblioteket vert av Google , men du vil selvsagt erstatte den med URL-en til ditt eget skript.
Bør du ikke lagre skript før du køer dem?
Hvis du vil laste skriptene dine etter behov i stedet for å laste dem direkte inn på sidene dine - kan du lagre skriptet tidligere.
For eksempel 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 deretter sette skriptene i kø når du trenger dem:
| add_action ('wp_enqueue_scripts', 'enqueue_front_scripts'); |
| add_action ('admin_enqueue_scripts', 'enqueue_back_scripts'); |
Husk å bruke de samme navnene for å unngå å kollidere med andre skript.
Bruker betingede koder
Bruk betingede koder for å laste inn skriptene dine bare når det er nødvendig.
Dette brukes oftere i admin, der du ønsker å bruke et script kun på en bestemt side (og ikke på tvers av hele admin). Det sparer også båndbredde og behandlingstid, noe som betyr raskere lastetider for din nettstedet Web.
Ta en titt på dokumentasjon av køskript i WordPress Codex for mer informasjon.
Legg til jQuery til WordPress ved hjelp av plugins
WP-plugin-katalogen inneholder også mange interessante plugins som du kan bruke til å sette inn skript i innlegg, sider eller WordPress-temaer.
Her er noen eksempler på kjente JavaScript / jQuery-plugins: avanserte tilpassede felt , Enkel tilpasset CSS og JS , manus stiler n et ressursrensing.
Lag ditt eget jQuery-prosjekt
En bedre forståelse av jQuery vil bare gjøre arbeidet ditt mer innflytelsesrikt. Enten for ditt eget nettsted eller for klientprosjekter.
jQuery er kjent for sin enkelhet, og som du (forhåpentligvis) lærte i denne artikkelen, er det enkelt å legge til enkle jQuery-skript til WordPress som kake når du vet hvordan.
Ja, det er litt overhead i forhold til bruk av vanilje HTML, men det er også den ekstra fordelen med avhengighetsadministrasjon og klarhet.
Ikke bare det, ved å bruke små triks som å omgå jQuery WPs standardkompatibilitet, vil du spare deg for mye tid, krefter og oppblåst kode.
