Kako poboljšati slike u WordPressu

Kako poboljšati slike u WordPressu


Prošlo je dosta vremena otkad su slike bile prevelike za učitavanje putem Interneta. Danas web stranice ne mogu postojati bez njih. Iako se brzina interneta tijekom godina dramatično povećala, od vitalnog je značaja da se brinete o slikama na svom blogu.

Samo zato što je slike jednostavno prenijeti na vašu web lokaciju, to ne znači da to trebate činiti bez ikakvih priprema. Neoptimizirane slike mogu u stvari naštetiti vašoj web lokaciji; od utjecaja na način na koji vas posjetitelji misle na brzinu vaše web stranice i SEO ljestvici. Ako to još niste pomislili, tu smo da vam pokažemo nekoliko načina za poboljšanje slika u WordPressu.

U ovom ćemo vam vodiču pokazati:

  • Kako optimizirati slike za WordPress kako biste ubrzali web mjesto i poboljšali SEO
  • Promijenite način na koji WordPress komprimira JPEG slike
  • Najpopularniji dodaci za optimizaciju slike za WordPress
  • Dodajte lagano učitavanje za svoje videozapise i slike
  • Prikažite prije i poslije slika na atraktivan način
  • Kako stvoriti interaktivne slike – crtajte, dodajte opise i veze
  • Kako regenerirati dodatne veličine slike
  • Uklonite atribute slike širine i visine pomoću jQuery
  • Kako stvoriti prilagođene veličine slika u programu Media Uploader
  • Napravite automatsku snimku bilo koje web stranice i objavite je kao sliku u svom postu

Contents

Kako optimizirati slike za WordPress tako da ubrzate web mjesto i poboljšate SEO

Zašto biste optimizirali slike za WordPress? Ako se potrudite, možete očekivati ​​sljedeće:

  • Brže mjesto
  • Bolje SEO
  • Manje sigurnosne kopije
  • Manja upotreba propusnosti
  • Srećniji korisnici

Također biste trebali znati da postoje različite faze u kojima možete optimizirati slike. Za slike možete voditi brigu čak i prije nego što ih pošaljete na blog ili to možete učiniti nakon prijenosa.

Brzo testirajte slike na svojoj web lokaciji

Prije nego što počnete raditi na optimizaciji, možete brzo provjeriti web mjesto radi brzine i performansi. Upotrebom bilo kojeg alata s popisa brzo ćete se upoznati u kakvom su obliku slike na vašoj web lokaciji.

Mi se volimo koristiti GTmetrix što će vam čak pokazati i točne slike zbog kojih se vaše web mjesto sporije učitava.

Optimizirajte slike za WordPress prije prijenosa

Dok blogiraju, većina ljudi ne poduzima sve potrebne korake kako bi optimizirala svoje slike. Obično bi ljudi samo fotografirali s fotoaparata ili pametnog telefona, preuzeli je s Interneta ili je stvorili pomoću računalnog softvera.

Ne razmišljaju o formatima, dimenzijama slike niti nazivima datoteka. Ako slika izgleda dobro, samo pretpostavljaju da je spremna za Internet. Ako ne provjerite svoje slike, gradite prema katastrofi.

Promjena veličine slike

Promjena veličine slike

Ne prenosite slike na svoju web stranicu WordPress prije provjere širine i visine svake slike. Ako, primjerice, prikazujete slike maksimalne 700 px, zaista nema potrebe za prijenosom šire slike. Ako to učinite, imat ćete veću datoteku koja će vašu web lokaciju usporiti, a izlaz će biti isti. WordPress će stvoriti dodatnu veličinu, ali to nije izgovor da slike ne pripremite prije prijenosa.

Promjena veličine slike je brza i jednostavna. Postoji mnogo besplatnih alata kao što je Microsoft Paint koji će vam pomoći u tome. Možete čak pronaći i besplatne internetske alate za promjenu veličine slike poput Jednostavno mijenjanje veličine.

Dimenzije slike ovisit će od teme do teme. Ako niste sigurni koju biste trebali koristiti, pomno pogledajte svoju WordPress temu i pregledajte slike, potražite dokumentaciju ili zatražite pomoć za pomoć.

Promjena kvalitete

Nakon promjene dimenzija, trebali biste razmotriti promjenu kvalitete slika. Ovisno o softveru, postoje različiti načini za promjenu kvalitete slike. Na primjer, uvijek popularni Photoshop omogućava vam spremanje slika na webu. Ova će vam opcija omogućiti spremanje slika slabije kvalitete, ali bit će optimizirane za vaše web mjesto.

Također, ako odlučite spremiti sliku kao JPEG, Photoshop će tražiti da odaberete razinu kvalitete. U tom slučaju, snižavanje kvalitete sa 12 na samo 8 dramatično će smanjiti veličinu slike, dok razlika u kvaliteti neće biti toliko velika.

Ako i dalje ne upotrebljavate nijedan softver za promjenu kvalitete svojih slika, možete isprobati besplatno putem interneta Tiny PNG alat. Samo prenesite sliku i vidite kakve razlike to može napraviti.

Odaberite pravi format

Čak i nakon promjena veličine i kvalitete, trebali biste razmotriti promjenu formata. Za početak, samo odabirom pravog formata, možete skinuti nekoliko kilobajta s slike, ako ne i više.

Formati slika

