Kuvien parantaminen WordPressissä

Kuvien parantaminen WordPressissä


On kulunut kauan sitten, kun kuvat olivat jotain liian suuria ladattavaksi Internetissä. Nykyään verkkosivustot eivät voi olla olemassa ilman niitä. Vaikka Internet-nopeus on lisääntynyt dramaattisesti vuosien varrella, on elintärkeää, että pidät huolta kuvista blogissasi.

Vain koska kuvien lataaminen sivustoosi on helppoa, se ei tarkoita, että sinun pitäisi tehdä se ilman mitään valmistelua. Optimoimattomat kuvat voivat itse asiassa vahingoittaa sivustoasi monella tavalla; vaikuttamatta siihen, miten kävijät ajattelevat sinua verkkosivustosi nopeuteen ja SEO-sijoituksiin. Jos et vieläkään ole ajatellut sitä, olemme täällä osoittamassa sinulle useita tapoja parantaa kuvia WordPressissä.

Tässä oppaassa aiomme näyttää sinulle:

  • Kuvien optimointi WordPressille nopeuttaa sivustoasi ja parantaa SEO: ta
  • Muuta tapaa, jolla WordPress pakkaa JPEG-kuvia
  • Suosituimmat kuvan optimoinnin laajennukset WordPressille
  • Lisää laiskoja videoitasi ja kuviasi
  • Näytä ennen ja jälkeen kuvia houkuttelevalla tavalla
  • Kuinka luoda interaktiivisia kuvia – piirtää, lisätä kuvauksia ja linkkejä
  • Kuvien uusiminen
  • Poista leveys- ja korkeuskuvaominaisuudet jQuerylla
  • Kuinka luoda mukautettuja kuvakokoja Media Uploader -sovelluksessa
  • Luo mistä tahansa verkkosivustosta automaattinen kuvakaappaus ja julkaise se kuvana viestissäsi

Contents

Kuvien optimointi WordPressille niin, että nopeutat sivustoasi ja parannat SEO-tasoa

Miksi sinun pitäisi optimoida kuvia WordPressille? Jos yrität, voit odottaa seuraavaa:

  • Nopeampi sivusto
  • Parempi SEO
  • Pienemmät varmuuskopiot
  • Vähemmän kaistanleveyden käyttöä
  • Onnellisempia käyttäjiä

Sinun pitäisi myös tietää, että on olemassa erilaisia ​​vaiheita, joissa voit optimoida kuvia. Voit huolehtia kuvista jo ennen kuin lataat ne blogiin tai voit tehdä sen lataamisen jälkeen.

Testaa nopeasti sivustosi kuvia

Ennen kuin aloitat optimoinnin, voit nopeasti tarkistaa sivustosi nopeuden ja suorituskyvyn. Käyttämällä mitä tahansa luettelon työkaluista saat nopeasti tietää, missä muodossa sivustosi kuvat ovat.

Haluamme käyttää GTmetrix joka näyttää jopa tarkat kuvat, joiden vuoksi sivustosi latautuu hitaammin.

Optimoi kuvat WordPressille ennen lähettämistä

Bloggelmissaan suurin osa ihmisistä ei tee kaikkia tarvittavia toimenpiteitä kuviensa optimoimiseksi. Yleensä ihmiset ottavat vain valokuvan kamerasta tai älypuhelimesta, lataavat ne Internetistä tai luovat kuvan tietokoneohjelmistojen avulla.

He eivät ajattele muotoja, kuvan ulottuvuuksia eikä tiedostonimiä. Jos kuva näyttää hyvältä, he vain olettavat, että se on valmis Internetiin. Jos et tarkista kuviasi, rakennat kohti katastrofia.

Kuvien koon muuttaminen

Kuvien koon muuttaminen

Älä lähetä kuvia WordPress-verkkosivustoosi ennen kuin tarkistat kunkin kuvan leveyden ja korkeuden. Jos näytät esimerkiksi korkeintaan 700 kuvapistettä kuvia, laajempaa kuvaa ei todellakaan tarvitse ladata. Jos teet niin, sinulla on suurempi tiedosto, joka tekee sivustostasi hitaamman, kun taas tulosteet ovat samat. WordPress luo lisäkokoa, mutta se ei ole tekosyy valmistelematta kuvia ennen lähettämistä.

Kuvien koon muuttaminen on nopeaa ja helppoa. On monia ilmaisia ​​työkaluja, kuten Microsoft Paint, jotka auttavat sinua tässä. Voit jopa löytää ilmaisia ​​online-työkaluja esimerkiksi kuvan koon muuttamiseen Helppo koonmuutos.

Kuvan mitat vaihtelevat teemakohtaisesti. Jos et ole varma, kumpaa sinun tulisi käyttää, tutustu tarkemmin WordPress-teemaan ja tarkista kuvia, etsi dokumentaatiota tai kysy tukia.

Muuta laatua

Kun olet muuttanut mittoja, sinun tulisi harkita kuvanlaadun muuttamista. Ohjelmistosta riippuen on erilaisia ​​tapoja muuttaa kuvan laatua. Esimerkiksi aina suositun Photoshopin avulla voit tallentaa kuvia verkkoon. Tämän vaihtoehdon avulla voit tallentaa kuvia heikommalla laadulla, mutta ne optimoidaan sivustosi mukaan.

Lisäksi, jos päätät tallentaa kuvan JPEG-muodossa, Photoshop pyytää sinua valitsemaan laatutaso. Tällöin laadun alentaminen 12: sta 8: een pienentää dramaattisesti kuvan kokoa, kun taas laatuero ei ole niin suuri.

Jos et edelleenkään käytä mitään ohjelmistoa kuvien laadun muuttamiseen, voit kokeilla ilmaista verkkoa Pieni PNG työkalu. Lataa vain kuva ja katso mitä eroa sillä voi olla.

Valitse oikea muoto

Jopa koon ja laadun muutosten jälkeen, sinun tulisi harkita muodon muuttamista. Ensinnäkin, kun valitset oikean muodon, voit ottaa kuvan muutama kilotavu, jos ei enemmän.

Kuvamuodot

