Vill du lära dig hur du laddar JavaScript på WordPress?

Alla Wordpress tema består vanligtvis av PHP-, HTML-, CSS- och JavaScript-filer. JavaScript är ett populärt programmeringsspråk bland utvecklare. Wordpress tema. Det är ett språk som gör en HTML-sida interaktiv och kan även tillåta dig att interagera med servern.

Att veta hur man använder det på din webbplats kommer att vara en stor fördel.

För att faktiskt kunna använda JavaScript måste du veta hur du laddar det på din webbplats.

Men tidigare, om du aldrig har installerat WordPress-upptäckt Hur man installerar en Wordpress-blogg 7 steg et Hur man hittar, installera och aktivera en Wordpress tema på din blogg 

Tillbaka till varför vi är här.

Hur man laddar JavaScript Wordpress

Låt oss ta ett steg tillbaka och ta en första titt på hur WordPress laddar skript och stilar. Du lärde dig att när du skapar JavaScript-filer kan du lägga till dem på din sida i sidhuvudet eller i sidfoten.

Upptäck också vår handledning om Hur komprimerar du CSS, HTML och Javascript-filer

WordPress gör exakt samma sak, men du kan inte bara släppa dessa skripttaggar i sidhuvudsfilen eller sidfoten på din Wordpress tema. WordPress använder en smart laddningsmekanism som kallas " enqueueing ".

Denna mekanism är nödvändig för att ge beroenden mening. Om du skriver jQuery-kod för ditt WordPress-tema måste jQuery själv laddas först.

Du skriver kod som är beroende av ett jQuery-plugin. I detta fall måste jQuery laddas först, sedan jQuery-plugin, sedan din kod.

Hur man "anmäler" skript (Lägg till i kö)

Du kan köa skript i din WordPress-temanapp eller din Wordpress plugin. Här är den fullständiga koden för att inkludera ett skript som bygger på 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 och främst måste en funktion vara " hooked På WordPress (Använda Hooks Wordpress). Funktionens första argument add_action () berättar WordPress var dessa skript ska placeras:

• På det offentliga rummet
• På instrumentbrädan

Om du använder " wp_enqueue_scripts De kommer att laddas i det offentliga rummet, om du använder " admin_enqueue_scripts De kommer att laddas på instrumentpanelen.

I funktionen « add_action Du kan använda " wp_enqueue_script För att lägga till de skript du behöver. Funktionen tar en nödvändig parameter och fyra valfria parametrar:

• Den första parametern är namnet på ditt skript. Du kan välja vad du vill, men se till att använda ett unikt namn.
• Den andra parametern bör innehålla platsen för filen på ditt WordPress-tema eller Wordpress plugin.
• Den tredje parametern innehåller en rad beroenden. I exemplet ovan sa jag att jQuery är ett beroende. Alla beroenden laddas före skriptet i fråga.
• Den fjärde parametern är ett versionsnummer
• Den femte och sista parametern anger om du vill ladda skriptet i sidhuvudet eller sidfoten. Använd "true" för att ladda vid sidfoten, eller "false" för att ladda skriptet i sidhuvudet (du kan inte heller fylla denna parameter).

de Outbuildings

WordPress erbjuder en kopia av jQuery, varför du kan lägga till det som ett beroende utan problem. Det finns ett stort antal andra jQuery-skript och plugins som WordPress erbjuder. Om din kod beror på en av dem behöver du inte använda en av dina kopior, lägg bara till den som ett beroende. här är en lista över skript som Wordpress ger.

Om du inkluderar flera oberoende skript kan du lägga till dem som beroenden på exakt samma sätt. Ta en titt på exemplet nedan:

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');

Eftersom det första skriptet beror på jQuery, beror nästa skript också på det. Så du behöver inte lägga till jQuery som ett beroende för båda. Detta underlättar hantering av beroenden.

villkorlig Loading

Ibland vill du använda ditt skript på varje sida, men ofta vill du ladda ett skript på en viss sida. Detta gäller särskilt när man överväger att lägga till skript till instrumentpanelen. Ett bra exempel är användning av kortkoder. Kortkoder tillåter användare att skapa avancerade skärmar i den visuella textredigeraren med hjälp av några enkla knep.

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 ('my-script');

}

add_action ('wp_enqueue_scripts', 'my_theme_scripts');

Vi har sparat skriptet så att WordPress lär sig om skriptet, men vi använder " enqueue ". På detta sätt läggs skriptet bara till sidan om kortkoden används på den här sidan.

