Dodavanje Javascripta u WordPress teme na pravi način

Postoji poseban način dodavanja Javascripta vašoj WordPress temi kako bi se spriječili sukobi s dodacima ili nadređenim WordPress temama. Problem je što mnogi programeri nazivaju svoje JavaScript datoteke izravno u header.php ili footer.php datoteci, što je pogrešan način rada..


U ovom ćemo vam vodiču pokazati kako pravilno pozivati ​​vaše JavaScript datoteke koristeći svoju funkciju.php datoteku kako bi se učitali izravno u oznaku glave ili podnožja vaše web lokacije. Na ovaj način, ako razvijate temu za distribuciju, a krajnji korisnik želi izmijeniti skripte pomoću podređene teme koju može ili ako koristi dodavanje / keširanje ili druge dodatke za optimizaciju, oni će ispravno raditi. A ako radite s podređenom temom, vaše su skripte dodane na pravi način, bez kopiranja datoteke header.php ili footer.php u podređenu temu koje nikada ne bi trebale (kada radite s dobro kodiranom temom)

Pogrešan način dodavanja Javascripta u WordPress teme

Pozivanje JavaScripta u datoteci header.php ili footer.php kao što je prikazano u nastavku, NIJE točan način i toplo preporučujem protiv njega, često puta izaziva sukobe s drugim dodacima i radite stvari ručno kada rad s CMS-om nikada nije. dobra ideja.

Pravi način za dodavanje Javascripta u WordPress teme

Bolje za dodavanje JavaScripta vašoj WordPress temi jest to učiniti pomoću datoteke function.php koristeći wp_enqueue_script. Korištenje akcije wp_enqueue_scripts za učitavanje vašeg JavaScripta pomoći će da se vaša tema ne spusti u probleme.

Primjer

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

Gornji kôd učitava datoteku my-script.js na vašu web lokaciju. Kao što vidite, uključio sam samo $ držač, ali možete dodati i ovisnosti o skripti, broju verzije i o tome želite li je učitati u zaglavlje ili podnožje (zadano je zaglavlje).

Funkcija wp_enqueue_script () tehnički se može koristiti u bilo kojoj datoteci s temom ili predloškom dodataka, ali ako učitavate globalne skripte, htjet ćete je smjestiti u datoteku function.php svoje teme ili u zasebnu datoteku posebno namijenjenu za učitavanje skripti na stranica. Ali ako samo želite učitati skriptu u određenu datoteku predloška (na primjer, u galerijskim postovima), funkciju možete smjestiti točno u datoteku predloška, ​​međutim osobno preporučujem da sve skripte držite na jednom mjestu i koristite uvjete za učitavanje skripte po potrebi.

WordPress hostirani skripti

Jedna od zgodnih stvari u vezi s WordPressom je da postoji već gomila skripti koje su ugostile i registrirale i koje možete koristiti u svom razvoju tema. Na primjer, jQuery koji se koristi u gotovo svakom projektu uvijek treba UČITATI s WordPress-a i nikad se ne održavati na web lokaciji treće strane kao što je Google. Dakle, prije nego što dodate prilagođenu skriptu u svoj projekt, provjerite popis registrirane skripte kako biste bili sigurni da je već ne uključuje u WordPress, a ako jeste, trebate je učitati za razliku od registracije vlastite.

Upotreba WordPress Enqueue kuke

Prethodno smo spomenuli funkciju potrebnu za učitavanje skripte na vašu web lokaciju, međutim, pri radu s datotekama koje nisu predloške poput vaše funkcije.php datoteke trebali biste dodavati ovu funkciju unutar druge funkcije koja je spojena na odgovarajuće WordPress kuke, na taj način vaše skripte dobivaju registriran je sa svim ostalim skriptama koje su registrirali WordPress, dodaci treće strane i vaša roditeljska tema kada koristite podređenu temu.

WordPress ima dvije različite akcijske kuke koje možete koristiti za pozivanje skripti.

  1. wp_enqueue_scripts – radnja koja se koristi za učitavanje skripti na prednjem kraju
  2. admin_enqueue_scripts – radnja koja se koristi za učitavanje skripti u WP administratoru

Evo primjera (koji bi se dodao vašoj funkciji.php datoteci) kako stvoriti funkciju, a zatim pomoću WordPress kuke pozvati svoje skripte.

/ **
* Enqueue skriptu
* /
funkcija myprefix_enqueue_scripts () {
wp_enqueue_script ('moja skripta', get_template_directory_uri (). '/js/my-script.js', array (), true);
}
dodavanje ('wp_enqueue_scripts', 'myprefix_enqueue_scripts');

Bilješka: Pogledajte kako koristimo funkciju “get_template_directory_uri” prilikom definiranja lokacije vaše skripte? Ova funkcija stvara URL u mapi teme. Ako radite s podređenom temom, umjesto toga želite koristiti “get_stylesheet_directory_uri” tako da upućuje na vašu podređenu temu, a ne na roditeljsku temu..

Dodavanje umetnutog Javascript koda

Iako možete jednostavno zalijepiti umetnuti JavaScript u bilo koju datoteku predloška putem oznake skripte, dobra je ideja upotrijebiti i WordPress kuke za dodavanje umetnutog koda, posebno kada je u pitanju glavni dodatak ili kôd teme. Ispod je primjer dodavanja ugrađenih skripti na vaše web mjesto:

funkcija myprefix_add_inline_script () {
wp_add_inline_script ('moj-skripta', 'upozorenje ("zdravo svijetu");', 'nakon');
}
dodavanje ('wp_enqueue_scripts', 'myprefix_add_inline_script');

Ono što će ovo učiniti je dodati svoj umetnuti JavaScript nakon prethodno registrirane skripte “moja-skripta”. Kada koristite wp_add_inline_script, možete dodati umetnuti kod samo prije ili nakon već registrirane skripte, tako da ako pokušavate izmijeniti kôd određene skripte, provjerite je li učitana nakon nje, ili ako samo trebate dodati neki prilagođeni kôd, možete spojiti to je jquery skripta koja je uglavnom učitana od većine WordPress tema, a ako ne, možete koristiti wp_enqueue_script za učitavanje verzije jQuery-a s hostom za WordPress.

Ovom metodom ljudi mogu lako ukloniti vaše umetnute skripte pomoću podređene teme ili dodatka, on održava sve vaše prilagođene JavaScript uredno organizirane i razrađen je WordPressom što može biti sigurnije. Ako koristite podređenu temu, skripte možete učitati putem datoteke function.php umjesto da kopirate preko header.php ili footer.php datoteke na vašu podređenu temu.

Međutim, ako radite na dječjoj temi ne morate to raditi, kôd možete jednostavno izbaciti u zaglavlje bilo pomoću wp_head ili wp_footer kuka, kao što je primjer ispod:

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