Kako izboljšati slike v WordPressu

Kako izboljšati slike v WordPressu


Že dolgo je minilo, da so bile slike nekaj prevelikega, da bi jih lahko naložile po internetu. Danes spletna mesta ne morejo obstajati brez njih. Čeprav so se hitrosti interneta z leti dramatično povečale, je ključnega pomena, da poskrbite za slike na svojem blogu.

Ker je slike enostavno prenesti na svoje spletno mesto, to še ne pomeni, da bi to morali storiti brez kakršne koli priprave. Neoptimizirane slike lahko v resnici škodijo vašemu spletnemu mestu; od vpliva na način, kako obiskovalci razmišljajo o vas, do hitrosti vašega spletnega mesta in SEO lestvice. Če na to še niste pomislili, smo tukaj, da vam pokažemo več načinov za izboljšanje slik v WordPressu.

V tem priročniku vam bomo pokazali:

  • Kako optimizirati slike za WordPress, da pospešite spletno mesto in izboljšate SEO
  • Spremenite način stiskanja WordPress slik JPEG
  • Najbolj priljubljeni vtičniki za optimizacijo slik za WordPress
  • Dodajte leno nalaganje za svoje videoposnetke in slike
  • Prikažite pred in po slikah na privlačen način
  • Kako ustvariti interaktivne slike – risanje, dodajanje opisov in povezav
  • Kako obnoviti dodatne velikosti slike
  • Odstranite atribute slike širine in višine z jQuery
  • Kako ustvariti velikosti slik po meri v programu Media Uploader
  • Ustvarite samodejni posnetek zaslona katerega koli spletnega mesta in ga objavite kot sliko v svoji objavi

Contents

Kako optimizirati slike za WordPress, da boste pospešili spletno mesto in izboljšali SEO

Zakaj bi optimizirali slike za WordPress? Če se boste potrudili, lahko pričakujete naslednje:

  • Hitrejše spletno mesto
  • Boljše SEO
  • Manjše varnostne kopije
  • Manjša poraba pasovne širine
  • Srečnejši uporabniki

Vedeti morate tudi, da obstajajo različne faze, na katerih lahko slike optimizirate. Za slike lahko poskrbite še preden jih naložite na blog ali pa to storite tudi po prenosu.

Hitro preizkusite slike na svojem spletnem mestu

Preden začnete delati na optimizaciji, lahko hitro preverite spletno mesto glede hitrosti in učinkovitosti. Z uporabo katerega koli orodja s seznama boste hitro spoznali, v kakšni obliki so slike na vašem spletnem mestu.

Radi uporabljamo GTmetrix kar vam bo celo pokazalo natančne slike, zaradi katerih se vaše spletno mesto nalaga počasneje.

Pred nalaganjem optimizirajte slike za WordPress

Med blogiranjem večina ljudi ne sprejme vseh potrebnih korakov za optimizacijo svojih slik. Običajno bi ljudje le fotografirali s svojega fotoaparata ali pametnega telefona, ga prenesli iz interneta ali ustvarili z uporabo računalniške programske opreme.

Ne razmišljajo o formatih, dimenzijah slike niti o imenih datotek. Če je slika videti dobro, samo domnevajo, da je pripravljena za internet. Če ne pregledate svojih slik, se pripravljate na katastrofo.

Velikost slike

Velikost slike

Preden preverite širino in višino vsake slike, na spletno mesto WordPress ne nalagajte slik. Če slike na primer prikazujete največ 700 slikovnih pik, resnično ni potrebe po nalaganju širše slike. Če to storite, boste imeli večjo datoteko, zaradi katere bo vaše spletno mesto počasnejše, medtem ko bo izid enak. WordPress bo ustvaril dodatno velikost, vendar to ni izgovor, da slik ne pripravite pred nalaganjem.

Spreminjanje velikosti slik je hitro in enostavno. Obstaja veliko brezplačnih orodij, kot je Microsoft Paint, ki vam bodo pri tem pomagali. Lahko najdete celo brezplačna spletna orodja za spreminjanje velikosti slik, kot so Enostavna velikost.

Dimenzije slike se razlikujejo od teme do teme. Če niste prepričani, katero bi morali uporabiti, natančneje poglejte svojo WordPress temo in si oglejte slike, poiščite dokumentacijo ali poiščite podporo za pomoč.

Spremenite kakovost

Po spremembi dimenzij morate razmisliti o spremembi kakovosti slik. Glede na programsko opremo obstajajo različni načini spreminjanja kakovosti slik. Vedno priljubljeni Photoshop vam na primer omogoča shranjevanje slik v spletu. Ta možnost vam bo omogočila, da shranite slike slabše kakovosti, vendar bodo optimizirane za vaše spletno mesto.

Če fotografijo shranite tudi kot JPEG, vas bo Photoshop pozval, da izberete raven kakovosti. V tem primeru bo znižanje kakovosti z 12 na samo 8 močno zmanjšalo velikost slike, medtem ko razlika v kakovosti ne bo tako velika.

Če še vedno ne uporabljate nobene programske opreme za spreminjanje kakovosti slik, lahko poskusite brezplačno v spletu Drobni PNG orodje. Samo naložite sliko in poglejte, kakšne razlike lahko prinese.

Izberite pravo obliko

Tudi po spremembi velikosti in kakovosti morate razmisliti o spremembi oblike. Za začetek lahko samo z izbiro pravega formata s slike odstranite nekaj kilobajtov, če ne več.

Oblike slik