Yleissääntö on hyvin yksinkertainen. Jos sinulla on valokuva, tee siitä JPEG. Jos sinulla on logo, vektorikuva tai hyvin yksinkertainen tietokoneella tuotettu grafiikka, siirry PNG: n avulla. Jos sinulla on todella pieni kuva ilman kaltevuuksia tai haluat näyttää yksinkertaisen animaation, kuten yllä on esitetty, voit käyttää GIF-tiedostoa. Yleensä PNG-kuvat ovat melko suuria kuin JPEG-kuvat, ja muodon muuttamisesta voi olla hyötyä.

Monissa tapauksissa kuvien uudelleenformaatio ei tee merkittäviä laatueroja, kun taas voit odottaa eroa kooltaan. Seuraavan kerran ennen kuin lähetät PNG-valokuvan, kuvaa se ja yritä tallentaa se JPEG-muodossa nähdäksesi eron. Tarkempia tietoja on ero PNG: n, JPEG: n, GIF: n ja SVG: n välillä.

Pidä huolta tiedostonimistä

Vaikka tiedostonimi saattaa kuulostaa tärkeältä, se on tosiasia, josta sinun pitäisi olla tietoinen. Kuvatiedostosi nimi sisältää arvokasta tietoa SEO: lle. Jos haluat muiden löytävän kuvan Googlessa ja muissa hakukoneissa, sinun on annettava sille oikea nimi.

Suosittelemme, että nimeät kuvia käyttämättä välilyöntejä. Älä unohda sisällyttää avainsanoja, jos haluat sivun ja kuvan sijoittuvan. Jos esimerkiksi lataat kuvan Ferrari Kaliforniasta, tiedostonimen tulisi olla ”ferrari-california.jpg”. Jos käytät SEO-laajennusta WordPressiin, tiedät jo, että se tarkistaa alt-avainsanat avainsanojen varalta. Kyllä, oikea kuvan nimi on todella tärkeää.

Optimoi kuvat WordPressille lähettämisen jälkeen

Kun olet valmistellut kuvia tietokoneellasi, voit jatkaa lähettämistä. Toivottavasti kuvasi ovat oikean koon ja laadun. Varmistit, että muoto ja tiedostonimi ovat oikein. Lähetyksen jälkeen WordPress kysyy sinulta lisätietoja. Älä ohita metatietoja; täytä kuvasi tiedot, jotta voit helposti järjestää ne ja valmistautua hakukoneoptimointiin.

Otsikko, kuvaus, alteksti ja kuvateksti

Huolimatta teknisistä asioista, sinun ei pitäisi unohtaa SEO: ta. Lisää otsikko ja kuvaus aina mediaasi. Tämä auttaa sinua WordPress-mediahallinnassa ja pyrkii myös parantamaan hakukoneoptimointia. Älä myöskään unohda alt-tunnistetta, joka näytetään kävijöille, jotka eivät näe kuvaasi kunnolla. Paitsi, että siitä on hyötyä käyttäjillesi, mutta se auttaa myös hakukoneoptimoinnissa. Sivusi sijoittuu paremmin, ja käyttäjät löytävät uudet kuvat helpommin.

Vaikka et tarvitse tekstityksiä koko ajan, varmista, että lisäät sellaisia ​​kuvia varten, jotka tarvitsevat lisäselvityksiä (esimerkiksi kuvakaappauksia).

Muokkaa kuvia WordPressillä

Jos huomaat, että kuvaa tarvitaan edelleen edelleen muokkaamista, sinun pitäisi tietää, että WordPress antaa sinun tehdä niin myös tiedoston lataamisen jälkeen. Muuta kuvien kiertoa, rajausta ja skaalaa olet jo lähettänyt. Voit jopa muokata vain pikkukuvaa tai kaikkia muita kokoja. WordPressin alkuperäinen toimittaja on hyvin yksinkertainen, mutta voit säästää ajoittain.

Regeneroi kaikki pikkukuvat uudelleen

Suurin osa aiemmista tekniikoista auttaa sinua uusilla kuvatiedostoilla, joita olet edelleen lähettämässä. Entä jos WordPress-sivustoosi on jo ladattu satoja, ellei tuhansia tiedostoja? Älä huoli; voit silti optimoida kuvat ja muuttaa niiden kokoa.

Pikakorjausta varten saatat olla kiinnostunut ilmaisesta Regenerate Thumbnails -laajennuksesta, jota ovat käyttäneet yli miljoona käyttäjää. Jos haluat hallita enemmän kuvia, sinun kannattaa tutustua parhaimpiin WordPress-laajennuksiin kuvan optimoimiseksi, jotka näytämme sinulle tämän artikkelin seuraavilla riveillä.

Kuvien uusiminen

Käytä WordPress-laajennuksia

Tietysti on olemassa kymmeniä WordPress-laajennuksia, joiden avulla voit optimoida sivustosi kuvia. Vieritä alas nähdäksesi parhaat WordPress-laajennukset kuvien optimoimiseksi.

Laiska Lataa kuvia tarvittaessa

Joskus kuvien laatu on paljon tärkeämpi kuin niiden koko. Tämä pätee lähinnä valokuvaajille, jotka haluavat valokuviensa olevan huippuluokkaa. He eivät voi riskiä tiedostojen koon tai laadun vähentämisestä. Se ei silti tarkoita, että sinun pitäisi unohtaa optimointi. Kuvien optimoimiseksi WordPressiin tässä tapauksessa kannattaa harkita laiskaa lataamista.

Laiska lataus on tekniikka, joka lataa kuvia vain, kun käyttäjät tarvitsevat niitä (vieritä niiden kohdalle). Jos esimerkiksi latasit kahteenkymmenen korkealaatuisen valokuvan yhteen artikkeliin, ne hidastaisivat sivustosi valtavasti. Mutta jos laiskaat kuvia lataamaan, artikkeli salamannopeasti ja valokuvat latautuisi vain tarvittaessa – sillä hetkellä, kun käyttäjä saa ne.

Ota reagoivia kuvia

Vaikka suurin osa WordPress-teemoista on reagoivia, se ei välttämättä tarkoita, että myös kuvasi reagoivat. Koska et halua suuren kuvan latautuvan pienelle näytölle, sinun on rekisteröitävä lisää kuvakokoja sivustollesi. Jos teemasi ei käytä reagoivia kuvia, harkitse ammattilaisen palkkaamista työhön – se ei ole niin helppoa kuin miltä se saattaa kuulostaa.

