Lägga till Javascript till WordPress-teman på rätt sätt

Det finns ett specifikt sätt att lägga till Javascript till ditt WordPress-tema för att förhindra konflikter med plugins eller överordnade WordPress-teman. Problemet är att många “utvecklare” kallar sina javascript-filer direkt i header.php eller footer.php-filen, vilket är felaktigt sätt att göra det.


I den här guiden kommer jag att visa dig hur du kan ringa dina javascript-filer på rätt sätt med din features.php-fil så att de laddas direkt i webbplatsens huvud- eller sidfot-tagg. På det här sättet om du utvecklar ett tema för distribution och din slutanvändare vill ändra skript via ett barntema de kan eller om de använder minifiering / cache eller andra optimeringsplugins kommer de att fungera korrekt. Och om du arbetar med ett barntema läggs dina skript till på rätt sätt utan att kopiera header.php- eller footer.php-filerna till ditt barntema som inte borde behöva någonsin (när du arbetar med ett välkodat tema)

Fel sätt att lägga till Javascript till WordPress-teman

Att ringa javascript i din header.php-fil eller footer.php-fil som visas nedan, är INTE rätt sätt och jag rekommenderar starkt mot det, ofta orsakar det konflikter med andra plugins och gör saker manuellt när man arbetar med en CMS är aldrig en bra idé.

Det rätta sättet att lägga till Javascript till WordPress-teman

Det bättre för att lägga till javascript till ditt WordPress-tema är att göra det via funktionen.php-fil med wp_enqueue_script. Om du använder åtgärden wp_enqueue_scripts för att ladda ditt javascript hjälper du att hålla ditt tema ur problem.

Exempel

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

Koden ovan laddar my-script.js-filen på din webbplats. Som ni ser har jag bara inkluderat $ -handtaget men du kan också lägga till beroenden för ditt skript, versionnummer och om du vill ladda det i sidhuvudet eller sidfoten (standard är sidhuvud).

Funktionen wp_enqueue_script () kan tekniskt användas i alla tem- eller pluginmallfiler, men om du laddar globala skript vill du placera den antingen i ditt temas function.php-fil eller i en separat fil som specifikt är avsedd att ladda skript på webbplats. Men om du bara vill ladda ett skript på en specifik mallfil (till exempel på galleri-inlägg) kan du placera funktionen rätt i mallfilen, men personligen rekommenderar jag att du håller alla skript på ett ställe och använder villkor för att ladda skript efter behov.

WordPress värdskript

En cool sak med WordPress är att det redan finns ett gäng skript som är värda av och registrerade som du kan använda i din temautveckling. Till exempel jQuery som används i nästan varje projekt bör ALLTID laddas från WordPress och aldrig värd på en tredje parts webbplats som Google. Så innan du lägger till ett anpassat skript till ditt projekt, kolla listan med registrerade skript för att se till att det inte redan finns med i WordPress och om det är så bör du ladda den i motsats till att registrera din egen.

Använda WordPress Enqueue Hook

Tidigare nämnde vi funktionen som behövs för att ladda ett skript på din webbplats, men när du arbetar med icke-mallfiler som din features.php-fil bör du lägga till den här funktionen i en annan funktion ansluten till rätt WordPress-krokar, på så sätt får dina skript registrerat med alla andra skript registrerade av WordPress, tredjeparts plugins och ditt föräldertema när du använder ett barntema.

WordPress har två olika actionkrokar som du kan använda för att ringa dina skript.

  1. wp_enqueue_scripts – åtgärd som används för att ladda skript på front-enden
  2. admin_enqueue_scripts – åtgärd som används för att ladda skript i WP-admin

Här är ett exempel (som skulle läggas till din features.php-fil) om hur du skapar en funktion och sedan använder WordPress-kroken för att ringa dina skript.

/ **
* Ställa in ett manus
* /
funktion myprefix_enqueue_scripts () {
wp_enqueue_script ('my-script', get_template_directory_uri (). '/js/my-script.js', array (), true);
}
add_action ('wp_enqueue_scripts', 'myprefix_enqueue_scripts');

Notera: Se hur vi använder funktionen “get_template_directory_uri” när du definierar platsen för ditt skript? Den här funktionen skapar en URL till din temamapp. Om du arbetar med ett barntema vill du använda “get_styleheet_directory_uri” istället så att det pekar på ditt barntema och inte föräldertemaet.

Lägga till inline Javascript-kod

Även om du enkelt kan klistra in inline-javascript i vilken mallfil som helst via skripttaggen, kan det vara en bra idé att också använda WordPress-krokar för att lägga till din inline-kod, speciellt när det är en central plugin eller temakod. Nedan är ett exempel på att lägga till inline-skript till din webbplats:

funktion myprefix_add_inline_script () {
wp_add_inline_script ('my-script', 'alert (' hej världen ');', 'efter');
}
add_action ('wp_enqueue_scripts', 'myprefix_add_inline_script');

Vad detta kommer att göra är att lägga till ditt inline-javascript efter det tidigare registrerade “my-script” -skriptet. När du använder wp_add_inline_script kan du bara lägga till inline-kod antingen före eller efter ett redan registrerat skript, så om du försöker ändra koden för ett visst skript måste du se till att det laddas efter det, eller om du bara behöver lägga till någon anpassad kod kan du ansluta det till jquery-skriptet som vanligtvis laddas av de flesta WordPress-teman och om inte kan du använda wp_enqueue_script för att ladda WordPress-värdversionen av jQuery.

Genom att använda den här metoden kan människor enkelt ta bort dina inline-skript via ett barntema eller plugin-tillägg, det håller alla dina anpassade javascript snyggt organiserade och det analyseras av WordPress vilket kan vara säkrare. Och om du använder ett underordnatema kan du ladda dina skript via din features.php-fil istället för att kopiera över header.php- eller footer.php-filerna till ditt barntema..

Som sagt, om du arbetar med ett barntema behöver du inte göra detta kan du helt enkelt dumpa din kod i din rubrik antingen med hjälp av wp_head eller wp_footer-krokar som exemplet nedan:

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