Opće je pravilo vrlo jednostavno. Ako imate fotografiju, napravite je JPEG. Ako imate logotip, vektorsku sliku ili vrlo jednostavnu računalno kreiranu grafiku, idite s PNG-om. Ako imate stvarno malu sliku bez gradijenata ili želite pokazati jednostavnu animaciju poput one prikazanu gore, možete koristiti GIF. Općenito, PNG slike će biti prilično veće od JPEG slika, a vi možete imati koristi od promjene formata.

U mnogim slučajevima preoblikovanje slika neće donijeti značajne razlike u kvaliteti, dok možete očekivati ​​razliku u veličini. Sljedeći put prije nego što pošaljete PNG fotografiju, fotografirajte je i pokušajte je spremiti kao JPEG kako biste vidjeli razliku. Detaljnije objašnjenje potražite u članku razlika između PNG, JPEG, GIF i SVG.

Pazite na datoteke

Iako naziv datoteke može zvučati nevažno, zapravo bi trebali biti svjesni. Naziv vaše slikovne datoteke sadrži vrijedne podatke za SEO. Ako želite da drugi mogu pronaći vašu sliku na Googleu i drugim tražilicama, trebate joj dati odgovarajuće ime.

Predlažemo da slike imenujete bez razmaka. Ne zaboravite uključiti ključne riječi ako stranicu i sliku želite rangirati. Na primjer, ako prenosite sliku Ferrarija u Kaliforniji, naziv datoteke trebao bi biti “ferrari-california.jpg.” Ako za WordPress koristite SEO dodatak, već znate da provjerava vaše alt oznake za ključne riječi. Da, zaista je važno imati pravilno ime slike.

Optimizirajte slike za WordPress nakon prijenosa

Nakon pripremanja slika na računalu, možete nastaviti s prijenosom. Nadamo se da su vaše slike odgovarajuće veličine i kvalitete. Provjerili ste da su format i naziv datoteke ispravni. Nakon prijenosa WordPress će vas tražiti dodatne informacije. Nemojte preskočiti meta informacije; popunite podatke o svojim slikama kako biste ih lako mogli organizirati i pripremiti za SEO.

Naslov, opis, alt tekst i opis

Pazeći na tehničke podatke, ne biste trebali zaboraviti na SEO. Uvijek dodajte naslov i opis medijima. Ovo će vam pomoći u upravljanju medijima WordPressa, a također će raditi na boljem SEO. Također, ne zaboravite alt oznaku koja će se prikazati posjetiteljima koji ne mogu pravilno vidjeti vašu sliku. Ne samo da će ovo biti korisno za vaše korisnike, već će vam pomoći i sa SEO-om. Vaša će se stranica rangirati bolje, a korisnici će moći lakše pronaći vaše nove slike.

Iako vam neprestano neće trebati naslove, dodajte ih za slike za koje su potrebna dodatna objašnjenja (na primjer, snimke zaslona).

Uređivanje slika s WordPressom

Ako shvatite da sliku i dalje treba dodatno uređivati, trebali biste znati da vam WordPress to omogućuje čak i nakon prijenosa datoteke. Promijenite slike rotacije, obrezivanja i razmjera već ste prenijeli. Možete čak i urediti samo sličicu ili sve druge veličine. Izvorni uređivač programa WordPress vrlo je jednostavan, ali možete ga uštedjeti s vremena na vrijeme.

Regenerirajte sve sličice

Većina prethodnih tehnika pomoći će vam s novim slikovnim datotekama koje još namjeravate prenijeti. Ali što ako imate stotine ako ne i tisuće datoteka koje su već učitane na vašu WordPress stranicu? Ne brini; i dalje možete optimizirati te slike i mijenjati njihove veličine.

Za brzo ispravljanje možda će vas zanimati besplatni Regenerate Thumbnails dodatak koji koristi više od milijun korisnika. Ako želite veću kontrolu nad slikama, pogledajte neke od najboljih WordPress dodataka za optimizaciju slike koje ćemo vam pokazati u sljedećim redovima ovog članka.

Kako regenerirati dodatne veličine slike

Upotrijebite dodatke za WordPress

Naravno, postoje deseci WordPress dodataka koji vam mogu pomoći u optimizaciji slika na vašoj web lokaciji. Pomaknite se prema dolje da biste vidjeli najbolje WordPress dodatke za optimizaciju slika.

Lijeno Učitajte slike kad je potrebno

Ponekad će kvaliteta slika biti mnogo važnija od njihove veličine. To se uglavnom odnosi na fotografe koji žele da njihove fotografije budu vrhunske. Ne mogu riskirati smanjenje veličine ili kvalitete datoteka. Ipak, to ne znači da biste trebali zaboraviti na optimizaciju. Da biste u ovom slučaju optimizirali slike za WordPress, razmislite o lijenom učitavanju.

Lijeno opterećenje je tehnika koja učitava slike samo kada ih korisnici trebaju (dođite do njih). Na primjer, ako u jedan članak prenesete dvadeset visokokvalitetnih fotografija, one bi naglo usporile vašu web lokaciju. No ako lijen učitavate slike, članak bi bio munjevit i fotografije bi se učitavale samo kad je to potrebno – u trenutku kada korisnik dođe do njih.

Imajte osjetljive slike

Iako je većina WordPress tema osjetljiva, to ne mora nužno značiti i da su slike odgovaraju. Budući da ne želite da se velika slika učita na malom zaslonu, morat ćete registrirati dodatne veličine slika za svoju web lokaciju. Ako vaša tema ne upotrebljava responzivne slike, razmislite o tome da zaposlite stručnjaka za posao – nije tako lako koliko može zvučati.