Optimoi kuvat sosiaaliseen mediaan

Jos haluat varmistaa, että kuvasi näyttävät hyvältä sosiaalisessa mediassa, joudut lisäämään askeleen ja optimoimaan metakoodit ja skeeman merkinnät.

Jos käytät SEO-laajennusta kuten Yoast, älä unohda tarkistaa asetukset. Esimerkiksi, Yoast antaa sinun perustaa joitain sosiaaliseen mediaan liittyviä asioita. Joten siirry kohtaan SEO -> Sosiaalinen ja kirjoita tiedot Facebookissa, Twitterissä, Google+: ssa ja Pinterestissä.

Jos haluat lisää ja haluat optimoida kuvia muihin sosiaalisen median verkkosivustoihin, katso WPSSO – tarkat sisällönkuvauskentät + skeeman merkinnät sosiaalisen jakamisen optimointiin ja SEO-laajennukseen.

Muuta tapaa, jolla WordPress pakkaa JPEG-kuvia

Jos lähetät joukon JPEG-kuvia WordPress-verkkosivustollesi, olet ehkä huomannut niiden menettävän alkuperäistä laatuaan. Jos olet miettinyt, onko WordPress syyllinen, nyt sinulla on vastauksesi – kyllä, se on!

Kun olet lähettänyt kuvan JPEG-muodossa, WordPress muuttaa automaattisesti pakkausta ja päättää, että haluat kuvan heikentyvän laadun suhteen. Tarkemmin sanottuna WP käyttää 90% pakkausta JPGE-tiedostoihisi. On hienoa, jos kuviasi on vain siellä käytettäväksi pikkukuvina tai näkyviksi viestissä, mutta jos lataat valokuvia, haluat niiden olevan mahdollisimman hyviä, oikein?

Onneksi tarvitset vain yhden koodirivin muuttaaksesi tämän.

Lopeta JPEG-kuvien pakkaus

Jos et halua pakata JPEG-kuviasi, kopioi ja liitä seuraava koodi function.php-tiedostoon:

add_filter ('jpeg_quality', toiminto ($ arg) {return 100;});

Muista tallentaa muutokset ja olet valmis lähettämään uusia kuvia.

Toisaalta, kuvat eivät ehkä ole niin iso juttu sinulle. Joten saatat haluta, että ne pakataan vieläkin enemmän ja säästät aikaa sivustosi lataamisessa. Jos muutat koodirivin viimeistä numeroa, muutat juuri ladattujen kuvien laatua.

Pakkaa JPEG-kuvia vielä enemmän:

Mitä pienempi numero, sitä enemmän kuvia pakkataan. Esimerkiksi, jotta pakkaat näitä JPEG-tiedostoja vielä enemmän, tarvitset tämän koodin:

add_filter ('jpeg_quality', toiminto ($ arg) {return 80;});

Älä unohda; oletuksena pakkaustaso on 90.

Tärkeä: Tämä koskee vain kuvia, jotka lataat, kun olet liittänyt koodin function.php-tiedostoon. Kirjastossa jo olevien kuvien koon ja laadun muuttaminen edellyttää laajennusta. Katso, kuinka uusien kuvakoot voidaan luoda uudelleen.

Suosituimmat kuvan optimoinnin laajennukset WordPressille

Tämän artikkelin alussa puhuimme kuinka optimoida kuvia WordPressille niin, että nopeutat sivustosi ja parannat SEO: ta. Kuten olisit voinut nähdä, on olemassa muutamia erilaisia ​​menetelmiä, joita voit käyttää. On tärkeää huolehtia kuvista jo ennen kuin lataat ne blogiisi. Mutta kun kuvia on jo sivustolla, voi olla mahdotonta optimoida jokaista kuvaa erikseen ja ladata ne sitten uudelleen.

Älä huoli; kukaan ei odota sinun tekevän niin. Pysy kanssamme seuraavissa minuuteissa, kun aiomme näyttää sinulle WordPressin suosituimpia kuvan optimointilaajennuksia.

Kuvien optimoimiseksi sinun on vain valittava laajennus luettelosta. Sinun on määritettävä se ja valittava asiat, jotka laajennus tekee sinulle. Sen jälkeen voit rentoutua ja siirtää työn valitsemasi laajennukselle, samalla kun voit aloittaa mediatiedostojen järjestämisen.

Seuraavat laajennukset auttavat sinua pakkaamaan kuvia missä tahansa WordPress-sivustossa. Ne nopeuttavat sivuston lataamista ja auttavat viime kädessä parantamaan hakukoneoptimointia.

WP Smush

HINTA: Ilmainen

Yli 700 000 aktiivista asennusta WP Smush -sovelluksen on oltava yksi parhaimmista WordPress-kuvan optimoinnin laajennuksista. Se voi optimoida kuvat nopeasti käyttämällä erilaisia ​​pakkaustekniikoita. Kuvien pakkaamisessa WP Smush -sovelluksella on hienoa, että kuvat eivät menetä laatuaan. Etkö usko meitä? Testaa laajennus.

Kun puhuimme kuvien valmistelusta WordPressille, mainitsimme, että koon muuttaminen on kriittinen osa optimointiprosessia. Tämän liitännäisen avulla sinun ei tarvitse huolehtia siitä, koska WP Smush antaa sinun asettaa maksimimitat. Tämän jälkeen kaikki suuret kuvat pienennetään automaattisesti ennen kuin lisäät ne kirjastoon.

Tämä fantastinen laajennus voi toimia JPEG-, GIF- ja PNG-tiedostojen kanssa. Se toimii kaikkien hakemistojen kanssa, huolehtii automaattisesti liitteistä ja toimii jopa monisivustolla. Voit käyttää kutakin kuvaa manuaalisesti tai muokata viisikymmentä niistä irtotavarana. Jos haluat vielä parempia tuloksia ja enemmän vaihtoehtoja, katso WP Smush PRO.

EWWW Image Optimizer

HINTA: Ilmainen