Splošno pravilo je zelo preprosto. Če imate fotografijo, naj bo to JPEG. Če imate logotip, vektorsko sliko ali zelo preprosto računalniško ustvarjeno grafiko, pojdite s PNG. Če imate res majhno sliko brez gradientov ali želite pokazati preprosto animacijo, kot je prikazana zgoraj, lahko uporabite GIF. Na splošno bodo slike PNG precej večje kot JPEG, zato lahko spremenite obliko.

V mnogih primerih preoblikovanje slik ne bo prineslo pomembnih razlik v kakovosti, medtem ko lahko pričakujete razliko v velikosti. Ko naslednjič naložite fotografijo PNG, jo posnamejte in poskusite shraniti kot JPEG, če želite videti razliko. Za podrobnejšo razlago si oglejte spletno mesto razlika med PNG, JPEG, GIF in SVG.

Bodite pozorni na nazive

Čeprav lahko ime datoteke zveni nepomembno, se morate dejansko zavedati. Ime vaše slikovne datoteke vsebuje dragocene podatke za SEO. Če želite, da bi drugi lahko našli vašo sliko v Googlu in drugih iskalnikih, ji morate dati pravilno ime.

Predlagamo, da slike poimenujete brez presledkov. Ne pozabite vključiti ključnih besed, če želite, da se stran in slika uvrščata. Če na primer nalagate sliko Ferrari California, naj bo ime datoteke “ferrari-california.jpg.” Če za WordPress uporabljate vtičnik SEO, že veste, da preverja vaše alt oznake za ključne besede. Da, res je tako pomembno pravilno ime slike.

Optimizirajte slike za WordPress po nalaganju

Po pripravi slik v računalniku lahko nadaljujete z nalaganjem. Upajmo, da so vaše slike prave velikosti in kakovosti. Prepričali ste se, da sta oblika in ime datoteke pravilni. Po nalaganju vas bo WordPress prosil za dodatne informacije. Ne preskočite metapodatkov; izpolnite podrobnosti o svojih slikah, tako da jih boste lahko enostavno organizirali in pripravili na SEO.

Naslov, opis, alt besedilo in napis

Pri skrbi za tehnične lastnosti ne bi smeli pozabiti na SEO. Vedno dodajte naslov in opis v svoj medij. To vam bo pomagalo pri upravljanju medijev WordPress, poleg tega pa bo pripomoglo tudi k boljšemu SEO. Ne pozabite tudi alt oznake, ki bo prikazana obiskovalcem, ki ne morejo pravilno videti vaše slike. Ne le, da bo to koristno za vaše uporabnike, ampak vam bo pomagalo tudi pri SEO. Vaša stran se bo uvrstila bolje, uporabniki pa bodo lažje našli vaše nove slike.

Čeprav ne boste ves čas potrebovali napisov, ne pozabite dodati slik za slike, za katere so potrebna dodatna pojasnila (na primer posnetki zaslona).

Urejanje slik z WordPressom

Če se zavedate, da sliko še vedno potrebujete za urejanje, morate vedeti, da vam WordPress to omogoča tudi po prenosu datoteke. Spremenite slike vrtenja, obrezovanja in obsega ste že naložili Lahko celo uredite samo sličico ali vse druge velikosti. Domači urejevalnik programa WordPress je zelo preprost, vendar lahko občasno prihranite.

Obnovite vse sličice

Večina prejšnjih tehnik vam bo pomagala pri novih slikovnih datotekah, ki jih še nameravate naložiti. Kaj pa, če imate na svoje WordPress spletno mesto že naloženih na stotine, če ne na tisoče datotek? Ne skrbi; še vedno lahko optimizirate te slike in spremenite njihovo velikost.

Za hiter popravek vas bo morda zanimal brezplačni vnovični vtičnik Thumbnails, ki ga uporablja več kot milijon uporabnikov. Če želite več nadzora nad slikami, si oglejte nekaj najboljših WordPress vtičnikov za optimizacijo slike, ki jih bomo pokazali v naslednjih vrsticah tega članka.

Kako obnoviti dodatne velikosti slike

Uporabite vtičnike WordPress

Seveda obstaja na desetine vtičnikov WordPress, s pomočjo katerih lahko optimizirate slike na svojem spletnem mestu. Pomaknite se navzdol in si oglejte najboljše WordPress vtičnike za optimizacijo slik.

Po potrebi leno naložite slike

Včasih bo kakovost slik veliko pomembnejša od njihove velikosti. To večinoma velja za fotografe, ki želijo, da so njihove fotografije vrhunske. Ne morejo tvegati zmanjšanja velikosti in kakovosti datotek. Kljub temu pa to še ne pomeni, da bi morali pozabiti na optimizacijo. Za optimizacijo slik za WordPress v tem primeru upoštevajte leno nalaganje.

Lenato nalaganje je tehnika, ki nalaga slike samo takrat, ko jih uporabniki potrebujejo (pomaknite se do njih). Če bi na primer v en članek naložili dvajset kakovostnih fotografij, bi vaše spletno mesto izjemno upočasnilo. Če bi leno naložili slike, bi bil članek strelovoden, fotografije pa bi se naložile samo po potrebi – v trenutku, ko uporabnik pride do njih.

Imeti odzivne slike

Čeprav je večina tem WordPress odzivnih, to ne pomeni nujno, da so odzivne tudi vaše slike. Ker ne želite, da se na majhnem zaslonu naloži velika slika, boste morali registrirati dodatne velikosti slike za svoje spletno mesto. Če vaša tema ne uporablja odzivnih slik, razmislite o zaposlitvi strokovnjaka za to delo – ni tako enostavno, kot se morda sliši.