En annan metod för att ladda skript med villkor är att använda villkorliga funktioner. Om du vill ladda ett skript på alla arkivsidor i kategorin kan du använda funktionen is_category ().

Du kan till exempel skapa en karusell med bilder som användare kan lägga till artikeln så här: [karusell ids = '42,124,123,331,90, XNUMX ′]. En karusell skapas på artikelsidan med hjälp av de bilder som anges av deras ID.

För att göra detta måste du skapa en fil " carousel.js Vilket är baserat på jQuery. Här är en kod för att komma dit (det skapar inte en karusell, men låter dig se hur lastningsprocessen händer):

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-funktion ($ args) {

 $ atts = shortcode_atts (array (

 'Ids' => ",

 ), $ Atts, 'karusell');

 wp_enqueue_script ('min karusell');

 // Kod för att visa karusellen här

}

Ta bort och byta skript

Detta är överlägset ett vanligt scenario, men ibland kan du behöva ta bort eller ersätta ett skript. Jag hamnade i situationer där ett skript läggs till av ett plugin (men används inte av temat) orsakade kompatibilitetsproblem. ”Uttag” var det bästa alternativet, eftersom felet försvann helt.

Du kan också ersätta jQuery med en nyare version om du testar något för att se till att det är kompatibelt med nyare versioner.

I dessa situationer fungerar funktionerna wp_deregister_script () "Och" wp_dequeue_script () Är användbara. Så här redigerar du kod som redan har lagts till 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');

Slutliga tankar

Den här metoden att ladda upp till WordPress är utmärkt eftersom det låter dig lägga till dina skript på ett modulärt sätt. Detta gör att du kan se till att beroenden läggs till modulärt.

Upptäck också några premium WordPress-plugins  

Du kan använda andra Wordpress plugins för att ge ett modernt utseende och för att optimera hanteringen av din blogg eller hemsida.

Vi erbjuder dig här några premium WordPress-plugins som hjälper dig att göra det.

1. Premium SEO Pack

Premium SEO Pack är en Wordpress plugin som optimerar din SEO och komprimerar CSS för att förbättra laddningshastigheten på din webbplats.

Plugin-programmet låter dig också hantera designen av din webbplats med några få klick. Dess funktioner inkluderar: CSS- och JS-komprimering, integrering av webbplatskarta för video och kodavsnitt, HTML- och XML-filformatering, omdirigering av 404 och 301 sidor, delning av sociala medier, tillhandahållande av 'ALT-etikett, mycket anpassningsbar layout

Ladda ner | demo | webbhotell

2. Leverans Leveranstid Välj Leverans

Woocommerce Delivery Time Picker for Shipping är en WooCommerce-förlängning som gör det möjligt för kunder att välja leveransdatum och tid på kassasidan. 

Kunderna kan välja leveransstid för paketet hemma. Leveranstiden kommer att vara synlig för administratörerna på webbplatsen och den kommer också att skickas via e-post till administratörerna för webbplatsen eller onlinebutiken.

Ladda ner | demo | webbhotell

3. Meny hjälte

Detta plugin låter dig skapa din egen anpassade WordPress-meny i några ganska enkla steg. I synnerhet kan du enkelt och intuitivt skapa en elegant och professionell WordPress-meny. 

Från den mest komplexa mega-menyn full av funktioner, till den enklaste menyn med rullgardinsmenyn, WordPress-plugin HeroMenu ställer in alla typer av menyer och går igång på några minuter.

När det gäller funktioner som den erbjuder bland annat: perfekt drift på PC, surfplatta och smartphone, från Anpassad CSS för att lägga till dina egna stilar i menyn, en megamenu-byggare, flera webbläsare som stöds: Chrome, Firefox, Safari, Opera, IE9 och mer.

Ladda ner | demo | webbhotell

Rekommenderade resurser

Kolla in andra rekommenderade resurser som hjälper dig att lösa andra vanliga WordPress-fel. 

• Hur fixar omdirigeringsfel på Wordpress
• Hur man skapar en anpassad layout med Elementor
• Hur man skapar en intranät Wordpress för din organisation
• Hur man skapar en inloggningssida på Wordpress

Slutsats

Här är ! Det är det för denna handledning, jag hoppas att det hjälpte dig att förstå hur du laddar JavaScript på WordPress. Tveka inte att dela den med dina vänner på din sociala nätverk föredragna. 

Du kommer dock också att kunna konsultera vår medel, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser, genom att konsultera vår guide om WordPress blogg skapande.

Men under tiden, berätta om din commentaires och förslag i det dedikerade avsnittet.

.