Hauskan nimen takana on yksi WordPressin suosituimmista kuvan optimoinnin laajennuksista. EWWW Image Optimizer pystyy pakkaamaan kuvasi vaikuttamatta niiden laatuun, kuten aiemmin mainittiin. Kun ajattelet, että laajennus voi nopeuttaa sivustosi sekunneissa, olet jo matkalla ladataksesi sen. Kun olet tehnyt sen, sinun on optimoitava kuvia irtotavarana, ja galleriat, kuten GRAND FlaGallery, NextCellent ja NextGEN, saavat jopa omat Bulk Optimize -sivunsa.

Kaikki kuvat, jotka käyttävät WP_Image_Editor-luokkaa WordPressissä, ovat automaattisesti optimoitu, samalla kun voit työskennellä taikuuden manuaalisesti kaikkien muiden kanssa. Pidämme siitä, että valitset kansiot, jotka haluat optimoida. Lisätietoja tästä ja siitä, mitkä pluginit käyttävät luokkaa, avaa virallinen EWWW Image Optimizer -sivu WordPress-arkistossa.

Pakkaa JPEG- ja PNG-kuvia

HINTA: Ilmainen

Pieniä pakkauskuvia

Jos söpö pieni WordPress-logolla varustettu panda ei tee sinua haluamaan lisätietoja tästä laajennuksesta, emme tiedä mitä tulee. Ja jos panda näyttää tutulta, se johtuu siitä, että se on sama, joka auttaa pakkaamaan kuvia TinyPNG-verkkosivustolla. Joo, näyttää siltä, ​​että eläin on monipuolisempi kuin alun perin ajattelimme. Keskitytään kuitenkin laajennukseen.

Jos käytät tätä laajennusta, Panda optimoi kuvat automaattisesti. Joka kerta kun lataat uuden, plugin ottaa haltuunsa ja tekee tehtävänsä. Voit silti optimoida yksittäisiä kuvia tai tehdä sen irtotavarana vain siirtymällä mediakirjastoon.

Pakkaa JPEG- ja PNG-kuvia jopa animoituja PNG-tiedostoja, toimii täydellisesti monisivustolla, se on WooComerce-yhteensopiva eikä siinä ole ongelmia WP Offload S3: n kanssa.

Upea laajennuksen kannalta on, että sen avulla voit asettaa kaikkien kuvien enimmäisleveys- ja korkeusmääritteet. Jos olet huolestunut siitä, mitä se tekee metatiedoista, älä murehdi; panda pitää kaikki tiedot ehjinä.

Tiedoston kokorajoituksia ei ole, voit asettaa kojetaulun widgetin, ja se toimii jopa WordPress-mobiilisovelluksen kanssa. Koska kaikki tämä, Compress JPEG & PNG -kuvissa on yli 100 000 aktiivista asennusta, ja se ansaitsee paikan WordPressin parhaiden kuvanoptimointilaajennusten luettelossa.

Imsanity

HINTA: Ilmainen

Imsanity

Vaikka tämän laajennuksen kansikuva saattaa pelottaa sinua, ota hetki ja katso kaikkia Imsanityn ominaisuuksia. Voi, jopa laajennuksen nimi kuulostaa hullualta, eikö niin? Kun olet selvittänyt laajennuksen nimen, huomaat, että sillä on paljon tarjottavaa.

Imsanity voi skaalata kuvia automaattisesti, antaa sinun asettaa maksimimitat ja siinä on jopa joukkojen koon muuttamisvaihtoehto. Tämä on tärkeää, jos blogissasi on jo satoja kuvia, jotka tarvitsevat optimointia.

Tämä ilmainen laajennus on loistava vaihtoehto, jos et halua taistella paljon laajennuksen asetusten kanssa. Ainoa mitä tarvitset, asentaa ja aktivoida Imsanity, asettaa muutama vaihtoehto ja voit unohtaa sen. se hallitsee omat tapansa kuvan optimointiin.

Rakastimme vaihtoehtoa, jonka avulla voit muuntaa BMP-kuvat JPG-muotoon. Vain jos sinulla on paljon BMP-tiedostoja, jotka olet vahingossa ladannut jonkin aikaa sitten, tämä on pelastusohjelma.

ShortPixel Image Optimizer

HINTA: Ilmainen

ShortPixel Image Optimizer

ShortPixel Image on yli 30 000 aktiivista asennusta, ja se on edelleen yksi WordPressin suosituimmista kuvan optimoinnin laajennuksista. Plugin on täynnä ominaisuuksia, ja se on pakollinen sivustoille, joissa on paljon kuvia optimoida.

ShortPixel Image Optimizer ei vain optimoi JPG-, PNG-, GIF- ja PDF-dokumentteja sinulle, vaan antaa sinulle myös muuntaa JPEG-, PNG- tai GIF-kuvan WebP: ksi. Laajennus toimii hyvin muiden gallerialaajennusten kanssa, ja ei ole väliä, jos sivustosi käyttää HTTP- tai HTTPS-protokollaa. Sen avulla voit poistaa EXIF-tietoja kuvista (jota valokuvaajat rakastavat saavansa).

Plugin tunnistaa jo optimoidut kuvat, joten se ohittaa ne tarvittaessa. Saatat sallia tai estää automaattisen optimoinnin ja tehdä paljon, paljon enemmän tämän fantastisen laajennuksen avulla. Tutustu arkiston viralliselle sivulle nähdäksesi kaikki ominaisuudet.

Optimus – WordPress Image Optimizer

HINTA: Ilmainen

optimus

Aivan kuten aiemmin mainittu laajennus, Optimus optimoi kuvat WordPressille, ja se tekee sen vaikuttamatta kuvien laatuun. Voit antaa liitännäisen suorittaa asiat automaattisesti, tai voit sammuttaa vaihtoehdon ja optimoida kuvia vain tarvittaessa.

Optimus toimii monisivustolla, se ei ole vieras WordPress-verkkokauppasivustoille, ja se on optimoitu täysin WordPress Mobile -sovelluksille ja Windows Live Writerille. Se nopeuttaa sivustoasi joutumatta koskettamaan koodiriviä. Laajennus tarjoaa paljon enemmän, mutta joudut valitsemaan premium-version. Lisätietoja saat siirtymällä WordPress-laajennusten arkiston viralliselle sivulle.

