Kun asennat uuden teeman WordPressiin, liukusäädin ei juuri koskaan sovi sisältösi mittoihin. Sinulla on 16:9-kuvakaappauksia, tuotekansia, neliönmuotoisia kuvia, ja teema rajaa ne omiin mittasuhteisiinsa. Puolet kuvasta leikkautuu pois, ja sivustosi tärkein näyteikkuna näyttää siltä kuin se olisi koottu silmät kiinni.

Mutta tämä ei ole teeman bugi. Kyse on kovakoodatuista asetuksista, jotka sijaitsevat kolmessa paikassa: pikkukuvakoon rekisteröinti functions.php-tiedostossa, liukusäätimen CSS-säiliö ja tulostuspohjat. Neljäs kerros on jo ladattujen kuvien uudelleengenerointi uuteen kokoon. Korjaa kaikki neljä, ja liukusäädin asettuu täydellisesti kohdalleen.

Alla on vaiheittainen erittely, jossa käytetään esimerkkinä WPExplorerin Classy-teemaa. Logiikka on kuitenkin yleispätevä: missä tahansa klassisessa teemassa, jossa on Nivo-liukusäädin tai add_image_size-funktiota käyttävä mukautettu liukusäädin, muokataan samoja tiedostoja.

💡 Nopea yleiskatsaus:

• Muuta add_image_size functions.php-tiedostossa, tämä ohjaa rajausta ladattaessa
• Muokkaa säiliön width ja height style.css-tiedostossa, jotta asettelu ei hajoa
• Päivitä width- ja height-attribuutit nivo.php- ja content.php-pohjissa, jotta selain ei venytä img-elementtiä
• Suorita Regenerate Thumbnails mediakirjastollesi, vanhat kuvat luodaan uudelleen uuteen kokoon

Koko prosessi näytetään tällä videolla:

Vaihe 1. Muuta pikkukuvakoko functions.php-tiedostossa

Kun WordPress lataa kuvan, se käsittelee sen kaikkien rekisteröityjen kokojen läpi. Rekisteröinti tapahtuu add_image_size-funktiolla. Teema ilmoittaa 980×400 liukusäätimen, mutta tarvitset 1200×500, joten sinun on muokattava tätä kohtaa.

Avaa teeman functions.php. Polku: Ulkoasu → Teematiedostoeditori hallintapaneelissa tai FTP:n kautta /wp-content/themes/theme-name/. Classyssa liukusäätimen add_image_size-rivi on noin rivillä 122:

1
add_image_size( 'nivo-slider', 980, 400, true );

Ensimmäinen parametri on leveys, toinen on korkeus, kolmas (true) on kova rajaus. Jos asetat arvoksi false, WordPress sovittaa kuvan pienemmän sivun mukaan rajaamatta. Kuulostaa houkuttelevalta, mutta liukusäädin voi "leijua" korkeudeltaan kuvasta toiseen.

Korvaa omilla arvoillasi ja tallenna:

1
add_image_size( 'nivo-slider', 1200, 500, true );

Tästä eteenpäin kaikki uudet lataukset rajataan sinun kokoosi. Vanhoja ei vielä, niihin palataan vaiheessa 4.

Vaihe 2. Korjaa CSS-säiliö

Olet muuttanut pikkukuvakoon. Mutta liukusäätimen säiliö asettelussa elää yhä CSS:n vanhoilla arvoilla. Kuva latautuu oikein, mutta lohko joko rajaa sen tai jättää tyhjää tilaa reunojen ympärille.

Classyssa Nivo-liukusäätimen säiliö on kuvattu tiedostossa style.css, rivit 1132-1140:

1
#slider_nivo {
2
    position: relative;
3
    width: 980px;
4
    margin-top: -30px;
5
    margin-left: -25px;
6
    margin-right: -25px;
7
    margin-bottom: 30px;
8
    height: 400px;
9
    overflow: hidden;
10
}

Muuta width ja height omiin arvoihisi:

1
#slider_nivo {
2
    position: relative;
3
    width: 1200px;
4
    margin-top: -30px;
5
    margin-left: -25px;
6
    margin-right: -25px;
7
    margin-bottom: 30px;
8
    height: 500px;
9
    overflow: hidden;
10
}