Optimizirajte slike za društvene medije

Ako želite biti sigurni da vaše slike izgledaju dobro na društvenim mrežama, morat ćete poduzeti dodatni korak i optimizirati metaoznake i oznaku sheme.

Ako koristite SEO dodatak kao što je Yoast, ne zaboravite provjeriti postavke. Na primjer, Yoast će vam omogućiti da postavite nekoliko stvari koje se odnose na društvene medije. Dakle, idite na SEO -> Social i unesite podatke na Facebook, Twitter, Google+ i Pinterest.

Ako želite još i želite optimizirati slike za dodatne web stranice na društvenim mrežama, pogledajte WPSSO – Točne Metaoznake + Oznaka sheme za optimizaciju društvenog dijeljenja i dodatak za SEO.

Promijenite način na koji WordPress komprimira JPEG slike

Ako na svoju web stranicu WordPress prenosite gomilu JPEG slika, možda ste primijetili da gube na originalnoj kvaliteti. Ako ste se pitali je li kriva WordPress, sada ćete dobiti svoj odgovor – da, jest!

Nakon što prenesete sliku u JPEG formatu, WordPress automatski mijenja kompresiju i odluči da želite da slika izgubi na kvaliteti. Da budemo precizniji, WP koristi 90% kompresiju na vašim JPGE. To je sjajno ako su vaše slike tamo samo za upotrebu kao sličice za objavu ili za prikazivanje u postu, ali ako prenosite svoje fotografije, želite da one budu što bolje, zar ne?

Srećom, trebat će vam samo jedna linija koda da biste to promijenili.

Zaustavljanje kompresije JPEG slika:

Ako ne želite da se vaše JPEG slike komprimiraju, jednostavno kopirajte i zalijepite sljedeći kôd u svoju funkciju.php datoteku:

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

Ne zaboravite spremiti promjene i spremni ste za prijenos novih slika.

S druge strane, slike vam možda ne bi bile toliko velike. Stoga možda želite da se oni još više komprimiraju i štede vam vrijeme na učitavanju web stranice. Ako promijenite posljednji broj u tom kôdu, mijenjat ćete kvalitetu novoprenesenih slika.

Komprimirajte JPEG slike još više:

Što je niži broj, to će se više komprimirati slika. Na primjer, da biste još više komprimirali te JPEG datoteke, trebat će vam ovaj kôd:

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

Ne zaboravite; zadana razina kompresije je 90.

Važno: To će se odraziti samo na slike koje prenesete nakon što ste zalijepili kôd u function.php. Za promjenu veličine i kvalitete slika koje već imate u knjižnici trebat će vam dodatak. Pogledajte kako regenerirati dodatne veličine slike.

Najpopularniji dodaci za optimizaciju slike za WordPress

Na početku ovog članka razgovarali smo o tome kako optimizirati slike za WordPress kako biste ubrzali web mjesto i poboljšali SEO. Kao što ste mogli vidjeti, postoji nekoliko različitih metoda koje možete koristiti. Važno je voditi računa o slikama i prije nego što ih pošaljete na svoj blog. Ali kada se slike već nalaze na web mjestu, možda će biti nemoguće ponovno optimizirati svaku sliku zasebno, a zatim je ponovo prenijeti..

Ne brini; nitko ne očekuje da to učinite u prvom redu. Budite s nama u sljedećim minutama jer ćemo vam pokazati najpopularnije dodatke za optimizaciju slike za WordPress.

Da biste optimizirali slike, morat ćete samo odabrati dodatak s popisa. Morat ćete ga konfigurirati i odabrati stvari koje će dodatak učiniti za vas. Nakon toga moći ćete se opustiti i prenijeti djelo na dodatak po vlastitom izboru, dok možete početi organizirati svoje medijske datoteke.

Sljedeći dodaci pomoći će vam da komprimirate slike na bilo kojem WordPress web mjestu koje imate. Oni će ubrzati učitavanje web mjesta i na kraju pomoći da poboljšate SEO.

WP Smush

CIJENA: Besplatno

S više od 700.000 aktivnih instalacija, WP Smush mora biti jedan od najboljih dodataka za optimizaciju slike za WordPress. Može brzo optimizirati slike koristeći različite tehnike kompresije. Izvrsna stvar kod komprimiranja slika pomoću programa WP Smush je da slike neće izgubiti na kvaliteti. Ne vjerujete nam? Ispitajte dodatak.

Kada smo razgovarali o pripremi slika za WordPress, spomenuli smo da je mijenjanje veličine presudan dio procesa optimizacije. Ovim dodatkom nećete se morati brinuti zbog toga što vam WP Smush omogućuje postavljanje maksimalnih dimenzija. Nakon toga sve veće slike automatski će se smanjiti prije nego što ih dodate u biblioteku.

Ovaj fantastični dodatak može raditi s JPEG, GIF i PNG datotekama. Radi sa svim vašim direktorijima, automatski se brine za privitke, pa čak i radi na više web lokacija. Ručno možete raditi na svakoj slici ili skupno ih urediti pedeset. Ako želite još bolje rezultate i više opcija, pogledajte WP Smush PRO.

EWWW alat za optimizaciju slike

CIJENA: Besplatno

