Javascriptin lisääminen WordPress-aiheisiin oikea tapa

Javascriptin lisääminen WordPress-teemaan on erityinen tapa, jolla voidaan estää ristiriidat pluginien tai vanhempien WordPress-teemojen kanssa. Ongelmana on, että monet ”kehittäjät” kutsuvat javascript-tiedostojaan suoraan header.php- tai footer.php-tiedostoon, mikä on väärä tapa tehdä se.


Tässä oppaassa esittelen, kuinka voit kutsua javascript-tiedostosi oikein käyttämällä function.php-tiedostoa, jotta ne latautuvat suoraan sivustosi ylä- tai alatunnisteeseen. Tällä tavoin, jos olet kehittämässä jakeluun tarkoitettua teemaa ja loppukäyttäjäsi haluaa muokata komentosarjoja lapsiteeman kautta, jonka he voivat käyttää, tai jos he käyttävät pienennystä / välimuistia tai muita optimointilaajennuksia, ne toimivat oikein. Ja jos työskentelet lapsiteeman kanssa, skriptit lisätään oikein, kopioimatta header.php- tai footer.php-tiedostoja lapsiteemaasi, joita ei pitäisi koskaan tarvita (työskennellessäsi koodatun teeman kanssa)

Väärä tapa lisätä JavaScriptiä WordPress-teemoihin

Javascript-soittaminen header.php- tai footer.php-tiedostoon, kuten alla on esitetty, EI OIKE oikea tapa, ja suosittelen sitä vastaan. Usein se aiheuttaa ristiriitoja muiden liitännäisten kanssa ja asioiden tekeminen käsin CMS: n kanssa työskennellessä ei ole koskaan hyvä idea.

Oikea tapa lisätä JavaScriptiä WordPress-teemoihin

Paremmin, kun lisäät javascriptin WordPress-teemaan, on tehdä se function.php-tiedoston avulla käyttämällä wp_enqueue_script. Wp_enqueue_scripts-toiminnon käyttäminen javascriptin lataamiseen auttaa pitämään teemasi vaikeuksissa.

esimerkki

wp_enqueue_script ('oma skripti', get_template_directory_uri (). '/js/my-script.js', array (), true);

Yllä oleva koodi lataa my-script.js-tiedoston sivustollesi. Kuten näette, olen sisällyttänyt vain $ -kahvan, mutta voit myös lisätä riippuvuuksia komentosarjasta, versionumerosta ja siitä, ladataanko se otsikkoon tai alatunnisteeseen (oletus on otsikko).

Wp_enqueue_script () -toimintoa voidaan teknisesti käyttää missä tahansa teeman tai laajennuksen mallitiedostossa, mutta jos lataat globaaleja skriptejä, sinun kannattaa sijoittaa se joko teeman function.php-tiedostoon tai erilliseen tiedostoon, joka on tarkoitettu erityisesti skriptien lataamiseen sivusto. Mutta jos haluat ladata komentosarjan vain tiettyyn mallitiedostoon (esimerkiksi galleriaviesteihin), voit sijoittaa toiminnon suoraan mallitiedostoon, mutta henkilökohtaisesti suosittelen, että pidät kaikki komentosarjat yhdessä paikassa ja käytät ehdollisia lataamaan skriptit tarvittaessa.

WordPress-isännöidyt skriptit

Yksi hieno asia WordPressissä on se, että jo on jo joukko skriptejä, jotka ovat isäntien ylläpitämiä ja rekisteröimiä ja joita voit käyttää teemakehityksessä. Esimerkiksi jQuery, jota käytetään melkein jokaisessa projektissa, tulisi AINA ladata WordPressistä, eikä sitä koskaan pitäisi ylläpitää kolmannen osapuolen sivustolla, kuten Google. Joten ennen kuin lisäät mukautetun komentosarjan projektiisi, tarkista luettelo rekisteröidyt skriptit Varmista, että sitä ei jo sisällytetä WordPressiin, ja jos se on, lataa se, sen sijaan että rekisteröisit oman.

