Vill du behärska hur du lägger till jQuery -kod på WordPress? Så fortsätt läsa för att lära dig mer.

Trots att WordPress har funnits ett tag och tillägget av temaskript och plugins också har funnits ett tag, finns det fortfarande en viss förvirring över vilken metod som ska användas. använd för att lägga till skript på WordPress.

Så vi kommer att försöka klargöra saker.

Eftersom jQuery är det mest använda JavaScript-ramverket visar vi dig hur du lägger till det i ett tema eller en Wordpress plugin.

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

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

JQuery-kompatibilitetsläge

Innan vi börjar lägga till skript på WordPress, låt oss utforska kompatibilitetsläget för jQuery. WordPress kommer med en kopia av jQuery, som du kan använda med din kod. När WordPress jQuery laddas använder det kompatibilitetsläge, som är en mekanism för att undvika konflikter med andra bibliotek.

Ta reda på om han Ska jQuery tas bort från dina teman och plugins Wordpress ?

Det betyder att du inte kan använda dollartecknet direkt som i andra projekt. När du skriver jQuery på WordPress måste du använda jQuery istället.

Titta på koden nedan för att se vad jag menar:

/ * Normalt läge * / $ ('. Döljbart'). På ('klicka', funktion () {$ (detta). Göm ();}) / * Kompatibilitetsläge * / jQuery ('. Döljbart'). På ('klicka', funktion () {jQuery (detta). göm ();})

Vad du behöver veta är att med några få ändringar kan du använda dollartecknet igen. Att använda varje gång "jQuery" på all din kod kommer att komplicera mycket skrivande.

Kolla in 10-kodredigerare för WordPress-utvecklare

Bara för att sammanfatta, om du känner till jQuery, är $ -tecknet bara ett alias för jQuery (), sedan ett alias för en funktion. Den grundläggande syntaxen är: $ (Selector) .action () :

• Ett dollartecken för att definiera jQuery
• A (väljare) för att "hitta" HTML-element
• En jQuery () -åtgärd för att utföra på dessa element

Om du laddar ditt skript i sidfoten kommer du att kunna slå in din kod i en anonym funktion. Så här gör du det:

(function ($) {$ ('. hideable'). on ('click', function () {$ (this) .hide ();})}) (jQuery);

