Olet ehkä törmännyt siihen, että teeman kehittäjän roolissa on vakiona rakentaa teema web-suorituskyky huomioiden. Tämä tarkoittaa sitä, että varmista, että teemassasi tulostettavat kuvat eivät ole ”täydessä” koossa, jos ne saattavat olla yli 100 kilotavun kokoisia.

Myös WordPressin HTML-kuva-attribuutin srcset toiminnallisuuden hyödyntäminen on toinen syy käyttää wp_get_attachment_image()-toimintoa kuvien tulostamisessa.

Muuten käyttökohde olisi blogipostausten tulostaminen esillä olevien kuvien kanssa. Teemankehittäjänä haluat varmistaa, että joko määrität: (a) jonkin oletusarvoisista postauksen pikkukuvakokoista tai (b) luot oman mukautetun postauksen pikkukuvakoon.

On tapauksia, joissa sinun ei välttämättä tarvitse käyttää mukautettua postauksen pikkukuvakokoa. Voit kuitenkin sen sijaan käyttää oletusarvoista postauksen pikkukuvakokoa, joka sopii täydellisesti tarpeisiisi.

Käytettävissäsi olevat oletusarvoiset pikkukuvakoot ovat seuraavat:

  • thumbnail (käyttää kokoa 150px × 150px)
  • medium (käyttää kokoa 300px × 300px)
  • medium_large (käyttää kokoa 768px × 0px)
  • large (käyttää kokoa 1024px × 1024px)

Näissä tapauksissa voit helposti määrittää, jos sinulla on samanlainen koko, jota voit käyttää jollekin näistä oletusarvoisista pikkukuvakokoista. Sinun tarvitsee vain käyttää mitä tahansa edellä mainituista merkkijonoista the_post_thumbnail()-funktion $size-parametrissa.

Huomaa, että nämä oletusarvoiset postauksen pikkukuvakoot ovat lähes kaikki neliönmuotoisia kuvia. Tämä johtuu todennäköisesti maksimitilasta, josta kuva voidaan tulostaa – neliöstä. Jotta tilaa käytettäisiin mahdollisimman paljon, päätettiin tehdä näistä oletusarvoisista postauksen pikkukuvakoista neliön muotoisia kuvia.

Kun käytetään mukautettua postauksen pikkukuvakokoa

On kuitenkin tapauksia, joissa sinun on tulostettava kuva, joka ei ole neliön muotoinen. Otetaan esimerkiksi, että sinun on lisättävä esillä oleva kuva blogisi yksittäisen artikkelin yläpuolelle käyttämällä toimintoa the_post_thumbnail().

Voit käyttää seuraavaa koodia, joka tulostaa artikkelisi esillä olevan kuvan, jonka koko on 1024px × 768px:

add_image_size( 'single-feature', 1024, 768, true );

Ja nopeasti tunnistaa, mitä tämä tarkoittaa maallikon kielellä:

  • add_image_size() – luo mukautetun postauksen pikkukuvan koon
  • ’single-feature’ – parametri $name, vain mukautetun postauksen pikkukuvan koon nimi
  • 1024 – parametri $width, mukautetun postauksen pikkukuvakoon leveys
  • 768 – parametri $height, mukautetun postauksen pikkukuvakoon korkeus
  • true – parametri $crop, tarkoittaa, jos (a) kovaa rajausta tai (b) kuvan skaalaamista mukautetun postauksen pikkukuvakokoon. Lisätietoa WP Dev docsissa

Lisätietona: esimerkistä valittiin määritetyt leveys ja korkeus (1024 × 768), koska ne ovat yleisiä kokoja, joita käytetään esillä olevissa kuvissa. Tämän ei kuitenkaan tarvitse tarkoittaa, että et voi käyttää mitään muuta kokoa. Varmista, että näet, mikä sopii parhaiten teemasi suunnitteluun, ja käytä sitä.

Miten päivität mukautettuja postauksen pikkukuvia

Kun testaat WordPress-kuviesi uusia kuvakokoja, huomaat, että sinulla voi olla ongelmia leveyden ja korkeuden päivittämisessä ilman, että muutat mukautetun postauksen $name pikkukuvan kokoa.

Katsotaanpa esimerkiksi, että sinulla on vanha koko:

add_image_size( 'single-feature', 1024, 768, true );

Mutta nyt sinun täytyy päivittää tämän ”yhden ominaisuuden” pikkukuvan koko seuraavaan kokoon:

add_image_size( 'single-feature', 1366, 768, true );

Näet, että muutos koski leveyttä 1024:sta 1366:een. Mutta kun päivität mallin, jossa tämän koon pitäisi näkyä, se näyttää edelleen kuvansa leveydellä 1024. Miten tämä voidaan korjata?

Tämän korjaamiseksi sinun on luotava pikkukuva uudelleen.

Aluksi varmista, että olet päivittänyt pikkukuvan leveyden ja korkeuden ja asenna sitten lisäosa Regenerate Thumbnails. Seuraa laajennuksen ohjeita ja olet sen jälkeen regeneroinut pikkukuvien koot onnistuneesti.

Kaikkien kuvien regenerointi voi viedä jonkin aikaa, varsinkin jos sivustollasi on paljon kuvia mediakirjastossasi.

Mihin sijoittaa add_image_size-funktio

Funktio add_image_size() ei toimi, ellet sijoita sitä kunnolla WordPressin after_setup_theme toimintakoukkuun. Tämä tarkoittaa, että seuraavan esimerkkikoodin:

add_image_size( 'archive-featured', 792, 446, true );

Pitäisi olla seuraavan toimintakoukun sisällä teemasi functions.php-tiedostossa osoitteessa:

function ms_setup() {add_image_size( 'archive-featured', 792, 446, true );}add_action( 'after_setup_theme', 'ms_setup' );

Add_image_size:n lisääminen Underscores-teemassa

Erittäin suositussa aloitusteemassa nimeltä Underscores-teema tai _s-teema on hyvä paikka add_image_size()-funktioiden lisäämiseen.

Voit lisätä mukautetun postauksen thumbnail size -funktion add_image_size() Underscores-teeman functions.php-tiedoston add_theme_support( 'post-thumbnails' ); rivin alle.

Syy siihen, että voit lisätä funktion add_image_size() tänne alle, on se, että se on jo aiemmin mainitussa after_setup_theme-toimintakoukussa.

Add Image Size Function Snippet for WordPress Themes

Voit halutessasi kopioida alla olevan pätkän add_image_size in Underscores-teemaan myöhempää käyttöä varten:

/* * Custom post thumbnail sizes for use across the theme. * * @link https://developer.wordpress.org/reference/functions/add_image_size/ */add_image_size( $name, $width, $height, $crop );

Huomautus: Varmista, että määrittelet pätkässä käytetyt parametrit, jotta et saa PHP-varoitusvirheitä teemassasi. Yllä olevaa pätkää käytetään mallina, jonka voit kopioida-liittää teemasi funktioihin.

Johtopäätös

Kiitos, että luit tämän artikkelin! Kerro minulle ajatuksistasi ja asetuksistasi mukautettujen postausten pikkukuvien koosta.

Jos pidit tästä artikkelista, saatat haluta tietää Teeman virheet mukautettujen postaustyyppien määrittämisessä. Ensinnäkin, älä rekisteröi mukautettuja post-tyyppejä teemassasi!

admin

Vastaa

Sähköpostiosoitettasi ei julkaista.

lg