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

用WordPress web stranicaprogrameri, razvojWordPress dodatakIli kada prilagođavate WordPress temu, referenciraju se neki JavaScript i CSS izvori skriptiranja.

• Ljudi obično koriste veze, oznake skripte izravno za HTML.
• Zapravo, WordPress ima ugrađene sofisticirane funkcije i metode za referenciranje skripti.
• Dakle, korištenje referenci ugrađenih metoda WordPressa je profesionalnije i proširivije.

Manjkava metoda citiranja

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

Tip 1:oznake poveznica odnose se na CSS datoteke

• Oznake skripte primjenjuju JS datoteke.Ovdje nije detaljno.

Tip 2:Koristite funkciju wp_head

• Funkcija wp_head koristi se za izlaz nekog prilagođenog ili sistemski definiranog sadržaja.
• Ponekad koristimo sljedeći kod za referencu ove datoteke:

<?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 referira na neku datoteku resursa.
• Neizbježno će doći do sukoba između resursa na koje se pozivaju dva dodatka, što će postati nestabilno i može utjecati na učinkovitost.

Koristite funkciju wp_enqueue_script

• Za referencu na resurs u WordPressu trebate koristitiwp_enqueue_scriptFunkcija koja ima riječ enqueue u nazivu stavljene u red ili sortirane funkcije.
• Uz WordPressov način stavljanja resursa u red čekanja (Enqueue Scripts), reference su odvojene od odgovarajućih datoteka i osnovnog koda.
• Ako korisnik želi onemogućiti resurs, može ga obrisati, modificirati i komentirati bez modificiranja iz osnovnog koda.

Također, neke često korištene biblioteke poput jQuery, jQuery UI itd. ugrađene su u WordPress.

Možemo koristiti funkciju wp_enqueue_script za izravno pozivanje ugrađene biblioteke, čime se štedi kod i čišća specifikacija.

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

Kako pravilno uvesti JS i CSS datoteke u WordPress?

WordPress nudi razumne metode uvoza za JS i CSS metode.

Možete koristiti sljedeći kôd za uvoz datoteke plugin.css 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 stvaranje resursa s identifikatorom plugin_stylesheet.

Zatim dodajte njegove zahtjeve u redu čekanjawp_enqueue_scriptsradnje su u tijeku.

Iako je naziv funkcije skripta, on nema nikakve veze s vrstom datoteke resursa i vrijedi i za CSS i za JS.

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

1) $ručka:Identifikator izvora.

• 由wp_enqueue_scriptprijenos.

2) $src:Lokacija izvora.

• Relativne ili apsolutne adrese koriste WordPress ugrađene funkcije za dobivanje adresa itd.
• UobičajenPozicioniranjefunkcija imaplugins_url,get_template_directory_uri等.

3) $deps:osloniti.

• Ako mislite na jQuery dodatak i trebate se osloniti na jQuery verziju, trebate ispuniti jQuery.
• Imajte na umu da se prosljeđuje kao niz.

4) $ver:Verzija izvora, izborno.

5) $in_footer:Stavljate li ga na dno?

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

Pogledajmo potpuniji referentni primjer 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 tema za WordPress, korištenjewp_enqueue_scriptUvoz resursa.

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

Glavna razlika je korištenje odgovarajuće funkcije za dobivanje direktorija teme za dobivanje adrese datoteke resursa pod temom.

možeš koristitiget_template_directory_urifunkcija za dobivanje trenutnog direktorija tema.

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