Optimizirajte slike za socialne medije

Če želite zagotoviti, da so vaše slike dobro videti na družbenih medijih, boste morali narediti dodaten korak in optimizirati metaoznake in oznako sheme.

Če uporabljate vtičnik za SEO, kot je Yoast, ne pozabite preveriti nastavitev. Yoast vam bo na primer omogočil, da nastavite nekaj stvari, povezanih s socialnimi mediji. Pojdite torej na SEO -> Social in vnesite podatke na Facebook, Twitter, Google+ in Pinterest.

Če želite več in želite optimizirati slike za dodatna spletna mesta v družabnih medijih, oglejte si WPSSO – Natančne meta oznake + oznaka sheme za optimizacijo družbene skupne rabe in vtičnik SEO.

Spremenite način stiskanja WordPress slik JPEG

Če na spletno mesto WordPress nalagate kup slik JPEG, ste morda opazili, da izgubljajo prvotno kakovost. Če ste se vprašali, ali je kriva WordPress, boste zdaj dobili svoj odgovor – ja, tako je!

Ko naložite sliko v formatu JPEG, WordPress samodejno spremeni stiskanje in odloči, da želite, da slika izgubi na kakovosti. Bolj natančno, WP na vaših JPGE uporablja 90% stiskanje. To je super, če so vaše slike samo tam uporabljene kot sličice za objavo ali prikazane v objavi, če pa nalagate svoje fotografije, pa želite, da so čim boljše, kajne?

Na srečo boste za spremembo potrebovali le eno vrstico kode.

Ustavite stiskanje slik JPEG:

Če ne želite, da se vaše slike JPEG stisnejo, preprosto kopirajte in prilepite naslednjo kodo v datoteko function.php:

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

Ne pozabite sprememb shraniti in pripravljeni ste za nalaganje novih slik.

Po drugi strani pa slike za vas morda ne bodo tako velike. Zato boste morda želeli, da se še bolj stisnejo in vam prihranijo čas pri nalaganju spletnega mesta. Če spremenite zadnjo številko v tej vrstici kode, boste spremenili kakovost na novo prenesenih slik.

Še bolj stisnite slike JPEG:

Nižja kot je številka, več slik bo stisnjenih. Če želite na primer te JPEG še bolj stisniti, boste potrebovali to kodo:

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

Ne pozabite; privzeta raven stiskanja je 90.

Pomembno: To bo vplivalo samo na slike, ki jih naložite, ko ste kodo prilepili v function.php. Če želite spremeniti velikost in kakovost slik, ki jih že imate v knjižnici, boste potrebovali vtičnik. Oglejte si, kako obnoviti dodatne velikosti slike.

Najbolj priljubljeni vtičniki za optimizacijo slik za WordPress

Na začetku tega članka smo govorili o tem, kako optimizirati slike za WordPress, da boste pospešili spletno mesto in izboljšali SEO. Kot ste lahko videli, lahko uporabite nekaj različnih metod. Pomembno je skrbeti za slike, še preden jih naložite na svoj blog. Ko pa so slike že na spletnem mestu, bo morda nemogoče znova prilagoditi vsako sliko posebej in jih nato še enkrat naložiti..

Ne skrbi; nihče ne pričakuje, da boste to storili v prvi vrsti. Bodite z nami v naslednjih minutah, ko vam bomo pokazali najbolj priljubljene vtičnike za optimizacijo slik za WordPress.

Za optimizacijo slik boste morali s seznama izbrati vtičnik. To boste morali konfigurirati in izbrati stvari, ki jih bo vtičnik naredil za vas. Po tem se boste lahko sprostili in delegirali delo na vtičnik po svoji izbiri, medtem ko boste lahko začeli urejati predstavnostne datoteke.

Naslednji vtičniki vam bodo pomagali stisniti slike na katerem koli spletnem mestu WordPress. Hitro bodo naložili spletno mesto in vam na koncu pomagali izboljšati SEO.

WP Smush

CENA: Brezplačno

Z več kot 700.000 aktivnimi namestitvami mora biti WP Smush eden najboljših vtičnikov za optimizacijo slike za WordPress. Slike lahko hitro optimizirate z uporabo različnih tehnik stiskanja. Odlična stvar pri stiskanju slik s programom WP Smush je, da slike ne bodo izgubile na kakovosti. Ne verjamete nam? Preizkusite vtičnik.

Ko smo govorili o pripravi slik za WordPress, smo omenili, da je spreminjanje velikosti ključni del procesa optimizacije. S tem vtičnikom vam ne bo treba skrbeti, saj vam WP Smush omogoča nastavljanje največjih dimenzij. Po tem se bodo vse večje slike samodejno pomanjšale, preden jih dodate v knjižnico.

Ta fantastični vtičnik lahko deluje z datotekami JPEG, GIF in PNG. Deluje z vsemi vašimi imeniki, samodejno skrbi za priloge in deluje celo na večstranskih straneh. Vsako sliko lahko ročno upravljate ali jih na veliko uredite petdeset. Če želite še boljše rezultate in več možnosti, si oglejte WP Smush PRO.

EWWW orodje za optimiziranje slik

CENA: Brezplačno