Lisää videoiden ja kuvien laiska lataaminen WordPressiin

Kun alat lisätä paljon video- ja kuvamateriaalia verkkosivustollesi, on selvää, että se alkaa latautua hitaammin. Riippumatta siitä, mistä ne ovat lähtöisin, videot ja suuret kuvat toimivat raskas paino sivustossasi ja saavat kävijät odottamaan paljon kauemmin kuin tarvitaan kaiken sisällön lataamiseen. WordPressin avulla sen ei pitäisi olla iso juttu, ja tässä voit helposti korjata tilanteen.

Jos tiedät tietäsi PHP: n ympärillä, on hieno artikkeli laiskojen latauksien lisäämisestä kuviin ja ääretön rulla, jonka kollegamme ovat kirjoittaneet Tyylikkäät teemat.

Jos ei, mainitsemme muutaman seuraavan rivin suosituimpia laiskoja latauslisäosia tee sivustosi lataaminen nopeammaksi. Ja sinun ei tarvitse edes tehdä paljon, vaan asentaa laajennus ja asentaa se muutamalla pikavaiheella.

Laiska videoiden lataus

HINTA: ilmainen

Laiska videoiden lataus

Jos sinulla on paljon Youtube- ja Vimeo-videoita, sinun kannattaa harkita tämän laajennuksen asentamista. Kun olet asentanut sen, plugin sijoittaa kuvan videoosi ja sen vuoksi verkkosivustosi latautuu paljon nopeammin. Kun vierailija vierittää videota, tämä kuva näytetään ”toista” -painikkeella sen päällä. Napsautuksen jälkeen video alkaa ladata ja toistaa. Yksinkertainen demo voidaan katsella kehittäjän sivustolla.

WP YouTube Lyte

HINTA: Ilmainen

WP YouTube Lyte

Tämä laajennus tekee työnsä nopeasti ja helposti. Asentamisen jälkeen lisää vain linkki Youtube-videoosi tai lisää se lyhytkoodilla. Voit valita normaalin videon, soittolistan tai vain äänen lisäämisen valitusta videosta. Sen jälkeen Youtube-videosi saavat siitä kuvan, joka mahdollistaa laiskojen lataamisen. Napsauta kuvaa vain käynnistääksesi videosi tai äänen.
Katso esittely kehittäjän sivustolla.

a3 Laiskakuormitus

HINTA: Ilmainen
DEMO 1
DEMO 2

a3 Laiskakuormitus

Tämä on omistettu mobiilisivustollesi. Jos sinulla on paljon kuvia ja / tai videoita, jotka haluat näyttää kävijöillesi mobiililaitteilla, sinun kannattaa katsoa a3 Lazy Load -sovellusta. Sen avulla voit lisätä laiskoja kuvia kuviin ja videoihin, ja laajennus antaa sinun valita jopa siirtymätehosteet, jotka näkyvät käyttäjille, kun he selaavat ladattavaa sisältöä.

Järjestelmänvalvojan alueella voit helposti ottaa käyttöön ja poistaa käytöstä sisällön, jonka haluat laiskata lataamaan. Päällä olleille sisältö ladataan vain silloin, kun kävijä vierittää sisältöosaa.
Siellä on hienosti esitelty demo, joka sisältää 1000 kuvaa – kukin ladataan vasta kun selaat siihen. Koska tämä laajennus laiskaa myös videoita, siellä on videodemo, jonka voit nähdä napsauttamalla yllä olevaa linkkiä.

BJ Lazy Load

HINTA: Ilmainen

BJ Lazy Load

Jos et tarvitse videoiden tukea ja haluat vain kuvien laiskaavan, tarkista tämä WP-laajennus. Kun se on asennettu ja asennettu, se korvaa kuvat, pikkukuvat, Gravatar-kuvat ja jopa iframe-kehykset paikkamerkillä. Samoin kuin aiemmin mainittu laajennus, se lataa sisältöä vain käyttäjän saapuessa siihen.

Olipa kyse kuvista tai videoista, jotka haluat laiskata lataamaan, yksi yllä mainituista laajennuksista auttaa sinua hetkessä. Kaikki ne ovat ilmaisia, joten ei ole tekosyytä, että et yritä ainakin yhtä plugineista ja katso kuinka suuri hartiesi paino vie. Tietysti on monia muita laajennuksia, joissa on sama toiminto, ja voit selata ja kokeilla kaikkia niitä.

Näytä ennen ja jälkeen kuvia houkuttelevalla tavalla

Olemme varmoja, että olet jo nähnyt monia esimerkkejä ennen / jälkeen kuvista. En tiedä sinusta, mutta ensimmäinen asia, joka mielessämme on, kun näemme lauseen “ennen ja jälkeen”, on kuntoharjoitteluohjelma, jossa ihmiset osoittavat kehonsa ennen ja jälkeen harjoitteluohjelman.

Jos mietit sitä, useimmat verkkosivustot käyttävät yksinkertaista lähestymistapaa erojen esittämiseen – ne ottavat molemmat kuvat ja sijoittavat ne vierekkäin tai jopa toistensa yläpuolelle. Jos haluat saman tuloksen, et lukenut tätä artikkelia, koska osaat jo tehdä sen.

Entä jos kerroisimme, että on visuaalisesti upea tapa ratkaista tämä ongelma ennen / jälkeen ongelman ja vain käden ulottuvilla? No, on ja asennuksen jälkeen kiität kehittäjiä, koska lopputulos on todella, todella siisti.

Kaksikymmentäkaksi

HINTA: ilmainen

Kaksikymmentäkaksi

Kaksikymmentä kaksikymmentä on nimi tästä mahtavasta laajennuksesta, jonka voit ladata ilmaiseksi WordPress-lisäosien arkistosta.

Plugin antaa sinun asettaa yhden kuvan toisen päälle ja antaa sinun pelata liukusäätimellä, jotta voit piilottaa / paljastaa kuvan. Ole hyvä, katso demo ja näet, mistä puhumme.

