Bildestørrelser Forklart

når du laster opp et bilde Til WordPress-nettstedet ditt, vil kopier – bilder med flere størrelser bli opprettet. Hvorfor trenger vi dem? Fordi vi ikke bruker samme størrelse bilde overalt på nettstedet:

• i innlegg,
• i portefølje,
• i popups,
• som postminiatyrbilder på arkivsider,
• i widgets,
• i administrasjonsområdet etc;

Så, For Eksempel WordPress lar deg bruke full størrelse bilde på innleggssider og 150×150 (for eksempel) bilder på arkivsider.

men vent ✋ – husk at jo flere registrerte bildestørrelser du har, jo flere filer vil være på nettstedet ditt og mer tid vil være nødvendig for å behandle bilder under opplasting.

Standard WordPress Bildestørrelser

WordPress støtter flere bildestørrelser som standard. Du kan finne og endre dem i administrasjonsområdet i «Innstillinger > Media».

så, for eksempel kan du endre WordPress miniatyrstørrelse på denne siden.

Hva om Du ikke bruker Dem og ikke Vil At WordPress skal generere en kopi for hver av disse størrelsene. Du kan sette inn følgende krok i temaet functions.php.

men alltid huske på at Hvis WordPress tema mottar oppdateringer, så bedre bruke et barn tema eller en tilpasset 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 bildestørrelsen dukket opp I WordPress 4.4 sammen med responsive bilder-funksjonen. Den har fast bredde 768 og proporsjonal høyde.

du kan deaktivere medium_large størrelse så enkelt som med denne koden:

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

Hvordan Få Alle Bildestørrelser?

Noen ganger må du finne ut hva som er listen over tilgjengelige bildestørrelser på nettstedet. Dessverre er det ingen vanlig måte å gjøre det for både standard og egendefinerte bildestørrelser, så:

• hvis du trenger listen over standard bildestørrelser, kan du bruke get_intermediate_image_sizes(), som returnerer en matrise med standard bildestørrelser, eksempel:

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

• hvis du må liste registrerte bildestørrelser, får du dem fra $_wp_additional_image_sizes global variabel, og jeg kan teel deg mer, du kan også få bildedimensjoner derfra, eksempel:

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

Funksjoner

DET er enkelt å bruke WP – bildestørrelser i administrasjonsområdet-alt du trenger å gjøre er å velge en bildestørrelse du trenger fra rullegardinmenyen. La oss bedre se på funksjonene da.

the_post_thumbnail ()

Topp 1 i listen min, Fordi jeg bruker den oftere enn noe annet.

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

Vær oppmerksom på at denne funksjonen skriver ut en <img> tag, ikke EN URL.

$størrelse Her er hva du kan bruke som en parameterverdi:

• bildestørrelsesidentifikator (navn) – medium, custom etc, som standard thumbnail,

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

• tilpasset størrelse array( width, height ), eksempel:

  the_post_thumbnail( array( 100, 100 ) );

  hvis du bruker den, vises den mest passende bildestørrelsen.

• du kan sende full verdi til denne parameteren, og et originalt bilde vil bli vist.

$attr Du kan passere NOEN HTML-attributter her som en matrise, du kan til og med omskrivesrcattributt! 😁

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

get_the_post_thumbnail()

denne funksjonen er veldig lik the_post_thumbnail (), forskjellen er at:

• Den første get_the_post_thumbnail() er en post-ID, alt annet er det samme,
• det returnerer et bilde, ikke skriver det ut.

Eksempel:

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

wp_get_attachment_image_src ()

funksjonen gjør det mulig å få et BILDE URL.

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

Vær oppmerksom på at et vedlegg-ID ikke er et innlegg-ID. Men du kan enkelt få det, for eksempel hvis du trenger en utvalgt bilde-ID, kan du bruke funksjonen get_post_thumbnail_id().

Eksempel:

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

om parameteren $size og en størrelsesgruppe, les litt over.

Slik Legger Du Til Egendefinerte Bildestørrelser

denne prosessen er veldig enkel og består av to trinn. Det første trinnet er nødvendig.

add_image_size ()

