Kui paigaldate WordPressile värske kujunduse, ei sobi selle slaidiesitlus peaaegu kunagi teie sisu mõõtmetega. Teil on 16:9 ekraanipildid, tootekaaned, ruudukujulised pildid ja kujundus kärbib need oma proportsioonidesse. Pool kaadrist lõigatakse ära ning teie saidi peamine vaateaken näeb välja, nagu oleks see kinnisilmi kokku pandud.

Kuid see pole kujunduse viga. Need on koodi sisse kirjutatud seaded, mis asuvad kolmes kohas: pisipiltide suuruse registreerimine failis functions.php, slaidiesitluse CSS-konteiner ja väljundmallid. Neljas kiht on juba üles laaditud piltide taasloomine uude mõõtu. Parandage kõik neli ja slaidiesitlus joondub täiuslikult.

Allpool on samm-sammuline juhend, kasutades näitena WPExploreri Classy kujundust. Loogika on aga universaalne: iga klassikaline kujundus, mis kasutab Nivo sliderit või kohandatud slaidiesitlust koos funktsiooniga add_image_size, muudab samu faile.

💡 Kiirülevaade:

• Muutke add_image_size failis functions.php, see juhib üleslaadimisel toimuvat kärpimist
• Muutke failis style.css konteineri atribuute width ja height, et paigutus kokku ei vajuks
• Uuendage atribuute width ja height mallides nivo.php ja content.php, et brauser ei venitaks img elementi
• Käivitage meediateegis plugin Regenerate Thumbnails, vanad pildid luuakse uues mõõdus uuesti

Kogu protsess on näidatud selles videos:

Samm 1. Muutke pisipildi suurust failis functions.php

Kui WordPress laadib üles pildi, töötleb see seda kõigi registreeritud suuruste kaudu. Registreerimine toimub funktsiooni add_image_size abil. Kujundus deklareerib 980×400 slaidiesitluse, kuid te vajate 1200×500, seega peate siin muutma.

Avage kujunduse fail functions.php. Asukoht: administraatoripaneelis Välimus → Teemafailide redaktor või FTP kaudu /wp-content/themes/theme-name/. Classy puhul on slaidiesitluse add_image_size rida umbes real 122:

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

Esimene parameeter on laius, teine kõrgus, kolmas (true) on jõuline kärpimine. Kui määrate false, sobitab WordPress pildi väiksemat külge pidi ilma kärpimata. Kõlab ahvatlevalt, kuid slaidiesitluse kõrgus võib pilditi „ujuma" hakata.

Asendage oma väärtustega ja salvestage:

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

Nüüdsest kärbitakse kõik uued üleslaadimised teie mõõtu. Vanad veel mitte, nendeni jõuame 4. sammus.

Samm 2. Parandage CSS-konteiner

Olete pisipildi suurust muutnud. Kuid slaidiesitluse konteiner paigutuses elab endiselt CSS-i vanade väärtustega. Pilt laaditakse õigesti, kuid plokk kas kärbib seda või jätab servadesse tühja ruumi.

Classy puhul on Nivo slideri konteiner kirjeldatud failis style.css, read 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
}

Muutke width ja height oma väärtustele:

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
}

Oluline nüanss: see muudab konkreetselt Nivo sliderit. Classy Content Slider kohandab kõrgust automaatselt sisu põhjal, seda pole vaja puutuda. Teistes kujundustes on loogika sama: leidke muudetava slaidiesitluse selektor ja ärge mässake naabritega.

Samm 3. Uuendage atribuute mallides

add_image_size tagastab õige pisipildi URL-i. Kuid slaidiesitluse HTML-märgend sisaldab koodi sisse kirjutatud atribuute width="980" height="400". Jätke vanad väärtused alles ja brauser venitab või surub pildi neile vastavaks. Tulemus: udune või kokkusurutud pilt, kuigi lähtefail on korrektne.

Classy puhul tuleb muuta kahte faili.

Nivo Image Slider, fail includes/sliders/nivo.php, read 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 pildislaidide jaoks, fail includes/sliders/content.php, read 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>

Muutke mõlemat, salvestage. Kui kujundus kasutab <img> asemel CSS-is atribuuti background-image, ärge malle puutuge, 2. sammust piisab.

Samm 4. Taaslooge vanad pildid

Esimeses sammus muutsime add_image_size. Uued üleslaadimised toimuvad õige kärpimisega. Kuid kõik meediateegis olevad pildid, mis laaditi üles enne muudatust, on salvestatud vanas mõõdus. Slaidiesitlus vaatab neid ja saab valed proportsioonid.

Lahendus: plugin Regenerate Thumbnails. See käib läbi kogu meediateegi ja taasloob pisipildid praegu registreeritud suurustes. Tavapärane paigaldus: Pluginad → Lisa uus → otsi „Regenerate Thumbnails" → Paigalda → Aktiveeri.

Pärast aktiveerimist: Tööriistad → Regenerate Thumbnails → „Regenerate All Thumbnails". Suure teegi puhul võtab protsess paar minutit, plugin käivitab iga pildi puhul kõigi deklareeritud suuruste taasloomise.