Za smešnim imenom stoji eden najbolj priljubljenih vtičnikov za optimizacijo slik za WordPress. Tako kot prej omenjeni, tudi EWWW Optimizer slike lahko stisne vaše slike, ne da bi to vplivalo na njihovo kakovost. Ko pomislite, da lahko vtičnik v nekaj sekundah pospeši vaše spletno mesto, boste že na poti za prenos. Ko to storite, boste optimizirali slike v velikem obsegu, galerije, kot so GRAND FlaGallery, NextCellent in NextGEN, pa bodo celo dobile svoje strani za skupno optimizacijo..

Vse slike, ki v programu WordPress uporabljajo razred WP_Image_Editor samodejno optimiziran, medtem ko lahko ročno delate čarovnijo na vseh ostalih. Všeč nam je, da lahko izberete mape, ki jih želite optimizirati. Za več podrobnosti o tem in kateri vtičniki uporabljajo razred, odprite uradnika Stran EWWW orodje za optimiziranje slik v skladišču WordPress.

Stisnite slike JPEG in PNG

CENA: Brezplačno

Drobne stisnite slike

Če luštna mala panda z logotipom WordPressa ne pomeni, da želite izvedeti več o tem vtičniku, ne vemo, kaj bo. Če panda izgleda dobro, je to tisto, kar vam pomaga stisniti slike na spletnem mestu TinyPNG. Ja, zdi se, da je žival bolj vsestranska, kot smo sprva mislili. Toda osredotočimo se na vtičnik.

Če greste s tem vtičnikom, bo Panda samodejno optimizirala vaše slike. Vsakič, ko naložite novega, bo vtičnik prevzel in opravil svoje delo. Kljub temu lahko posamezne slike optimizirate ali to storite v velikem obsegu samo tako, da odprete predstavnostno knjižnico.

Stisnite slike JPEG in PNG, celo podpirajo animirane PNG-je, odlično deluje na večstranskem mestu, je združljiv z WooComerce in ne bo imel težav z WP Offload S3.

Odlična stvar vtičnika je, da vam omogoča nastavitev največjih atributov širine in višine za vse slike. Če vas skrbi, kaj bodo metapodatki, ne skrbite; panda bo vse informacije ostala nedotaknjena.

Omejitev velikosti datoteke ni, nastavite lahko pripomoček na nadzorni plošči in deluje celo z mobilno aplikacijo WordPress. Ker vse to, slike Compress JPEG in PNG imajo več kot 100.000 aktivnih namestitev in si zaslužijo mesto na seznamu najboljših vtičnikov za optimizacijo slik za WordPress.

Nesmiselnost

CENA: Brezplačno

Nesmiselnost

Čeprav vas bo slika platnice tega vtičnika morda prestrašila, počakajte trenutek in si oglejte vse značilnosti Imsanityja. Oh, celo ime vtičnika zveni noro, kajne? Ko boste z imenom vtičnika v redu, boste videli, da ponuja veliko.

Imsanity lahko samodejno spreminja slike, omogoča nastavitev največjih dimenzij in ima celo možnost obsežne velikosti. To je pomembno, če na svojem blogu že imate na stotine slik, za katere je potrebna optimizacija.

Ta brezplačni vtičnik je odlična možnost, če se ne želite veliko boriti z nastavitvami vtičnika. Vse kar je potrebno je, da namestite in aktivirate Imsanity, nastavite nekaj možnosti in na to lahko pozabite; sama bo upravljala svojo pot do optimizacije slike.

Všeč nam je bila možnost, ki vam omogoča pretvorbo BMP slik v JPG. V primeru, da imate veliko datotek BMP, ki ste jih pred časom pomotoma naložili, bo to rešilni reševalec.

Orodje za optimiziranje slik ShortPixel

CENA: Brezplačno

Orodje za optimiziranje slik ShortPixel

ShortPixel Image je z več kot 30.000 aktivnimi namestitvami še vedno eden najbolj priljubljenih vtičnikov za optimizacijo slik za WordPress. Vtičnik je napolnjen s funkcijami in ga bo treba nujno uporabljati za spletna mesta, ki imajo veliko slik za optimizacijo.

Orodje za optimiziranje slik ShortPixel za vas ne bo samo optimiziralo JPG, PNG, GIF in PDF dokumente, temveč vam bo tudi omogočilo pretvorite katero koli sliko JPEG, PNG ali GIF v WebP. Vtičnik dobro deluje z drugimi vtičniki galerije in ni vseeno, ali vaše spletno mesto uporablja HTTP ali HTTPS. Omogočil vam bo odstranjevanje podatkov EXIF ​​iz slik (nekaj, kar bodo radi imeli fotografi).

Vtičnik prepozna slike, ki jih je že optimiziral, zato jih bo po potrebi preskočil. Dovoli ali onemogoči samodejno optimizacijo in s tem fantastičnim vtičnikom naredi veliko, veliko več. Oglejte si uradno stran v shrambi in si oglejte vse funkcije.

Optimus – WordPress orodje za optimiziranje slik

CENA: Brezplačno

Optimus

Tako kot prej omenjeni vtičnik bo tudi Optimus vaše slike optimiziral za WordPress in to bo storil, ne da bi vplival na kakovost vaših slik. Vtičniku lahko pustite, da se stvari samodejno lotijo ​​ali pa izklopite možnost in slike samo optimizirate, kadar je to potrebno.

Optimus deluje na večstranskih straneh, spletnim mestom za e-trgovino WordPress ni nič čudnega in je popolnoma optimiziran za WordPress Mobile Apps in Windows Live Writer. Pospešil bo vaše spletno mesto, ne da bi se vam bilo treba dotikati vrstice kode. Vtičnik ponuja veliko več, vendar se boste morali odločiti za premijsko različico. Če želite videti več, obiščite uradno stran v shrambi vtičnikov WordPress.