Tärkeä vivahde: tämä muokkaa nimenomaan Nivo-liukusäädintä. Classyn Content Slider säätää korkeuden automaattisesti sisällön mukaan, siihen ei tarvitse koskea. Muissa teemoissa logiikka on sama: etsi muutettavan liukusäätimen valitsin äläkä sotke viereisiä.

Vaihe 3. Päivitä attribuutit pohjissa

add_image_size palauttaa oikean pikkukuvan URL-osoitteen. Mutta liukusäätimen HTML-merkintä sisältää kovakoodatut width="980" height="400" -attribuutit. Jos jätät vanhat arvot, selain venyttää tai puristaa kuvan vastaamaan niitä. Lopputulos: sumea tai litistynyt kuva, vaikka lähde on oikea.

Classyssa kaksi tiedostoa tarvitsee muokkausta.

Nivo Image Slider, tiedosto includes/sliders/nivo.php, rivit 32-36:

1
<a href="<?php echo $slidelink ?>" title="<?php the_title(); ?>">
2
  <img src="<?php echo $featured_image[0]; ?>" 
3
       alt="<?php the_title(); ?>" 
4
       width="1200" height="500" />
5
</a>

Content Slider kuvaliukumille, tiedosto includes/sliders/content.php, rivit 29-36:

1
<a href="<?php echo $slidelink ?>" title="<?php the_title(); ?>">
2
  <img src="<?php echo $featured_image[0]; ?>" 
3
       alt="<?php the_title(); ?>" 
4
       width="1200" height="500" />
5
</a>

Muokkaa molemmat, tallenna. Jos teema käyttää background-image-ominaisuutta CSS:ssä <img>-elementin sijaan, älä koske pohjiin, vaihe 2 riittää.

Vaihe 4. Generoi vanhat kuvat uudelleen

Vaiheessa 1 muutimme add_image_size-arvoa. Uudet lataukset menevät oikealla rajauksella. Mutta kaikki mediakirjaston kuvat, jotka on ladattu ennen muokkausta, on tallennettu vanhassa koossa. Liukusäädin katsoo niitä ja saa väärät mittasuhteet.

Ratkaisu: Regenerate Thumbnails -lisäosa. Se käy läpi koko mediakirjaston ja luo pikkukuvat uudelleen nykyisiin rekisteröityihin kokoihin. Tavallinen asennus: Lisäosat → Lisää uusi → hae "Regenerate Thumbnails" → Asenna → Ota käyttöön.

Aktivoinnin jälkeen: Työkalut → Regenerate Thumbnails → "Regenerate All Thumbnails". Suuressa kirjastossa prosessi kestää pari minuuttia, lisäosa käynnistää kaikkien ilmoitettujen kokojen uudelleengeneroinnin jokaiselle kuvalle.

Lisäosa voi myös poistaa käyttämättömiä pikkukuvakokoja, vapauttaen palvelintilaa. Yhden ajon jälkeen et enää tarvitse sitä: kaikki tulevat lataukset kulkevat uuden add_image_size-arvon läpi.

Jos sinulla on konsoliyhteys palvelimelle, WP-CLI on nopeampi:

1
wp media regenerate --yes

Ei HTTP-pyyntöjen kuormaa, eikä se törmää aikakatkaisuihin suurissa kirjastoissa.

Mitä tehdä, jos liukusäädin edelleen hajoaa

Joskus olet suorittanut kaikki neljä vaihetta, mutta liukusäädin käyttäytyy oudosti. Käy läpi tämä tarkistuslista:

• CSS-spesifisyys: uuden width/height-arvosi ohittaa tarkempi valitsin teemassa. Avaa selaimen tarkastustyökalu ja katso, mitä sääntöä elementtiin todellisuudessa sovelletaan.
• Välimuisti: tyhjennä selaimen välimuisti (Ctrl+F5). Jos sinulla on palvelimen välimuistilisäosa, kuten WP Rocket tai LiteSpeed Cache, tyhjennä sekin.
• Child theme: pääteeman suora muokkaaminen tarkoittaa, että muutokset pyyhkiytyvät pois seuraavassa päivityksessä. Luo child theme ja siirrä muokkauksesi sinne.
• Responsiivisuus: onko säiliön leveys suurempi kuin sivuston leveys? Mobiilissa liukusäädin ylittää reunan. Lisää max-width: 100% ja height: auto media queryyn mobiilille.