Om du vill lägga till ditt skript i rubriken (vad du bör undvika om möjligtDu kan linda in den i en funktion som körs när dokumentet är klart.

Upptäck också förresten Hur man lägger till facilement kod på WordPress utan att bryta din webbplats

jQuery (dokument). klar (funktion ($) {$ ('. gömbar'). på ('klicka', funktion () {$ (detta). dölj ();})});

Hur man länkar dina skript till jQuery

Nu när du kan skriva giltig jQuery-kod på WordPress kommer vi att länka vårt arbete till vår webbplats. I WordPress kallas processen ' enqueueing '(svanssystem). För en vanlig HTML-webbplats bör vi använda taggenskript> för att lägga till skript.

WordPress kan göra samma sak, men vi kommer att använda de speciella funktionerna i WordPress för att uppnå detta. På detta sätt hanterar WordPress alla våra beroenden för oss.

Om du arbetar med ett tema kan du använda funktionen wp_enqueue_script () i din fil functions.php fil. Så här kan du göra det:

funktionen my_theme_scripts () {wp_enqueue_script ('my-great-script', get_template_directory_uri (). '/js/my-great-script.js', array ('jquery'), '1.0.0', true); } add_action ('wp_enqueue_scripts', 'my_theme_scripts');

Funktionen tar fem argument. Den första kan du använda för att referera till skriptet, den andra är platsen för skriptfilen, den tredje parametern är en rad beroenden.

Jag lade till jQuery som ett beroende eftersom skriptet använder det. Om du skapar ett skript som beror på "my-stor-script Du måste lägga till den i beroendelistan så att WordPress vet vilka filer den behöver laddas först.

Upptäck också Så här fyller du JavaScript på Wordpress

Den fjärde parametern är ett versionsnummer och den femte låter WordPress veta var man ska lägga skriptet. Som standard kommer skript att laddas i rubriken, vilket är dåligt, eftersom det saktar ner laddningen av din webbplats (webbläsare stoppar inläsning av alla sidor närhelst ett block est rencontré). Du måste ladda alla dina skript i sidfoten, om möjligt genom att göra den femte parametern " sann ".

Hur man lägger till ett skript på instrumentbrädan

Du kan också lägga till skript på instrumentbräda. De använda funktionerna är exakt samma, du behöver bara använda en " krok " annorlunda. Ta en titt på exemplet nedan:

function my_admin_scripts () {wp_enqueue_script ('my-great-script', plugin_dir_url (__FILE__). '/js/my-great-script.js', array ('jquery'), '1.0.0', true); } add_action ('admin_enqueue_scripts', 'my_admin_scripts');

Istället för att använda wp_enqueue_scripts vi måste använda admin_enqueue_scripts, och det är allt !

Användning av villkorade taggar

Använd villkorliga taggar så att du bara läser in dina skript när det behövs. Detta används oftast på instrumentpanelen, där du bara vill skripta på en viss sida. Detta sparar bandbredd och bearbetningstid vilket innebär snabbare laddningstider för din webbplats.

Upptäck också vår 10 WordPress-plugins för att förbättra laddningshastigheten för din blogg

Ta en titt på dokumentations admin_enqueue_scripts i WordPress Codex för mer information.

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. Interaktiva världskartor

Interaktiva världskartor är en Wordpress plugin som hjälper dig att skapa så många kartor du vill, med interaktiva och färgade markörer, kontinenter, länder eller regioner.

Den är helt kompatibel med den nya versionen av Wordpress och Visual Composer. Tack vare detta plugin kan du visa flera typer av regioner, t.ex. en karta över hela världen, en kontinent eller en subkontinent (Afrika, Europa, Amerika, Asien, Oceanien och alla deras subkontinentar), ett land, ett land dividerat med sina regioner, en delstat i USA, USA delad med storstadsområden, en delstat i USA dividerad med storstadsområden.

Ladda ner | demo | webbhotell

2. AJAX-kontaktformulär med spårning

Ce Wordpress plugin låter dig enkelt lägga till kontakt- eller kommentarsformulär till din Wordpress blogg. Den kommer med en inställningshanterare som kan nås direkt via WordPress-instrumentpanelen.

Dess huvudfunktioner är bland annat: a fför e-post, stöd från CAPTCHA matematik om formulär, anpassning och konfiguration via WordPress-instrumentpanelen, möjligheten till ddefiniera en anpassad autosvar, stöd för anpassad CSS och mer

Ladda ner | demo | webbhotell 

3. PayPal Standard Payment Gateway för Ninja Forms

Med PayPal Standard Gateway för Ninja Forms kan du skapa formulär som integreras sömlöst med PayPal-betalningsgateway. 

Du kommer att kunna skapa personliga beställningsformulär och ta emot betalningar med vanliga Paypal-konton. Dess huvudfunktioner är: enkel och snabb integration, IPN-integration, möjligheten att aktivera / inaktivera PayPal-gatewayen på enskilda formulär, stöd för regelbundna betalningar etc.

Ladda ner | demo |  webbhotell

Andra rekommenderade resurser

Vi inbjuder dig också att konsultera resurserna nedan för att gå vidare i greppet och kontrollen av din webbplats och blogg.

• Hur man använder kategorier och taggar effektivt på Wordpress
• Hur man skapar en lyhörd meny för mobil Wordpress
• Hur man skapar en intranät Wordpress för din organisation
• Hur man installerar en plugin i Wordpress

Slutsats

Här! Det är det för denna handledning. Hoppas att du nu vet hur du lägger till skript till WordPress. Känn dig fri att dela tipset med dina vänner på dina sociala nätverk.

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.

.