Iza smiješnog imena stoji jedan od najpopularnijih dodataka za optimizaciju slike za WordPress. Baš kao i ranije spomenuti, EWWW Optimizer slika može komprimirati slike bez utjecaja na njihovu kvalitetu. Kad razmišljate o tome da dodatak može ubrzati web mjesto u sekundi, već ćete biti na putu za preuzimanje. Nakon što to učinite, dobit ćete optimizaciju slika skupno, a galerije poput GRAND FlaGallery, NextCellent i NextGEN čak će dobiti i vlastite stranice za optimizaciju skupno..

Sve slike koje koriste WP_Image_Editor klasu bit će u WordPressu automatski optimiziran, dok možete ručno raditi magiju na svim ostalim. Svidja nam se što ste odabrali mape koje želite optimizirati. Da biste saznali više o tome i koji dodaci koriste klasu, otvorite službenu službu Stranica EWWW alat za optimizaciju slike u WordPress spremištu.

Stisnite JPEG i PNG slike

CIJENA: Besplatno

Tiny Compress Images

Ako slatka mala panda sa logotipom WordPressa ne znači da želite saznati više o ovom dodatku, ne znamo što ćemo. A ako panda izgleda poznato, to je zato što je ona ista koja vam pomaže da komprimirate slike na web lokaciji TinyPNG. Da, čini se da je životinja svestranija nego što smo prvobitno mislili. Ali usredotočimo se na dodatak.

Ako idete s ovim dodatkom, Panda će automatski optimizirati vaše slike. Svaki put kada učitate novi, dodatak će preuzeti i obaviti svoj posao. Ipak, možete optimizirati pojedinačne slike ili to učiniti skupno, odlaskom u biblioteku medija.

Komprimiranje JPEG i PNG slika čak podržava animirane PNG-ove, savršeno funkcionira na više web lokacija, WooComerce je kompatibilan i neće imati problema sa WP Offload S3.

Sjajna stvar dodatka je što vam omogućuje postavljanje atributa maksimalne širine i visine za sve slike. Ako se brinete što će to učiniti metapodaci, ne brinite; panda će sve informacije ostati netaknute.

Ne postoje ograničenja veličine datoteka, morate postaviti widget nadzornu ploču, a radi čak i s mobilnom aplikacijom WordPress. Zbog svega toga, komprimiranje JPEG i PNG slika ima više od 100.000 aktivnih instalacija i zaslužuje mjesto na listi najboljih dodataka za optimizaciju slike za WordPress.

Imsanity

CIJENA: Besplatno

Imsanity

Iako bi vas naslovnica ovog dodatka mogla uplašiti, na trenutak razmislite o svim značajkama Imsanity-a. Oh, čak i ime dodatka zvuči suludo, zar ne? Jednom kada budete u redu s nazivom dodatka, vidjet ćete da on može mnogo toga ponuditi.

Imsanity automatski može razmještati slike, omogućava vam postavljanje maksimalnih dimenzija, a ima čak i opsežnu veličinu veličine. Ovo je važno ako na svom blogu već imate stotine slika kojima je potrebna optimizacija.

Ovaj je besplatni dodatak odlična opcija ako se ne želite puno boriti s postavkama dodatka. Potrebno je samo instalirati i aktivirati Imsanity, postaviti nekoliko opcija i na to možete zaboraviti; upravljat će vlastitim putem ka optimizaciji slike.

Svidjela nam se opcija koja vam omogućuje pretvaranje BMP slika u JPG. Samo u slučaju da imate puno BMP datoteka koje ste pogrešno prenijeli prije nekog vremena, ovo će biti spasitelj.

Alat za optimizaciju slike ShortPixel

CIJENA: Besplatno

Alat za optimizaciju slike ShortPixel

S više od 30.000 aktivnih instalacija, ShortPixel Image i dalje je jedan od najpopularnijih dodataka za optimizaciju slike za WordPress. Dodatak je prepun značajki, a bit će obavezan za web mjesta koja imaju mnogo slika za optimizaciju.

ShortPixel Image Optimizer ne samo da će optimizirati JPG, PNG, GIF i PDF dokumente za vas, već će vam i omogućiti pretvorite bilo koju JPEG, PNG ili GIF sliku u WebP. Dodatak dobro funkcionira s ostalim dodacima za galeriju i nema veze je li vaša web lokacija koristi HTTP ili HTTPS. Omogućit će vam uklanjanje EXIF ​​podataka sa slika (nešto što će fotografi voljeti imati).

Dodatak prepoznaje slike koje je već optimizirao, pa će ih po potrebi preskočiti. Ovim fantastičnim dodatkom možete dopustiti ili onemogućiti automatsku optimizaciju i učiniti mnogo, puno više. Pogledajte službenu stranicu u spremištu da biste vidjeli sve značajke.

Optimus – WordPress alat za optimizaciju slike

CIJENA: Besplatno

Optimus

Kao i prethodno spomenuti dodatak, Optimus će optimizirati vaše slike za WordPress, i to će učiniti bez utjecaja na kvalitetu vaših slika. Možete dopustiti da dodatak automatski riješi stvari ili možete isključiti opciju i optimizirati slike samo kad je to potrebno.

Optimus djeluje na više web lokacija, stranicama e-trgovine WordPress nije strano, a u potpunosti je optimiziran za WordPress Mobile Apps i Windows Live Writer. Ubrzat će vašu web lokaciju bez da morate dodirivati ​​liniju koda. Dodatak nudi mnogo više, ali morat ćete se uključiti u premium verziju. Da biste vidjeli više, posjetite službenu stranicu u skladištu dodataka WordPress.