Ok, nyt kun olet kiinnitetty tähän pieneen laajennukseen, katsotaan kuinka luoda tämä upea vaikutus. Vaikka demoefektin luominen on suhteellisen helppoa, sinun on silti tiedettävä HTML-koodin kiertämistä. Mennään:

  1. Luo uusi viesti tai avaa olemassa oleva
  2. Lisää kaksi kuvaa viestiin. Jos työskentelet Visual Editor -sovelluksessa, kuvan pitäisi näkyä toisen yläpuolella. Jos työskentelet tekstieditorissa, sinun pitäisi nähdä seuraava koodi:
  3. 
    
    
    
  4. Kirjoita [kaksikymmentäkymmentä] tunnistetta ennen ensimmäistä kuvaa
  5. Toisen jälkeen kirjoita [/ kaksikymmentäkymmentä] tagia
  6. Sinun pitäisi päätyä jotain tällaista tekstieditoriin:

    [Twentytwenty]
    
    
    
    [/ Twentytwenty]
    
  7. Varmista, että kuvat ovat samankokoisia parhaan tuloksen saavuttamiseksi
  8. Esikatsele tai julkaise viestiä ja nauti visuaalisesta upeasta ennen ja jälkeen kuvia

Kuinka luoda interaktiivisia kuvia – piirtää, lisätä kuvauksia ja linkkejä

Nykyään on vaikea ylläpitää verkkosivustoa ilman multimediaa. Kuvat, videot ja musiikki ovat osa käytännöllisesti katsoen jokaista verkkosivustoa. Tavallinen Internet-käyttäjä on suuresti riippuvainen visuaalisista ärsykkeistä, joten sinun on huolehdittava sivustosi visuaalisesta ja interaktiivisesta osasta. Artikkelit, joissa on kuvia, vastaanottavat 94% lisää näyttökertoja kuin ne, joilla ei ole yhtä. Lisäksi on jo tiedossa, että verkkosivustojen multimedia voi lisätä sisältömarkkinoinnin tuottoprosenttia.

Toivomme, että sinun ei tarvitse vakuuttaa sinua huolehtimaan kuvista sivustossasi. Vaikka et käytä kuvia artikkeleissa (minkä pitäisi olla), käytät suositeltuja kuvia, eikö niin? On melko monia gallerialaajennuksia, joiden avulla voit hallita WordPress-sivustosi kuvia, sinulla voi olla valokuvaukseen liittyviä teemoja, yhdistää Instagram WordPress-sivustoosi ja tehdä niin paljon muuta. Mutta entä jos haluat luoda interaktiivisemman sisällön?

Ensinnäkin saatat olla kiinnostunut lisäämään käyttäjien rakastamat ennen-jälkeen-kuvavaikutukset. Älä unohda WordPressin virtuaalitodellisuutta, joka on yhä suositumpi, kun Automattic esitteli VR: n WordPress.com-sivustoon. Silti jotain puuttuu. Onko mahdollista tehdä interaktiivisia kuvia napsautettavilla osilla? Kyllä, se on mahdollista, ja aiomme näyttää sinulle kuinka hauskaa ja helppoa se on.

Kiinnittää huomiota

HINTA: Ilmainen
DEMO

Ensimmäinen kiinnostuneesi tämän laajennuksen asia on, että se on täysin ilmainen! Aivan kuten minkä tahansa muun WordPress-arkiston laajennuksen kanssa, voit ladata, asentaa ja aktivoida sen muutamassa minuutissa. Ilmaisen version avulla voit työskennellä yhden interaktiivisen kuvan kanssa. Jos haluat lisää, sinun on valittava PRO-versio, mutta puhumme siitä myöhemmin.

Laajennus on reagoiva, ja sinun ei tarvitse huolehtia siitä, että interaktiiviset kuvat näytetään oikein millä tahansa laitteella. Paitsi, että kuva skaalataan näytön koon mukaan, mutta se toimii myös nykyaikaisimmissa ja vanhemmissa selaimissa (työpöytä- ja mobiililaitteissa). Piirrä huomio käyttää piirtoalustan elementtejä, kun niitä näytetään uusissa selaimissa, kun taas se palaa kuvakarttoihin, jos lataat sen vanhempana..

ominaisuudet

Ennen kuin pääsemme esimerkkiin, joka näyttää sinulle kuinka tehokas tämä yksinkertainen laajennus on, katsotaan mitä odottaa kiinnittämällä huomiota:

  • piirtää – Kun olet lähettänyt kuvan, saat mahdollisuuden piirtää siihen muotoja. Valitse kuvasi mikä tahansa osa, josta tulee valittava / napsautettava
  • värit – Mukauta värejä niin, että saat hotspotit sopimaan sivustosi suunnitteluun
  • Korosta hiirellä – Näytä toinen kuvan osa, jos käyttäjä osoittaa valitun osan päälle
  • Näytä lisätietoja – Näytä lisätietoja valitusta kuvan osasta
  • Siirry URL-osoitteeseen – Ohjaa käyttäjät mihin tahansa URL-osoitteeseen, jos he napsauttavat valintaa

Piirrä huomioasetukset

Esimerkki – interaktiivinen kartta Havaijista

Käytämme demonsivustossa olevaa esimerkkiä näyttääksesi sinulle, mitä voit tehdä kiinnittämällä huomion. Katsotaan siis, miltä interaktiivinen kartta Havaijista näyttää, kun se luodaan laajennuksella.

Ensimmäinen asia, joka sinun pitäisi tehdä, on löytää kuva Havaijin saarista. Kun olet navigoinut Kiinnitä huomio -> Muokkaa kuvaa, sinun pitäisi ladata kuva oikean sivupalkin alueelle. Kun kuva latautuu, hauska voi alkaa.

Täällä voit valita värejä kohokohtia varten (väri, reunus, opasiteetti jne.), Tyyliä “lisää infokenttä” (kuva, otsikko, tekstin väri jne.). Jos et halua valita jokaista kuvan väriä manuaalisesti, voit nopeasti valita värimallin oikeasta sivupalkista.

Kiinnitä huomio - miten luoda interaktiivisia kuvia WordPressiin

