kuvakoot selitetty

kun lataat kuvan WordPress-verkkosivustollesi, syntyy sen kopioita-kuvia, joissa on lisäkokoja. Mihin niitä tarvitaan? Koska emme käytä samankokoista kuvaa kaikkialla sivustolla:

• postauksissa,
• portfoliossa,
• ponnahdusikkunoissa,
• Post pikkukuvissa arkistosivuilla,
• widgeteissä,
• hallintoalueella jne;

joten esimerkiksi WordPress mahdollistaa täysikokoisen kuvan käytön viestisivuilla ja 150×150 (esimerkiksi) kuvaa arkistosivuilla.

mutta odota ✋ – pidä mielessä, että mitä enemmän rekisteröityjä kuvakokoja sinulla on, sitä enemmän tiedostoja on verkkosivustollasi ja kuvien käsittelyyn tarvitaan enemmän aikaa latauksen aikana.

oletuksena WordPress-kuvakoot

WordPress tukee oletuksena useita kuvakokoja. Löydät ja muutat niitä hallintoalueelta kohdasta ”Asetukset > Media”.

joten esimerkiksi Tällä sivulla voit muuttaa WordPress-pikkukuvan kokoa.

mitä jos et käytä niitä etkä halua WordPressin tuottavan kopiota jokaiselle näistä kokoluokista. Voit lisätä seuraavan koukun teemaasi functions.php.

mutta aina pitää mielessä, että jos WordPress teema saa päivityksiä, niin parempi käyttää lapsi teema tai mukautetun plugin.

