Vil du mestre, hvordan du tilføjer jQuery -kode til WordPress? Så fortsæt med at læse for at lære mere.

På trods af at WordPress har været tilgængeligt i et stykke tid, og tilføjelsen af ​​temaskripts og plugins også har eksisteret i et stykke tid, er der stadig en vis forvirring over, hvilken metode der skal bruges. bruges til at tilføje scripts på WordPress.

Så vi vil prøve at afklare ting.

Da jQuery er det mest udbredte JavaScript Framework, viser vi dig, hvordan du tilføjer det til et tema eller en WordPress plugin.

Men før, hvis du aldrig har installeret WordPress-opdagelse Sådan installeres en WordPress blog i 7 trin et Hvordan at finde, installere og aktivere et WordPress tema på din blog 

Så tilbage til, hvorfor vi er her.

JQuery-kompatibilitetstilstand

Inden vi begynder at tilføje scripts på WordPress, lad os undersøge kompatibilitetstilstanden for jQuery. WordPress kommer med en kopi af jQuery, som du kan bruge med din kode. Når WordPress jQuery indlæses, bruger den kompatibilitetstilstand, som er en mekanisme til at undgå konflikter med andre biblioteker.

Find ud af om han Bør jQuery fjernes fra dine temaer og plugins WordPress ?

Dette betyder, at du ikke kan bruge dollartegnet direkte, som du ville gøre i andre projekter. Når du skriver jQuery på WordPress, skal du i stedet bruge jQuery.

Se koden nedenfor for at se, hvad jeg mener:

/ * Normal tilstand * / $ ('. Skjult'). Til ('klik', funktion () {$ (dette). Skjul ();}) / * Kompatibilitetstilstand * / jQuery ('. Skjult'). Til ('klik', funktion () {jQuery (dette). skjul ();})

Hvad du har brug for at vide, er, at du med et par ændringer kan bruge dollartegnet igen. Brug af hver gang "jQuery" på al din kode vil komplicere meget skrivning.

Tjek den 10 kode redaktører for udviklere WordPress

Bare for at sammenfatte, hvis du kender jQuery, er $ -tegnet bare et alias til jQuery (), derefter et alias for en funktion. Den grundlæggende syntaks er: $ (Selector) .action () :

• Et dollartegn til at definere jQuery
• A (vælger) til at "finde" HTML-elementer
• En jQuery () handling, der skal udføres på disse elementer

Hvis du indlæser dit script i sidefoden, kan du indpakke din kode i en anonym funktion. Sådan gør du det:

(funktion ($) {$ ('. skjult'). på ('klik', funktion () {$ (dette). skjul ();})}) (jQuery);

