Kako WordPress pravilno uvede JavaScript?Nalaganje datotek JS in CSS po meri

用Spletno mesto WordPressprogramerji, razvijanjeWordPress vtičnikAli pa se pri prilagajanju teme WordPress sklicuje na nekatere vire skriptov JavaScript in CSS.

• Običajno ljudje uporabljajo povezave, oznake skripta neposredno za HTML.
• Pravzaprav ima WordPress vgrajene sofisticirane funkcije in metode za referenciranje skriptov.
• Torej je uporaba referenc na vgrajene metode WordPressa bolj profesionalna in bolj razširljiva.

Napačen način citiranja

Obstajata dve običajni metodi citiranja, to je v redu, le ni popolno ali razumno.

Tip 1:oznake povezav se nanašajo na datoteke CSS

• Oznake skripta uporabljajo datoteke JS.Ni podrobno tukaj.

Tip 2:Uporabite funkcijo wp_head

• Funkcija wp_head se uporablja za izpis vsebine po meri ali sistema.
• Včasih za sklicevanje na to datoteko uporabimo naslednjo kodo:

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

• Kopirajte zgornjo kodo v datoteko functions.php, da se sklicujete na ustrezne datoteke.

Mehanizem virov WordPress Enqueue Scripts

Kot vsi vemo, ima WordPress veliko vtičnikov:

• Skoraj vsak vtičnik se sklicuje na datoteko virov.
• Neizogibno bo prišlo do konfliktov med viri, na katere se sklicujeta dva vtičnika, kar bo postalo nestabilno in lahko vpliva na učinkovitost.

Uporabite funkcijo wp_enqueue_script

• Za sklicevanje na vir v WordPressu morate uporabitiwp_enqueue_scriptFunkcija, ki ima besedo enqueue v imenu v čakalni vrsti ali razvrščene funkcije.
• S tem WordPress načinom postavljanja virov v čakalno vrsto (Enqueue Scripts) so reference ločene od ustreznih datotek in jedrne kode.
• Če želi uporabnik onemogočiti vir, ga lahko izbriše, spremeni in komentira, ne da bi ga spremenil iz osnovne kode.

V WordPress so vgrajene tudi nekatere pogosto uporabljene knjižnice, kot je jQuery, jQuery UI itd.

S funkcijo wp_enqueue_script lahko neposredno pokličemo vgrajeno knjižnico, kar prihrani kodo in jasnejšo specifikacijo.

Če uporabljate to funkcijo za sklicevanje na lastne datoteke JS in CSS, morate uporabitiwp_register_scriptFunkcija registrira identifikator (ročaj) in nato uporabiwp_enqueue_scriptFunkcija pokliče vir, ki ustreza tej zastavici.

Kako pravilno uvoziti datoteke JS in CSS v WordPress?

WordPress ponuja razumne metode uvoza za metode JS in CSS.

S to kodo lahko uvozite datoteko plugin.css v vtičnik ▼

<?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' ); 
?>

Zgoraj uporablja funkcijo wp_register_script za ustvarjanje vira z identifikatorjem plugin_stylesheet.

Nato dodajte njegove zahteve v čakalni vrstiwp_enqueue_scriptsakcije so v teku.

Čeprav je ime funkcije skript, nima nobene zveze z vrsto datoteke virov in velja tako za CSS kot za JS.

Funkcija wp_register_script res ni tako preprosta, lahko ima pet parametrov:

1) $handle:Identifikator vira.

• 由wp_enqueue_scriptprenos.

2) $src:Lokacija vira.

• Relativni ali absolutni naslovi uporabljajo vgrajene funkcije WordPressa za pridobivanje naslovov itd.
• ObičajniPozicioniranjefunkcija imaplugins_url,get_template_directory_uri等.

3) $deps:zanesti se.

• Če imate v mislih vtičnik jQuery in se morate zanašati na gradnjo jQuery, morate izpolniti jQuery.
• Upoštevajte, da se posreduje kot niz.

4) $ver:Različica vira, neobvezno.

5) $in_footer:Ali ga postavite na dno?

• Običajno morajo biti datoteke JS postavljene na dno strani, ta parameter lahko nastavite na True, pustite prazno ali False za izpis na vrh.

Oglejmo si popolnejši referenčni primer datoteke JavaScript ▼

<?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' ); 
?>

Teme WordPress uporabljajo wp_enqueue_script za uvoz virov

Programerji pri razvoju teme WordPress, uporabawp_enqueue_scriptUvoz virov.

• Zgornji primeri so primeri referenčnih virov za razvoj vtičnika WordPress.
• Metoda, navedena v temi, je podobna.

Glavna razlika je uporaba ustrezne funkcije za pridobitev imenika tem, da dobite naslov datoteke virov pod temo.

lahko uporabišget_template_directory_urifunkcijo za pridobitev trenutnega imenika tem.

Če uporabljate podrejeno temo, boste morali uporabitiget_stylesheet_directory_uriFunkcija pridobi imenik nadrejene teme, da pridobi ustrezne vire.