Teeman päivitys rikkoi kaiken: miten suojautua

Pääteeman muokkaamisen suurin tuska: päivitykset ylikirjoittavat tiedostot, ja muutoksesi katoavat. Liukusäädin palaa hiljaa tehdasasetuksiin.

Oikea lähestymistapa on child theme. Siirrä sinne kolme asiaa:

• Ohita add_image_size child-teeman functions.php-tiedostossa after_setup_theme-koukun kautta;
• Ohita CSS, child-teeman style.css latautuu pääteeman jälkeen, sinun sääntösi voittavat kaskadin ansiosta;
• Liukusäädinpohjat, kopioi nivo.php ja content.php child-teemaan samalla kansiorakenteella (includes/sliders/). WordPress poimii automaattisesti version child-teemasta.

Tämän jälkeen pääteeman päivitykset eivät uhkaa kokoja.

⁉️🤔 Usein kysytyt kysymykset

Pitääkö minun muokata kaikkia kolmea tiedostoa: functions.php, style.css ja pohjia?

Kyllä, muuten lopputulos on puutteellinen. Muutit vain add_image_size-arvoa ilman CSS:ää, ja säiliö rajaa uuden kuvan. Ilman pohjia selain venyttää kuvan vanhoihin width/height-arvoihin, ja siitä tulee sumea. Kolme muokkausta antavat yhdenmukaisen mitoituksen kaikilla kerroksilla: pikkukuvan rekisteröinti → säiliö → HTML-attribuutit.

Tarvitseeko minun koskea content.php-tiedostoon, jos käytän vain Nivo-liukusäädintä?

Ei. content.php on sisältöliukusäädintä varten, sitä joka hakee tekstiä ja kuvia artikkeleista. Jos sisältöliukusäädin ei ole käytössä sivustolla, voit ohittaa tiedoston. Mutta jos olet epävarma, muokkaus vie minuutin, parempi tehdä molemmat.

Poistaako Regenerate Thumbnails -lisäosa alkuperäiset kuvani?

Ei. Alkuperäinen, täysikokoinen kuva säilyy koskemattomana. Lisäosa luo uudelleen vain pikkukuvat: add_image_size-funktiolla ja Asetukset → Media -kohdassa rekisteröidyt koot. Myöskään käyttämättömien kokojen poistovaihtoehto ei koske alkuperäistä, se siivoaa "orvot" pikkukuvat, joita ei ole ilmoitettu teemassa tai lisäosissa.

Entä jos add_image_size ei ole teemassa ja liukusäädin toimii eri tavalla?

Jotkin modernit teemat eivät käytä add_image_size-funktiota liukusäätimelle. Sen sijaan ne lataavat alkuperäisen kuvan ja hallitsevat kokoa CSS:n kautta: object-fit: cover tai background-size: cover. Tässä tapauksessa vaihe 2 riittää, muokkaa vain CSS-säiliötä. Tarkista selaimen tarkastustyökalulla, mikä URL liukusäätimessä todella latautuu: jos se on image.jpg ilman -980x400-päätettä, et tarvitse vaiheita 1 ja 4.

Tarvitsenko varmuuskopion ennen functions.php-tiedoston muokkaamista?

Ehdottomasti. Yksi kirjoitusvirhe functions.php-tiedostossa, ja sivusto kaatuu White Screen of Deathiin. Ennen muokkausta lataa tiedosto FTP:n kautta tai kopioi sisältö tekstieditoriin. Jos sivusto kaatuu, palauta alkuperäinen functions.php takaisin, sivusto herää henkiin välittömästi.

Mukautettu liukusäädin: lopullinen erittely

Algoritmi on yleispätevä mille tahansa klassiselle WordPress-teemalle: koon rekisteröinti → CSS-säiliö → HTML-pohjat → vanhojen kuvien uudelleengenerointi. Neljä vaihetta, ja liukusäädin toimii sinun mittasuhteillasi ilman rajausta tai sumeutta.

Pääasia on, ettei pääteemaa muokata suoraan. Siirrä muutokset child-teemaan heti, kun olet varmistanut kokojen sopivuuden. Silloin mikään päivitys ei palauta liukusäädintä tehdasasetuksiin.