Näin lataat CSS- ja JavaScript-tiedostot

Tiivistelmä

WordPress-sivusto voi ladata jokaisella sivulla tiedostoja, joita tarvitaan vain yksittäisessä toiminnossa. Yhteydenottolomakkeen JavaScript saattaa latautua myös blogiartikkeleissa, ja kuvagallerian tyylitiedosto voi…

Tarpeettomat tiedostot lisäävät siirrettävää dataa ja voivat kasvattaa selaimen käsittelytyötä. Erityisesti JavaScript voi kuormittaa laitetta vielä lataamisen jälkeenkin.

Ehdollinen lataaminen tarkoittaa, että WordPress lisää tiedoston sivulle vain määritellyn ehdon täyttyessä. Ehto voi perustua esimerkiksi sivun tunnisteeseen, sisältötyyppiin tai käytettävään sivupohjaan. Hyvä toteutus vähentää turhaa työtä säilyttäen kaikki kävijän tarvitsemat toiminnot.

Selvitä ensin, mitä sivusto lataa

Avaa selaimen kehittäjätyökalujen Network-näkymä ja lataa tutkittava sivu uudelleen. Rajaa lista CSS- tai JavaScript-tiedostoihin.

Tarkista tiedostojen nimet, koot ja latausosoitteet. Osoitteen hakemistopolku voi auttaa tunnistamaan, kuuluuko tiedosto teemaan vai tiettyyn lisäosaan.

Vertaa muutamaa erilaista sivua:

Etusivu.
Tavallinen artikkeli.
Yhteydenottosivu.
Galleriasivu.
Mahdollinen tuote- tai ajanvaraussivu.

Kirjaa, mitkä tiedostot latautuvat kaikkialla ja missä niiden toimintoja oikeasti käytetään. Älä päättele tarpeettomuutta pelkän tiedostonimen perusteella. Esimerkiksi lomakkeen koodi voi palvella myös alatunnisteessa olevaa uutiskirjeen tilausta.

Tarkista lisäksi avautuvat valikot, ponnahdusikkunat ja muut vasta käyttäjän toiminnasta näkyvät elementit.

Käytä WordPressin omaa latausjärjestelmää

WordPressissä CSS lisätään tavallisesti wp_enqueue_style()-funktiolla ja JavaScript wp_enqueue_script()-funktiolla. Julkisen sivuston lataukset liitetään wp_enqueue_scripts-koukkuun, jota käytetään nimestään huolimatta molemmille tiedostotyypeille. WordPressin latauskoukku

Järjestelmään ilmoitetaan tiedoston tunniste eli handle, osoite, mahdolliset riippuvuudet ja versio. Näin WordPress pystyy hallitsemaan latauksia yhtenäisesti.

Vältä omien <script>– ja <link>-elementtien hajauttamista suoraan sivupohjiin. Keskitetty toteutus helpottaa myöhempää tutkimista ja muutoksia.

Sijoita ulkoasuun liittyvä koodi lapsiteemaan. Sivuston itsenäiseen toiminnallisuuteen kuuluvat lataukset voivat puolestaan olla oman lisäosan vastuulla. Älä muuta ulkopuolisen teeman tai lisäosan tiedostoja suoraan, koska päivitys voi korvata muutoksesi.

Lataa tiedostot vain yhteydenottosivulle

Seuraava esimerkki olettaa, että aktiivisen lapsiteeman hakemistossa ovat tiedostot assets/css/yhteydenotto.css ja assets/js/yhteydenotto.js.

Lisää koodi lapsiteeman functions.php-tiedostoon sen olemassa olevan PHP-osuuden sisälle:

function oma_sivusto_yhteydenoton_tiedostot() {
    if ( ! is_page( 'yhteydenotto' ) ) {
        return;
    }

    $teeman_uri = get_stylesheet_directory_uri();

    wp_enqueue_style(
        'oma-yhteydenotto',
        $teeman_uri . '/assets/css/yhteydenotto.css',
        array(),
        '1.0.0'
    );

    wp_enqueue_script(
        'oma-yhteydenotto',
        $teeman_uri . '/assets/js/yhteydenotto.js',
        array(),
        '1.0.0',
        true
    );
}

add_action(
    'wp_enqueue_scripts',
    'oma_sivusto_yhteydenoton_tiedostot'
);

