WordPress-pikkukuvat - yhdistäminen, mukauttaminen, lisääminen ja koon muuttaminen sekä käyttö mallissa. Varattujen kokojen nimet. Tasainen kasvu muutosten vuoksi

Kuvia verkkosivuilta löytyy melko usein, ja samalla niitä voi olla suuret koot, mutta verkkosivustojen suunnittelu ei aina salli sen julkaisemista täydessä muodossa. Siksi meidän on keksittävä tapa, jolla voimme lisätä niitä.

Aloitetaan primitiivisillä menetelmillä ja lopetetaan kaikkein paras tapa kuvan suurentamista.

1. Suurenna kuva linkin kautta image-or-smaller-copy-address ">

Selitys esimerkiksi:

• - jotta linkki ei siirrä painoa kuvaan;
• target="_blank" - kuva avautuu uuteen välilehteen.

Viimeinen parametri on varsin tärkeä, koska usein käyttäjän kokemattomuuden vuoksi voi syntyä seuraava tilanne: avattuaan sivun, jossa on kuva, hän ei tiedä kuinka palata takaisin ja siksi sulkee välilehden, mikä tarkoittaa, että hän poistuu sivustolta kokonaan . Määrittämällä viimeisen parametrin suojaamme häntä sellaiselta tapaukselta, koska hänellä on edelleen aloitussivu auki.

Esimerkki työstä:

Helppokäyttöisyydestä huolimatta tämä menetelmä on kaukana parhaasta, koska kuvan suurentamiseksi sinun on avattava uusi sivu, mutta tällä menetelmällä voit katsella minkä tahansa kokoisia kuvia. Joten päätämme: jos haluat suurentaa kuvia hyvin iso koko, niin tämä on ainoa oikea tapa tee se.

2. Suurenna kuvaa automaattisesti, kun pidät kohdistinta

Menetelmän nimi heijastaa selvästi sen olemusta: kun siirrät hiiren osoittimen kuvan päälle, se zoomataan automaattisesti. Menetelmän toteutus on alkeellista, mutta taas en pidä tästä menetelmästä, koska on mahdotonta yksinkertaisesti siirtää kohdistinta kuvan läpi. Loppujen lopuksi se kasvaa aina - tämä voi alkaa ärsyttää käyttäjää.

Seuraava koodi toteuttaa mahdollisuuden zoomata automaattisesti päälle:

img.zoom ( kursori : osoitin ; maksimileveys : 150 pikseliä ; ) img.zoom:hover ( max - leveys : ei mitään ; )

Selitykset esimerkiksi:

• img.zoom (max-width: 150px) - määrittää kuvan leveyden ennen zoomausta;
• img.zoom:hover (max-width: none ) - asettaa kuvan leveyden zoomauksen jälkeen (none-parametri tarkoittaa, että raja on päällä enimmäiskoko poissa);

3. Napsauta suurentaaksesi kuvaa

Tämä on yleisin ja kätevin tapa suurentaa kuvia. Lisäksi menetelmiä ja toteutusvaihtoehtoja on monia. Katsotaanpa muutamia suosituimpia vaihtoehtoja:

3.1. Zoomaa tarkennuksen ollessa aktiivinen

Klikkaamalla kuvaa se suurentuu, mutta tämän vuoksi teksti liikkuu alaspäin, joten tämä menetelmä on kaukana parhaasta. Tässä esimerkki koodista:

.foc ( leveys : 150px ; kohdistin : osoitin ; näyttö : inline ; ) .foc:focus ( leveys : automaattinen ; z-indeksi : 100 ; )

Miltä se näyttää sivulla:

3.2. Kuvan suurennus sivun yläreunassa

Alla on koodi tämän menetelmän toteuttamiseksi

.blokimg ( sijainti : suhteellinen ; ) .overlay ( näyttö : ei mitään ; korkeus : automaattinen ; vasen : -15 % ; sijainti : absoluuttinen ; yläosa : -50 % ; leveys : auto ; z - indeksi : 999 ; ) .overlay .overlay_container ( näyttö : taulukkosolu ; pystytasaus : keskellä ; ) .overlay_container img ( taustaväri : #AB5 ; täyte : 10px ; -webkit-border-radius : 5px ; -moz-border-radius : 5px ; ) .overlay :target ( näyttö : taulukko ; ) big_image "> small_image " id ="imagenM1 " />

Miltä se näyttää sivulla:

Vaihtoehdot 3.1 ja 3.2 perustuvat kokonaan CSS-ominaisuudet, mikä tarkoittaa, että ne ovat "kevyitä" menetelmiä, koska älä lataa sivua tarpeettomilla skripteillä. On myös muita vaihtoehtoja, jotka perustuvat myös CSS:ään, mutta ne ovat eksoottisempia. En käsittele niitä tässä artikkelissa, koska jotkin selaimet eivät tue tällaisia ​​asioita.

3.3. Kaunis suurennus

Tämä menetelmä on mielestäni kaunein ja kätevin. Yhdistääksesi sen joudut hieman viimeistelemään lisäämistä erilaisia ​​skriptejä, joten käyttöönottoa varten harkitaan vaiheittaista asennusta:

Arkisto sisältää yhden kuvan sisältävän kansion, kaksi .js- ja yhden .css-tiedoston.

2) Lisää nämä tiedostot sivustoosi sellaisina kuin ne ovat arkistossa (eli imgs-kansion tulee olla hakemistossa, jossa .js- ja .css-tiedostot sijaitsevat).