V WordPress dodajte leno nalaganje svojih videoposnetkov in slik

Ko boste na svoji spletni strani začeli dodajati veliko video in slikovnega gradiva, se bo očitno začelo nalagati počasneje. Ne glede na to, od kod prihajajo, bodo videoposnetki in velike slike na vaši strani delovali kot velika teža in obiskovalci bodo čakali veliko dlje, kot je potrebno, da naložijo vso vsebino. Z WordPressom to ne bi smelo biti veliko in evo, kako lahko enostavno popravite situacijo.

Če poznate svojo pot okoli PHP-ja, obstaja odličen članek o dodajanju lahkega nalaganja slik in neskončnem drsenju, ki so ga napisali naši kolegi na Elegantne teme.

Če ne, bomo v naslednjih nekaj vrsticah omenili nekaj najbolj priljubljenih vtičnikov za leno nalaganje hitrejše nalaganje vašega spletnega mesta. In niti vam ne bo treba veliko narediti, kot da namestite vtičnik in ga nastavite v nekaj hitrih korakih.

Lazy Load for Videos

CENA: brezplačno

Lazy Load for Videos

Če imate veliko videoposnetkov Youtube in Vimeo, razmislite o namestitvi tega vtičnika. Ko ga nastavite, bo vtičnik postavil sliko na vaš video in zaradi tega se bo vaše spletno mesto naložilo veliko hitreje. Ko se obiskovalec pomakne na video, se ta slika prikaže z gumbom za predvajanje nad njim. Po kliku se bo videoposnetek začel nalagati in predvajati. Na spletnem mestu razvijalca si lahko ogledate preprost predstavitveni prikaz.

WP YouTube Lyte

CENA: Brezplačno

WP YouTube Lyte

Ta vtičnik bo svoje delo opravil na hiter in enostaven način. Ko ga namestite, preprosto dodajte povezavo do svojega Youtube videoposnetka ali pa uporabite kratko kodo. Izbirate lahko med dodajanjem običajnega videa, seznama predvajanja ali samo zvoka izbranega videoposnetka. Po tem bodo vaši Youtube videoposnetki dobili sliko nad njim, ki bo omogočila leno nalaganje. Samo kliknite na sliko, da se vaš video ali avdio zažene.
Oglejte si predstavitev na spletnem mestu razvijalca.

a3 Lena obremenitev

CENA: Brezplačno
DEMO 1
DEMO 2

a3 Lena obremenitev

Ta je namenjen vašemu mobilnemu spletnemu mestu. Če imate na mobilnih napravah veliko slik in / ali videov, ki jih želite pokazati svojim obiskovalcem, si oglejte a3 Lazy Load. Omogočil vam bo, da dodate leno nalaganje svojim slikam in videoposnetkom, vtičnik pa vam bo celo omogočil, da izberete učinke prehoda, ki se bodo pojavili uporabnikom, ko bodo brskali po vsebini, ki se nalaga.

Na področju skrbnika lahko preprosto vklopite in izklopite vsebino, ki jo želite leno naložiti. Za tiste, ki so vklopljeni, bo vsebina naložena samo v času, ko se obiskovalec pomakne na tisti del vsebine.
Tu je lepo prikazan predstavitveni prikaz, ki vsebuje 1000 slik – vsaka se naloži samo, ko se pomaknete nanjo. Ker ta vtičnik leno nalaga videoposnetke, je na voljo tudi video predstavitev, ki jo vidite s klikom na zgornjo povezavo.

BJ Lazy Load

CENA: Brezplačno

BJ Lazy Load

Če ne potrebujete podpore za videoposnetke in želite, da se vaše slike leno nalagajo, preverite ta vtičnik WP. Ko je enkrat nameščen in nastavljen, bo vaše slike, sličice, slike Gravatarja in celo okvirje zamenjal z nadomestkom. Podobno kot prej omenjeni vtičnik bo vsebino naložil le, ko uporabnik pride do nje.

Ne glede na to, ali gre za slike ali video posnetke, ki jih želite leno naložiti, vam bo v nekaj sekundah pomagal eden od zgoraj omenjenih vtičnikov. Vsi so brezplačni, tako da ni opravičila, da ne preizkusite vsaj enega od vtičnikov in si oglejte, kako težka bo vaša ramena. Seveda obstaja veliko drugih vtičnikov z isto funkcijo in lahko jih brskate in preizkusite vse.

Prikažite pred in po slikah na privlačen način

Prepričani smo, da ste že videli veliko primerov slik pred / po njih. Ne vemo za vas, toda prva stvar, ki jo imamo v mislih, ko vidimo frazo “pred in po”, je fitnes vadbeni program, kjer ljudje razkazujejo svoje telo pred in po vadbenem programu.

Če razmislite o tem, večina spletnih strani uporabi preprost pristop, da prikaže razlike – posnamejo obe sliki in jih postavita ena poleg druge ali celo ena nad drugo. Če želite enak rezultat, tega članka ne bi brali, ker že veste, kako to storiti.

Kaj pa, če smo vam povedali, da je to težava vizualno osupljiva, da to rešite pred / po težavi in ​​je le v dosegu vaše roke? No, in po namestitvi boste razvijalce pohvalili, saj je končni rezultat res super.

Dvajset dvajset

CENA: brezplačno

Dvajset dvajset