Maagisin osa tapahtuu Hotspot-alueet asetusnäyttö. Täällä saat kuvan ladattuna täysikokoisena. Ainoa mitä sinun on nyt tehtävä, on alkaa piirtää ja luoda uusi hotspot. Voit lisätä niin monta pistettä kuin haluat, mikä tarkoittaa, että voit luoda kattavia valintoja haluamallasi tavalla. Voit luoda niin monta kuormituspistettä, ja jokaisella voi olla omat asetukset.

Joten tässä esimerkissä sinun pitäisi valita yksi saarista. Valitse saaren otsikko, lisää kuvaus ja ylimääräinen kuva, joka näkyy käyttäjän siirtäessä hotspot-pistettä (yllä olevan GIF-kuvan oikea osa).

Sinun tulisi toistaa prosessi jokaiselle saarelle, jonka haluat olla vuorovaikutteinen. Kun olet saanut hotspot-paikat valmiiksi, kopioi vain lyhyen koodin oikealta puolelta. Liitä lyhytkoodi viestiin, sivulle, widgetiin tai mihin tahansa haluat näyttää uuden interaktiivisen karttasi, ja olet valmis! Jos halusit ohjata käyttäjiä muille sivuille, kun he napsauttivat valintoja, sinun on vain valittava kuvaus kuvauksen sijasta URL. Helppoa!

PRO-versio

Vaikka ilmainen versio on täydellinen, jos tarvitset vain yhden kuvan, PRO-versio antaa sivustollesi niin monta interaktiivista kuvaa kuin haluat. Vaikka tämä on tärkein huomioitava asia, PRO-versio antaa sinulle enemmän kuin useita kuvia.

Asetteluvaihtoehdot-toiminnon avulla voit näyttää lisätietoja valituista kuvan osista. Esimerkiksi, sinun tulee näyttää tietoja valopöydällä tai yksinkertaisella työkalurivillä, joka avautuu, kun käyttäjä siirtyy osoittimen kuvan valitun osan päälle..

Mukana on myös kaksikymmentä ennalta määritettyä väripaletta, joten sinun ei tarvitse mukauttaa jokaista väriä manuaalisesti. PRO-versio maksaa sinulle 74 dollaria yhden sivuston lisenssistä, mutta jos tarvitset useampaa kuin yhtä interaktiivista kuvaa, tämä on vaivaton.

Kuvien uusiminen

Uusien kuvakokojen rekisteröiminen WordPress-teemaan on suhteellisen helppoa. Kun olet kertonut järjestelmällesi, kuinka iso kuvien pitäisi olla, nimetnyt ne ja päättänyt, kuinka rajata ne, voit levittää kuvia missä tahansa haluat. Entä vanhat kuvat?

Jos olet käyttänyt yhtä näyttämistämme tekniikoista, olet valmistellut turvetta uusille kuville. Käytätkö uusia kuvakokojen rekisteröintiä pikkukuvia varten vai sallitko kirjoittajien käyttää niitä viesteissä, uusia sääntöjä sovelletaan vain niihin kuviin, jotka ladataan muutoksen tekemisen jälkeen tiedostossa function.php. Vanhojen kuvien vaihtamiseksi suosittelemme Regenerate Thumbnails -laajennusta.

Regeneroi pikkukuvat:

HINTA: Ilmainen
  1. Mene Laajennukset-> Lisää uusi
  2. Etsi hakusanalla ”Regenerate pikkukuvat”
  3. Asenna ja aktivoi laajennus
  4. Navigoida johonkin Työkalut-> Regen.Thumbnails

Jos haluat muuttaa kaikkien kuvien kokoa, napsauta vain Regenerate All Thumbnails -painiketta ja odota, että laajennus tekee kovan työn.

Kuvien uusiminen

Jos haluat nähdä kuvien, joiden kokoa muutetaan, tai jos haluat muuttaa vain joidenkin kuvien kokoa, siirry mediakirjastoon, josta löydät uuden vaihtoehdon kohdasta ”Bulk Actions” ja yksi jokaisen kuvan vierestä galleria.

Hyvä asia pluginassa on, että se ei poista alkuperäisiä kuviasi. Se luo vain uusia kuvakokoja, joita voit käyttää teemasi, kun taas alkuperäiset jätetään käyttämään niitä myöhemmin tai poistamaan manuaalisesti, jos päätät et tarvitse niitä.

Se siitä. Nauti uusista pikkukuvista tai tarkista Yksinkertaiset kuvakoot plugin, joka voi tehdä saman asian.

Poista leveys- ja korkeuskuvaominaisuudet jQuerylla

Kun lisäät kuvia WordPress-viestiin, järjestelmä lisää automaattisesti kuvan korkeus- ja leveysominaisuudet. Se on yleensä hyvä asia, mutta joskus et pidä siitä, että jokainen kuva saa nämä ominaisuudet.

Jos haluat poistaa attribuutit suoraan lähetyshetkellä, voit tehdä sen yksinkertaisella toiminnolla, jonka osoitimme sinulle viime kerralla.

Mutta jos olet lukenut artikkelin tai kokeillut toimintoa itse, olet huomannut, että se vaikuttaa vain kuviin, jotka on ladattu toiminnon asentamisen jälkeen WP-järjestelmään. Jos sinulla on jo tietokanta täynnä viestejä, joihin on lisätty kuvia, yllä mainittu toiminto ei auta sinua paljon vanhojen kuvaominaisuuksien kanssa.

Koska et todennäköisesti voi käydä jokaista kuvaa käsin ja poistaa leveyttä ja korkeutta yksi kerrallaan, tarvitset todennäköisesti toisen toiminnon, joka poistaa nämä määritteet kaikille olemassa oleville kuville viesteihisi. Tässä tapauksessa olet oikeassa paikassa, koska aiomme näyttää sinulle yksinkertaisen tavan poistaa leveys- ja korkeuskuvaominaisuudet automaattisesti muutamalla jQuery-koodirivillä. Älä pelkää edellisen lauseen kanssa – sinun ei tarvitse edes tietää, mikä jQuery on, seuraa vain kolme seuraavaa vaihetta, ja saat kaiken aikaan.

Poista leveys- ja korkeuskuvaominaisuudet:

  1. Avaa header.php-tiedosto teemakansiostasi
  2. Kopioi ja liitä tämä koodi minne tahansa ja tunnisteet:
  3.  
  4. Tallenna muutokset