3) Jokaisella sivuston sivulla, jolla kuvan suurennusta käytetään, sinun on yhdistettävä simplebox-menetelmä ja -tyyli:

(function())( var boxes=,els,i,l; if(document.querySelectorAll)( els=document.querySelectorAll("a"); Box.getStyles("simplebox_css","simplebox.css"); Box getScripts("simplebox_js","simplebox.js",function())( simplebox.init(); for(i=0,l=els.length;i osoite_pienen_kuvan_kopio ">

Huomautus
Kuvan pienemmän kopion osoitteen sijasta voit syöttää pääkuvan osoitteen, mutta samalla käyttää leveysmääritettä, jossa määrität pienen leveyden (lue lisää).

Tässä artikkelissa tarkastelemme kanssa työskentelyn perusteita Wordpress-pikkukuvat. Opitaan aktivoimaan pikkukuvien tuki Wordpress-teemalla, lisäämään mukautettuja kuvakokoja ja käyttämään pikkukuvia Wordpress malli. Kaikki tämä tekee grafiikan kanssa työskentelystä paljon helpompaa automatisoimalla kuvien luonti- ja näyttämisprosessit sivustolla.

tulostettu versio

Pikkukuvatuen lisääminen WordPressiin

Jotta voidaan asettaa kuvia pikkukuvina kohteelle WordPress sivut, sinun on otettava käyttöön pikkukuvien tuki mallissa. Voit tehdä tämän lisäämällä seuraavan koodin teemasi functions.php-tiedostoon.

Jos (funktio_exists("add_theme_support")) (
add_theme_support("post-thumbnails");
}

Tämän jälkeen luotaessa sivua sisään oikea sarake ilmestyy uusi lohko"Tallenna pikkukuva"

Jos haluat asettaa pikkukuvan viestille, napsauta linkkiä ja valitse haluttu kuva ja napsauta sitten "Aseta pikkukuva". Tässä tapauksessa voit valita kuvan joko yleisestä tiedostokirjastosta tai ladata sen erikseen tavallisella latausohjelmalla.

Kun olet lisännyt pikkukuvan, valitsemasi kuva näytetään vastaavassa lohkossa.

Jos pikkukuvien lisäyslohko ei näy merkinnän lisäys-/muokkaussivulla, siirry oikealla olevaan "Näyttöasetukset" -kohtaan yläkulma"Ohje"-painikkeen vieressä ja valitse "Lähetä pikkukuva" -valintaruutu.

Jos tämä ei auta, tarkista, että pikkukuvien aktivointitoiminto on lisätty oikein.

Pikkukuvaominaisuus WordPressissä

Pikkukuvien näyttäminen teemassa WordPress-suunnittelu käytetty erikoistoiminto the_post_thumbnail(). Sitä käytetään WordPress-silmukan sisällä, ja se voi ottaa kaksi parametria - pikkukuvan koon ja joukon attribuutteja.

The_post_thumbnail($koko, $attr);

• $size – pikkukuvan nimi (vakiopikkukuva, keskikokoinen, suuri, täysi) tai kuvan leveyden ja korkeuden sisältävän taulukon nimi, esimerkiksi array(64, 64). Voit myös välittää arvona pikkukuvien nimet mielivaltaisilla kooilla, jotka on luotu add_image_size()-funktiolla.
• $attr – attribuuttien joukko. Jos esimerkiksi haluat määrittää kuvalle luokan, kirjoita array('class' => 'thumb-class'). Koska muita parametreja käytetään hyvin harvoin, emme ota niitä huomioon. Voit lukea lisää kaikista merkityksistä WordPress-koodista.

Koodi erikokoisten pikkukuvien näyttämiseen

The_post_thumbnail(); // Parametri on hyväksytty -> "post-thumbnail"
the_post_thumbnail("pikkukuva"); // Oletuskoko: 150 x 150 pikseliä enintään
the_post_thumbnail("medium"); // Oletuskoko: 300 x 300 pikseliä enintään
the_post_thumbnail("suuri"); // Oletuskoko: 640 x 640 pikseliä enintään
the_post_thumbnail("täysi"); // ladatun tiedoston alkuperäinen koko
the_post_thumbnail(array(100,100)); // Muokattu koko (100 x 100 pikseliä)

Esimerkki valmis koodi näyttääksesi pikkukuvat WordPress-mallissa

Katsotaanpa esimerkkinä koodia, joka näyttää pikkukuvalinkin iso kuva. Tämä on erityisen hyödyllistä, jos sivustosi käyttää ponnahdusikkunoita. Koska koodin kirjoittaminen erikseen on melko hankalaa, jokaisen rivin vieressä on kommentti selityksillä.