Twenty Twenty je ime tega čudovitega vtičnika, ki ga lahko brezplačno prenesete v skladišče vtičnikov WordPress.

Vtičnik vam bo omogočil, da eno sliko postavite nad drugo in se lahko igrate z drsnikom, tako da lahko sliko skrijete / razkrijete. Oglejte si predstavitev in videli boste, o čem govorimo.

V redu, zdaj, ko ste priključeni na ta mali vtičnik, poglejmo, kako ustvariti ta osupljiv učinek. Čeprav je demo učinek razmeroma enostavno ustvariti, boste vseeno morali poznati svojo osnovno metodo HTML. Pojdimo:

  1. Ustvarite novo objavo ali odprite obstoječo
  2. V objavo vstavite dve sliki. Če delate v vizualnem urejevalniku, bi morali videti sliko eno nad drugo. Če delate v urejevalniku besedil, bi morali videti kodo, podobno tej:
  3. 
    
    
    
  4. Pred prvo sliko vnesite oznako [dvajset dvajset]
  5. Po drugem vnesite oznako [/ dvaindvajset]
  6. Na koncu bi morali v urejevalniku besedil kaj takega:

    [dvajset dvajset]
    
    
    
    [/ dvajset dvajset]
    
  7. Poskrbite, da bodo slike enake velikosti, da boste dosegli najboljše rezultate
  8. Predogled ali objavo objave in uživanje v vizualno osupljivih pred in po slikah

Kako ustvariti interaktivne slike – risanje, dodajanje opisov in povezav

Danes je težko upravljati spletno stran brez večpredstavnosti. Slike, videoposnetki in glasba so del praktično vsakega spletnega mesta. Povprečen uporabnik interneta je močno odvisen od vizualnih dražljajev, zato morate poskrbeti za vizualne in interaktivne dele svojega spletnega mesta. Članki s slikami prejemajo 94% več ogledov kot tisti brez enega. Prav tako je že znano dejstvo, da lahko večpredstavnost na spletnih mestih poveča ROI vsebinskega trženja.

Upamo, da vas ni treba prepričevati, da poskrbite za slike na svojem spletnem mestu. Tudi če ne uporabljate slike v člankih (ki bi jih morali), uporabljate predstavljene slike, kajne? Vtičniki za galerijo so zelo številni, s pomočjo katerih lahko upravljate slike na svojem mestu WordPress, lahko imate teme, povezane s fotografijo, povežete Instagram s svojim WordPress spletnim mestom in naredite še veliko več. Kaj pa, če bi želeli ustvariti bolj interaktivno vsebino?

Za začetek vas bo morda zanimalo, kako dodati učinke slike pred fotografijo, ki bodo vaši uporabniki všeč. Ne pozabite na virtualno resničnost v WordPressu, ki je vse bolj priljubljena, ko je Automattic predstavil VR v WordPress.com. Še vedno nekaj manjka. Ali je mogoče narediti interaktivne slike z deli, ki jih je mogoče klikniti? Da, to je mogoče in kmalu vam bomo pokazali, kako zabavno in enostavno je.

Opozoriti

CENA: Brezplačno
DEMO

Prva stvar tega vtičnika, ki vam bo všeč, je, da je popolnoma brezplačen! Tako kot kateri koli drug vtičnik iz skladišča WordPress ga lahko v nekaj minutah prenesete, namestite in aktivirate. Brezplačna različica vam bo omogočila delo z eno interaktivno sliko. Če želite več, se boste morali prijaviti za različico PRO, vendar bomo o tem govorili kasneje.

Vtičnik je odziven in vam ni treba skrbeti, da bodo interaktivne slike pravilno prikazane v kateri koli napravi. Ne samo, da se bo slika spreminjala glede na velikost zaslona, ​​ampak bo delovala v večini sodobnih in starejših brskalnikov (namiznih in mobilnih). Opozori pozornost uporablja elemente platna, ko se prikažejo v novih brskalnikih, medtem ko se bodo vrnili na slikovne zemljevide, če jih naložite v starejše.

Lastnosti

Preden pridete do primera, ki vam bo pokazal, kako močan je ta preprost vtičnik, poglejmo, kaj lahko pričakujemo od Opozorila:

  • Riši – Ko naložite sliko, boste dobili priložnost, da na njej narišete oblike. Izberite kateri koli del vaše slike, ki bo postal izbirljiv / klikljiv
  • Barve – Prilagodite barve, tako da boste lahko vroče točke prilagodili oblikovanju svojega spletnega mesta
  • Označite na levo – Prikažite drug del slike, če uporabnik premakne miško nad izbrani del
  • Pokaži več informacij – Prikažite več informacij o izbranem delu slike
  • Pojdi na URL – Uporabnike preusmerite na kateri koli URL, če kliknejo na izbiro

Narišite nastavitve pozornosti

Primer – Interaktivni zemljevid Havajev

Na primeru demo strani bomo uporabili primer, da vam pokažemo, kaj natančno lahko počnete z Draw attention. Pa si poglejmo, kako izgleda interaktivni zemljevid Havajev, ko je ustvarjen s pomočjo vtičnika.

Prvo, kar bi morali storiti, je najti podobo Havajskih otokov. Ko se pomaknete do Opozorilo -> Uredi sliko, morate naložiti sliko na območje na desni stranski vrstici. Ko se slika naloži, se zabava lahko začne.

Tu lahko izberete barve za poudarke (barva, rob, motnost itd.), Slog “več informacij polje” (slika, naslov, barva besedila itd.). Če ne želite ročno izbrati vsake barve za sliko, lahko hitro izberete barvno shemo na desni stranski vrstici.

