a képméretek magyarázata

amikor képet tölt fel a WordPress webhelyére, annak másolatai – további méretű képek jönnek létre. Miért van szükségünk rájuk? Mert nem ugyanazt a méretű képet használjuk mindenhol a webhelyen:

• a hozzászólások,
• a Portfólió,
• a felugró ablakok,
• a post miniatűrök archív oldalak,
• a widgetek,
• a közigazgatási területen stb;

tehát például a WordPress lehetővé teszi, hogy teljes méretű képet használjon a hozzászólások oldalain, és 150 (például) 150 (például) képet az archív oldalakon.

de várjunk! – ne feledje, hogy minél több regisztrált képméret van, annál több fájl lesz a webhelyén, és több időre lesz szükség a képek feldolgozásához a feltöltés során.

alapértelmezett WordPress képméretek

a WordPress alapértelmezés szerint több képméretet támogat. Megtalálhatja és módosíthatja őket az adminisztrációs területen a “Beállítások > Média”alatt.

tehát például ezen az oldalon megváltoztathatja a WordPress miniatűrméretét.

mi van, ha nem használja őket, és nem akarja, hogy a WordPress másolatot készítsen mindegyik mérethez. A következő horgot beillesztheti a témájába functions.php.

de mindig tartsa szem előtt, hogy ha a WordPress témája frissítéseket kap, akkor jobb, ha gyermek témát vagy egyéni bővítményt használ.

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

a medium_large képméret megjelent a WordPress 4.4-ben a reszponzív képek funkcióval együtt. Fix szélessége 768 és arányos magassága.

a medium_large Méret kikapcsolható olyan egyszerű, mint ezzel a kóddal:

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

hogyan lehet megszerezni az összes képméretet?

néha meg kell találnia, hogy mi a rendelkezésre álló képméretek listája a weboldalon. Sajnos nincs általános módszer erre mind az alapértelmezett, mind az egyéni képméreteknél, így:

• ha szüksége van az alapértelmezett képméretek listájára, használhatja a get_intermediate_image_sizes() parancsot, amely egy alapértelmezett képmérettel rendelkező tömböt ad vissza, például:

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

• ha fel kell sorolnia a regisztrált képméreteket, akkor a $_wp_additional_image_sizes globális változóból kapja meg őket, és többet tudok mondani, onnan is megkaphatja a képméreteket, például:

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

funkciók

elég könnyű használni a WP képméreteket az adminisztrációs területen – mindössze annyit kell tennie, hogy kiválasztja a kívánt képméretet a legördülő menüből. Akkor nézzük meg a funkciókat.

the_post_thumbnail()

Top 1 a listámon, mert gyakrabban használom, mint bármi mást.

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

kérjük, vegye figyelembe, hogy ez a függvény <img> címkét nyomtat, nem URL-t.

$méret itt van, amit lehet használni, mint egy paraméter értéke:

• képméret azonosító (név) – medium, custom stb, alapértelmezés szerint thumbnail,

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

• egyedi méret array( width, height ), példa:

  the_post_thumbnail( array( 100, 100 ) );

  ha használja, megjelenik a legmegfelelőbb képméret.

• ehhez a paraméterhez full értéket adhat át, és egy eredeti kép jelenik meg.

$attr akkor adja át a HTML attribútumok itt, mint egy tömb, akkor is átírnisrcattribútum! 😁

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

get_the_post_thumbnail ()

ez a funkció nagyon hasonlít a the_post_thumbnail () függvényhez, a különbség az, hogy:

• az első get_the_post_thumbnail() egy post ID, minden más ugyanaz,
• képet ad vissza, nem nyomtatja ki.

példa:

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

wp_get_attachment_image_src ()

a funkció lehetővé teszi a kép URL-jének lekérését.

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

kérjük, vegye figyelembe, hogy a melléklet azonosítója nem post azonosító. De könnyen kap ez, például ha szüksége van egy kiemelt kép ID, akkor használja get_post_thumbnail_id() funkciót.

példa:

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

A $size paraméterről és a méret tömb egy kicsit fent olvasható.

az egyéni képméretek hozzáadása

ez a folyamat nagyon egyszerű és két lépésből áll. Az első lépés szükséges.

add_image_size()