Dodajte lijeno učitavanje videozapisa i slika u WordPress

Jednom kada počnete dodavati puno video i slikovnog materijala na svoju web stranicu, očito je da će se početi učitavati sporije. Bez obzira odakle potječu, videozapisi i velike slike djeluju kao velika težina na vašoj web lokaciji i učinit će da posjetitelji čekaju puno duže nego što je potrebno za učitavanje cijelog sadržaja. S WordPressom to ne bi trebalo biti velika stvar i evo kako možete lako popraviti situaciju.

Ako znate svoj put oko PHP-a, postoji sjajan članak o dodavanju lijenog učitavanja slika i beskonačnog listanja koje su napisale naše kolege na Elegantne teme.

Ako ne, u sljedećih nekoliko redaka spomenut ćemo neke od najpopularnijih dodataka za lijeno učitavanje koji će biti brže učitavanje vaše web lokacije. I nećete trebati puno osim instalirati dodatak i postaviti ga u nekoliko brzih koraka.

Lijeno učitavanje za videozapise

CIJENA: besplatno

Lijeno učitavanje za videozapise

Ako imate puno Youtube i Vimeo videozapisa, razmislite o instaliranju ovog dodatka. Nakon što ga postavite, dodatak će staviti sliku na vaš videozapis i zbog toga će se vaša web stranica učitati mnogo brže. Nakon što posjetitelj pređe do videa, ta će se slika prikazati gumbom za reprodukciju. Nakon klika, videozapis će se početi učitavati i reproducirati. Jednostavni demo može se pregledati na web-mjestu programera.

WP YouTube Lyte

CIJENA: Besplatno

WP YouTube Lyte

Ovaj će dodatak svoj posao obaviti na brz i jednostavan način. Nakon što ga instalirate, samo dodajte vezu na svoj Youtube videozapis ili ga dodajte kratkim kodom. Možete odabrati između dodavanja normalnog videozapisa, popisa za reprodukciju ili samo zvuka iz odabranog videozapisa. Nakon toga će vaši Youtube videozapisi dobiti sliku preko njega koja će omogućiti lijeno učitavanje. Samo kliknite na sliku kako biste započeli vaš video ili audio.
Pogledajte demonstraciju na web lokaciji programera.

a3 Lijeno opterećenje

CIJENA: Besplatno
DEMO 1
DEMO 2

a3 Lijeno opterećenje

Ovaj je posvećen vašoj mobilnoj web lokaciji. Ako imate puno slika i / ili videozapisa koje želite pokazati posjetiteljima na mobilnim uređajima, pogledajte A3 Lazy Load. To će vam omogućiti da dodate lijeno učitavanje na svoje slike i videozapise, a dodatak će vam čak omogućiti da izaberete efekte prijelaza koji će se pojaviti kod korisnika dok pregledavaju sadržaj koji učitava.

U administrativnom području možete jednostavno uključiti i isključiti sadržaj koji želite lijeno učitati. Za one koji su uključeni, sadržaj će se učitavati samo u vrijeme kada posjetitelj pređe do tog dijela sadržaja.
Postoji lijepo prikazani demo koji sadrži 1000 slika – svaka se učitava samo kad se pomaknete do nje. Kako ovaj dodatak lijeni učitava videozapise, postoji i video demonstracija koju možete vidjeti klikom na gornju vezu.

BJ Lazi opterećenje

CIJENA: Besplatno

BJ Lazi opterećenje

Ako vam ne treba podrška za videozapise i želite samo da se vaše slike lijeno učitaju, provjerite ovaj WP dodatak. Jednom instaliran i postavljen zamijenit će vaše slike, sličice, slike Gravatara, pa čak i iframe s rezerviranim mjestom. Slično kao prethodno spomenuti dodatak učitava sadržaj samo kad korisnik dođe do njega.

Bilo da se radi o slikama ili videozapisima koje želite lijeno učitati, jedan od gore spomenutih dodataka pomoći će vam u sekundi. Svi su besplatni, tako da nema opravdanja da ne isprobate barem jedan od dodataka i vidite koliko će težina vaših ramena potrajati. Naravno, postoji puno drugih dodataka s istom funkcijom i slobodno ih možete pregledavati i isprobati.

Prikažite prije i poslije slika na atraktivan način

Sigurni smo da ste već vidjeli mnogo primjera prije / poslije slika. Ne znamo za vas, ali prvo što imamo na umu kada vidimo frazu “prije i poslije” je program vježbanja u fitnessu gdje ljudi pokazuju svoje tijelo prije i nakon programa vježbanja.

Ako razmislite, većina web stranica koristi jednostavan pristup da pokaže razlike – slikaju obje slike i smještaju ih jednu pored druge ili čak jednu iznad druge. Ako želite isti rezultat, ne biste čitali ovaj članak, jer već znate kako to učiniti.

Što ako vam kažemo da postoji vizualno zapanjujući način da se to riješi prije i poslije problema i to samo nadohvat ruke? Pa, tu je i nakon postavljanja, pohvalit ćete programere jer je konačni rezultat stvarno, stvarno super.

Dvadeset dvadeset

CIJENA: besplatno

Dvadeset dvadeset

Twenty Twenty naziv je ovog fantastičnog dodatka koji možete besplatno preuzeti u skladištu dodataka WordPress.

