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. hvordan legge til jQuery -kode på WordPress

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

riktig legge til jQuery-kode på WordPressDu 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.

Interaktive verdenskart

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.

Last ned | dEMO | Webhotell

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.wp-Ajax-kontakt-skjema-tracking-plugin-wordpress-til-sikkerhet

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

Last neddEMOWebhotell 

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. 

Paypal standard betalingsport for ninja-skjemaer

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.

Last ned | dEMO |  Webhotell

Andre anbefalte ressurser

Vi inviterer deg også til å konsultere ressursene nedenfor for å komme videre i grepet og kontrollen av nettstedet og bloggen din.

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.

...