Jos nykyinen sivu ei vastaa ehtoa, funktio päättyy ennen tiedostojen lisäämistä. JavaScript-kutsun viimeinen true määrittää tiedoston tulostettavaksi sivun loppuosaan.

Esimerkki olettaa, ettei JavaScript tarvitse muita kirjastoja. Se ei itsessään luo lomaketta tai sen tiedostoja. JavaScript-tiedostojen lisääminen

Valitse sivurajaus käyttötarkoituksen mukaan

is_page() voi tunnistaa sivun esimerkiksi tunnisteen tai polkutunnuksen perusteella. Useita sivuja voidaan antaa taulukkona:

if ( ! is_page( array( 42, 87 ) ) ) {
    return;
}

Tällainen ehto sopii tilanteeseen, jossa samaa toimintoa käytetään kahdella tunnetulla sivulla. Korvaa numerot oman sivustosi sivutunnisteilla. is_page()-funktion käyttö

Numerotunniste säilyy samalla sivulla otsikon tai osoitteen muuttuessa. Eri WordPress-asennuksissa vastaavalla sivulla voi kuitenkin olla toinen tunniste.

Jos toiminto kuuluu tiettyyn sivupohjaan, rajaus voidaan tehdä sen perusteella:

if ( ! is_page_template( 'templates/laskuri.php' ) ) {
    return;
}

Polun pitää vastata käytössä olevaa PHP-sivupohjaa. Lohkoteeman HTML-sivupohjaan tätä esimerkkiä ei pidä soveltaa sellaisenaan.

Rajaa lataus tiettyyn sisältötyyppiin

Kaikkia latauksia ei kannata sitoa yksittäisiin sivuihin. Jos oma tapahtumakalenteri käyttää sisältötyyppiä tapahtuma, sen tiedostot voidaan rajata tapahtumien näkymiin:

if (
    ! is_singular( 'tapahtuma' )
    && ! is_post_type_archive( 'tapahtuma' )
) {
    return;
}

Ehto sallii lataamisen yksittäisillä tapahtumasivuilla ja tapahtumien arkistossa.

Suunnittele rajaus todellisen käyttöpaikan perusteella. Jos tapahtumakortteja näytetään myös etusivulla, niiden yhteiset tyylit täytyy huomioida erikseen.

Tiedostojen jakaminen auttaa: kortin kevyt ulkoasu voi olla oma kokonaisuutensa, kun taas kalenterin laaja JavaScript ladataan vain kalenterinäkymässä. Näin yhtä pientä komponenttia varten ei tarvitse ladata koko toiminnon toteutusta.

Huomioi lohkot ja dynaamiset sisällöt

Sivun sisältöön tallennetun lohkon olemassaoloa voidaan tarkistaa has_block()-funktiolla:

if (
    ! is_singular()
    || ! has_block(
        'oma/laskuri',
        get_queried_object_id()
    )
) {
    return;
}

Esimerkki etsii yksittäisen sisällön tallennetusta lohkomerkinnästä omaa laskurilohkoa.

Tarkistus ei kuitenkaan kuvaa kaikkea lopullisella sivulla näkyvää sisältöä. Lohko voi tulla sivupohjasta, synkronoidusta mallista tai dynaamisesta toteutuksesta. has_block() ei myöskään seuraa synkronoitujen mallien sisältöä kattavasti. Lohkon olemassaolon tarkistaminen

Omaa lohkoa kehittäessä kannattaa suunnitella resurssien lataus osaksi sen rekisteröintiä ja renderöintiä. Pelkkä sivutekstin tarkistus ei ole yleispätevä ratkaisu kaikkiin lohkosivustoihin.

Säilytä tiedostojen riippuvuudet

JavaScript voi tarvita toisen kirjaston toimiakseen. Riippuvuudet ilmoitetaan latauskutsun kolmantena argumenttina:

array( 'jquery' )

Tämä sopii vain tiedostolle, joka todella käyttää jQueryä. Riippuvuus ilmoitetaan kirjaston rekisteröidyllä tunnisteella, ei sen tiedostonimellä.

Älä poista yhteistä kirjastoa vain siksi, ettei oma koodisi tarvitse sitä. Toinen lisäosa voi käyttää samaa kirjastoa esimerkiksi valikon tai lomakkeen toimintaan.