add_filter('intermediate_image_sizes', 'misha_turn_off_default_sizes'); function misha_turn_off_default_sizes( $default_image_sizes) { unset( $default_image_sizes); // turn off thumbnail sizeunset( $default_image_sizes); // turn off medium sizeunset( $default_image_sizes); // turn off large size return $default_image_sizes; }

medium_large

medium_large kuvakoko esiintyi WordPress 4.4: ssä yhdessä reagoivien kuvien ominaisuuden kanssa. Sen tasaleveys on 768 ja suhteellinen korkeus.

voit deaktivoida medium_large koon niin helposti kuin tällä koodilla:

add_filter('intermediate_image_sizes', 'misha_deactivate_medium_large'); function misha_deactivate_medium_large( $default_image_sizes ){ $default_image_sizes;return $default_image_sizes; }

miten saada Kaikki kuvakoot?

joskus on selvitettävä, mikä on verkkosivujen lista saatavilla olevista kuvakooista. Valitettavasti ei ole yhteistä tapaa tehdä se sekä oletus-ja mukautettuja kuvia koot, joten:

• jos tarvitset luettelon oletuskuvakoista, voit käyttää get_intermediate_image_sizes(), joka palauttaa taulukon, jossa on oletuskuvakoot, esimerkki:

  print_r( get_intermediate_image_sizes() );/* Array ( => thumbnail => medium => medium_large => large ) */

• jos sinun täytyy listata rekisteröityjä kuvakokoja, saat ne osoitteesta $_wp_additional_image_sizes global variable, ja voin teel you more, voit myös saada kuvakoot sieltä, esimerkki:

  global $_wp_additional_image_sizes;print_r( $_wp_additional_image_sizes );/*Array( => Array ( => 400 => 400 => 1 ) => Array ( => 2000 => 1200 => 1 ))*/

toiminnot

WP-kuvakokojen käyttäminen hallintoalueella on riittävän helppoa – sinun tarvitsee vain valita haluamasi kuvakoko pudotusvalikosta. Katsotaan sitten toimintoja.

the_post_thumbnail ()

top 1 listassani, koska käytän sitä useammin kuin mitään muuta.

the_post_thumbnail( $size = 'thumbnail', $attr = '' );

huomaa, että tämä funktio tulostaa <img> tagin, ei URL-osoitetta.

$size Tässä voit käyttää parametrin arvona:

• image size identifier (name) – medium, custom etc, by default thumbnail,

  // prints the featured image, size large of a current post in the loopthe_post_thumbnail( 'large' );

• mukautettu koko array( width, height ), esimerkki:

  the_post_thumbnail( array( 100, 100 ) );

  jos käytät sitä, sopivin kuvakoko näytetään.

• voit siirtää full arvon tälle parametrille ja alkuperäinen kuva näytetään.

$attr voit siirtää minkä tahansa HTML-attribuutin tässä taulukkona, voit jopa kirjoittaasrcattribuutin! 😁

the_post_thumbnail( 'medium', array( 'class' => 'my-image', 'data-id' => 1000 ) );

get_the_post_thumbnail ()

tämä funktio on hyvin samankaltainen kuin the_post_thumbnail (), erona on, että:

• ensimmäinen get_the_post_thumbnail() on post ID, kaikki muu on sama,
• se palauttaa kuvan, ei tulosta sitä.

esimerkki:

echo get_the_post_thumbnail( get_the_ID(), 'medium' );

wp_get_attachment_image_src ()

funktion avulla voi saada kuvan URL-osoitteen.

wp_get_attachment_image_src( $attachment_id, $size = 'thumbnail' );

huomaa, että liite ID ei ole post ID. Mutta sen saa helposti, esimerkiksi jos tarvitsee featured image ID: n, voi käyttää get_post_thumbnail_id() – toimintoa.

esimerkki:

$image_array = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large' );echo $image_array;

tietoja $size – parametrista ja kokoluokasta lukee hieman edellä.

omien Kuvakokojen lisääminen

tämä prosessi on hyvin yksinkertainen ja koostuu kahdesta vaiheesta. Ensimmäinen vaihe on tarpeen.

add_image_size()

rekisteröi kuvakoko WordPress-palvelussa voit käyttää tätä toimintoa nykyisessä teemassasi functions.php tai lapsiteemassasi functions.php tai mukautetussa liitännäisessä.

add_image_size( $size_name, $width = 0, $height = 0, $crop = false );

$size_name et voi käyttää varattuja kuvakokojen nimiä, tässä ne ovat:thumb,thumbnail,post-thumbnail,medium,medium_large,large,full. $leveys leveys pikseleinä, aseta 0-rajoittamaton leveys. $korkeus korkeus pikseleinä, aseta 0-rajoittamaton korkeus, esimerkki:

add_image_size( 'fixedwidth500', 500, 0 ); // or just skip the third parameter

$rajaa aiemmin tämä parametri voisi hyväksyä voisi hyväksyä vain

falsetaitruemutta nyt se on paljon laajennettu, joten tässä ovat mahdolliset arvot:

katsotaanpa esimerkkiä:

add_image_size( 'my-image-size-name', 200, 200, array( 'left', 'top' ) );

pitääkseni asiat yksinkertaisina päätin käyttää tässä esimerkissä neliön kokoista kokoa. Joten, se on helppo sanoa, että jos alkuperäinen kuva on vaakasuora, vasen osa kuvasta pysyy, mutta oikea osa rajataan, ja samaa voin sanoa vertikaalisista kuvista – kuvan alaosa rajataan.

on myös mahdollista tehdä manuaalinen rajaus” Manual Image Crop ” – liitännäisellä.

, mutta älä myöskään luo paljon kuvakokoja:

• mitä enemmän kuvakokoja luot-sitä enemmän tiedostoja on uploads-kansiossasi,
• ja sitä enemmän aikaa tarvitaan kuvan lataamiseen sivustollesi.

muokatun kuvakoon lisääminen median lataajaan ja Gutenberg

kun lisäät kuvia widgetteihin ja julkaisuihin, WordPress (3.5+) antaa sinun valita, mitä kuvakokoa käytät:

kuten näet, on mahdollista lisätä sinulle mukautetun koon siellä:

add_filter('image_size_names_choose', 'misha_new_image_sizes'); function misha_new_image_sizes($sizes) {$addsizes = array("my-image-size-name" => 'Misha size' // "image size name" => "Label (anything)");$newsizes = array_merge( $sizes, $addsizes );return $newsizes;}

siistiä on, että tämä koukku toimii myös Gutenbergin kuvapalkkiin.

kuvien uudistaminen koon tai teeman muuttamisen jälkeen

ehkä tiedät tilanteen, kun muuttamisen jälkeen add_image_size() parametrit tai muuttamisen jälkeen sivuston teema WordPress ei luo kuvakokoja automaattisesti ja kuvia vanhoilla resoluutioilla näytetään edelleen sivustolla.

mitä tässä tilanteessa pitäisi tehdä? Jos uploads-kansiossasi on vain 2-3 kuvaa, voit ladata ne uudelleen. Mutta mitä tehdä, jos kuvia on 2-3 tuhatta?

tilanteen voi ratkaista kahdella tavalla-liitännäisillä ja koodilla:

Uudista pikkukuvat liitännäisillä

Ok, voin suositella kahta yksinkertaista liitännäistä:

• Ajax Thumbnail Rebuild
• Force Regenerate Thumbnail

jokaisella niistä on omat etunsa ja haittansa, joten ehkä eri tilanteissa voit valita, mikä plugin sopii sinulle enemmän.

Uudista näytekuvat ohjelmallisesti

tässä haluan vain näyttää koodin, joka mahdollistaa kuvien uudistamisen, kuinka käytät sitä – se on sinun valintasi.

$attachment_id = 5; // pass your attachment ID here $path = get_attached_file( $attachment_id );$meta = wp_generate_attachment_metadata( $attachment_id, $path );wp_update_attachment_metadata( $attachment_id, $meta );

Kuinka luoda tiettyjä Kuvakokoisia pikkukuvia muokatuille Postityypeille vain

niin, kuvitellaan, että sivustollasi on 10 rekisteröityä räätälöityä postityyppiä, ja jokainen niistä käyttää 2-3 kuvakokoa verkkosivuston sivuilla. On helppo ymmärtää, että kun me ladata mitään kuvaa verkkosivuilla WordPress luo 20-30 kopiota siitä!

ei ole mitään keinoa käyttää add_image_size () – toimintoa muokatulle post-tyypille, mutta tässä on pieni koodinpätkä, joka ratkaisee tämän ongelman. Tämä koodi kertoo WordPressille, milloin sen on luotava tietty resoluutio kopio kuvasta ja milloin ei.

sekä intermediate_image_sizes että intermediate_image_sizes_advanced koukut ovat OK tähän tehtävään. Superyksinkertainen esimerkki alla, Kun olet lisännyt koodin functions.php tiedostokuviin my-image-size-name, ei luoda kuvia, jotka on ladattu custom post type page.

add_filter( 'intermediate_image_sizes_advanced', function( $sizes ){ if( isset( $_REQUEST ) && 'page' == get_post_type($_REQUEST ) ) {unset( $sizes );} return $sizes; } );

hieman monimutkaisempi esimerkki, mutta se on myös oikea:

/* * this hook will be fired while you uploading a picture */add_filter( 'intermediate_image_sizes', 'misha_reduce_image_sizes' ); function misha_reduce_image_sizes( $sizes ){/* * $sizes - all image sizes array Array ( => thumbnail => medium => large => post-thumbnail ) * get_post_type() to get post type */$type = get_post_type($_REQUEST); // $_REQUEST post id the image uploads to foreach( $sizes as $key => $value ){ /* * use switch if there are a lot of post types */if( $type == 'page' ) {if( $value == 'regionfeatured' ){ // turn off 'regionfeatured' for pages unset( $sizes ); }} else if ( $type == 'region' ) {if( !in_array( $value, array('regionfeatured','misha335') ) ){ // for regions turn off everyting except 'regionfeatured' and 'misha335' unset( $sizes ); }} else {if( $value != 'thumbnail' ){ // turn off everything except thumbnail unset( $sizes ); }}}return $sizes;}

Misha Rudrastyh

rakastan WordPress, WooCommerce ja Gutenberg niin paljon. 12 V kokemusta.

Tarvitsetko custom developer help? Ota yhteyttä