Dodatak će vam omogućiti da postavite jednu sliku iznad druge i pustit ćete da se igrate klizačem kako biste sakrili / otkrili sliku. Pogledajte demonstraciju i vidjet ćete o čemu pričamo.

U redu, sad, kada ste priključeni na ovaj mali dodatak, da vidimo kako stvoriti ovaj zapanjujući efekt. Iako je relativno lako stvoriti demo učinak, i dalje ćete morati znati svoj osnovni HTML. Idemo:

  1. Stvorite novi post ili otvorite postojeći
  2. Umetnite dvije slike u post. Ako radite u Visual Editoru, trebali biste vidjeti sliku jednu iznad druge. Ako radite u uređivaču teksta, trebali biste vidjeti kôd sličan ovom:
  3. 
    
    
    
  4. Unesite oznaku [dvadeset dvadeset] prije prve slike
  5. Nakon drugog unesite oznaku [/ dvadeset dvadeset]
  6. Trebali biste završiti s nečim takvim u svom uređivaču teksta:

    [Twentytwenty]
    
    
    
    [/ Twentytwenty]
    
  7. Provjerite jesu li vaše slike iste veličine kako biste postigli najbolje rezultate
  8. Pregledajte ili objavite svoj post i uživajte u vizualnom zapanjujućem prije i poslije slika

Kako stvoriti interaktivne slike – crtajte, dodajte opise i veze

Danas je teško pokrenuti web stranicu bez multimedije. Slike, videozapisi i glazba dio su praktički svake web stranice. Prosječni korisnik interneta uvelike ovisi o vizualnim podražajima, tako da morate voditi računa o vizualnim i interaktivnim dijelovima vaše web stranice. Članci sa slikama primaju 94% više pregleda od onih bez jednog. Također, već je poznata činjenica da multimedija na web stranicama može povećati povrat ulaganja u marketing sadržaja.

Nadamo se da nema potrebe da vas uvjeravamo da vodite računa o slikama na svojoj web lokaciji. Čak i ako ne koristite slike u člancima (što bi trebali), koristite istaknute slike, zar ne? Puno je dodataka za galeriju koji vam mogu pomoći upravljati slikama na vašem web mjestu WordPress, možete imati teme povezane s fotografijom, povezati Instagram sa svojom WordPress web stranicom i učiniti još mnogo toga. Ali što ako želite stvoriti više interaktivnog sadržaja?

Za početak bi vas moglo zanimati dodavanje efekta slike prije, koji će vaši korisnici obožavati. Ne zaboravite na Virtualnu stvarnost u WordPressu koja je sve popularnija nakon što je Automattic uveo VR u WordPress.com. Ipak, nešto nedostaje Je li moguće napraviti interaktivne slike s dijelovima koji se mogu kliknuti? Da, to je moguće, a mi ćemo vam pokazati koliko je to zabavno i lako.

Privući pozornost

CIJENA: Besplatno
DEMO

Prvo što će vam se ovaj dodatak svidjeti je da je on potpuno besplatan! Kao i bilo koji drugi dodatak iz WordPress spremišta, možete ga preuzeti, instalirati i aktivirati u nekoliko minuta. Besplatna verzija omogućit će vam rad s jednom interaktivnom slikom. Ako želite više, morat ćete se uključiti u PRO verziju, ali o tome ćemo govoriti kasnije.

Dodatak je osjetljiv i ne morate brinuti da li će interaktivne slike biti pravilno prikazane na bilo kojem uređaju. Ne samo da će se slika skalirati prema veličini zaslona, ​​već će raditi i u većini modernih i starijih preglednika (stolnih i mobilnih). Privucite pozornost koristi elemente platna kada se prikazuju u novim preglednicima, a oni će se vratiti na mape slika ako ih umetnete u stariju.

Značajke

Prije nego što prijeđete na primjer koji će vam pokazati koliko je moćan ovaj jednostavan dodatak, pogledajmo što možete očekivati ​​od Privlačenja pažnje:

  • crtati – Nakon što prenesete sliku, dobit ćete priliku crtati oblike na njoj. Odaberite bilo koji dio slike koji će se moći odabrati / kliknuti
  • boje – Prilagodite boje tako da možete prilagoditi žarišta vašem dizajnu web mjesta
  • Istaknite pokazivač miša iznad kursa – Pokažite drugi dio slike ako korisnik lebdi iznad odabranog dijela
  • Pokaži više informacija – Prikažite više informacija o odabranom dijelu slike
  • Idite na URL – Usmjerite korisnike na bilo koji URL ako kliknu na odabir

Nacrtajte postavke pažnje

Primjer – Interaktivna karta Havaja

Upotrijebit ćemo primjer s demo stranice kako bismo vam pokazali što točno možete učiniti s Draw pažnjom. Pa da vidimo kako izgleda interaktivna karta Havaja kako je stvorena s dodatkom.

Prvo što biste trebali učiniti je pronaći sliku havajskih otoka. Nakon što dođete do Privucite pažnju -> Uredi sliku, trebali biste prenijeti sliku u područje na desnoj bočnoj traci. Jednom kada se slika učita, zabava može započeti.

Ovdje možete odabrati boje za istaknute boje (boja, obrub, neprozirnost, itd.), Stilizirati okvir “više informacija” (slika, naslov, boja teksta itd.). Ako ne želite ručno odabrati svaku boju za sliku, brzo možete odabrati shemu boja s desne bočne trake.

