Želite li saznati kako učitati JavaScript na WordPressu?

Sve WordPress tema obično se sastoji od PHP, HTML, CSS i JavaScript datoteka. JavaScript je popularan programski jezik među programerima. WordPress tema. To je jezik koji HTML stranicu čini interaktivnom, a također vam može omogućiti interakciju s poslužiteljem.

Znanje kako ga koristiti na svojoj web lokaciji bit će velika prednost.

Kako biste zapravo koristili JavaScript, morate znati kako ga učitati na svojoj web stranici.

Ali prije, ako nikad niste instalirali WordPress, otkrijte Kako instalirati 7 korake WordPress blog et Kako pronaći, instalirati i aktivirati WordPress temu na svoj blog 

Onda se vratimo zašto smo ovdje.

Kako učitati JavaScript skripte na WordPressu

Vratimo se korak unatrag i prvo pogledajte kako WordPress učitava skripte i stilove. Saznali ste da ih prilikom stvaranja JavaScript datoteka možete dodati na svoju stranicu u odjeljku zaglavlja ili u podnožju.

Otkrijte i naš udžbenik o Kako komprimirati CSS, HTML i Javascript datoteke

WordPress radi potpuno istu stvar, ali ne možete samo ispustiti ove oznake skripte u datoteku zaglavlja ili podnožja vašeg WordPress tema. WordPress koristi pametni mehanizam učitavanja pod nazivom " enqueueing ".

Ovaj je mehanizam neophodan kako bi se dobio smisao ovisnosti. Ako pišete jQuery kôd za svoju WordPress temu, tada se najprije mora učitati jQuery.

Pišete kôd koji se oslanja na jQuery dodatak. U ovom slučaju prvo se mora učitati jQuery, zatim dodatak jQuery, a zatim vaš kôd.

Kako "Enqueueing" skripte (Dodaj u red)

Skripte možete staviti u red čekanja u svojoj WordPress tematskoj mapi ili u svojoj WordPress plugin. Evo cjelovitog koda za uključivanje skripte koja se oslanja na jQuery:

