Vil du mestre hvordan du legger til jQuery -kode på WordPress? Så fortsett å lese for å lære mer.
Til tross for at WordPress har vært tilgjengelig en stund, og tillegg av temaskripter og plugins også har eksistert en stund, er det fortsatt en viss forvirring over hvilken metode du skal bruke. Bruk for å legge til skript på WordPress.
Så vi vil prøve å avklare ting.
Siden jQuery er det mest brukte JavaScript-rammeverket, viser vi deg hvordan du legger det til et tema eller en WordPress Plugin.
Men før, hvis du aldri har installert WordPress Discover Hvordan installere en WordPress blog i 7 trinn et Hvordan finne, installere og aktivere en WordPress tema på bloggen din
Så tilbake til hvorfor vi er her.
JQuery-kompatibilitetsmodus
Før vi begynner å legge til skript på WordPress, la oss utforske kompatibilitetsmodusen til jQuery. WordPress kommer med en kopi av jQuery, som du kan bruke med koden din. Når WordPress jQuery er lastet, bruker den kompatibilitetsmodus, som er en mekanisme for å unngå konflikter med andre biblioteker.
Finn ut om han Bør jQuery fjernes fra temaene og pluginene dine WordPress ?
Dette betyr at du ikke kan bruke dollartegnet direkte som i andre prosjekter. Når du skriver jQuery på WordPress, må du bruke jQuery i stedet.
Ta en titt på koden nedenfor for å se hva jeg mener:
/ * Normal modus * / $ ('. Skjulbar'). På ('klikk', funksjon () {$ (dette). Skjul ();}) / * Kompatibilitetsmodus * / jQuery ('. Skjulbar'). På ('klikk', funksjon () {jQuery (dette). skjul ();})
Det du trenger å vite er at du med noen få modifikasjoner kan bruke dollartegnet igjen. Å bruke hver gang "jQuery" på all koden din vil komplisere mye skriving.
Sjekk ut 10 kode redaktører for utviklere WordPress
Bare for å gjenskape, hvis du kjenner til jQuery, er $ -tegnet bare et alias for jQuery (), så et alias for en funksjon. Den grunnleggende syntaks er: $ (Selector) .action () :
- Et dollartegn for å definere jQuery
- A (velger) for å "finne" HTML-elementer
- En jQuery () handling å utføre på disse elementene
Hvis du laster skriptet ditt i bunnteksten, vil du kunne pakke koden din i en anonym funksjon. Slik gjør du det:
(function ($) {$ ('. hideable'). on ('click', function () {$ (this) .hide ();})}) (jQuery);
Hvis du vil legge til skriptet ditt i overskriften (hva du bør unngå om muligDu kan pakke den inn i en funksjon som kjører når dokumentet er klart.
Oppdag også forresten Slik legger du til lett kode på WordPress uten å ødelegge nettstedet ditt
jQuery (dokument). klar (funksjon ($) {$ ('. skjult'). på ('klikk', funksjon () {$ (dette). skjul ();})});
Slik kobler du skriptene dine til jQuery
Nå som du kan skrive gyldig jQuery-kode på WordPress, vil vi koble vårt arbeid til nettstedet vårt. I WordPress heter prosessen ' enqueueing "(halesystem). For et vanlig HTML-nettsted, bør vi bruke taggenscript> for å legge til skript.
WordPress kan gjøre det samme, men vi vil bruke spesialfunksjonene til WordPress for å oppnå dette. På denne måten administrerer WordPress alle våre avhengigheter for oss.
Hvis du jobber med et tema, kan du bruke funksjonen wp_enqueue_script () i filen din functions.php fil. Slik kan du gjøre det:
funksjon my_theme_scripts () {wp_enqueue_script ('my-great-script', get_template_directory_uri (). '/js/my-great-script.js', array ('jquery'), '1.0.0', true); } add_action ('wp_enqueue_scripts', 'my_theme_scripts');
Funksjonen tar fem argumenter. Den første du kan bruke til å referere til skriptet, den andre er plasseringen av skriptfilen, den tredje parameteren er en rekke avhengigheter.
Jeg la til jQuery som en avhengighet fordi skriptet bruker det. Hvis du lager et skript som avhenger av "min-tipp-script Du må legge den til avhengighetslisten slik at WordPress vet hvilke filer den må lastes inn først.
Oppdag også Slik legger du Javascript på WordPress
Den fjerde parameteren er et versjonsnummer, og den femte lar WordPress vite hvor man skal sette skriptet. Som standard lastes skript inn i overskriften, noe som er dårlig praksis, da det senker belastningen på nettstedsiden din (nettlesere stopper all sideinnlasting, hver gang en blokk est rencontré). Du må laste alle skriptene dine inn i bunnteksten, hvis mulig ved å lage den femte parameteren " sant '.
Hvordan legge til et skript på dashbordet
Du kan også legge til skript på dashbord. Funksjonene som brukes er nøyaktig de samme, du trenger bare å bruke en " krok " annerledes. Ta en titt på eksemplet nedenfor:
function my_admin_scripts () {wp_enqueue_script ('my-great-script', plugin_dir_url (__FILE__). '/js/my-great-script.js', array ('jquery'), '1.0.0', true); } add_action ('admin_enqueue_scripts', 'my_admin_scripts');
I stedet for å bruke wp_enqueue_scripts vi må bruke admin_enqueue_scripts, og det er alt !
Bruken av betingede koder
Bruk betingede koder slik at du bare laster inn skriptene når det er nødvendig. Dette brukes oftest på dashbordet, hvor du bare vil bruke et skript på en bestemt side. Dette sparer båndbredde og behandlingstid, noe som betyr raskere lastetider for nettstedet ditt.
Oppdag også vår 10 WordPress-plugins for å forbedre innlastingshastigheten til bloggen din
Ta en titt på dokumentasjons admin_enqueue_scripts i WordPress Codex for mer informasjon.
Oppdag også noen premium WordPress-plugins
Du kan bruke andre WordPress plugins for å gi et moderne utseende og for å optimalisere håndteringen av bloggen eller nettsiden din.
Vi tilbyr deg her noen premium WordPress-plugins som vil hjelpe deg å gjøre det.
1. Interaktive verdenskart
Interaktive verdenskart er en WordPress Plugin som hjelper deg med å lage så mange kart du vil, med interaktive og fargede markører, kontinenter, land eller regioner.
Den er fullt kompatibel med den nye versjonen av WordPress og Visual Composer. Takket være denne plugin-modulen, kan du vise flere typer regioner, for eksempel: et kart over hele verden, et kontinent eller et subkontinent (Afrika, Europa, Amerika, Asia, Oceania og alle deres subkontinenter), et land, et land delt på regioner, en delstat i USA, USA delt på storbyområder, en delstat i USA delt på storbyområder.
2. AJAX-kontaktskjema med sporing
Ce WordPress Plugin lar deg enkelt legge til kontakt- eller kommentarskjemaer til din WordPress blog. Den kommer med en innstillingsbehandling som kan nås direkte via WordPress-dashbordet.
Hovedtrekkene er blant annet: a ffor e-post, støtten til CAPTCHA matematikk om skjemaer, tilpasning og konfigurasjon via WordPress-oversikten, muligheten for ddefinere en tilpasset autoresponder, støtte for tilpasset CSS og mer
3. PayPal Standard Betaling Gateway for Ninja Forms
PayPal Standard Gateway for Ninja Forms lar deg lage skjemaer som integreres sømløst med PayPal betalingsgateway.
Du vil kunne lage personlige bestillingsskjemaer og motta betalinger ved hjelp av vanlige Paypal-kontoer. Hovedtrekkene er: enkel og rask integrering, IPN-integrering, muligheten til å aktivere / deaktivere PayPal-gatewayen på individuelle skjemaer, støtte for vanlige betalinger osv.
Andre anbefalte ressurser
Vi inviterer deg også til å konsultere ressursene nedenfor for å komme videre i grepet og kontrollen av nettstedet og bloggen din.
- Hvordan bruke kategorier og koder effektivt på WordPress
- Hvordan lage en forståelsesfull meny for mobil WordPress
- Hvordan lage et intranett WordPress for din organisasjon
- Hvordan installere en plugin i WordPress
konklusjonen
Her! Det er det for denne opplæringen. Håper du nå vet hvordan du legger til skript til WordPress. Føl deg fri til å del tipset med vennene dine på dine sosiale nettverk.
Du vil imidlertid også kunne konsultere våre ressources, hvis du trenger flere elementer for å gjennomføre prosjektene dine med oppretting av nettsteder, ved å konsultere vår guide om WordPress blog oppretting.
Men i mellomtiden, fortell oss om din commentaires og forslag i den dedikerte delen.
...
Tusen takk. Jeg prøver å gjøre dette med et $ -tegn i en time. Å bruke jquery er ikke et problem.