Opozorite - kako ustvariti interaktivne slike v WordPressu

Najbolj čaroben del se zgodi v Območja žarišča zaslon z nastavitvami. Tu boste dobili svojo sliko v polni velikosti. Vse, kar morate storiti zdaj, je, da začnete risati in ustvariti novo žarišče. Dodate lahko toliko točk, kolikor želite, kar pomeni, da lahko ustvarite obsežne izbire, kolikor želite. Ustvarite lahko toliko vročih točk in vsaka ima lahko svoje nastavitve.

V tem primeru bi morali izbrati enega od otokov. Izberite naslov otoka, dodajte opis in dodatno sliko, ki bo prikazana, ko uporabnik premakne žarišče (desni del slike GIF, prikazano zgoraj).

Postopek ponovite na vsakem od otokov, za katere želite, da so interaktivni. Ko imate pripravljene dostopne točke, preprosto kopirajte kratko kodo z desne strani. Prilepite kratko kodo v objavo, stran, gradnik ali kamor koli želite pokazati svoj novi interaktivni zemljevid in končali ste! Če želite uporabnike preusmeriti na katero koli drugo stran, ko so kliknili izbiro, morate namesto opisa izbrati URL. Tako enostavno!

PRO različica

Čeprav bo brezplačna različica popolna, če potrebujete samo eno sliko, je PRO različica vam bo omogočil, da imate na svojem spletnem mestu toliko interaktivnih slik, kot želite. Čeprav bo to najpomembnejša stvar, boste imeli pri različici PRO celo več slik.

Funkcija Možnosti postavitve vam bo omogočila prikaz več informacij o izbranih delih slike. Informacije boste na primer prikazali v svetlobnem polju ali v preprosti orodni vrstici, ki se bo pojavila po tem, ko uporabnik pokaže nad izbranim delom slike.

Na voljo je tudi dvajset vnaprej določenih barvnih palet, zato vam ni treba ročno prilagoditi vsake barve. Različica PRO vas bo stala 74 dolarjev za licenco za posamezno spletno mesto, če pa potrebujete več interaktivnih slik, bo to neznanec.

Kako obnoviti dodatne velikosti slike

Registrirati je mogoče nove velikosti slik v WordPress temi. Ko ste svojemu sistemu povedali, kako velike naj bodo slike, jih poimenovali in se odločili, kako jih obrezati, lahko brezplačno razdelite slike kamor koli želite. Kaj pa stare slike?

Če ste uporabili katero od tehnik, ki smo vam jo pokazali, ste pripravili trate za nove slike. Ali uporabljate na novo registrirane velikosti slik za sličice objav ali dovolite avtorjem, da jih uporabljajo v objavah, nova pravila veljajo samo za slike, ki so naložene po spremembi v datoteki function.php. Če želite spremeniti starejše slike, predlagamo uporabo vtičnika Regenerate Thumbnails.

Obnovi sličice:

CENA: Brezplačno
  1. Pojdi do Vtičniki-> Dodaj novo
  2. Išči »Obnovi sličice«
  3. Namestite in aktivirajte vtičnik
  4. Pomaknite se na Orodja-> Regen.Thumbnails

Če želite spremeniti velikost vseh slik, preprosto kliknite gumb »Obnovi vse sličice« in počakajte, da vtičnik opravi težko delo.

Kako obnoviti dodatne velikosti slike

Če želite videti slike, ki jih želite spremeniti v velikost, ali če želite spremeniti velikost le nekaterih slik, pojdite v svojo predstavnostno knjižnico, kjer boste v razdelku »Veliko dejanj« našli novo možnost in eno poleg vsake slike v polju galerija.

Dobra stvar vtičnika je, da ne izbriše vaših izvirnih slik. Ustvarile bodo nove velikosti slik, ki jih lahko uporabite v svoji temi, originalne pa jih boste lahko uporabljali pozneje ali jih ročno izbrisali, če se boste odločili, da jih ne potrebujete.

To je to. Uživajte v svojih novih sličicah ali odjavite se Enostavne velikosti slike vtičnik, ki lahko stori isto.

Odstranite atribute slike širine in višine z jQuery

Ko dodate slike v objavo v programu WordPress, sistem sliki samodejno doda atribute višine in širine. To je ponavadi dobra stvar, vendar se včasih zgodi, da vam vsaka slika ne bo všeč.

Če želite atribute odstraniti takoj na mestu prenosa, lahko to storite s preprosto funkcijo, ki smo vam jo pokazali zadnjič.

Če ste članek prebrali ali preizkusili funkcijo, ste opazili, da vpliva le na slike, naložene po namestitvi funkcije v vaš WP sistem. Če že imate bazo podatkov, polno objav z vstavljenimi slikami, vam omenjena funkcija ne bo veliko pomagala pri vaših starih atributih slik.

Ker verjetno ne morete skozi vsako sliko ročno in eno za drugo izbrisati širine in višine, verjetno potrebujete drugo funkcijo, ki bo odstranila te atribute za vse obstoječe slike, vdelane v vaše objave. V tem primeru ste na pravem mestu, ker vam bomo pokazali preprost način samodejnega odstranjevanja atributov slike širine in višine z nekaj vrsticami kode jQuery. Ne ustrašite se s prejšnjo besedno zvezo – sploh ne veste, kaj je jQuery, samo sledite naslednjim trem korakom in naredili boste hitro.