Myös latausstrategia ja sivukohtainen rajaus ovat eri asioita. defer voi siirtää JavaScriptin suorittamista, mutta se ei estä tiedoston lataamista tarpeettomalla sivulla. async puolestaan ei takaa tiedostojen keskinäistä suoritusjärjestystä. Skriptien riippuvuudet ja latausstrategiat

Poista lisäosan lataus vain tunnetulla tunnisteella

Ulkopuolisen lisäosan kohdalla tarkista ensin sen omat asetukset. Lisäosa voi tarjota valmiin mahdollisuuden rajata tiedostojen latausta.

Jos asetusta ei ole, jo jonoon lisätty resurssi voidaan joissakin tilanteissa poistaa:

function oma_sivusto_rajaa_lomakeresurssit() {
    if ( is_page( 'yhteydenotto' ) ) {
        return;
    }

    wp_dequeue_style( 'esimerkki-lomake-css' );
    wp_dequeue_script( 'esimerkki-lomake-js' );
}

add_action(
    'wp_enqueue_scripts',
    'oma_sivusto_rajaa_lomakeresurssit',
    100
);

Tunnisteet ovat esimerkkejä. Selvitä oikeat arvot lisäosan koodista tai diagnostiikkatyökalulla.

Poiston täytyy tapahtua latausjonoon lisäämisen jälkeen mutta ennen resurssin tulostamista. Prioriteetti 100 ei takaa tätä kaikissa toteutuksissa. Tiedosto voi myös tulla mukaan toisen resurssin riippuvuutena tai myöhemmässä latausvaiheessa. Skriptin poistaminen latausjonosta

Päivitä tiedostojen versiot muutosten yhteydessä

Esimerkkien versionumero 1.0.0 auttaa erottamaan tiedoston eri julkaisut toisistaan. Kun muutat tiedoston sisältöä, päivitä myös versio.

CSS-tiedoston versio annetaan wp_enqueue_style()-funktion neljäntenä argumenttina. WordPress lisää sen resurssin osoitteeseen kyselyparametriksi. Tyylitiedoston latausparametrit

Versioinnin pitää olla vakaa saman julkaisun aikana. Jokaisella pyynnöllä vaihtuva satunnainen arvo heikentäisi selaimen mahdollisuutta käyttää jo ladattua tiedostoa.

Muista erikseen sivuvälimuisti. Vanha HTML-versio voi sisältää aikaisemmat tiedostoviittaukset, vaikka latauskoodi olisi jo korjattu. Tyhjennä tarvittavat välimuistit käyttöönoton yhteydessä.

Testaa sekä latautuminen että toimivuus

Tarkista ensin sivu, jolla tiedostojen kuuluu latautua. Varmista verkkopyynnöistä, että osoitteet ovat oikein eikä vastauksissa näy tiedostojen puuttumista.

Avaa tämän jälkeen sivu, jolta resurssien pitäisi puuttua. Varmista, etteivät ne silti lataudu esimerkiksi yhdistetyn optimointitiedoston kautta.

Kokeile lopuksi:

Lomakkeen lähetys ja virhetilanteet.
Valikot ja avautuvat elementit.
Puhelimen ja tietokoneen näkymät.
Kirjautuneen ja uloskirjautuneen käyttäjän tilanteet.
Selaimen konsoliin ilmestyvät JavaScript-virheet.

Mittaa siirretyn datan ja suoritusajan muutos samoilla testiasetuksilla. Pelkkä tiedostopyyntöjen väheneminen ei vielä kerro käytännön nopeushyödystä.

Pidä latausehdot helposti löydettävässä paikassa ja dokumentoi niiden perusteet. Kun toiminto myöhemmin siirtyy uudelle sivulle, myös sen tarvitsemat tiedostot voidaan ottaa käyttöön hallitusti.

Liittyvät kategoriat

Artikkeleita 2 034 artikkelia IT 1 960 artikkelia Kotisivut 1 209 artikkelia Nettisivut 1 209 artikkelia Verkkokehitys 1 275 artikkelia Verkkosivut 1 408 artikkelia Verkkotyökalu 1 188 artikkelia WordPress 1 228 artikkelia