Hvis du vil tilføje dit script på overskriften (hvad du bør undgå, hvis muligtDu kan pakke den ind i en funktion, der kører, når dokumentet er klar.

Oplev også forresten Sådan tilføjes let kode på WordPress uden at ødelægge dit websted

jQuery (dokument). klar (funktion ($) {$ ('. skjult'). på ('klik', funktion () {$ (dette). skjul ();})});

Sådan linkes dine scripts til jQuery

Nu hvor du kan skrive en gyldig jQuery-kode på WordPress, knytter vi vores arbejde til vores websted. I WordPress kaldes processen ' enqueueing "(halesystem). For et normalt HTML-websted skal vi bruge taggetscript> for at tilføje scripts.

WordPress kan gøre det samme, men vi vil bruge de specielle funktioner i WordPress til at opnå dette. På denne måde administrerer WordPress alle vores afhængigheder for os.

Hvis du arbejder på et tema, kan du bruge funktionen wp_enqueue_script () i din fil functions.php fil. Sådan kan du gøre det:

funktion 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 tager fem argumenter. Den første kan du bruge til at henvise til scriptet, den anden er placeringen af ​​scriptfilen, den tredje parameter er en række afhængigheder.

Jeg tilføjede jQuery som en afhængighed, fordi scriptet bruger det. Hvis du opretter et script, der afhænger af "min-store-script Du skal tilføje den til afhængighedslisten, så WordPress ved, hvilke filer den skal indlæses først.

Opdag også Sådan indlæse JavaScript på WordPress

Den fjerde parameter er et versionsnummer, og den femte parameter lader WordPress vide, hvor man skal placere scriptet. Som standard indlæses scripts i overskriften, hvilket er dårlig praksis, da det bremser indlæsningen af ​​din websideside (browsere stopper al sideindlæsning, hver gang en blokering est rencontré). Du skal indlæse alle dine scripts i sidefoden, hvis det er muligt ved at oprette den femte parameter " sand '.

Sådan tilføjes et script til instrumentbrættet

Du kan også tilføje scripts på instrumentbræt. De anvendte funktioner er nøjagtigt de samme, du skal bare bruge en " krog " forskellige. Se eksemplet nedenfor:

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

I stedet for at bruge wp_enqueue_scripts vi skal bruge admin_enqueue_scripts, og det er alt!

Brug af betingede tags

Brug betingede tags, så du kun indlæser dine scripts, når det er nødvendigt. Dette bruges oftest på instrumentbrættet, hvor du kun vil script på en bestemt side. Dette sparer båndbredde og behandlingstid, hvilket betyder hurtigere indlæsningstider for dit websted.

Oplev også vores 10 WordPress-plugins for at forbedre indlæsningshastigheden for din blog

Se på dokumentationen admin_enqueue_scripts i WordPress Codex for at få flere oplysninger.

Oplev også nogle premium WordPress-plugins  

Du kan bruge andet WordPress plugins for at give et moderne udtryk og for at optimere håndteringen af ​​din blog eller hjemmeside.

Vi tilbyder dig her nogle premium WordPress-plugins, der hjælper dig med det.

1. Interaktive verdenskort

Interaktive verdenskort er en WordPress plugin som hjælper dig med at oprette så mange kort, som du vil, med interaktive og farvede markører, kontinenter, lande eller regioner.

Det er fuldt ud kompatibelt med den nye version af WordPress og Visual Composer. Takket være dette plugin kan du vise flere typer regioner, såsom: et kort over hele verden, et kontinent eller et subkontinent (Afrika, Europa, Amerika, Asien, Oceanien og alle deres subkontinenter), et land, en land divideret med dets regioner, en stat i De Forenede Stater, De Forenede Stater divideret med storbyområder, en stat i USA divideret med storbyområder.

Downloade | demo | Web-hosting

2. AJAX-kontaktformular med sporing

Ce WordPress plugin giver dig mulighed for nemt at tilføje kontakt- eller kommentarformularer til din WordPress blog. Den leveres med en indstillingsadministrator, som kan tilgås direkte via WordPress-dashboardet.

Dets vigtigste funktioner er blandt andre: a ftil email, støtte fra CAPTCHA matematik om formularer, tilpasning og konfiguration via WordPress-dashboard, muligheden for ddefinere en brugerdefineret autoresponder, support til brugerdefineret CSS og mere

Downloade | demo | Web-hosting 

3. PayPal Standard Betaling Gateway for Ninja Forms

PayPal Standard Gateway for Ninja Forms giver dig mulighed for at oprette formularer, der integreres problemfrit med PayPal-betalingsgatewayen. 

Du vil være i stand til at oprette personlige bestillingsformularer og modtage betalinger ved hjælp af standard Paypal-konti. Dets vigtigste funktioner er: nem og hurtig integration, IPN-integration, muligheden for at aktivere / deaktivere PayPal-gatewayen på individuelle formularer, support til regelmæssige betalinger osv.

Downloade | demo |  Web-hosting

Andre anbefalede ressourcer

Vi inviterer dig også til at konsultere nedenstående ressourcer for at komme videre i grebet og kontrollen af ​​dit websted og blog.

• Sådan bruger kategorier og tags effektivt på WordPress
• Sådan oprettes en lydhør menu til mobil WordPress
• Sådan oprettes et WordPress-intranet til din organisation
• Sådan installeres et plugin i WordPress

Konklusion

Her ! Det er det til denne tutorial. Håber du nu ved, hvordan du tilføjer script til WordPress. du er velkommen til del tipet med dine venner på dine sociale netværk.

Du vil dog også kunne konsultere vores ressourcer, hvis du har brug for flere elementer til at udføre dine projekter med oprettelse af internetsider ved at konsultere vores guide om WordPress blog oprettelse.

Men i mellemtiden, fortæl os om din kommentarer og forslag i det dedikerede afsnit.

...