for å registrere en bildestørrelse I WordPress kan du bruke denne funksjonen i ditt nåværende tema functions.php eller i et barn tema functions.php eller i en tilpasset plugin.

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

$size_name du kan ikke bruke reserverte bildestørrelsesnavn, her er de:thumb,thumbnail,post-thumbnail,medium,medium_large,large,full. $ bredde Bredde i piksler, sett 0-ubegrenset bredde. $høyde Høyde i piksler, sett 0-ubegrenset høyde, eksempel:

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

$crop Tidligere denne parameteren kunne akseptere kunne godta barefalseellertruemen nå er det mye mer utvidet, så her er de mulige verdiene:

La oss ta en titt på eksemplet:

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

For å holde ting enkelt bestemte jeg meg for å bruke en firkantet størrelse i dette eksemplet. Så det er lett å si at hvis det opprinnelige bildet er horisontalt, vil venstre del av bildet forbli, men den høyre delen vil bli beskåret, og det samme kan jeg si om vertikale bilder – den nederste delen av bildet vil bli beskåret.

det er også mulig å gjøre manuell beskjæring ved hjelp Av» Manuell Image Crop » plugin.

men ikke lage en masse bildestørrelser også:

• jo flere bildestørrelser du oppretter – jo flere filer vil være i opplastingsmappen din,
• , og jo mer tid må du laste opp et bilde til nettstedet ditt.

Slik Legger Du Til Din Egendefinerte Bildestørrelse Til Media Uploader Og Gutenberg

Når du setter inn bilder til widgets og innlegg, Lar WordPress (3.5+) deg velge hvilken bildestørrelse du vil bruke:

som du kan se, er det mulig å legge til tilpasset størrelse der:

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

det kule er at denne kroken også fungerer For Gutenberg image block.

Hvordan Regenerere Bilder Etter Endring Av Størrelser Eller Endring Av Tema

Kanskje du vet situasjonen når du har endret add_image_size() parametere Eller etter endring av nettstedstemaet WordPress genererer Ikke bildestørrelser automatisk, og bilder med gamle oppløsninger vises fortsatt på nettstedet.

hva bør du gjøre i denne situasjonen? Hvis det er bare 2-3 bilder i opplastinger mappen, kan du bare reupload dem. Men hva skal jeg gjøre hvis det er 2-3 tusenvis av bilder?

det er to måter å løse denne situasjonen på – med plugins og med kode:

Regenerere Miniatyrbilder Med Plugins

Ok, Jeg kan anbefale deg to enkle plugins:

• Ajax Thumbnail Rebuild
• Force Regenerere Thumbnail

hver av dem har sine egne fordeler og ulemper, så kanskje for ulike situasjoner kan du velge hva plugin mer passer for deg.

Regenerere Miniatyrbilder Programmatisk

Her vil jeg bare vise deg koden som gjør det mulig å regenerere bilder, hvordan du vil bruke den – det er ditt valg.

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

Slik Lager Du Bestemte Bildestørrelsesminiatyrbilder For Egendefinerte Innleggstyper Bare

Så la oss forestille oss at nettstedet ditt har 10 registrerte egendefinerte innleggstyper, og hver av dem bruker 2-3 bildestørrelser på nettsidene. Det er lett å forstå at Når Vi laster opp et bilde På nettstedet WordPress skaper 20-30 kopier av det!

det er ingen måte å bruke add_image_size() for en tilpasset posttype, men her er et lite stykke kode som løser dette problemet. Denne koden forteller WordPress når Den må lage en bestemt oppløsningskopi av bildet og når den ikke gjør det.

både intermediate_image_sizes og intermediate_image_sizes_advanced kroker ER OK for denne oppgaven. Et superenkelt eksempel nedenfor, etter at du har satt inn koden til functions.php filminiatyrbilder my-image-size-name, blir ikke opprettet for bilder, lastet opp fra egendefinert innleggstype page.

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

litt mer komplisert eksempel, men det er også riktig:

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

Jeg elsker WordPress, WooCommerce Og Gutenberg så mye. 12 års erfaring.

Trenger du noen tilpasset utvikler hjelp? Ta kontakt