my_theme_scripts of function () {

 wp_enqueue_script ('moja-skripta ", get_template_directory_uri ().' /js/my-script.js ', niz (' jquery '),' 1.0.0 ', true);

}

add_action ('wp_enqueue_scripts', 'my_theme_scripts');

Prije svega, funkcija mora biti " zakačen Na WordPressu (Korištenje WordPress kuke). Prvi argument funkcije add_action () kaže WordPressu gdje treba postaviti te skripte:

• Na javnom prostoru
• Na ploči s instrumentima

Ako koristite " wp_enqueue_scripts Oni će se učitati u javni prostor ako koristite " admin_enqueue_scripts Oni će se učitati na nadzornu ploču.

U funkciji « ADD_ACTION Možete koristiti " wp_enqueue_script Da biste dodali potrebne skripte. Funkcija uzima potrebni parametar i četiri opcionalna parametra:

• Prvi parametar je naziv vaše skripte. Možete odabrati što želite, ali svakako upotrijebite jedinstveno ime.
• Drugi parametar treba sadržavati lokaciju datoteke na vašoj WordPress temi ili WordPress plugin.
• Treći parametar sadrži niz ovisnosti. U gornjem primjeru rekao sam da je jQuery ovisnost. Sve se ovisnosti učitavaju prije dotične skripte.
• Četvrti parametar je broj verzije
• Peti i posljednji parametar označava želite li skriptu učitati u zaglavlje ili podnožje. Upotrijebite "true" za učitavanje u podnožju ili "false" za učitavanje skripte u zaglavlju (također ne možete ispuniti ovaj parametar).

gospodarske zgrade

WordPress nudi kopiju jQueryja, zbog čega ga možete dodati kao ovisnost bez ikakvih gnjavaža. Postoji niz drugih jQuery skripti i dodataka koje WordPress nudi. Ako vaš kôd ovisi o jednom od njih, ne morate koristiti jednu od svojih kopija, samo ga dodajte kao ovisnost. ovdje je popis skripti koje WordPress nudi.

Ako uključite više neovisnih skripti, možete ih dodati kao ovisnosti na potpuno isti način. Pogledajte primjer u nastavku:

my_theme_scripts of function () {

 wp_enqueue_script ("skripta moje baze", get_template_directory_uri (). '/js/my-base-script.js', niz ('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');

Budući da prva skripta ovisi o jQuery-u, onda i sljedeća skripta ovisi o njoj. Tako da ne trebate dodati jQuery kao ovisnost za oboje. To olakšava upravljanje ovisnostima.

uvjetna Učitavanje

Ponekad ćete poželjeti koristiti svoju skriptu na svakoj stranici, ali često ćete poželjeti učitati skriptu na određenoj stranici. To je osobito istinito kada razmišljate o dodavanju skripti na nadzornu ploču. Dobar primjer je korištenje kratkih kodova. Kratki kodovi omogućuju korisnicima izradu naprednih prikaza na vizualnom uređivaču teksta pomoću nekoliko jednostavnih trikova.

my_theme_scripts of function () {

 wp_register_script ('moja-skripta', get_template_directory_uri (). '/js/my-script.js', niz ('jquery'), '1.0.0', true);

 wp_enqueue_script ('moja-skripta');

}

add_action ('wp_enqueue_scripts', 'my_theme_scripts');

Skriptu smo spremili tako da WordPress uči o skripti, ali koristimo " Postavi u red ”. Na ovaj se način skripta dodaje na stranicu samo ako se na toj stranici koristi kratki kod.

Druga metoda učitavanja skripti s uvjetima je korištenje uvjetnih funkcija. Ako želite učitati skriptu na svim arhivskim stranicama kategorije, možete koristiti funkciju is_category ().

Na primjer, mogli biste stvoriti vrtuljak slika koje korisnici mogu dodati u članak na sljedeći način: [id vrtuljka = '42,124,123,331,90, XNUMX ′]. Na stranici članka stvorit će se vrtuljak pomoću slika označenih njihovim ID-ovima.

Da biste to učinili, morate stvoriti datoteku " carousel.js Koji se temelji na jQueryju. Slijedi kod za dolazak (Ne stvara vrtiljak, ali omogućuje vam da vidite kako se događa proces učitavanja):

add_action ('wp_enqueue_scripts', 'my_theme_scripts');

my_theme_scripts of function () {

 wp_register_script ('moj-vrtuljak', get_template_directory_uri (). '/js/my-carousel.js', niz ('jquery'), '1.0.0', true);

}

add_shortcode ('vrtuljak', 'moj_ vrtuljak');

my_carousel funkcija ($ args) {

 $ atts = shortcode_atts (niz (

 'ID-ovi' => ",

 ), $ Atts, 'vrtuljak');

 wp_enqueue_script ('moj-vrtuljak');

 // Kôd da biste ovdje prikazali vrtiljak

}

Uklanjanje i zamjena skripti

To je daleko uobičajen scenarij, ali ponekad ćete možda trebati ukloniti ili zamijeniti skriptu. Padao sam u situacije u kojima skripta koju dodaje dodatak (ali ne koristi se temom) izazvao probleme s kompatibilnošću. "Povlačenje" je bila najbolja opcija, jer je pogreška potpuno nestala.

Također možete zamijeniti jQuery novom verzijom ako nešto testirate kako biste bili sigurni da će biti kompatibilna s novijim verzijama.

U tim situacijama funkcije wp_deregister_script () "A" wp_dequeue_script () Korisni su. Evo načina za uređivanje koda koji je već dodan u WordPressu.

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 ('moja-skripta', get_template_directory_uri (). '/js/my-script.js', niz ('jquery'), '1.0.0', true);

}

add_action ('wp_enqueue_scripts', 'my_theme_scripts');

Konačne misli

Ova metoda prijenosa na WordPress izvrsna je jer vam omogućuje dodavanje skripti na modularan način. To će vam omogućiti da modularno dodate ovisnosti.

Otkrijte i neke premium WordPress dodatke  

Možete koristiti druge WordPress plugins dati moderan izgled i optimizirati rukovanje vašim blogom ili web stranicom.

Ovdje vam nudimo nekoliko premium WordPress dodataka koji će vam pomoći u tome.

1. Premium SEO Pack

Premium SEO paket je a WordPress plugin koji optimizira vaš SEO i sažima CSS radi poboljšanja brzine učitavanja vaše web stranice.

Dodatak vam također omogućuje upravljanje dizajnom vaše web stranice u nekoliko klikova. Njegove značajke uključuju: CSS i JS kompresiju, integraciju mape videozapisa i isječaka, formatiranje HTML i XML datoteka, preusmjeravanje stranica 404 i 301, dijeljenje društvenih mreža, pružanje 'Oznaka ALT, vrlo prilagodljiv izgled

Preuzmite | demo | Web hosting

2. Birač vremena za isporuku Woocommerce za isporuku

Woocommerce alat za odabir vremena dostave za WooCommerce proširenje koje omogućava kupcima da odaberu datum i vrijeme isporuke na stranici za plaćanje. 

Kupci će moći odabrati vrijeme isporuke paketa kod kuće. Vrijeme isporuke bit će vidljivo administratorima web stranica, a bit će poslano i e-mailom administratorima web stranice ili internetske trgovine.

Preuzmite | demo | Web hosting

3. Izbornik junaka

Ovaj dodatak omogućuje vam stvaranje vlastitog prilagođenog WordPress izbornika u nekoliko prilično jednostavnih koraka. Konkretno, omogućuje vam jednostavno i intuitivno stvaranje elegantnog i profesionalnog WordPress izbornika. 

Od najsloženijeg mega izbornika koji ima puno mogućnosti, do najjednostavnijeg izbornika s padajućeg izbornika, WordPress dodatka HeroMenu postavlja bilo koju vrstu izbornika i pokreće ga za nekoliko minuta.

U pogledu značajki koje nudi između ostalog: savršen rad na računalu, tabletu i pametnom telefonu od Prilagođeni CSS da biste dodali svoje stilove u izbornik, program za izradu megamenua, nekoliko podržanih preglednika: Chrome, Firefox, Safari, Opera, IE9 i još mnogo toga.

Preuzmite | demo | Web hosting

Preporučeni resursi

Pogledajte druge preporučene resurse koji će vam pomoći riješiti druge uobičajene WordPress pogreške. 

• Kako to Škripac Preusmjeravanje greške na WordPress
• Kako stvoriti prilagođeni izgled s Elementor
• Kako stvoriti WordPress Intranet za vašu organizaciju
• Kako izraditi stranicu za prijavu na WordPress

Zaključak

Ovdje je ! To je sve za ovaj vodič, nadam se da vam je pomoglo da razumijete kako učitati JavaScript na WordPressu. Ne ustručavajte se podijeliti ga sa svojim prijateljima na vašem društvene mreže poželjna. 

Međutim, također ćete moći konzultirati naše sredstva, ako vam treba više elemenata za provođenje projekata kreiranja internetskih stranica, savjetujući se s našim vodičem na internetu Izrada bloga WordPress.

Ali u međuvremenu, reci nam o svom Komentari i prijedloge u posebnom odjeljku.

...