WordPress Enqueue Hook -sovelluksen käyttö

Aiemmin mainitsimme komentosarjan lataamiseen tarvittavan toiminnon sivustoosi, kun työskentelet muiden kuin mallitiedostojen kanssa, kuten function.php-tiedosto, sinun pitäisi lisätä tämä toiminto toiseen funktioon, joka on kytketty oikeisiin WordPress-koukkuihin, tällä tavalla skriptit saavat rekisteröity kaikissa muissa WordPressin, kolmannen osapuolen laajennusten ja vanhemman teeman rekisteröimissä skripteissä lapsiteeman käyttäessä.

WordPressissä on kaksi erilaista toimintokoukkua, joita voit käyttää skriptien kutsumiseen.

  1. wp_enqueue_scripts – toiminto, jota käytetään skriptien lataamiseen käyttöliittymään
  2. admin_enqueue_scripts – toiminto, jota käytetään skriptien lataamiseen WP-järjestelmänvalvojaan

Tässä on esimerkki (joka lisätään function.php-tiedostoosi) toiminnon luomisesta ja WordPress-koukulla kutsumisesta skripteihin.

/ **
* Enqueque skripti
* /
toiminto myprefix_enqueue_scripts () {
wp_enqueue_script ('oma skripti', get_template_directory_uri (). '/js/my-script.js', array (), true);
}
add_action ('wp_enqueue_scripts', 'myprefix_enqueue_scripts');

Merkintä: Katso, kuinka käytämme “get_template_directory_uri” -toimintoa määrittäessäsi skriptin sijaintia? Tämä toiminto luo URL-osoitteen teemakansioon. Jos työskentelet lapsiteeman kanssa, haluat käyttää “get_stylesheet_directory_uri” sen sijaan, että se osoittaa lapsiteemaasi eikä vanhempaa teemaa.

Inline Javascript -koodin lisääminen

Vaikka voit helposti liittää tekstisisäisen javascriptin mihin tahansa mallitiedostoon komentosarjatunnisteen avulla, voi olla hyvä käyttää WordPress-koukkuja myös sisäisen koodin lisäämiseen, varsinkin kun se on ydinlaajennus tai teemakoodi. Alla on esimerkki tekstimuotoisten komentosarjojen lisäämisestä sivustoosi:

toiminto myprefix_add_inline_script () {
wp_add_inline_script ('oma skripti', 'hälytys (' hei maailma ');', 'jälkeen');
}
add_action ('wp_enqueue_scripts', 'myprefix_add_inline_script');

Tämä tekee lisättävän tekstisisällön javascriptin aiemmin rekisteröidyn “oma-skripti” -komentosarjan jälkeen. Kun käytät wp_add_inline_scriptiä, voit lisätä vain sisäisen koodin joko ennen tai jo rekisteröidyn komentosarjan jälkeen, joten jos yrität muokata tietyn komentosarjan koodia, varmista, että se ladataan sen jälkeen, tai jos tarvitset vain lisätä mukautetun koodin, voit koukkua se jquery-skriptiin, joka yleensä ladataan useimmissa WordPress-teemoissa. Jos ei, voit käyttää wp_enqueue_scriptiä ladataksesi WordPress-isännöidyn jQuery-version..

Tätä menetelmää käyttämällä ihmiset voivat helposti poistaa tekstinkäsittelysi lapsiteeman tai laajennuksen avulla, se pitää kaikki mukautetut javascriptin asianmukaisesti järjestettyinä ja WordPress jäsentää ne, mikä voi olla turvallisempaa. Ja jos käytät alateemoa, voit ladata skriptit function.php-tiedostosi kautta kopioimisen sijaan header.php- tai footer.php-tiedostojen yli lapsiteemaasi..

Toisin sanoen, jos työskentelet lapsiteemassa, jota sinun ei tarvitse tehdä, voit yksinkertaisesti upottaa koodisi otsikkoosi joko käyttämällä wp_head- tai wp_footer-koukkuja, kuten alla oleva esimerkki:

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

    Like this post? Please share to your friends:
    Adblock
    detector
    map