Kuinka WordPress ottaa JavaScriptin käyttöön oikein?Mukautettu JS- ja CSS-tiedostojen lataus

用WordPress-sivustoohjelmoijat, kehittävätWordPress-laajennusTai kun muokkaat WordPress-teemaa, joihinkin JavaScript- ja CSS-komentosarjaresursseihin viitataan.

• Yleensä ihmiset käyttävät linkki-, komentosarjatunnisteita suoraan HTML:ään.
• Itse asiassa WordPressissä on sisäänrakennettuja kehittyneitä toimintoja ja menetelmiä komentosarjoihin viittaamiseen.
• Joten WordPressin sisäänrakennettujen menetelmäviitteiden käyttäminen on ammattimaisempaa ja laajennettavissa olevaa.

Virheellinen lainausmenetelmä

On olemassa kaksi yleistä lainausmenetelmää, se on hyvä, se ei vain ole täydellinen tai järkevä.

Tyyppi 1:linkkitunnisteet viittaavat CSS-tiedostoihin

• Komentosarjatunnisteet käyttävät JS-tiedostoja.Ei tässä tarkemmin.

Tyyppi 2:Käytä wp_head-funktiota

• wp_head-funktiota käytetään mukautetun tai järjestelmän määrittämän sisällön tulostamiseen.
• Käytämme joskus seuraavaa koodia viittaamaan tähän tiedostoon:

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

• Kopioi yllä oleva koodi functions.php-tiedostoon viitataksesi vastaaviin tiedostoihin.

WordPress Enqueue Scripts -resurssimekanismi

Kuten kaikki tiedämme, WordPressissä on paljon laajennuksia:

• Melkein jokainen laajennus viittaa johonkin resurssitiedostoon.
• Kahden laajennuksen viittaamien resurssien välillä tulee väistämättä ristiriitoja, jotka muuttuvat epävakaiksi ja voivat vaikuttaa tehokkuuteen.

Käytä wp_enqueue_script-funktiota

• Jos haluat viitata WordPressin resurssiin, sinun tulee käyttääwp_enqueue_scriptFunktio, jonka jonossa olevan tai lajitellun funktion nimessä on sana enqueue.
• WordPressin tapa jonottaa resursseja (Enqueue Scripts), viittaukset erotetaan vastaavista tiedostoista ja ydinkoodista.
• Jos käyttäjä haluaa poistaa resurssin käytöstä, hän voi poistaa, muokata ja kommentoida sitä muuttamatta sitä ydinkoodista.

Myös jotkut yleisesti käytetyt kirjastot, kuten jQuery, jQuery UI jne., on sisäänrakennettu WordPressiin.

Voimme käyttää wp_enqueue_script-funktiota kutsumaan sisäänrakennettua kirjastoa suoraan, mikä säästää koodia ja selkeämmän määrittelyn.

Jos käytät tätä toimintoa viitataksesi omiin JS- ja CSS-tiedostoihisi, sinun on käytettäväwp_register_scriptFunktio rekisteröi tunnisteen (kahvan) ja käyttää sittenwp_enqueue_scriptFunktio kutsuu tätä lippua vastaavan resurssin.

Kuinka tuoda JS- ja CSS-tiedostoja oikein WordPressiin?

WordPress tarjoaa järkeviä tuontimenetelmiä JS- ja CSS-menetelmille.

Voit tuoda plugin.css-tiedoston liitännäiseen ▼ käyttämällä seuraavaa koodia

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

Yllä oleva käyttää wp_register_script-funktiota resurssin luomiseen, jonka tunniste on plugin_stylesheet.

Lisää sitten sen jonossa olevat pyynnöt kohteeseenwp_enqueue_scriptstoimet ovat käynnissä.

Vaikka funktion nimi on komentosarja, sillä ei ole mitään tekemistä resurssitiedoston tyypin kanssa, ja se on voimassa sekä CSS:lle että JS:lle.

Wp_register_script-funktio ei todellakaan ole niin yksinkertainen, sillä voi olla viisi parametria:

1) $kahva:Resurssin tunniste.

• 由wp_enqueue_scriptsiirtää.

2) $src:Resurssin sijainti.

• Suhteelliset tai absoluuttiset osoitteet käyttävät WordPressin sisäänrakennettuja toimintoja saadakseen osoitteita jne.
• YleinenPaikannustoiminnolla onplugins_url,get_template_directory_uri等.

3) $deps:luottaa.

• Jos viittaat jQuery-laajennukseen ja joudut luottamaan jQueryyn rakentamisessa, sinun on täytettävä jQuery.
• Huomaa, että se välitetään taulukkona.

4) $ver:Resurssiversio, valinnainen.

5) $in_footer:Laitatko sen pohjaan?

• Normaalisti JS-tiedostot tulee sijoittaa sivun alareunaan. Voit asettaa tämän parametrin arvoon True, jättää sen tyhjäksi tai False tulostaaksesi yläreunaan.

Katsotaanpa täydellisempää JavaScript-tiedoston viiteesimerkkiä ▼

<?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-teemat käyttävät wp_enqueue_scriptiä resurssien tuomiseen

Ohjelmoijat WordPress-teeman kehittämisessä, käyttöwp_enqueue_scriptTuo resursseja.

• Yllä olevat esimerkit ovat esimerkkejä viitatuista resursseista WordPress-laajennusten kehittämiseen.
• Aiheessa viitattu menetelmä on samanlainen.

Suurin ero on käyttää vastaavaa toimintoa saadaksesi teemahakemiston resurssitiedoston osoitteen saamiseksi teeman alle.

voit käyttääget_template_directory_uri-toimintoa saadaksesi nykyisen teemahakemiston.

Jos käytät lapsiteemaa, sinun on käytettäväget_stylesheet_directory_uriFunktio hakee pääteeman hakemiston saadakseen vastaavat resurssit.