Ja olet valmis! Koodi tekee taikuutensa, kun olet avannut kuvan sisältävän viestin ja poistavan siitä leveys- ja korkeustunnisteet.

Kuinka luoda mukautettuja kuvakokoja Media Uploader -sovelluksessa

Jos käytät Media Uploaderia käsittelemään kuvia WordPressissä, olet todennäköisesti nähnyt lukuisia vaihtoehtoja kuville. Monien joukosta voit valita kuvan koon, jonka voit lähettää artikkeliisi.

Valittavana on pikkukuvien, keskikokoisten, suurten ja täysikokoisten asetusten valinta, mutta kaikilla näillä vaihtoehdoilla on ennalta määritetyt arvot. Joten jos käytät mukautettua teemaa, olet usein jumissa siitä, että jokaisen kuvan leveys ja korkeus muuttuvat yhä uudelleen.

Itse asiassa sinun ei tarvitse tehdä sitä. On siisti pieni toiminto nimeltään add_image_size (), joka on loistava työkalu kehittäjille. Ja tämän artikkelin jälkeen löydät siitä myös hyödyllisen.

Oletetaan, että teemallasi on mukautettu leveys ja haluat upottaa kuvia sopiakseen siihen täydellisesti. Oletetaan, että leveys on 666px (emme syytä tutkia, miksi olet asettanut leveyden tähän numeroon, se on sinun valintasi). Tätä varten sinun on lisättävä ylimääräinen valintanappi Media Uploader -sovellukseen. Alla olevalla koodilla lisäät vielä yhden koon, joka on alkuperäisen puolikokoinen.

  1. Avaa function.php-tiedosto
  2. Kopioi ja liitä tämä koodinosa:
  3. toiminto custom_image_sizes () {
    add_image_size ('yksi koko', 333, 333, tosi);
    add_image_size ('toinen koko', 666, 666, tosi);
    }
    
    add_action ('init', 'custom_image_sizes');
    
    toiminto show_image_sizes ($ koot) {
    $ size ['one-size'] = __ ('mukautettu koko 1', 'isitwp');
    $ size ['another-size'] = __ ('mukautettu koko 2', 'isitwp');
    palauta $ koot;
    }
    
    add_filter ('image_size_names_choose', 'show_image_sizes');
  4. Tallenna muutokset
  5. Kokeile lisätä kuva Media Uploader -sovelluksesta, jossa sinun pitäisi nähdä uudet kokovaihtoehdot Liitteen näyttöasetukset -kohdassa.

Luo mistä tahansa verkkosivustosta automaattinen kuvakaappaus ja julkaise se kuvana viestissäsi

Jos haluat näyttää verkkosivuston pikkukuvan, sinun on siirryttävä verkkosivustoon, tulostettava se tai otettava kuvakaappaus ohjelman tai selaimen lisäosan avulla. Sitten sinun pitäisi muokata kuvaa, leikata se oikean kokoiseksi ja ladata se WordPressiin, jotta voit käyttää kuvakaappausta viestissä.

Jos sinun ei tarvitse ottaa tätä tilannekuvaa silloin tällöin, se ei ole ongelma, mutta jos käytät useammin eri verkkosivustojen kuvakaappauksia, kuulet mielelläni, että siellä on mahtava toiminto, joka säästää aikaa ja hermoja.

Tässä oppaan osassa aiomme näyttää sinulle kokonaisen toiminnon, joka luo lyhytkoodin, jota voit käyttää tilannekuvien tekemiseen mistä tahansa haluamastasi verkkosivusta..

Luo automaattinen kuvakaappaus:

  1. Avaa function.php
  2. Kopioi ja liitä seuraava koodi:
  3. toiminto wp_webscreen ($ atts, $ content = NULL) {
    Uute (shortcode_atts (array (
    "snap" => 'http://s.wordpress.com/mshots/v1/',
    "url" => 'http://www.firstsiteguide.com',
    "alt" => 'wploop',
    "w" => '600', // leveys
    "h" => '450' // korkeus
    ), $ atts));
    
    $ img = ''. $ alt. '';
    palauta $ img;
    }
    add_shortcode ("näyttö", "wp_webscreen");
  4. Muuta taulukon oletusmuuttujia
  5. Tallenna muutokset

Tämä toiminto luo lyhytkoodin, jota voit käyttää helposti missä tahansa WordPress-verkkosivustollasi. Haluatko esimerkiksi käyttää verkkosivun kuvakaappausta viesti-, sivupalkki-widgetissä tai alatunnisteessa, yksinkertaisesti c / p lyhytkoodi oikeaan kohtaan:

[ruudun URL = ”http://www.firstsiteguide.com” alt = ”fsg” w = ”600 ″ h =” 450 ″]

Hienoa tässä toiminnossa on, että se tallentaa kuvan dynaamisena URL-osoitteena, mikä tarkoittaa, että kun olet luonut tilannekuvan lyhytkoodilla, se päivittää itsensä automaattisesti tulevaisuudessa ja näyttää aina lyhytkoodissa määritetyn verkkosivuston nykyisen ulkoasun..

Huomaa, että voit muuttaa lyhyen koodin parametreja suoraan siitä. Sinun ei tarvitse muokata funktion.php-tiedoston koodia, jos haluat ottaa tilannekuvan toisesta URL-osoitteesta tai ottaa tilannekuvan toisessa ulottuvuudessa..

Esimerkki:

Oletetaan, että haluat ottaa kuvakaappauksen Googlesta ja tehdä siitä 200 × 400 kuvapistettä iso:

[näytön URL = ”http://www.google.com” alt = ”Google” w = ”200 ″ h =” 400 ″]

Voit tehdä kaiken vielä helpommaksi tallentamalla lyhytkoodin painikkeeseen, jotta voit lisätä sen viestiin yhdellä napin painalluksella.

johtopäätös

Sinun ei tarvitse asentaa kaikkia mainitsemiasi laajennuksia ja toimintoja, jotta parannamme kuvia WordPress-sivustossasi. Toivomme kuitenkin, että olet löytänyt ainakin muutaman vinkin, jotka auttavat sinua optimoimaan kuvia tai parantamaan niitä millään tavalla.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map