Privucite pažnju - kako stvoriti interaktivne slike u WordPressu

Najčarobniji dio događa se u dvorištu Područja žarišta zaslon s postavkama. Ovdje ćete dobiti svoju sliku učitanu u punoj veličini. Sve što sada morate učiniti je pokrenuti crtanje i stvoriti novu žarišnu točku. Možete dodati koliko god želite bodova, što znači da možete stvoriti sveobuhvatni izbor koliko želite. Morate stvoriti što više vrućih mjesta, a svaka može imati vlastite postavke.

Dakle, u ovom primjeru trebali biste odabrati jedan od otoka. Odaberite naslov otoka, dodajte opis i dodatnu sliku koja će se prikazati nakon što korisnik pređe preko žarišta (desni dio GIF slike prikazan gore).

Trebali biste ponoviti postupak za svaki od otoka za koje želite da budu interaktivni. Nakon što pripremite svoje žarišne točke, samo kopirajte kratki kôd s desne strane. Zalijepite kratki kôd u post, stranicu, widget ili gdje god želite pokazati svoju novu interaktivnu kartu, i gotovi ste! Ako želite preusmjeriti korisnike na bilo koju drugu stranicu nakon što su kliknuli na odabir, samo je potrebno odabrati URL umjesto opisa. Lako kao to!

PRO verzija

Iako će besplatna verzija biti savršena ako vam treba samo jedna slika, PRO verzija omogućit će vam da na svojoj web lokaciji imate onoliko interaktivnih slika koliko želite. Iako će ovo biti najvažnije što treba uzeti u obzir, PRO inačica dobit će vam čak više od više slika.

Značajka mogućnosti rasporeda omogućit će vam prikazivanje više informacija o odabranim dijelovima slike. Na primjer, prikazat ćete informacije u okviru okvira za fotografije ili na jednostavnoj alatnoj traci koja će se pojaviti nakon što korisnik pređe preko odabranog dijela slike..

Postoji i dvadeset unaprijed zadanih paleta boja, tako da ne morate ručno prilagođavati svaku boju. PRO verzija koštat će vas 74 dolara za licencu za jedno mjesto, ali ako vam treba više interaktivnih slika, to će biti problem.

Kako regenerirati dodatne veličine slike

Relativno je lako registrirati nove veličine slike u vašoj WordPress temi. Nakon što ste rekli vašem sustavu kako velike slike trebaju biti, imenovali ih i odlučili kako ih obrezati, slobodno možete distribuirati slike gdje god želite. Ali što je sa starim slikama?

Ako ste koristili neku od tehnika koju smo vam pokazali, pripremili ste travnjak za nove slike. Bilo da upotrebljavate novo registrirane veličine slika za minijature posta ili dopuštate autorima da ih upotrebljavaju u postovima, nova pravila primjenjuju se samo na slike koje su prenesene nakon što ste unijeli promjenu u datoteci function.php. Da biste promijenili starije slike, predlažemo vam dodatak Regenerate Thumbnails.

Obnovi sličice:

CIJENA: Besplatno
  1. Ići Dodaci-> Dodaj novo
  2. Potražite “Obnovi sličice”
  3. Instalirajte i aktivirajte dodatak
  4. Dođite do Tools> Regen.Thumbnails

Ako želite promijeniti veličinu svih slika, jednostavno kliknite gumb “Obnovi sve sličice” i pričekajte da dodatak učini težak posao..

Kako regenerirati dodatne veličine slike

Ako želite vidjeti slike koje se mijenjaju ili ako želite promijeniti veličinu samo nekih slika, idite u svoju Biblioteku medija gdje ćete u odjeljku „Skupne radnje“ pronaći novu opciju i jednu pored svake slike u galerija.

Dobra stvar dodatka je da ne briše vaše originalne slike. Stvorit će nove veličine slika koje možete koristiti u svojoj temi, dok će vam originalne biti preostale za kasnije ili ručno brisanje ako odlučite da vam nisu potrebne..

To je to. Uživajte u svojim novim sličicama ili pogledajte Jednostavne veličine slike dodatak koji može učiniti istu stvar.

Uklonite atribute slike širine i visine pomoću jQuery

Kad dodajete slike u WordPress post, sustav automatski dodaje atribute visine i širine slici. To je obično dobra stvar, ali ponekad se neće svidjeti činjenica da svaka slika dobiva te atribute.

Ako želite ukloniti atribute točno na mjestu prijenosa, to možete učiniti jednostavnom funkcijom koju smo vam pokazali prošli put.

Ali ako ste pročitali članak ili sami isprobali funkciju, primijetili ste da ona utječe samo na slike prenesene nakon što je funkcija instalirana u vaš WP sustav. Ako već imate bazu podataka koja je puna postova sa umetnutim slikama, gore navedena funkcija neće vam biti od velike pomoći kod vaših starih atributa slike.

Budući da vjerojatno ne možete ručno proći svaku sliku i obrisati širinu i visinu jednu po jednu, vjerojatno vam je potrebna druga funkcija koja će ukloniti te atribute za sve postojeće slike ugrađene u vaše postove. U tom slučaju ste na pravom mjestu jer ćemo vam pokazati jednostavan način automatskog uklanjanja atributa slike širine i visine s nekoliko redaka jQuery koda. Nemojte se plašiti prethodnom frazom – čak ni ne morate znati što je jQuery, samo slijedite sljedeća tri koraka i bit ćete gotovi.

