Kako WordPress pravilno uvodi JavaScript?Prilagođeno učitavanje JS i CSS datoteka

upotrebaWordPress web stranicaprogrameri, razvojWordPress dodatakIli kada prilagođavate WordPress temu, navode se neki resursi za JavaScript i CSS skripte.

• Ljudi obično koriste linkove, skripte direktno za HTML.
• U stvari, WordPress ima ugrađene sofisticirane funkcije i metode za referenciranje skripti.
• Dakle, korištenje WordPress-ovih ugrađenih referenci metoda je profesionalnije i proširivo.

Pogrešna metoda citiranja

Postoje dvije uobičajene metode citiranja, u redu je, samo nije savršeno ili razumno.

Tip 1:link oznake se odnose na CSS fajlove

• Oznake skripte primjenjuju JS datoteke.Ovdje nije detaljno.

Tip 2:Koristite funkciju wp_head

• Funkcija wp_head se koristi za izlaz nekog prilagođenog ili sistemski definiranog sadržaja.
• Ponekad koristimo sljedeći kod da referenciramo ovaj fajl:

<?php
add_action('wp_head', 'wpcwl_normal_script');
function wpcwl_normal_script() {
echo '资源文件的链接';
}
?>

• Kopirajte gornji kod u datoteku functions.php da biste referencirali odgovarajuće datoteke.

Mehanizam resursa WordPress Enqueue Scripts

Kao što svi znamo, WordPress ima mnogo dodataka:

• Gotovo svaki dodatak referencira neki resursni fajl.
• Neizbežno će doći do sukoba između resursa na koje upućuju dva dodatka, što će postati nestabilno i može uticati na efikasnost.

Koristite funkciju wp_enqueue_script

• Za referencu na resurs u WordPress-u trebate koristitiwp_enqueue_scriptFunkcija koja ima riječ enqueue u imenu stavljene u red ili sortirane funkcije.
• Sa ovim WordPress načinom stavljanja resursa u red (Enqueue Scripts), reference su odvojene od odgovarajućih datoteka i jezgra koda.
• Ako korisnik želi da onemogući resurs, može ga obrisati, modificirati i komentirati bez mijenjanja iz osnovnog koda.

Takođe, neke često korišćene biblioteke kao što su jQuery, jQuery UI, itd. su ugrađene u WordPress.

Možemo koristiti funkciju wp_enqueue_script da direktno pozovemo ugrađenu biblioteku, koja čuva kod i čistiju specifikaciju.

Ako koristite ovu funkciju za referenciranje vlastitih JS i CSS datoteka, trebate je koristitiwp_register_scriptFunkcija registruje identifikator (ručnik) i zatim koristiwp_enqueue_scriptFunkcija poziva resurs koji odgovara ovoj zastavici.

Kako pravilno uvesti JS i CSS datoteke u WordPress?

WordPress pruža razumne metode uvoza za JS i CSS metode.

Možete koristiti sljedeći kod za uvoz plugin.css datoteke u dodatak ▼

<?php
function wpcwl_add_styles() {
wp_register_script('plugin_stylesheet', plugins_url('plugin.css', __FILE__));
wp_enqueue_script('plugin_stylesheet');
}

add_action( 'wp_enqueue_scripts', 'wpcwl_add_styles' ); 
?>

Gore navedeno koristi funkciju wp_register_script za kreiranje resursa s identifikatorom plugin_stylesheet.

Zatim dodajte njegove zahtjeve u redu čekanjawp_enqueue_scriptsakcije su u toku.

Iako je ime funkcije skripta, ono nema nikakve veze s tipom datoteke resursa i vrijedi i za CSS i za JS.

Funkcija wp_register_script zaista nije tako jednostavna, može imati pet parametara:

1) $handle:Identifikator resursa.

• 由wp_enqueue_scripttransfer.

2) $src:Lokacija resursa.

• Relativne ili apsolutne adrese koriste ugrađene funkcije WordPress-a za dobivanje adresa itd.
• ČestoPozicioniranjefunkcija imaplugins_url,get_template_directory_uriČekaj.

3) $deps:osloniti se.

• Ako mislite na jQuery dodatak i trebate se osloniti na jQuery za izgradnju, morate popuniti jQuery.
• Imajte na umu da se prosljeđuje kao niz.

4) $ver:Verzija resursa, opciono.

5) $in_footer:Da li ga stavljate na dno?

• Normalno, JS datoteke bi trebale biti smještene na dnu stranice, možete postaviti ovaj parametar na True, ostaviti ga praznim ili False za izlaz na vrh.

Pogledajmo potpuniji primjer reference JavaScript datoteke ▼

<?php
function wpcwl_add_scripts() {
wp_register_script('plugin_script', plugins_url('plugin_script.js', __FILE__), array('jquery'),'1.1', true);
wp_enqueue_script('plugin_script');
}

add_action( 'wp_enqueue_scripts', 'wpcwl_add_scripts' ); 
?>

WordPress teme koriste wp_enqueue_script za uvoz resursa

Programeri u razvoju WordPress tema, koristewp_enqueue_scriptUvezite resurse.

• Gore navedeni primjeri su primjeri referenciranih resursa za razvoj WordPress dodataka.
• Metoda navedena u temi je slična.

Glavna razlika je u korištenju odgovarajuće funkcije za dobivanje direktorija teme za dobivanje adrese datoteke resursa ispod teme.

možeš koristitiget_template_directory_urifunkcija da dobijete trenutni direktorij tema.

Ako koristite dječju temu, morat ćete je koristitiget_stylesheet_directory_uriFunkcija dobiva direktorij nadređene teme kako bi dobila odgovarajuće resurse.