Plugin oskab ka kustutada kasutamata pisipildisuurusi, vabastades serveriruumi. Pärast ühekordset käivitamist pole seda enam vaja: kõik edaspidised üleslaadimised läbivad uue add_image_size väärtuse.

Kui teil on serverisse konsooliühendus, on WP-CLI kiirem:

1
wp media regenerate --yes

Puudub HTTP-päringute üldkulu ja see ei jookse suurte teekide puhul ajalimiidi otsa.

Mida teha, kui slaidiesitlus ikka katki on

Mõnikord olete kõik neli sammu läbinud, kuid slaidiesitlus käitub veidralt. Vaadake see kontrollnimekiri läbi:

• CSS-i spetsiifilisus: teie uue width/height kirjutab üle mõni spetsiifilisem selektor kujunduses. Avage brauseri inspektor ja vaadake, milline reegel elemendile tegelikult rakendub.
• Vahemälu: tühjendage brauseri vahemälu (Ctrl+F5). Kui teil on serveri vahemällu salvestamise plugin nagu WP Rocket või LiteSpeed Cache, tühjendage ka see.
• Alamkujundus: otse peakujunduse muutmine tähendab, et muudatused lähevad järgmise uuendusega kaotsi. Looge alamkujundus ja viige oma muudatused sinna.
• Responsiivsus: kas konteineri laius on suurem kui saidi laius? Mobiilis voolab slaidiesitlus servast üle. Lisage mobiilivaate meediapäringusse max-width: 100% ja height: auto.

Kujunduse uuendus lõhkus kõik: kuidas end kaitsta

Peakujunduse muutmise peamine valu: uuendused kirjutavad failid üle ja teie muudatused kaovad. Slaidiesitlus naaseb vaikimisi tehaseseadetele.

Õige lähenemine on alamkujundus. Viige sinna kolm asja:

• Tühistage add_image_size alamkujunduse failis functions.php konksu after_setup_theme kaudu;
• Tühistage CSS, alamkujunduse style.css laaditakse pärast peakujundust, teie reeglid võidavad kaskaadi alusel;
• Slaidiesitluse mallid, kopeerige nivo.php ja content.php alamkujundusse sama kaustastruktuuriga (includes/sliders/). WordPress korjab automaatselt üles alamkujunduse versiooni.

Pärast seda ei kujuta peakujunduse uuendused teie suurustele mingit ohtu.

⁉️🤔 Korduma kippuvad küsimused

Kas ma pean muutma kõiki kolme faili: functions.php, style.css ja malle?

Jah, vastasel juhul jääb tulemus poolikuks. Muutsite ainult add_image_size ilma CSS-ita ja konteiner kärbib uut pilti. Ilma mallideta venitab brauser pildi vanade width/height atribuutideni ja see muutub uduseks. Kolm muudatust annavad järjepideva suuruse kõigil kihtidel: pisipildi registreerimine → konteiner → HTML-atribuudid.

Kas ma pean content.php puutuma, kui kasutan ainult Nivo sliderit?

Ei. content.php on mõeldud sisuslaidiesitlusele, sellele, mis tõmbab teksti ja pilte postitustest. Kui sisuslaidiesitlust saidil ei kasutata, võite selle faili vahele jätta. Kuid kahtluse korral võtab muutmine minuti, parem teha mõlemad.

Kas Regenerate Thumbnails plugin kustutab mu originaalid?

Ei. Algne, täissuuruses pilt jääb puutumata. Plugin taasloob ainult pisipildid: suurused, mis on registreeritud add_image_size ja Seaded → Meedia kaudu. Kasutamata suuruste kustutamise valik ei puuduta samuti originaali, see koristab ära „orvuks jäänud" pisipildid, mida pole kujunduses ega pluginates deklareeritud.

Aga kui add_image_size pole kujunduses ja slaidiesitlus töötab teisiti?

Mõned kaasaegsed kujundused ei kasuta slaidiesitluse jaoks add_image_size. Selle asemel laadivad nad originaalpildi ja juhivad suurust CSS-i kaudu: object-fit: cover või background-size: cover. Sel juhul piisab 2. sammust, muutke ainult CSS-konteinerit. Kontrollige brauseri inspektoris, milline URL slaidiesitluses tegelikult laaditakse: kui see on image.jpg ilma -980x400 sufiksita, pole teil 1. ja 4. sammu vaja.

Kas mul on vaja varukoopiat enne functions.php muutmist?

Absoluutselt. Üks kirjaviga failis functions.php ja sait jookseb kokku valge surmaekraaniga. Enne muutmist laadige fail FTP kaudu alla või kopeerige sisu tekstiredaktorisse. Kui sait kokku jookseb, laadige originaal functions.php tagasi, sait ärkab koheselt ellu.

Kohandatud slaidiesitlus: lõplik kokkuvõte

Algoritm on universaalne iga klassikalise WordPressi kujunduse jaoks: suuruse registreerimine → CSS-konteiner → HTML-mallid → vanade piltide taasloomine. Neli sammu ja slaidiesitlus töötab teie proportsioonides ilma kärpimise ja udususeta.

Peamine on mitte muuta peakujundust otse. Viige muudatused alamkujundusse kohe, kui olete veendunud, et suurused sobivad. Siis ei veereta ükski uuendus slaidiesitlust tehaseseadetele tagasi.