Odstranite atribute slike širine in višine:

  1. Odprite datoteko header.php iz mape s temi
  2. Kopirajte in prilepite to kodo kamor koli med in oznake:
  3.  
  4. Shrani spremembe

In končali ste! Koda bo naredila svojo čarobnost, ko odprete objavo, ki vsebuje sliko, in odstrani oznake širine in višine.

Kako ustvariti velikosti slik po meri v programu Media Uploader

Če za obdelavo slik v WordPressu uporabljate program Media Uploader, ste verjetno videli številne možnosti za slike. Med številnimi lahko izberete velikost slike, ki jo lahko pošljete v svoj članek.

Na izbiro so sličice, srednje, velike in polne velikosti, vendar imajo vse te možnosti vnaprej določene vrednosti. Če torej uporabljate temo po meri, se pogosteje znova in znova zataknete s spreminjanjem širine in višine vsake slike..

Pravzaprav vam tega ni treba storiti. Obstaja čedna majhna funkcija imenovana add_image_size (), ki je odlično orodje za razvijalce. Po tem članku pa se vam bo zdel tudi uporaben.

Recimo, da ima vaša tema širino po meri in želite enostavno vdelati slike, da se tam popolnoma prilegajo. Recimo, da je širina 666px (ne bomo spuščali, zakaj ste širino postavili na to številko, je vaša izbira). Če želite to narediti, morate dodati dodaten izbirni gumb Media Uploader. S spodnjo kodo dodate še eno velikost, ki je polovična velikost prvotne.

  1. Odprite datoteko function.php
  2. Kopirajte in prilepite ta del kode:
  3. funkcija custom_image_sizes () {
    add_image_size ('ena velikost', 333, 333, res);
    add_image_size ('druga velikost', 666, 666, res);
    }
    
    dodajanje ('init', 'custom_image_size');
    
    funkcija show_image_s veličine ($ velikosti) {
    $ size ['one-size'] = __ ('Velikost po meri 1', 'isitwp');
    $ size ['other-size'] = __ ('Velikost po meri 2', 'isitwp');
    vrne velikosti $;
    }
    
    add_filter ('image_size_names_choose', 'show_image_size');
  4. Shrani spremembe
  5. Poskusite dodati sliko iz medija za nalaganje, kjer bi v razdelku »Nastavitve prikazovalnega prikaza« videli nove možnosti velikosti.

Ustvarite samodejni posnetek zaslona katerega koli spletnega mesta in ga objavite kot sliko v svoji objavi

Če želite prikazati sličico spletnega mesta, bi morali obiskati spletno mesto, ga natisniti na zaslonu ali narediti posnetek zaslona s programom ali dodatkom brskalnika. Nato bi morali spremeniti sliko, jo razrezati na pravo velikost in jo naložiti v svoj WordPress, tako da boste lahko v objavi uporabili posnetek zaslona.

Če vam ne bo treba vsake toliko posneti tega posnetka, to ne bo težava, če pa pogosteje uporabljate posnetke zaslona z različnih spletnih strani, boste z veseljem slišali, da obstaja odlična funkcija, ki bo prihranili si čas in živce.

V tem delu vodnika vam bomo pokazali popolno funkcijo, ki ustvari kratko kodo, ki jo lahko uporabite za fotografiranje katere koli spletne strani, ki jo želite.

Ustvari samodejni posnetek zaslona:

  1. Odprite function.php
  2. Kopirajte in prilepite to kodo:
  3. funkcija wp_webscreen ($ atts, $ content = NULL) {
    izvleček (shortcode_atts (matrika (
    "snap" => 'http://s.wordpress.com/mshots/v1/',
    "url" => 'http://www.firstsiteguide.com',
    "alt" => 'wploop',
    "w" => '600', // širina
    "h" => '450' // višina
    ), $ atts));
    
    $ img = ''. $ alt '';
    vrniti $ img;
    }
    add_shortcode ("zaslon", "wp_webscreen");
  4. Spremenite privzete spremenljivke v matriki
  5. Shrani spremembe

Ta funkcija ustvarja kratko kodo, ki jo lahko preprosto uporabite kjer koli na svojem spletnem mestu WordPress. Ne glede na to, ali želite uporabiti posnetek zaslona spletne strani v objavi, pripomočku za stransko vrstico ali nogi, na primer preprosto c / p kratke kode na pravem mestu:

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

Odlična funkcija te funkcije je, da sliko shrani kot dinamičen URL, kar pomeni, da se bo, ko ustvarite posnetek s kratko kodo, v prihodnosti samodejno osvežil in vedno prikazal trenutni videz spletnega mesta, ki je naveden v kratki kodi..

Upoštevajte, da lahko parametre kratke kode spremenite neposredno iz nje. Ni vam treba spreminjati kode v datoteki function.php, če želite posneti posnetek drugega URL-ja ali narediti posnetek v drugi dimenziji.

Primer:

Recimo, da želite posneti Googlov posnetek zaslona in ga narediti v velikosti 200 × 400 pik:

[zaslon URL = “http://www.google.com” alt = “Google” w = “200 ″ h =” 400 ″]

Vse lahko olajšate tako, da kratko kodo shranite v gumb, tako da jo lahko z enim klikom gumba vstavite v objavo..

Zaključek

Za izboljšanje slik na vašem mestu WordPress vam ni treba namestiti vseh vtičnikov in funkcij, ki smo jih omenili. Upamo pa, da ste našli vsaj nekaj nasvetov, ki vam bodo pomagali optimizirati slike ali jih kakorkoli izboljšati.

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