képméret regisztrálásához a WordPress programban használhatja ezt a funkciót az aktuális témájában functions.php vagy gyermek témában functions.php vagy egy egyéni bővítményben.

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

$size_name nem használhatja a fenntartott képméret neveket, itt vannak:thumb,thumbnail,post-thumbnail,medium,medium_large,large,full. $szélesség Szélesség pixelben, Készlet 0-korlátlan szélesség. $magasság Magasság pixelben, 0 készlet-korlátlan magasság, példa:

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

$crop korábban ezt a paramétert lehetett elfogadni tudta elfogadni csakfalsevagytruede most ez sokkal hosszabb, így itt vannak a lehetséges értékek:

nézzük meg a példát:

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

a dolgok egyszerűsége érdekében úgy döntöttem, hogy négyzetméretet használok ebben a példában. Tehát könnyű azt mondani, hogy ha az eredeti kép vízszintes, akkor a kép bal oldala megmarad, de a jobb rész levágásra kerül, és ugyanezt mondhatom a függőleges képekről is – a kép alsó része levágásra kerül.

az is lehetséges, hogy a kézi vágás segítségével “Manual Image Crop” plugin.

de ne hozzon létre sok képméretet is:

• minél több képméretet hoz létre — annál több fájl lesz a feltöltések mappában,
• és annál több időre van szükség a kép feltöltéséhez a webhelyére.

hogyan lehet hozzáadni az egyéni képméret Media Uploader és Gutenberg

amikor beszúr képeket widgetek és hozzászólások, WordPress (3.5+) lehetővé teszi, hogy kiválassza, milyen képméret használni:

mint látható, lehetőség van egyéni méret hozzáadására:

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;}

A klassz dolog az, hogy ez a horog a Gutenberg image block számára is működik.

a képek regenerálása méretük megváltoztatása vagy téma megváltoztatása után

talán ismeri azt a helyzetet, amikor a add_image_size() paraméterek megváltoztatása vagy a webhely témájának megváltoztatása után a WordPress nem generál automatikusan képméreteket, és a régi felbontású képek továbbra is megjelennek az oldalon.

mit kell tennie ebben a helyzetben? Ha csak 2-3 kép van a feltöltések mappában, egyszerűen újra feltöltheti őket. De mi a teendő, ha 2-3 ezer kép van?

kétféle módon lehet megoldani ezt a helyzetet – pluginekkel és kóddal:

regenerálja a miniatűröket pluginekkel

Ok, két egyszerű plugint tudok ajánlani:

• Ajax Thumbnail Rebuild
• Force Regenerate Thumbnail

mindegyiknek megvannak a maga előnyei és hátrányai, így talán a különböző helyzetekben kiválaszthatja, hogy melyik plugin jobban illik az Ön számára.

a miniatűrök programozott regenerálása

itt csak azt szeretném megmutatni, hogy a kód lehetővé teszi a képek regenerálását, hogyan fogja használni – ez az Ön választása.

$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 );

Hogyan hozzunk létre bizonyos képméret miniatűröket csak az egyéni Bejegyzéstípusokhoz

tehát képzeljük el, hogy webhelyén 10 regisztrált egyéni bejegyzéstípus van, és mindegyik 2-3 képméretet használ a weboldal oldalain. Könnyű megérteni, hogy amikor bármilyen képet feltöltünk a weboldalra, A WordPress 20-30 példányt hoz létre belőle!

az add_image_size() nem használható egyéni bejegyzéstípushoz, de itt van egy kis kód, amely megoldja ezt a problémát. Ez a kód megmondja a WordPress-nek, hogy mikor kell létrehoznia egy bizonyos felbontású másolatot a képről, és mikor nem.

mind a intermediate_image_sizes, mind a intermediate_image_sizes_advanced horgok rendben vannak ehhez a feladathoz. Egy szuper egyszerű példa az alábbi, miután beszúrja a kódot a functions.php fájl miniatűrök my-image-size-namenem jön létre a képek, feltöltött egyéni post típus page.

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

egy kicsit bonyolultabb példa, de ez is helyes:

/* * 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

annyira szeretem a WordPress-t, a WooCommerce-t és a Gutenberget. 12 év tapasztalat.

szüksége van egyéni fejlesztői segítségre? Vegye fel a kapcsolatot