Slik legger du til JavaScripts and Styles i WordPress

Ønsker du å lære å legge til JavaScripts og CSS stilark i WordPress? Mange DIY-brukere gjør ofte feilen ved å ringe sine skript og stilark direkte i plugins og temaer. I denne artikkelen vil vi vise deg hvordan du korrekt legger til JavaScripts og stilark i WordPress. Dette vil være spesielt nyttig for de som nettopp begynner å lære WordPress tema og plugin utvikling.

Vanlig feil når du legger til skript og stilark i WordPress

Mange nye WordPress-plugins og temautviklere gjør feilen ved å direkte legge til sine skript eller inline CSS i plugins og temaer.

Noen bruker feilaktig wp_head funksjon for å laste inn skript og stilark.

Selv om koden ovenfor kan virke lettere, er det feil måte å legge til skript i WordPress, og det fører til flere konflikter i fremtiden..

Hvis du for eksempel laster jQuery manuelt og en annen plugin laster jQuery gjennom riktig metode, så har du jQuery lastet to ganger. Hvis den er lastet på hver side, vil dette negativt påvirke WordPress-hastighet og ytelse.

Det er også mulig at de to er forskjellige versjoner som også kan føre til konflikter.

Når det er sagt, la oss ta en titt på den riktige måten å legge til skript og stilark.

Hvorfor Enqueue-skript og stiler i WordPress?

WordPress har et sterkt utviklingssamfunn. Tusenvis av mennesker fra hele verden utvikler temaer og plugins for WordPress.

For å sørge for at alt fungerer som det skal, og ingen trapper på andres tær, har WordPress et enqueuing system. Dette systemet gir en programmerbar måte å laste inn JavaScripts og CSS stilark.

Ved å bruke wp_enqueue_script og wp_enqueue_style funksjoner, forteller du WordPress når du skal laste inn en fil, hvor du skal laste den, og hva er dens avhengigheter.

Dette systemet tillater også utviklere å utnytte de innebygde JavaScript-bibliotekene som kommer med WordPress, i stedet for å laste det samme tredjepartsskriptet flere ganger. Dette reduserer sidebelastningstiden og hjelper til med å unngå konflikter med andre temaer og plugins.

Hvordan å skikkelig skanne skript i WordPress?

Lasting av skript riktig i WordPress er veldig enkelt. Nedenfor er et eksempel kode som du vil lime inn i plugins-filen eller i temaets funksjoner.php-fil for å ordentlig laste inn skript i WordPress.

 ?php-funksjonen wpb_adding_scripts () wp_register_script ('my_amazing_script', plugins_url ('amazing_script.js', __FILE__), array ('jquery'), '1.1', true); wp_enqueue_script ( 'my_amazing_script');  add_action ('wp_enqueue_scripts', 'wpb_adding_scripts'); ?> 

Forklaring:

Vi startet ved å registrere vårt skript gjennom wp_register_script () funksjon. Denne funksjonen aksepterer 5 parametere:

• $ håndtak - Håndtak er det unike navnet på skriptet ditt. Vår kalles "my_amazing_script"
• $ src - src er stedet for skriptet ditt. Vi bruker plugins_url-funksjonen for å få den riktige nettadressen til vår plugin-mappe. Når WordPress finner det, vil det se etter filnavnet amazing_script.js i den mappen.
• $ deps - deps er avhengighet. Siden vårt skript bruker jQuery, har vi lagt til jQuery i avhengighetsområdet. WordPress vil automatisk laste jQuery hvis den ikke lastes inn allerede på nettstedet.
• $ ver - Dette er versjonen av skriptet vårt. Denne parameteren er ikke nødvendig.
• $ in_footer - Vi vil laste inn skriptet vårt i footer, så vi har satt verdien til å være sann. Hvis du vil laste inn skriptet i overskriften, vil du gjøre det feil.

Etter å ha gitt alle parametrene i wp_register_script, vi kan bare ringe skriptet inn wp_enqueue_script () som gjør alt skje.

Det siste trinnet er å bruke wp_enqueue_scripts action hook for å faktisk laste inn skriptet. Siden dette er et eksempelkode, har vi lagt til det like under alt annet.

Hvis du legger til dette på temaet eller plugin-modulen, kan du sette denne handlingen krok der skriptet faktisk er nødvendig. Dette gjør det mulig å redusere minnekortavsnittet for pluginet ditt.

Nå kan noen kanskje lure på hvorfor skal vi gå ekstra skritt for å registrere skriptet først og deretter enqueuing det? Vel, dette tillater andre nettstedseiere å avregistrere skriptet ditt uten å endre kjernekoden til pluginet ditt.

Riktig Enqueue-stiler i WordPress

På samme måte som skript, kan du også kalkulere stilarkene dine. Se på eksemplet nedenfor:

Istedenfor å bruke wp_enqueue_script, vi bruker nå wp_enqueue_style for å legge til stilarket vårt.

Legg merke til at vi har brukt wp_enqueue_scripts action krok for både stiler og skript. Til tross for navnet fungerer denne funksjonen for begge.

I eksemplene ovenfor har vi brukt plugins_url funksjon for å peke på plasseringen av skriptet eller stilen vi ønsket å enqueue.

Men hvis du bruker enqueue-skriptfunksjonen i temaet ditt, bruker du bare get_template_directory_uri () i stedet. Hvis du jobber med et barntema, bruk da get_stylesheet_directory_uri ().

Nedenfor er et eksempelkode:

Vi håper denne artikkelen hjalp deg med å lære hvordan du korrekt legger til jacvascript og stiler i WordPress. Du vil kanskje også studere kildekoden til de beste WordPress-pluginene for noen eksempler på ekte livskode.

Hvis du likte denne artikkelen, vennligst abonner på vår YouTube Channel for WordPress-videoopplæringsprogrammer. Du kan også finne oss på Twitter og Facebook.