Kako stvoriti dodatne veličine slike u WordPressu

Kako stvoriti dodatne veličine slike u WordPressu

Želite li stvoriti dodatne veličine slika u WordPressu?

Prema zadanim postavkama, WordPress automatski stvara nekoliko kopija prenesenih slika u različitim veličinama. Osim toga, WordPress teme i dodaci također mogu stvoriti vlastite veličine slika.

U ovom članku ćemo vam pokazati kako jednostavno stvoriti dodatne veličine slika u WordPressu i koristiti ih na svojoj web stranici.

Zašto stvarati dodatne veličine slika u WordPressu?

Obično sve popularne WordPress teme i dodaci vrlo dobro obrađuju veličine slika. Na primjer, vaša WordPress tema može stvoriti dodatne veličine za korištenje kao minijature na stranicama arhive.

Međutim, ponekad ove veličine slika možda neće odgovarati vašim zahtjevima. Možda ćete htjeti upotrijebiti drugu veličinu slike u podređenoj temi ili izgledu mreže posta.

To možete učiniti stvaranjem dodatnih veličina slika u WordPressu, a zatim pozivanjem tih veličina kad god vam zatrebaju.

S obzirom na to, pogledajmo kako stvoriti dodatne veličine slika u WordPressu.

Registriranje dodatnih veličina slike za svoju temu

Većina WordPress tema, uključujući sve top WordPress teme, prema zadanim postavkama podržavaju značajku minijatura objave (istaknute slike).

Međutim, ako stvarate prilagođenu WordPress temu, morat ćete dodati podršku za minijature postova dodavanjem sljedećeg koda u datoteku functions.php vaše teme.

1
add_theme_support( 'post-thumbnails' );

Nakon što omogućite podršku za minijature postova, sada možete koristiti funkcionalnost registracije dodatnih veličina slika pomoću funkcije add_image_size().

Funkcija add_image_size koristi se u sljedećem formatu:

add_image_size( ‘ime-veličine’, širina, visina, način izrezivanja);

Primjer koda može izgledati ovako:

1
2
3
add_image_size( 'sidebar-thumb', 120, 120, true ); // Hard Crop Mode
add_image_size( 'homepage-thumb', 220, 180 ); // Soft Crop Mode
add_image_size( 'singlepost-thumb', 590, 9999 ); // Unlimited Height Mode

Sada, ako primijetite, naveli smo tri različite vrste veličina slika. Svaki od njih ima različite načine rada kao što su tvrdo izrezivanje, meko izrezivanje i neograničena visina.

Pokrijmo svaki primjer i kako ih možete koristiti u vlastitim projektima.

1. Način tvrdog obrezivanja

Kao što možete primijetiti, postoji “prava” vrijednost dodana nakon visine. Ovo govori WordPressu da izreže sliku točno na veličinu koju smo definirali (u ovom slučaju 120 x 120px).

Ova metoda se koristi kako bi se osiguralo da je sve točno proporcionalno. Ova će funkcija automatski izrezati sliku ili sa strane ili s vrha i dna, ovisno o veličini.

2. Način mekog obrezivanja

Prema zadanim postavkama, uključen je način mekog izrezivanja, zbog čega ne vidite dodatnu vrijednost nakon visine. Ova metoda proporcionalno mijenja veličinu slike bez izobličenja. Dakle, možda nećete dobiti dimenzije koje ste željeli. Obično odgovara dimenziji širine, a visine se razlikuju ovisno o proporciji svake slike. Primjer prikaza bi izgledao ovako:

Način rada neograničene visine

Postoje slučajevi kada imate super dugačke slike koje želite upotrijebiti u svom dizajnu, ali želite biti sigurni da je širina ograničena. Na primjer, infografske slike obično su vrlo dugačke i obično šire od širine sadržaja.

Ovaj način vam omogućuje da odredite širinu koja neće narušiti vaš dizajn, a visina ostaje neograničena.

Prikaz dodatnih veličina slika u vašoj WordPress temi

Sada kada ste dodali funkcionalnost za željene veličine slika, pogledajmo njihov prikaz u vašoj WordPress temi. Otvorite datoteku teme u kojoj želite prikazati sliku i zalijepite sljedeći kod:

1
<?php the_post_thumbnail( 'your-specified-image-size' ); ?>

Napomena: Ovaj dio koda mora biti zalijepljen unutar post petlje.

To je sve što stvarno morate učiniti da prikažete dodatne veličine slika u vašoj WordPress temi. Vjerojatno biste ga trebali omotati stilom koji odgovara vašim potrebama.

Regeneracija dodatnih veličina slike
Ako to ne radite na potpuno novoj stranici, vjerojatno ćete morati regenerirati sličice.

Funkcija add_image_size() generira samo veličine od točke kada je dodana u temu. To znači da sve slike posta koje su dodane prije uključivanja ove funkcije neće imati nove veličine.

Da biste to popravili, morate regenerirati novu veličinu slike za starije slike. To je jednostavno pomoću dodatka pod nazivom Regenerate Thumbnails. Nakon što instalirate i aktivirate dodatak, nova opcija se dodaje ispod izbornika: Alati » Regeneriraj minijature

Vidjet ćete opciju regeneracije minijature za sve slike ili samo istaknute slike. Preporučujemo ponovno generiranje svih slika kako biste izbjegli bilo kakvo neočekivano ponašanje ili pokvarene slike.

Za više pojedinosti pogledajte naš članak o tome kako jednostavno regenerirati nove veličine slika u WordPressu.

Omogućavanje dodatnih veličina slika za sadržaj vašeg posta
Iako ste omogućili veličine slika u svojoj temi, upotreba je ograničena samo na vašu temu što nema nikakvog smisla.

Sve veličine slika se generiraju bez obzira na to, pa zašto ih ne učiniti dostupnom autoru posta za korištenje unutar sadržaja posta.

To možete učiniti dodavanjem sljedećeg koda u funkcijsku datoteku svoje teme.

1
2
3
4
5
6
7
8
function wpb_custom_image_sizes( $size_names ) {
    $new_sizes = array(
        'homepage-thumb' => 'Homepage Thumbmail',
        'singlepost-thumb' => 'Infographic Single Post'
    );
    return array_merge( $size_names, $new_sizes );
}
add_filter( 'image_size_names_choose', 'wpb_custom_image_sizes' );

Ne zaboravite spremiti promjene nakon dodavanja koda.

Sada možete otići i prenijeti sliku na WordPress post ili stranicu. U postavkama bloka slike vidjet ćete svoje prilagođene veličine slike pod opcijom “Veličina slike”.

Vi i drugi autori koji rade na vašoj web stranici sada možete odabrati ove opcije veličine kada dodajete slike na objave i stranice.

Nadamo se da vam je ovaj članak pomogao naučiti kako stvoriti dodatne veličine slika u WordPressu. Možda biste željeli vidjeti i naš članak o najboljim dodacima za kompresiju slika za WordPress i naš vodič za performanse WordPressa za poboljšanje brzine vaše web stranice.