Tavallinen tapa sisällyttää JavaScript ja CSS WordPressiin

Jos olet WordPress-kehittäjä, olet kuullut sanoista kuten wp_enqueue_script, wp_enqueue_style ja wp_enqueue_scripts. Näitä menetelmiä meidän tulisi käyttää sisällyttää JavaScript ja CSS WordPressiin.

WordPressin suhteen ei pidä käyttää komento- ja linkkitunnisteita JavaScript- ja CSS-tiedostojen lisäämiseen.

Standardimenetelmien käytön edut

Verkkosivustolla on tavallista käyttää erilaisia ​​vaikutuksia, animaatioita käyttökokemuksen parantamiseksi. Internetissä on runsaasti valmiita laajennuksia, joiden avulla voimme lisätä verkkosivustollesi liukusäätimiä, yhteydenottolomakkeita, karusellia jne. Kun käytämme näitä ulkoisia resursseja, meidän on käytettävä niiden tarjoamia JS- ja CSS-tiedostoja. Käyttämällä WordPressin tarjoamia menetelmiä voimme hallita sivuja, joilla tällaiset laajennukset voivat käyttää vain. Esimerkiksi, jos näytämme liukusäädintä kotisivulla, liukusäätimen JS- ja CSS-tiedostoja ei tarvitse sisällyttää toiselle sivulle. Aina on hyvä käytäntö sisällyttää JS ja CSS vain tarvittaessa. Tämä on hyvä käytäntö, jolla parannettiin sivuston suorituskykyä ja nopeutettiin sivustomme lataamista.

Todellinen koodi sisällyttää JavaScript ja CSS

Oletetaan, että meillä on custom.js- ja custom.css-tiedostoja, jotka on lisättävä sivustollemme. Tätä varten meidän on sijoitettava koodin alle.

add_action('wp_enqueue_scripts', 'include_js_css');
function include_js_css() {
    wp_register_script('my-custom-script', get_stylesheet_directory_uri(). '/js/custom.js', array('jquery'), false, true);
    wp_enqueue_script('my-custom-script');
 
    wp_register_style( "my-custom-style", get_stylesheet_directory_uri(). "/css/custom.css", array(), false, "all" );
    wp_enqueue_style( "my-custom-style" );
}

Huomaa: Funktion wp_register_script kolmas parametri. Ohitimme taulukon (‘jquery’), mikä tarkoittaa, että custom.js on riippuvainen jquery.js-tiedostosta. Voit kirjoittaa emapsiotaulukon täältä, jos skriptilläsi ei ole riippuvuustiedostoja.

Viimeinen parametri on asetettu arvoon true, mikä tarkoittaa, että custom.js-tiedosto sisältyy alatunnisteeseen (ennen body-tagin loppua).

Parametrien selitys funktiolle wp_register_script ()

$ kahva (pakollinen): Komentosarjan nimi. Pitäisi olla ainutlaatuinen.
$ src (Pakollinen): Komentosarjan täydellinen URL tai komentosarjan polku suhteessa WordPress-juurihakemistoon.
$ deps (valinnainen): Joukko rekisteröityjä komentosarjoja käsittelee tätä komentosarjaa.
Oletusarvo: array ()
$ ver (Valinnainen): Merkkijono, joka määrittää komentosarjan versionumeron, jos sillä on sellainen, joka lisätään URL-osoitteeseen kyselymerkkijonona välimuistin poistamista varten. Jos version arvoksi on asetettu epätosi, versionumero lisätään automaattisesti nykyisen asennetun WordPress-version kanssa. Jos asetus on nolla, versiota ei lisätä. Oletusarvo on epätosi
$ in_footer (valinnainen): Onko komentojonon kiinnitettävä ennen rungotunnisteen sulkemista pään sijaan. Oletus ‘väärä’.

Parametrien selitys funktiolle wp_register_style ()

$ handle (Pakollinen): Tyylitaulukon nimi. Pitäisi olla ainutlaatuinen.
$ src (Pakollinen): Tyylitaulukon täydellinen URL-osoite tai tyylitaulukon polku suhteessa WordPress-juurihakemistoon.
$ deps (valinnainen): Joukko rekisteröityjä tyylitaulukoita käsittelee tätä tyylitaulukkoa.
Oletusarvo: array ()
$ ver (valinnainen): Merkkijono, joka määrittää tyylitaulukon versionumeron, jos sillä on sellainen, joka lisätään URL-osoitteeseen kyselymerkkijonona välimuistin poistamista varten. Jos version arvoksi on asetettu epätosi, versionumero lisätään automaattisesti nykyisen asennetun WordPress-version kanssa. Jos asetus on nolla, versiota ei lisätä. Oletusarvo: false
$ media(Valinnainen): Media, jolle tämä tyylitaulukko on määritetty. Hyväksyy mediatyypit, kuten ‘kaikki’, ‘tulosta’ ja ‘näyttö’, tai mediakyselyt, kuten ‘(suunta: pysty)’ ja ‘(enimmäisleveys: 640 kuvapistettä)’. Oletusarvo: ‘kaikki’.

Kyse on siitä, miten JavaScript ja CSS sisällytetään WordPressiin. Jos sinulla on kysyttävää tai ehdotuksia, jätä kommentit alla.