Legge Javascript til WordPress-temaer på riktig måte

Det er en spesifikk måte å legge Javascript til ditt WordPress-tema for å forhindre konflikter med plugins eller overordnede WordPress-temaer. Problemet er at mange “utviklere” kaller javascript-filene sine direkte i header.php eller footer.php-filen, som er feil måte å gjøre det på.


I denne guiden vil jeg vise deg hvordan du kan ringe javascript-filene dine riktig ved å bruke funksjoner.php-filen slik at de lastes rett inn på nettstedets hode- eller bunntekst. På denne måten hvis du utvikler et tema for distribusjon og sluttbrukeren ønsker å endre skriptene via et underordnet tema de kan, eller hvis de bruker minifisering / hurtigbufring eller andre optimaliseringsplugins vil de fungere riktig. Og hvis du jobber med et barn-tema, blir skriptene dine lagt til på riktig måte, uten å kopiere header.php- eller footer.php-filene til ditt barn-tema, som ikke burde være nødvendig (når du arbeider med et godt kodet tema)

Feil måte å legge til Javascript til WordPress-temaer

Å ringe javascript i header.php-filen eller footer.php-filen som vist nedenfor, er IKKE den riktige måten, og jeg anbefaler på det sterkeste, ofte fører det til konflikter med andre plugins og gjør ting manuelt når du arbeider med en CMS er aldri en god idé.

Den rette måten å legge til Javascript til WordPress-temaer

Jo bedre for å legge til JavaScript til WordPress-temaet ditt, er å gjøre det via funksjoner.php-filen ved å bruke wp_enqueue_script. Å bruke wp_enqueue_scripts-handlingen for å laste inn javascriptet ditt vil bidra til å holde temaet ditt uten problemer.

Eksempel

wp_enqueue_script ('my-script', get_template_directory_uri (). '/js/my-script.js', matrise (), sant);

Koden over laster my-script.js-filen på nettstedet ditt. Som du ser har jeg bare inkludert $ -håndtaket, men du kan også legge til avhengigheter for skriptet ditt, versjonsnummer og om du vil laste det inn i toppteksten eller bunnteksten (standard er topptekst).

Funksjonen wp_enqueue_script () kan teknisk brukes i hvilken som helst tema- eller pluginmal-fil, men hvis du laster inn globale skripter, vil du plassere den enten i temaets function.php-fil eller i en egen fil som er spesielt beregnet på å laste skript på nettstedet. Men hvis du bare ønsker å laste inn et skript på en bestemt malfil (for eksempel på galleriinnlegg), kan du plassere funksjonen rett i malfilen, men personlig anbefaler jeg at du holder alle skriptene på ett sted og bruker kondisjonelle innlastinger manus etter behov.

WordPress Hosted Scripts

En kul ting med WordPress er at det allerede er en haug med manus som er registrert av og registrert som du kan bruke i temautviklingen din. For eksempel skal jQuery som brukes i nesten alle prosjekter alltid lastes fra WordPress og aldri være vert på et tredjeparts nettsted som Google. Så før du legger til et tilpasset skript til prosjektet, sjekk listen over registrerte manus for å forsikre deg om at den ikke allerede er inkludert i WordPress, og hvis den er det, bør du laste den i motsetning til å registrere din egen.

Bruke WordPress Enqueue Hook

Tidligere nevnte vi funksjonen som trengs for å laste inn et skript på nettstedet ditt, men når du arbeider med ikke-malfiler som funksjoner.php-filen, bør du legge til denne funksjonen i en annen funksjon koblet til de riktige WordPress-krokene, på denne måten skriptene dine registrert med alle de andre skriptene som er registrert av WordPress, tredjeparts plugins og ditt overordnede tema når du bruker et barnetema.

WordPress har to forskjellige handlingskroker du kan bruke til å ringe skriptene dine.

  1. wp_enqueue_scripts – handling som brukes til å laste inn skript i frontend
  2. admin_enqueue_scripts – handling som brukes for å laste inn skript i WP-administratoren

Her er et eksempel (som vil bli lagt til funksjoner.php-filen) om hvordan du oppretter en funksjon og deretter bruker WordPress-kroken til å ringe skriptene dine.

/ **
* Forordre et manus
* /
funksjon myprefix_enqueue_scripts () {
wp_enqueue_script ('my-script', get_template_directory_uri (). '/js/my-script.js', matrise (), sant);
}
add_action ('wp_enqueue_scripts', 'myprefix_enqueue_scripts');

Merk: Se hvordan vi bruker “get_template_directory_uri” -funksjonen når vi definerer stedet for skriptet? Denne funksjonen oppretter en URL til temamappen din. Hvis du jobber med et barn-tema, vil du bruke “get_styleheet_directory_uri” i stedet slik at det peker til barnet ditt tema og ikke foreldretemaet..

Legge til inline Javascript-kode

Selv om du enkelt kan lime inline javascript i en hvilken som helst malfil via skriptkoden, kan det være en god ide å også bruke WordPress-kroker for å legge til inline-koden, spesielt når det er en kjerne plugin eller temakode. Nedenfor er et eksempel på å legge til inline-skript til nettstedet ditt:

funksjon myprefix_add_inline_script () {
wp_add_inline_script ('my-script', 'alert (' hallo verden ');', 'etter');
}
add_action ('wp_enqueue_scripts', 'myprefix_add_inline_script');

Hva dette vil gjøre er å legge til inline javascript etter det tidligere registrerte “my-script” skriptet. Når du bruker wp_add_inline_script kan du bare legge til inline-kode enten før eller etter et allerede registrert skript, så hvis du prøver å endre koden til et bestemt skript, må du sørge for at den er lastet etter den, eller hvis du bare trenger å legge til noen tilpasset kode kan du koble til det til jquery-skriptet som vanligvis lastes av de fleste WordPress-temaer, og hvis ikke kan du bruke wp_enqueue_script til å laste inn WordPress-vert-versjonen av jQuery.

Ved å bruke denne metoden kan folk enkelt fjerne inline-skript via et underordnet tema eller plugin-tillegg, det holder all din tilpassede javascript pent organisert og det analyseres av WordPress som kan være tryggere. Og hvis du bruker et underordnet tema, kan du laste inn skriptene via funksjonene dine.php-filen i stedet for å kopiere over header.php- eller footer.php-filene til ditt barnetema..

Når det er sagt, hvis du jobber med et barn-tema, trenger du ikke å gjøre dette, kan du ganske enkelt dumpe koden din i overskriften din enten ved hjelp av wp_head eller wp_footer-krokene som eksempelet nedenfor:

add_action ('wp_footer', funksjon () {?>  
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me

    Like this post? Please share to your friends:
    Adblock
    detector
    map