Uklonite atribute slike širine i visine:

  1. Otvorite header.php datoteku iz mape teme
  2. Kopirajte i zalijepite ovaj kôd bilo gdje između i oznake:
  3.  
  4. Spremi promjene

I gotovi ste! Kôd će učiniti svoju magiju nakon što otvorite post koji sadrži sliku te će s nje ukloniti oznake širine i visine.

Kako stvoriti prilagođene veličine slika u programu Media Uploader

Ako za prenos slika u WordPressu koristite Media Uploader, vjerovatno ste vidjeli brojne mogućnosti za slike. Između mnogih možete odabrati veličinu slike koju možete poslati u svoj članak.

Tu su opcije za umanjenje, srednje, velike i pune veličine, ali sve te opcije imaju unaprijed definirane vrijednosti. Dakle, ako koristite prilagođenu temu, češće nego ne, vi ste zalijepljeni promjenom širine i visine za svaku sliku iznova i iznova.

Zapravo, ne morate to činiti. Postoji uredna mala funkcija zvana add_image_size () koja je odličan alat za programere. Nakon ovog članka naći ćete ga i korisnog.

Recimo da vaša tema ima prilagođenu širinu i želite jednostavno umetnuti slike kako bi se savršeno uklopile. Recimo da je širina 666px (nećemo ulaziti u pitanje zašto ste postavili širinu na ovaj broj, to je vaš izbor). Da biste to učinili, morate dodati dodatni radio gumb za prijenos medija. Pomoću donjeg koda dodati ćete još jednu veličinu, koja je polovina izvorne.

  1. Otvorite datoteku svoje funkcije.php
  2. Kopirajte i zalijepite ovaj dio koda:
  3. funkcija custom_image_sizes () {
    add_image_size ('jedna veličina', 333, 333, istina);
    add_image_size ('druga veličina', 666, 666, istina);
    }
    
    dodavanje ('init', 'custom_image_s veličine');
    
    funkcija show_image_s veličine ($ veličine) {
    $ size ['one-size'] = __ ('Prilagođena veličina 1', 'isitwp');
    $ size ['other-size'] = __ ('Prilagođena veličina 2', 'isitwp');
    vratiti $ veličine;
    }
    
    add_filter ('image_size_names_choose', 'show_image_s veličine');
  4. Spremi promjene
  5. Pokušajte dodati sliku iz programa za prijenos medija gdje biste trebali vidjeti svoje nove veličine u odjeljku “Postavke prikaza privitka”

Napravite automatsku snimku bilo koje web stranice i objavite je kao sliku u svom postu

Ako želite prikazati sličicu web stranice, morate otići na web mjesto, ispisati zaslon ili napraviti snimku zaslona s programom ili dodatkom preglednika. Tada biste trebali izmijeniti sliku, smanjiti je na odgovarajuću veličinu i poslati je na svoj WordPress kako biste u postu mogli koristiti snimku zaslona.

Ako ne morate svaki put snimati taj snimak, neće biti problema, ali ako češće koristite snimke zaslona različitih web stranica, rado ćete čuti da postoji sjajna funkcija koja će štedi vam vrijeme i živce.

U ovom ćemo dijelu vodiča prikazati kompletnu funkciju koja stvara kratki kôd koji možete koristiti za snimanje bilo koje web stranice koju želite.

Stvorite automatsku snimku zaslona:

  1. Otvorite funkcije.php
  2. Kopirajte i zalijepite sljedeći kôd:
  3. funkcija wp_webscreen ($ atts, $ content = NULL) {
    ekstrakt (shortcode_atts (array (
    "snap" => 'http://s.wordpress.com/mshots/v1/',
    "url" => 'http://www.firstsiteguide.com',
    "alt" => "wploop",
    "w" => '600', // širina
    "h" => '450' // visina
    ), $ atts));
    
    $ img = ''. $ alt. '„;
    vratiti $ img;
    }
    add_shortcode ("ekran", "wp_webscreen");
  4. Promijenite zadane varijable u nizu
  5. Spremi promjene

Ova funkcija stvara kratki kôd koji lako možete koristiti bilo gdje na web stranici WordPress. Bilo da želite, primjerice, u postu, widgetu bočne trake ili podnožju upotrijebiti snimku zaslona web stranice, jednostavno c / p kratkom kôdu na pravom mjestu:

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

Ono što je sjajno u ovoj funkciji je to što sliku sprema kao dinamični URL, što znači da će se, nakon što stvorite snimak s kratkim kodom, ubuduće automatski osvježiti i uvijek prikazati trenutni izgled web lokacije naveden u kratkom kodu..

Imajte na umu da parametre kratkog koda možete mijenjati izravno iz njega. Ne morate mijenjati kôd u datoteci function.php ako želite snimiti drugi URL ili snimiti fotografiju u drugoj dimenziji.

Primjer:

Recimo da želite napraviti Googleovu snimku zaslona i povećati je 200 × 400 piksela:

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

Sve možete učiniti još jednostavnijim ako kratki kôd spremite u gumb tako da ga možete umetati u post jednim klikom na gumb.

Zaključak

Ne morate instalirati sve dodatke i funkcije koje smo spomenuli da biste poboljšali slike na svojoj web stranici WordPress. Ali nadamo se da ste pronašli barem nekoliko savjeta koji će vam pomoći da optimizirate slike ili ih poboljšate na bilo koji način.

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