Vil du finne ut hvordan du laster JavaScript på WordPress?

Alle WordPress tema er vanligvis sammensatt av PHP-, HTML-, CSS- og JavaScript-filer. JavaScript er et populært programmeringsspråk blant utviklere. WordPress tema. Det er et språk som gjør en HTML-side interaktiv og kan også tillate deg å samhandle med serveren.

Å vite hvordan du bruker det på nettstedet ditt vil være en stor fordel.

For å kunne bruke JavaScript, må du vite hvordan du laster det inn på nettstedet ditt.

Men før, hvis du aldri har installert WordPress Discover Hvordan installere en WordPress blogg 7 trinn et Hvordan finne, installere og aktivere en WordPress tema på bloggen din 

Så tilbake til hvorfor vi er her.

Hvordan du legger Javascript WordPress

La oss ta et skritt tilbake og ta en første titt på hvordan WordPress laster inn skript og stiler. Du lærte at når du oppretter JavaScript-filene, kan du legge dem til siden din i toppteksten eller i bunnteksten.

Oppdag også vår veiledning om Hvordan komprimere CSS, HTML og Javascript-filer

WordPress gjør akkurat det samme, men du kan ikke bare slippe disse skriptkodene i topptekstfilen eller bunnteksten på WordPress tema. WordPress bruker en smart lastemekanisme kalt " enqueueing '.

Denne mekanismen er nødvendig for å gi mening til avhengigheter. Hvis du skriver jQuery-kode for ditt WordPress-tema, må jQuery selv lastes inn først.

Du skriver kode som er avhengig av en jQuery-plugin. I dette tilfellet må jQuery lastes først, deretter jQuery-plugin og deretter koden.

Hvordan "forkynne" skript (Legg til i kø)

Du kan sette skript i kø i WordPress-temamappen eller din WordPress Plugin. Her er den komplette koden for å inkludere et skript som er avhengig av jQuery:

my_theme_scripts of function () {

 wp_enqueue_script ('my-script', get_template_directory_uri (). '/js/my-script.js', array ('jquery'), '1.0.0', true);

}

add_action ('wp_enqueue_scripts', 'my_theme_scripts');

Først og fremst må en funksjon være " hekta På WordPress (Bruke Hooks WordPress). Det første argumentet for funksjonen add_action () forteller WordPress hvor disse skriptene skal plasseres:

• På det offentlige rom
• På dashbordet

Hvis du bruker " wp_enqueue_scripts De blir lastet på det offentlige rommet, hvis du bruker " admin_enqueue_scripts De blir lastet på dashbordet.

I funksjonen « ADD_ACTION Du kan bruke " wp_enqueue_script For å legge til skriptene du trenger. Funksjonen tar en ønsket parameter og fire valgfrie parametere:

• Den første parameteren er navnet på skriptet ditt. Du kan velge hva du vil, men husk å bruke et unikt navn.
• Den andre parameteren skal inneholde plasseringen til filen på WordPress-temaet ditt eller WordPress Plugin.
• Den tredje parameteren inneholder en rekke avhengigheter. I eksemplet ovenfor sa jeg at jQuery er en avhengighet. Alle avhengigheter lastes før det aktuelle skriptet.
• Den fjerde parameteren er et versjonsnummer
• Den femte og siste parameteren indikerer om du vil laste skriptet på toppteksten eller bunnteksten. Bruk "true" for å laste inn i bunnteksten, eller "false" for å laste skriptet på toppteksten (du kan heller ikke fylle denne parameteren).

de Uthus

WordPress tilbyr en kopi av jQuery, og det er derfor du kan legge den til som en avhengighet uten problemer. Det er en rekke andre jQuery-skript og plugins som WordPress tilbyr. Hvis koden din avhenger av en av dem, trenger du ikke bruke en av kopiene dine, du legger den bare til som en avhengighet. her er en liste over skript som WordPress tilbud.

Hvis du inkluderer flere uavhengige skript, kan du legge dem til som avhengigheter på nøyaktig samme måte. Ta en titt på eksemplet nedenfor:

my_theme_scripts of function () {

 wp_enqueue_script ("my-base script", get_template_directory_uri (). '/js/my-base-script.js', array ('jquery'), '1.0.0', true);

 wp_enqueue_script ("my-script-extension", get_template_directory_uri (). '/js/my-script-extension.js', array ("my-script-base '),' 1.0.0 ', true);

}

add_action ('wp_enqueue_scripts', 'my_theme_scripts');

Siden det første skriptet avhenger av jQuery, avhenger det neste skriptet også. Så du trenger ikke å legge til jQuery som en avhengighet for begge. Dette gjør avhengighetsstyring enklere.

betinget Loading

Noen ganger vil du bruke skriptet ditt på hver side, men ofte vil du laste et skript på en bestemt side. Dette gjelder spesielt når du vurderer å legge til skript på dashbordet. Et godt eksempel er bruk av kortkoder. Kortkoder lar brukerne lage avanserte skjermer i visuell tekstredigerer ved hjelp av noen få enkle triks.

my_theme_scripts of function () {

 wp_register_script ('my-script', get_template_directory_uri (). '/js/my-script.js', array ('jquery'), '1.0.0', true);

 wp_enqueue_script ('mitt skript');

}

add_action ('wp_enqueue_scripts', 'my_theme_scripts');

Vi har lagret skriptet slik at WordPress lærer om skriptet, men vi bruker " Enqueue ". På denne måten legges skriptet bare til siden hvis kortkoden brukes på denne siden.

En annen metode for å laste inn skript med betingelser er å bruke betingede funksjoner. Hvis du vil laste et skript på alle arkivsider i kategorien, kan du bruke funksjonen is_category ().

For eksempel kan du lage en karusell med bilder som brukere kan legge til artikkelen slik: [karusell ids = '42,124,123,331,90, XNUMX ′]. Det blir opprettet en karusell på artikkelsiden ved hjelp av bildene som er utpekt av deres ID.

For å gjøre dette, må du opprette en fil " carousel.js Som er basert på jQuery. Her er en kode for å komme dit (Det oppretter ikke en karusell, men lar deg se hvordan lasteprosessen skjer):

add_action ('wp_enqueue_scripts', 'my_theme_scripts');

my_theme_scripts of function () {

 wp_register_script ('min karusell', get_template_directory_uri (). '/js/my-carousel.js', array ('jquery'), '1.0.0', sant);

}

add_shortcode ('karusell', 'min_karusell');

my_carousel-funksjonen ($ args) {

 $ atts = shortcode_atts (matrise (

 'Ids' => ",

 ), $ Atts, 'karusell');

 wp_enqueue_script ('min karusell');

 // Kode for å vise karusellen her

}

Fjerne og erstatte skript

Dette er langt et vanlig scenario, men noen ganger kan det hende du må fjerne eller erstatte et skript. Jeg falt i situasjoner hvor et skript lagt til av en plugin (men ikke brukt av temaet) forårsaket kompatibilitetsproblemer. "Tilbaketrekking" var det beste alternativet, da feilen forsvant helt.

Du kan også erstatte jQuery med en nyere versjon hvis du tester noe for å sikre at det vil være kompatibelt med nyere versjoner.

I disse situasjonene fungerer funksjonene wp_deregister_script () "Og" wp_dequeue_script () Er nyttige. Slik redigerer du kode som allerede er lagt til på WordPress.

my_theme_scripts of function () {

 wp_deregister_script ('jquery');

 wp_enqueue_script ('jquery', get_template_directory_uri (). '/js/jquery3.0.0.js', array (), '3.0.0', true);

 wp_enqueue_script ('my-script', get_template_directory_uri (). '/js/my-script.js', array ('jquery'), '1.0.0', true);

}

add_action ('wp_enqueue_scripts', 'my_theme_scripts');

Endelige tanker

Denne metoden for opplasting til WordPress er flott fordi den lar deg legge til skriptene dine på en modulær måte. Dette vil tillate deg å sikre at avhengigheter legges til på en modulær måte.

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. Premium SEO Pack

Premium SEO Pack er en WordPress Plugin som optimerer SEO og komprimerer CSS for å forbedre lastehastigheten til nettstedet ditt.

Pluggen lar deg også administrere utformingen av nettstedet ditt med noen få klikk. Funksjonalitetene er blant annet: CSS- og JS-komprimering, integrering av video- og kodestykker, formatering av HTML- og XML-filer, omdirigering av 404 og 301 sider, deling på sosiale nettverk, levering av 'ALT-etikett, veldig tilpassbar layout

Last ned | dEMO | Webhotell

2. Leverandør Leveringstider for levering

Woocommerce Delivery Time Picker for Shipping er en WooCommerce-utvidelse som lar kundene velge leveringsdato og klokkeslett på kassen. 

Kunder vil kunne velge leveringstid på pakken hjemme. Leveringstiden vil være synlig for administratorene av nettstedet, og den vil også bli sendt per e-post til administratorene av nettstedet eller nettbutikken.

Last ned | dEMO | Webhotell

3. meny Hero

Dette pluginet lar deg lage din egen tilpassede WordPress-meny i noen ganske enkle trinn. Spesielt lar det deg enkelt og intuitivt lage en elegant og profesjonell WordPress-meny. 

Fra den mest komplekse mega-menyen full av funksjoner, til den enkleste menyen med nedtrekksmeny, WordPress-plugin HeroMenu setter opp alle typer menyer og får den i gang på få minutter.

Når det gjelder funksjoner tilbyr den blant annet: perfekt drift på PC, nettbrett og smarttelefon, fra Tilpasset CSS for å legge til dine egne stiler på menyen, en megamenu-byggherre, flere støttede nettlesere: Chrome, Firefox, Safari, Opera, IE9 og mer.

Last ned | dEMO | Webhotell

Anbefalte ressurser

Ta en titt på andre anbefalte ressurser som hjelper deg med å løse andre vanlige WordPress-feil. 

• Hvor å Fastsette Omadresser feil på WordPress
• Hvordan du oppretter et egendefinert oppsett med Elementor
• Hvordan lage et intranett WordPress for din organisasjon
• Hvordan lage en påloggingsside på WordPress

konklusjonen

Her er ! Det er det for denne opplæringen, jeg håper det hjalp deg å forstå hvordan du laster JavaScript på WordPress. Ikke nøl med å dele den med vennene dine på din sosiale nettverk foretrukket. 

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.

...