Hogyan javíthatjuk a képeket a WordPress programban

Hogyan javíthatjuk a képeket a WordPress programban


Hosszú ideje óta a képek túl nagyok voltak ahhoz, hogy betöltsék az internetet. Manapság a webhelyek nem létezhetnek nélkülük. Annak ellenére, hogy az internet sebessége drámai módon megnőtt az évek során, elengedhetetlen, hogy vigyázzon a blogján lévő képekre.

Csak azért, mert a képek feltöltése a webhelyére könnyű, ez nem azt jelenti, hogy ezt előkészítés nélkül meg kellene tennie. A nem optimalizált képek valójában sok szempontból károsíthatják webhelyét; attól kezdve, hogy befolyásolja a látogatók gondolkodási formáját Öntől a webhely sebességéig és a SEO rangsorolásához. Ha még mindig nem gondolt erre, akkor itt vagyunk, hogy megmutassuk Önnek a képek javításának számos módját a WordPress programban.

Ebben az útmutatóban megmutatjuk Önnek:

  • Hogyan optimalizálhatjuk a képeket a WordPress számára a webhely felgyorsítása és a SEO javítása érdekében
  • A WordPress JPEG-képek tömörítési módjának megváltoztatása
  • A WordPress legnépszerűbb képoptimalizáló pluginjei
  • Adjon hozzá lusta rakodást a videókhoz és a képekhez
  • A képek előtti és utáni megjelenítése vonzó módon
  • Hogyan készíthetünk interaktív képeket – rajzolhat, leírásokat és linkeket adhat hozzá
  • További képméret regenerálása
  • Távolítsa el a szélesség és a magasság képjellemzőit a jQuery segítségével
  • Hogyan hozhat létre egyedi képméreteket a Media Uploader alkalmazásban
  • Készítsen automatikusan képernyőképet bármely webhelyről, és tegye közzé azt képként a bejegyzésében

Contents

Hogyan optimalizálhatjuk a képeket a WordPress számára, hogy felgyorsítsuk webhelyünket és javítsuk a SEO-t

Miért optimalizálja a képeket a WordPress számára? Ha erőfeszítéseket tesz, a következőkre számíthat:

  • Gyorsabb webhely
  • Jobb SEO
  • Kisebb biztonsági mentések
  • Kevesebb sávszélesség-használat
  • Boldogabb felhasználók

Tudnia kell azt is, hogy a képek optimalizálásához különféle szakaszok vannak. Gondoskodhat a képekről még mielőtt feltöltené azokat egy blogba, vagy megteheti ezt a feltöltés után.

Gyorsan tesztelje a képeket a webhelyén

Mielőtt elkezdené az optimalizálást, gyorsan ellenőrizheti webhelye sebességét és teljesítményét. A listában szereplő eszközök bármelyikének használatával gyorsan megismerheti webhelyének képeit.

Szeretjük használni GTmetrix amely még azokat a pontos képeket is megjeleníti, amelyek miatt a webhely lassabban töltődik be.

Optimalizálja a képeket a WordPress számára a feltöltés előtt

Blogolás közben a legtöbb ember nem hozza meg a szükséges lépéseket a képeik optimalizálása érdekében. Általában az emberek csak fényképeket készítenek a fényképezőgépről vagy okostelefonjukról, letöltenek az internetről vagy készítenek fotókat számítógépes szoftver segítségével.

Nem gondolkodnak a formátumokról, a kép méretéről és a fájlnevekről. Ha a kép jól néz ki, csak azt feltételezik, hogy készen áll az internetre. Ha nem ellenőrzi a képeit, akkor katasztrófa felé tart.

A képek átméretezése

A képek átméretezése

Ne töltsön fel képeket a WordPress webhelyére, mielőtt ellenőrizné az egyes képek szélességét és magasságát. Ha például legfeljebb 700 képpont képet jelenít meg, akkor valóban nincs szükség szélesebb kép feltöltésére. Ha így tesz, akkor nagyobb fájl lesz, amely lassabbá teszi a webhelyet, míg a kimenet ugyanaz lesz. A WordPress további méretet fog létrehozni, de ez nem azt a kifogást, hogy ne készítse elő a képeket a feltöltés előtt.

A képek átméretezése gyors és egyszerű. Számos ingyenes eszköz, például a Microsoft Paint, segít Önnek abban. Még ingyenes online eszközöket is megtalálhat a képek átméretezéséhez, például Könnyű átméretezés.

A kép mérete témánként változhat. Ha nem biztos benne, melyiket kell használni, nézzen át közelebbről a WordPress témához, vizsgálja meg a képeket, keressen dokumentációt vagy kérjen támogatást.

Változtassa meg a minőséget

A méretek megváltoztatása után fontolóra kell vennie a képek minőségének megváltoztatását. A szoftvertől függően a képek minőségének különböző módjai vannak. Például a mindig népszerű Photoshop lehetővé teszi képek mentését az interneten. Ez az opció lehetővé teszi a képek alacsonyabb minőségű mentését, de a webhelyére optimalizálják.

Továbbá, ha úgy dönt, hogy JPEG formátumban menti a képet, akkor a Photoshop megkéri, hogy válassza a minőségi szintet. Ebben az esetben a minőség csökkentése 12-ről 8-ra drasztikusan csökkenti a kép méretét, míg a minőségbeli különbség nem lesz olyan nagy.

Ha még mindig nem használ szoftvert a képek minőségének megváltoztatására, kipróbálhatja az ingyenes internetet Apró PNG eszköz. Csak tölts fel egy képet, és nézd meg, milyen különbséget tud tenni.

Válassza ki a megfelelő formátumot

A méret és a minőség változása után is fontolóra kell vennie a formátum megváltoztatását. Először is, ha a megfelelő formátumot választja ki, akkor néhány kilobájtot vehet le egy képből, ha nem több.

Képformátumok

Az általános szabály nagyon egyszerű. Ha van fényképe, készítsen JPEG formátumba. Ha van emblémája, vektorképe vagy nagyon egyszerű számítógépes grafikája, lépjen a PNG-vel. Ha valóban kicsi képe van színátmenetek nélkül, vagy szeretne egy olyan egyszerű animációt mutatni, mint amilyen a fentebb látható, akkor használhatja a GIF fájlt. Általában a PNG-képek meglehetősen nagyobbak, mint a JPEG-képek, és előnyös lehet a formátum megváltoztatása.

Sok esetben a képek újraformázása nem okoz jelentős különbségeket a minőségben, bár elvárható a méretbeli különbség. Legközelebb, mielőtt PNG-képet tölt fel, készítsen egy felvételt, és próbálja meg JPEG formátumban menteni a különbség megjelenítéséhez. További részletekért kérjük, olvassa el a különbség a PNG, JPEG, GIF és SVG között.

Vigyázzon a fájlnevekre

Noha a fájlnév jelentéktelennek tűnhet, ez valójában valami, amit nagyon tudatában kell lennie. A képfájl neve értékes információt tartalmaz a SEO számára. Ha azt szeretné, hogy mások megtalálják az Ön képét a Google-on és más keresőmotorokban, akkor adjon neki egy megfelelő nevet.

Javasoljuk, hogy nevezze el a képeket szóköz nélkül. Ne felejtse el megadni a kulcsszavakat, ha azt akarja, hogy az oldal és a kép rangsorolódjon. Például, ha képet tölt fel a kaliforniai Ferrari-ról, akkor a fájlnévnek „ferrari-california.jpg” kell lennie. Ha SEO beépülő modult használ a WordPresshez, akkor már tudja, hogy ellenőrzi az alt tagjeinek kulcsszavait. Igen, nagyon fontos a megfelelő képnév.

Optimalizálja a képeket a WordPress számára a feltöltés után

Miután elkészítette a képeket a számítógépen, folytathatja a feltöltést. Remélhetőleg a képek csak a megfelelő méretű és minőségűek. Ellenőrizte, hogy a formátum és a fájlnév helyes-e. A feltöltés után a WordPress további információkat kér. Ne hagyja ki a metainformációkat; töltse ki a képeivel kapcsolatos adatokat, hogy könnyen rendezze őket és felkészülhessen a SEO-ra.

Cím, leírás, alt szöveg és felirat

Miközben gondoskodik a műszaki jellemzőkről, ne felejtse el elfelejteni a SEO-t. Mindig adja hozzá a címet és a leírást a médiához. Ez elősegíti a WordPress médiakezelését, és a jobb SEO fejlesztése érdekében is segít. Ezenkívül ne felejtse el az alt-címkét, amely azoknak a látogatóknak jelenik meg, akik nem látják megfelelően az Ön képét. Ez nem csak a felhasználók számára hasznos, hanem a SEO fejlesztésében is. Az Ön oldala jobban rangsorolódik, és a felhasználók könnyebben megtalálhatják az Ön új képeit.

Bár nem kell állandóan feliratok, feltétlenül adjon hozzá képeket, amelyek további magyarázatot igényelnek (például képernyőképeket).

Képek szerkesztése a WordPress segítségével

Ha rájössz, hogy egy képet még tovább kell szerkeszteni, akkor tudnia kell, hogy a WordPress lehetővé teszi ezt még a fájl feltöltése után is. Módosítsa a képek elforgatását, kivágását és méretezését már feltöltötte. Még csak indexképet vagy az összes többi méretet is szerkesztheti. A WordPress natív szerkesztője nagyon egyszerű, de időről időre takaríthat meg.

Az összes miniatűr újragenerálása

A korábbi technikák többsége új képfájlokkal segít Önnek, amelyeket még feltölteni szeretne. De mi van, ha több száz, vagy akár több ezer fájl van már feltöltve a WordPress webhelyére? Ne aggódj; továbbra is optimalizálhatja ezeket a képeket, és megváltoztathatja azok méretét.

A gyors javítás érdekében érdekelhet egy ingyenes Regenerate Thumbnails plugin, amelyet több mint egymillió felhasználó használt. Ha több ellenőrzést szeretne a képek felett, akkor nézd meg a képoptimalizálás legjobb WordPress-bővítményeit, amelyeket a cikk következő soraiban mutatunk be..

További képméret regenerálása

Használjon WordPress-bővítményeket

Természetesen több tucat WordPress plugin található, amelyek segítségével optimalizálhatja a webhelyén található képeket. Görgessen lefelé, hogy megnézze a képek optimalizálásához a legjobb WordPress-bővítményeket.

Lusta Töltsön be képeket, ha szükséges

Időnként a képek minősége sokkal fontosabb lesz, mint a méretük. Ez elsősorban a fotósokra vonatkozik, akik azt akarják, hogy fotóik csúcsminőségűek legyenek. Nem kockáztathatják a fájlok méretének vagy minőségének csökkentését. Ez még nem azt jelenti, hogy el kell felejtenie az optimalizálást. A képek optimalizálásához a WordPress számára ebben az esetben fontolóra kell vennie a lusta betöltést.

A lusta betöltés olyan technika, amely csak akkor tölti be a képeket, amikor a felhasználóknak szükségük van rájuk (görgessen hozzájuk). Például, ha egy cikkbe húsz kiváló minőségű fényképet töltött fel, akkor ezek óriási mértékben lelassítanák webhelyét. De ha lustán betölti a képeket, a cikk villámgyors lenne, és a képek csak akkor kerülnek betöltésre, amikor erre szükség van – abban a pillanatban, amikor a felhasználó hozzájuk kerül.

Legyen reagáló képeket

Bár a WordPress témák többsége érzékeny, ez nem feltétlenül jelenti azt, hogy képei is reagálnak. Mivel nem akarja, hogy egy nagy kép kis képernyőn töltsön be, regisztrálnia kell további képméreteket a webhelyén. Ha a témája nem használ érzékeny képeket, fontolja meg a szakember felvételét a munkához – ez nem olyan egyszerű, mint amilyennek tűnhet.

Optimalizálja a képeket a közösségi média számára

Ha szeretné biztosítani, hogy képei jól néznek ki a közösségi médiában, akkor további lépést kell tennie, és optimalizálnia kell a metacímkéket és a sémajelölést.

Ha olyan SEO bővítményt használ, mint a Yoast, akkor ne felejtse el ellenőrizni a beállításokat. Például, a Yoast lehetővé teszi néhány, a közösségi médiával kapcsolatos dolog felállítását. Tehát keresse meg a SEO -> Közösségi elemet, és írja be az információkat a Facebook, a Twitter, a Google+ és a Pinterest oldalra.

Ha többet szeretne, és optimalizálni szeretné a képeket további közösségi média-webhelyek számára, nézd meg WPSSO – Pontos metacímkék + sémajelölés a közösségi megosztás optimalizálásához és a SEO beépülő modulhoz.

A WordPress JPEG-képek tömörítési módjának megváltoztatása

Ha egy csomó JPEG képet tölt fel a WordPress webhelyére, akkor valószínűleg észrevette, hogy eredeti minőségük romlik. Ha azon tűnődött, vajon a WordPress hibáztatható-e, akkor most megkapja a válaszát – igen, az!

Miután feltöltött egy képet JPEG formátumban, A WordPress automatikusan megváltoztatja a tömörítést és úgy dönt, hogy el akarja veszíteni a képet a minőség miatt. Pontosabban: a WP 90% -os tömörítést használ a JPGE-jein. Nagyon nagyszerű, ha képeit csak ott lehet miniatűrökként felhasználni vagy bejegyzésben megjeleníteni, de ha fényképeit feltölti, azt akarja, hogy azok a lehető legjobbak legyenek, igaz?

Szerencsére csak egy kódsorra lesz szüksége ennek megváltoztatásához.

A JPEG-képek tömörítésének leállítása:

Ha nem akarja, hogy a JPEG-képek tömörítve legyenek, akkor egyszerűen másolja be és illessze be a következő kódot a function.php fájlba:

add_filter ('jpeg_quality', függvény ($ arg) {return 100;});

Ne felejtse el menteni a változtatásokat, és készen áll új képek feltöltésére.

Másrészt a képek nem feltétlenül olyan nagy ügyek az Ön számára. Tehát érdemes lehet még tömörítve őket, és időt takaríthat meg a webhely betöltésekor. Ha megváltoztatja a kódsor utolsó számát, akkor az újonnan feltöltött képek minősége is megváltozik.

A JPEG-képek tömörítése még nagyobb:

Minél kisebb a szám, annál több képet tömörít. Például ezeknek a JPEG fájloknak a még tömörítéséhez a következő kódra lesz szüksége:

add_filter ('jpeg_quality', függvény ($ arg) {return 80;});

Ne felejtsd el; Az alapértelmezett tömörítési szint 90.

Fontos: Ez csak azokra a képekre lesz hatással, amelyeket feltölt, miután beillesztette a kódot a function.php-be. A már tárolt képek méretének és minőségének megváltoztatásához beépülő modulra van szüksége. További tudnivalók a képméret helyreállításáról.

A WordPress legnépszerűbb képoptimalizáló pluginjei

A cikk elején arról beszéltünk, hogyan lehetne optimalizálni a képeket a WordPresshez, hogy felgyorsítsák webhelyét és javítsák a SEO-t. Mint látta, néhány különféle módszer használható. Fontos, hogy vigyázzon a képekre még mielőtt feltöltené azokat a blogjába. De amikor a képek már vannak az oldalon, akkor lehetetlenné válhat minden kép külön-külön újraoptimalizálása, majd ismételt feltöltése..

Ne aggódj; senki sem várja el, hogy ezt tegye meg. Maradjon velünk a következő percben, miközben megmutatjuk a WordPress legnépszerűbb képoptimalizáló pluginjait.

A képek optimalizálása érdekében ki kell választania a plugint a listából. Be kell állítania és kiválasztania kell azokat a dolgokat, amelyeket a plugin érted fog tenni. Ezután pihenhet és delegálhatja a munkát a választott pluginre, miközben elkezdheti a médiafájlok rendezését..

A következő pluginek segítségével tömörítheti a képeket a WordPress bármely webhelyén. Ezek gyorsabbá teszik a webhely betöltését, és végül segítenek a SEO fejlesztésében.

WP Smush

ÁR: Ingyenes

Több mint 700 000 aktív telepítéssel a WP Smush-nek a WordPress egyik legjobb képoptimalizáló pluginjának kell lennie. Különböző tömörítési technikákkal gyorsan optimalizálhatja a képeket. A képek tömörítésével a WP Smush segítségével az a nagyszerű, hogy a képek nem veszítik el a minőségüket. Nem hisz nekünk? Tesztelje a plugint.

Amikor a WordPress képeinek előkészítéséről beszéltünk, megemlítettük, hogy az átméretezés az optimalizálási folyamat kritikus része. Ezzel a bővítménnyel nem kell aggódnia, mivel a WP Smush lehetővé teszi a maximális méretek beállítását. Ezt követően az összes nagyobb kép automatikusan kicsinyül, mielőtt felveszi őket a könyvtárba.

Ez a fantasztikus bővítmény JPEG, GIF és PNG fájlokkal használható. Az összes könyvtárral együtt működik, automatikusan gondoskodik a mellékletekről, sőt több oldalon is működik. Az egyes képeket manuálisan is kezelheti, vagy ötven tömegesen szerkesztheti. Ha még jobb eredményeket és további lehetőségeket szeretne, nézd meg a WP Smush PRO szoftvert.

EWWW Image Optimizer

ÁR: Ingyenes

A vicces név mögött található a WordPress egyik legnépszerűbb képoptimalizáló pluginje. Csakúgy, mint az előzőekben, az EWWW Image Optimizer képes tömöríteni a képeket anélkül, hogy befolyásolná azok minőségét. Amikor arra gondolsz, hogy a plugin másodpercek alatt felgyorsíthatja webhelyét, akkor már készen áll a letöltésre. Ha ezt megteszi, akkor tömegesen optimalizálja a képeket, és olyan galériák, mint a GRAND FlaGallery, a NextCellent és a NextGEN, még a saját Tömeges optimalizálási oldalaikat is megkapják..

A WordPress WP_Image_Editor osztályát használó összes kép lesz automatikusan optimalizált, miközben manuálisan megmunkálhatja a varázst az összes többi oldalon. Tetszik, hogy kiválaszthatja az optimalizálni kívánt mappákat. További részletekért és arról, hogy mely pluginek használják az osztályt, kérjük, nyissa meg a hivatalos személyt EWWW Image Optimizer oldal a WordPress lerakaton.

JPEG és PNG képek tömörítése

ÁR: Ingyenes

Apró tömörített képek

Ha a WordPress emblémával ellátott aranyos kis panda nem készteti, hogy többet megtudjon erről a pluginról, nem tudjuk, mi lesz. És ha a panda ismerősnek tűnik, az azért van, mert ugyanaz az, amely segít a képek tömörítésében a TinyPNG webhelyen. Igen, úgy tűnik, az állat sokoldalúbb, mint gondoltuk eredetileg. De összpontosítsunk a pluginra.

Ha ezt a bővítményt használja, a Panda automatikusan optimalizálja a képeit. Minden alkalommal, amikor új feltölt, a bővítmény átveszi és elvégzi a munkáját. Ennek ellenére optimalizálhatja az egyes képeket, vagy tömegesen is megteheti, csak a médiakönyvtárba lépve.

A JPEG és PNG képek tömörítése még az animált PNG fájlokat is támogatja, tökéletesen működik egy multisite oldalon, WooComerce kompatibilis, és nem lesz problémája a WP Offload S3.

A beépülő modul nagyszerűsége az, hogy lehetővé teszi az összes kép maximális szélességének és magasságának a megadását. Ha aggódik amiatt, hogy mi fogja végrehajtani a metaadatokat, ne aggódjon; a panda megőrzi az összes információt.

Nincsenek fájlméret-korlátozások, beállíthat egy műszerfal-modult, és ez még a WordPress mobilalkalmazással is működik. Mindezek miatt a JPEG és a PNG fájlok tömörítése több mint 100 000 aktív telepítéssel rendelkezik, és érdemel helyet a WordPress képoptimalizálási beépülő moduljainak listájában..

Imsanity

ÁR: Ingyenes

Imsanity

Noha ennek a pluginnak a borítója elriaszthat téged, vegye be egy pillanatra, és nézzen meg mindenféle Imsanity-t. Ó, még a plugin neve őrülten hangzik, igaz? Miután rendben van a plugin nevével, látni fogja, hogy sok mindent kínál.

Az Imsanity képes automatikusan méretezni a képeket, lehetővé teszi a maximális méretek beállítását, sőt még tömeges átméretezési lehetőséget is kínál. Ez akkor fontos, ha már több száz olyan képe van a blogodban, amelyeket optimalizálni kell.

Ez az ingyenes plugin remek lehetőség, ha nem akar sokat küzdeni a plugin beállításaival. Mindössze az Imsanity telepítése és aktiválása, néhány beállítás beállítása és elfelejtés; saját maga kezeli a képoptimalizálást.

Imádtuk azt a lehetőséget, amely lehetővé teszi a BMP-képek JPG-formátumba konvertálását. Csak abban az esetben, ha van egy csomó BMP-fájl, amelyet tévesen töltöttek fel egy ideje, ez egy életmentő.

ShortPixel Image Optimizer

ÁR: Ingyenes

ShortPixel Image Optimizer

Több mint 30.000 aktív telepítéssel a ShortPixel Image továbbra is az egyik legnépszerűbb képoptimalizáló plugin a WordPress számára. A beépülő modul funkciókkal teli, és elengedhetetlen az olyan webhelyek számára, amelyek sok képet tartalmaznak az optimalizáláshoz.

A ShortPixel Image Optimizer nem csak a JPG, PNG, GIF és PDF dokumentumokat optimalizálja az Ön számára, hanem lehetővé teszi konvertáljon bármilyen JPEG, PNG vagy GIF képet WebP-re. A bővítmény jól működik a többi galéria-bővítménnyel, és nem érdekli, ha webhelye HTTP-t vagy HTTPS-t használ. Ez lehetővé teszi az EXIF ​​adatok eltávolítását a képektől (amit a fotósok szeretni fognak).

A plugin felismeri a már optimalizált képeket, így szükség esetén kihagyja azokat. Engedélyezheti vagy tilthatja az automatikus optimalizálást, és még sok mindent megtehet ezzel a fantasztikus bővítménnyel. Nézze meg a tároló hivatalos oldalát az összes szolgáltatás megtekintéséhez.

Optimus – WordPress Image Optimizer

ÁR: Ingyenes

Optimus

Csakúgy, mint a korábban említett plugin, az Optimus optimalizálja a képeit a WordPress számára, és ezt megteszi anélkül, hogy befolyásolja a képek minőségét. Hagyja, hogy a plugin automatikusan dolgozzon, vagy kikapcsolhatja az opciót, és csak akkor optimalizálja a képeket, ha szükséges.

Az Optimus többoldalúan működik, idegen a WordPress e-kereskedelmi webhelyein, és teljesen optimalizálva van a WordPress Mobile Apps és a Windows Live Writer számára. Ez felgyorsítja webhelyét anélkül, hogy meg kellene érintenie egy sor kódot. A plugin sokkal többet kínál, de be kell választania a prémium verziót. További információkért keresse fel a WordPress plugins tároló hivatalos oldalát.

Adjon hozzá lusta rakodást videóidhoz és képeihez a WordPress alkalmazásban

Miután elkezdett hozzáadni sok video- és képanyagot a webhelyére, nyilvánvaló, hogy lassabban kezd el betölteni. Nem számít, ahonnan jönnek, a videók és a nagy képek nagy súlyúak lesznek webhelyén, és a látogatók sokkal hosszabb ideig várnak, mint amennyire az összes tartalom betöltéséhez szükségük lenne. A WordPress használatával ez nem lehet nagy ügy, és itt lehet hogyan javíthatja a helyzetet.

Ha ismeri a PHP környékét, van egy nagyszerű cikk a képek lusta betöltésének és a végtelen tekercsnek a hozzáadásával, amelyet kollégáink írtak a Elegáns témák.

Ha nem, a következő néhány sorban megemlítjük a legnépszerűbb lusta betöltő bővítményeket gyorsabbá teheti webhelye betöltését. És nem is kell sokat tennie, csak telepítenie kell egy plugint és beállítania kell néhány gyors lépésben.

Videók lusta terhelése

ÁR: ingyenes

Videók lusta terhelése

Ha sok Youtube és Vimeo videó van, érdemes fontolóra vennie a plugin telepítését. Miután beállította, a plugin képet fog elhelyezni a videódon, és ezért a webhely sokkal gyorsabban töltődik be. Miután a látogató görgetett egy videóhoz, ez a kép egy „lejátszás” gombbal jelenik meg. Egy kattintás után a videó elkezdi betölteni és lejátszani. Egy egyszerű bemutató megtekinthető a fejlesztő webhelyén.

WP YouTube Lyte

ÁR: Ingyenes

WP YouTube Lyte

Ez a bővítmény gyorsan és egyszerűen elvégzi a munkáját. A telepítés után csak adjon hozzá egy linket a Youtube-videóhoz, vagy használja a rövid kódot. Választhat a normál videó, a lejátszási lista vagy csak a kiválasztott videóból származó audió hozzáadása között. Ezt követően a Youtube-videóidban egy kép lesz rajta, amely lehetővé teszi a lusta betöltést. Csak kattintson a képre, hogy elinduljon a video vagy a hang.
Tekintse meg a bemutatót a fejlesztő webhelyén.

a3 lusta terhelés

ÁR: Ingyenes
1. DEMO
DEMO 2

a3 lusta terhelés

Ezt a mobil webhelyet szentelte. Ha nagyon sok olyan kép és / vagy videó van, amelyet mobil eszközökön szeretne megjeleníteni a látogatók számára, akkor nézd meg az a3 Lazy Load-ot. Ez lehetővé teszi, hogy lusta töltést adjon a képekhez és a videókhoz, és a plugin lehetővé teszi az átmeneti effektusok kiválasztását is, amelyek a felhasználók számára jelennek meg, miközben görgetik a betöltött tartalmat..

Az adminisztrátor területen könnyen be- és kikapcsolhatja azt a tartalmat, amelyet lustán betölteni szeretne. A bekapcsolt felhasználók számára a tartalom csak akkor kerül betöltésre, amikor a látogató a tartalom ezen részére görget.
Van egy szépen bemutatott demo, amely 1000 képet tartalmaz – mindegyiket csak akkor tölti be, ha rákattint rá. Mivel ez a plugin lusta videókat tölt be, van egy videó bemutató, amelyet a fenti linkre kattintva láthat.

BJ Lazy Load

ÁR: Ingyenes

BJ Lazy Load

Ha nincs szüksége videó támogatásra, és csak azt akarja, hogy képei lusta módon letölődjenek, ellenőrizze ezt a WP-bővítményt. A telepítés és a beállítás után helyettesíti a képeket, a miniatűröket, a Gravatar képeket és még az iframe kereteket egy helyőrzővel. A korábban említett bővítményhez hasonlóan csak akkor tölti be a tartalmat, ha a felhasználó hozzáér.

Függetlenül attól, hogy képeket vagy videókat lustálni szeretne, az egyik fent említett plugin másodperc alatt segít. Mindegyik ingyenes, tehát nincs mentség arra, hogy nem próbálunk ki legalább egy plugint, és megnézhetjük, hogy mekkora a váll súlya. Természetesen sok más plugin is ugyanazzal a funkcióval rendelkezik, és szabadon böngészhet és kipróbálhatja mindegyiket.

A képek előtti és utáni megjelenítése vonzó módon

Biztosak vagyunk abban, hogy már látott sok példát a képek előtti / utáni megjelenítésére. Nem tudok rólad, de az első dolog, amire gondolunk, amikor az „előtte és utána” kifejezést látjuk, egy fitnesz edzésprogram, ahol az emberek megmutatják testüket egy edzésprogram előtt és után.

Ha gondolkodik, a legtöbb webhely egyszerű megközelítést alkalmaz a különbségek bemutatására – mindkét képet elkészíti, és egymás mellé, vagy akár egymás fölé helyezi őket. Ha ugyanazt az eredményt szeretné, akkor nem olvasta ezt a cikket, mert már tudja, hogyan kell ezt csinálni.

Mi lenne, ha azt mondanánk, hogy van egy vizuálisan lenyűgöző megoldás erre a probléma előtti / utáni megoldáshoz, és csak kéznél van? Nos, van, és a telepítés után dicsérni fogod a fejlesztőket, mert a végeredmény nagyon-nagyon jó.

Huszonhét

ÁR: ingyenes

Huszonhét

A Twenty Twenty neve ennek a fantasztikus pluginnek, amelyet ingyenesen letölthet a WordPress plugin-tárolóból.

A plugin lehetővé teszi, hogy az egyik képet a másikra helyezze, és csúszkával játszhasson, így elrejtheti / feltárhatja a képet. Kérjük, nézze meg a bemutatót, és látni fogja, miről beszélünk.

Oké, most, amikor bekapcsolod ezt a kis bővítményt, lássuk, hogyan lehet ezt a lenyűgöző hatást létrehozni. Annak ellenére, hogy viszonylag könnyű visszaállítani a demohatást, továbbra is meg kell ismernie az alap HTML-t. Gyerünk:

  1. Hozzon létre új hozzászólást, vagy nyissa meg a meglévőt
  2. Helyezzen be két képet az üzenetbe. Ha Visual Editor-ban dolgozik, akkor a képet a másik felett kell látnia. Ha szövegszerkesztőben dolgozik, akkor ehhez hasonló kódot kell látnia:
  3. 
    
    
    
  4. Írja be a [twentytwenty] címkét az első kép előtt
  5. A második után írja be a [/ twentytwenty] címkét
  6. Valami ilyesmire kell a szövegszerkesztőben:

    [Twentytwenty]
    
    
    
    [/ Twentytwenty]
    
  7. A legjobb eredmények elérése érdekében ellenőrizze, hogy a képek azonos méretűek-e
  8. Tekintse meg előzetesen vagy tegye közzé a bejegyzését, és élvezze látványos képeit a képek előtt és után

Hogyan készíthetünk interaktív képeket – rajzolhat, leírásokat és linkeket adhat hozzá

Manapság nehéz webhelyet futtatni multimédia nélkül. A képek, videók és zene gyakorlatilag minden webhely részét képezik. Egy átlagos internetfelhasználó nagymértékben függ a vizuális ingerektől, ezért gondoskodnia kell a webhely vizuális és interaktív részeiről. Képeket tartalmazó cikkeket kapnak 94% -kal több megtekintés mint azok nélkül. Ezenkívül már ismert tény, hogy a webhelyek multimédiája fellendítheti a tartalommarketing megtérülését.

Reméljük, hogy nincs rá szükség arra, hogy meggyőzze a webhelyén található képek gondozását. Még akkor is, ha nem használ képeket cikkeiben (melyeket kellene), kiemelt képeket használ, ugye? Nagyon sok galéria-beépülő modul segíti a képek kezelését a WordPress-webhelyen, fényképezéssel kapcsolatos témákat vehet fel, csatlakoztathatja az Instagram-ot a WordPress-webhelyhez, és még sok minden mást tehet. De mi lenne, ha interaktív tartalmat szeretne létrehozni?

Először is érdekli, hogy hozzáadhat-e olyan előzetes képet, amelyet a felhasználók imádni fognak. Ne felejtsd el a WordPress virtuális valóságát, amely egyre népszerűbb, miután az Automattic bemutatta a VR-t a WordPress.com-on. Mégis hiányzik valami. Lehetséges interaktív képeket készíteni kattintható részekkel? Igen, ez lehetséges, és hamarosan megmutatjuk, milyen szórakoztató és könnyű ez.

Felhívni a figyelmet

ÁR: Ingyenes
DEMÓ

Az első dolog, ami tetszen a pluginnél, az teljesen ingyenes! Csakúgy, mint a WordPress tárház bármely más pluginjéhez, néhány perc alatt letöltheti, telepítheti és aktiválhatja azt. Az ingyenes verzió lehetővé teszi, hogy egy interaktív képpel dolgozzon. Ha többet szeretne, akkor be kell választania a PRO verziót, de erről később beszélünk.

A plugin reagál, és nem kell aggódnia, hogy az interaktív képek bármilyen eszközön megfelelően megjelenjenek. Nem csak hogy a kép a képernyő méretének megfelelően méretezhető, hanem a legtöbb modern és régebbi böngészőben (asztali és mobil) is működni fog. A Felhívni a figyelmet vászon elemeket használ, amikor az új böngészőkben jelenik meg, miközben visszatér a képes térképekhez, ha egy régebbibe tölti be..

Jellemzők

Mielőtt eljutnánk egy példához, amely megmutatja, mennyire hatékony ez az egyszerű bővítmény, nézzük meg, mit várhatunk el a Felhívni a figyelmet:

  • Húz – Miután feltöltött egy képet, lehetősége lesz rajzolni rajza alakzatokat. Válassza ki a kép bármely részét, amely kiválaszthatóvá / kattinthatóvá válik
  • Színek – Testreszabhatja a színeket úgy, hogy a hotspotok illeszkedjenek a weboldal kialakításához
  • Jelölje ki a lebegést – Mutasson a kép egy másik részét, ha a felhasználó az egérmutatót választja a kiválasztott részre
  • További információ megjelenítése – További információ megjelenítése a kép kiválasztott részéről
  • Ugrás az URL-re – Átirányítsa a felhasználókat bármely URL-re, ha rákattintanak a kiválasztásra

Rajzolja a Figyelem beállításait

Példa – Hawaii interaktív térképe

A demonstrációs webhely példáján mutatjuk be, hogy pontosan mit tehet a Felhívni a figyelmet funkcióval. Tehát nézzük meg, hogy hogyan néz ki egy interaktív Hawaii térkép, amikor a pluginnal készítjük.

Az első dolog, amit tennie kellene, hogy keressen képet Hawaii-szigetekről. Miután navigált a Felhívja a figyelmet -> Kép szerkesztése, töltse fel a képet a jobb oldali sávban található területre. Ha a kép betöltődik, a móka elkezdődhet.

Itt kiválaszthatja a kiemelés színét (szín, szegély, átlátszóság stb.), Stílusként beállíthatja a „további információs mezőt” (kép, cím, szövegszín stb.). Ha nem akarja a képen mindegyik színt kiválasztani, akkor gyorsan kiválaszthatja a színsémát a jobb oldali oldalsávból.

Felhívja a figyelmet - hogyan hozhat létre interaktív képeket a WordPress programban

A legmágikusabb rész a Hotspot területek beállítások képernyő. Itt letöltheti a képet teljes méretére. Csak annyit kell tennie, hogy elkezdi rajzolni és új hotspotot létrehozni. Felvehet annyi pontot, amennyit csak akar, ami azt jelenti, hogy átfogó választásokat hozhat létre, amennyit csak akar. Annyi hotspotot kell létrehoznia, és mindegyiknek megvan a saját beállítása.

Tehát ebben a példában ki kell választania az egyik szigetet. Válasszon egy címet a szigetre, adjon hozzá egy leírást és az extra képet, amely akkor jelenik meg, amikor a felhasználó fölhúzza a hotspotot (a fenti GIF-kép jobb oldala).

Meg kell ismételnie a folyamatot minden olyan szigeten, amelyben interaktív szeretne lenni. Miután elkészítette a hotspotokat, csak másolja a rövid kódot a jobb oldalról. Illessze be a rövid kódot egy üzenetbe, oldalba, widgetbe, vagy bárhova, ahol meg szeretné mutatni az új interaktív térképét, és kész! Ha a felhasználókat bármelyik másik oldalra átirányítani akarta, miután rákattintottak a választásokra, akkor csak a leírás helyett az URL-t kell kiválasztania. Ilyen egyszerű!

PRO verzió

Míg az ingyenes verzió tökéletes lesz, ha csak egy képre van szüksége, a PRO verzió lehetővé teszi, hogy annyi interaktív kép legyen a webhelyén, amennyit csak akar. Bár ez lesz a legfontosabb szempont, amelyet figyelembe kell venni, a PRO verzió még több képet is elhozhat neked.

Az Elrendezés opciók segítségével további információkat jeleníthet meg a kép kiválasztott részeiről. Például, információkat jelenít meg egy világítódobozban vagy egy egyszerű eszköztáron, amely felbukkan, miután a felhasználó a kép kiválasztott részére mutat..

Húsz előre definiált színes raklap van, tehát nem kell minden színt kézzel testreszabnia. A PRO verzió 74 dollárba kerül egy webhely licencéért, de ha egynél több interaktív képre van szüksége, akkor ez nem rejtély.

További képméret regenerálása

Viszonylag könnyű új képméreteket regisztrálni a WordPress témában. Miután elmondta a rendszerének, milyen nagynak kell lennie a képekkel, megnevezte őket és eldöntötte, hogyan vágja le őket, szabadon eloszthatja a képeket bárhol, ahol csak akar. De mi van a régi képekkel??

Ha valamelyik technikát alkalmaztuk, amelyet bemutattunk neked, előkészítette a gyep új képeket. Függetlenül attól, hogy újonnan regisztrált képméreteket használ-e a beküldött miniatűrökhöz, vagy engedélyezi-e a szerzők, hogy azokat a hozzászólásokban használják, az új szabályok csak azokra a képekre vonatkoznak, amelyeket a módosítás elvégzése után töltöttek fel a function.php fájlban. A régebbi képek megváltoztatásához javasoljuk a Miniatűrök regenerálása beépülő modult.

Miniatűrök regenerálása:

ÁR: Ingyenes
  1. Menj Beépülő modulok-> Új hozzáadása
  2. “Miniatűrök regenerálása” keresése
  3. Telepítse és aktiválja a plugin-t
  4. Keresse meg a Eszközök-> Regen.Thumbnails

Ha át szeretné változtatni az összes képet, akkor egyszerűen kattintson a „Minden bélyegkép újraépítése” gombra, és várja meg, amíg a plugin elvégzi a kemény munkát..

További képméret regenerálása

Ha meg akarja látni az átméretezendő képeket, vagy csak néhány kép átméretezését szeretné elérni, lépjen a Médiakönyvtárba, ahol új lehetőséget talál a „Tömeges műveletek” alatt, és az egyes képek mellett a Képtár.

A bővítménynél jó az, hogy nem törli az eredeti képeket. Csak új képméreteket hoz létre, amelyeket felhasználhat a témájában, míg az eredeti méreteket később felhasználhatja, vagy kézzel törölheti, ha úgy dönt, hogy nincs rá szüksége..

Ez az. Élvezze új miniatűrjeit, vagy nézzen meg Egyszerű képméretek plugin, amely ugyanazt teheti.

Távolítsa el a szélesség és a magasság képjellemzőit a jQuery segítségével

Képek hozzáadásakor a WordPress hozzászóláshoz a rendszer automatikusan hozzáadja a képhez a magasság és a szélesség attribútumait. Ez általában jó dolog, de vannak olyan idők, amikor nem tetszik az a tény, hogy minden kép megkapja ezeket az attribútumokat.

Ha az attribútumokat közvetlenül a feltöltéskor meg akarja szüntetni, megteheti ezt egy egyszerű funkcióval, amelyet utoljára megmutattunk.

De ha elolvasta a cikket, vagy maga megpróbálta a funkciót, akkor észrevette, hogy csak a függvénynek a WP rendszerbe történő telepítése után feltöltött képeket érinti. Ha már van egy olyan adatbázis, amely tele van bejegyzésekkel beillesztett képekkel, a fent említett funkció nem sok segítséget nyújt a régi képattribútumokhoz.

Mivel valószínűleg nem képes minden képen átnézni, és egyenként törölni a szélességet és a magasságot, valószínűleg egy másik funkcióra van szüksége, amely eltávolítja ezeket az attribútumokat az összes meglévő képhez, amely beágyazódik a bejegyzésbe. Ebben az esetben a megfelelő helyen vagy “, mert hamarosan megmutatjuk egy egyszerű módszert, amellyel a jQuery kód néhány sorával automatikusan eltávolíthatók a szélesség és a magasság képeinek attribútumai. Ne félj az előző mondattól – nem is kell tudnod, hogy mi a jQuery, csak kövesse a következő három lépést, és egy pillanat alatt elkészül.

Távolítsa el a szélesség és a magasság kép attribútumait:

  1. Nyissa meg a header.php fájlt a témamappából
  2. Másolja és illessze be ezt a kódot bárhol a között és címkék:
  3.  
  4. Változtatások mentése

És kész! A kód varázslatossá válik, amikor egy képet tartalmazó hozzászólást nyit meg, és eltávolítja a szélesség és magasság címkéit.

Hogyan hozhat létre egyedi képméreteket a Media Uploader alkalmazásban

Ha a Media Uploader alkalmazással kezeli a képeket a WordPress programban, akkor valószínűleg számos lehetőséget látott a képekhez. Sok közül választhat egy olyan képméretet, amelyet elküldhet a cikkéhez.

Vannak miniatűr, közepes, nagy és teljes méretű opciók, amelyek közül választhat, de ezeknek az opcióknak előre megadott értékeik vannak. Tehát, ha egyéni témát használ, akkor inkább ragaszkodik az egyes képek szélességének és magasságának megváltoztatásához, újra és újra..

Valójában ezt nem kell tennie. Van egy ügyes kis funkció, az add_image_size () nevű funkció, amely nagyszerű eszköz a fejlesztők számára. És ezt a cikket követően hasznosnak is találja.

Tegyük fel, hogy a témának egyéni szélessége van, és szeretne könnyedén beágyazni a képeket, hogy tökéletesen beleférjen. Tegyük fel, hogy a szélesség 666 képpont (nem fogjuk megvizsgálni, miért állította ezt a számot a szélességre, ez az Ön választása). Ehhez hozzáadnia kell egy további választógombot a Media Uploader alkalmazáshoz. Az alábbi kóddal további egy méretet kell hozzáadni, amely az eredeti méretének fele.

  1. Nyissa meg a function.php fájlt
  2. Másolja és illessze be ezt a kódot:
  3. custom_image_sizes () funkció
    add_image_size ('egy méret', 333, 333, igaz);
    add_image_size ('másik méret', 666, 666, igaz);
    }
    
    add_action ('init', 'custom_image_sizes');
    
    funkció show_image_sizes ($ méretek) {
    $ size ['one-size'] = __ ('Custom size 1', 'isitwp');
    $ size ['other-size'] = __ ('Custom size 2', 'isitwp');
    visszatér $ méretek;
    }
    
    add_filter ('image_size_names_choose', 'show_image_sizes');
  4. Változtatások mentése
  5. Próbáljon meg hozzáadni egy képet a Médiafeltöltőből, ahol látnia kell az új méretbeállításokat a „Mellékletek megjelenítési beállításai” részben.

Készítsen automatikusan képernyőképet bármely webhelyről, és tegye közzé azt képként a bejegyzésében

Ha meg szeretne jeleníteni egy weboldal miniatűrjét, akkor el kell mennie a webhelyre, kinyomtatnia a képernyőt, vagy el kell készíteni egy képernyőképet egy programmal vagy egy böngésző-kiegészítővel. Akkor módosítania kell a képet, vágja le a megfelelő méretre, és töltse fel a WordPress-be, hogy a képernyőképet egy postában felhasználhassa..

Ha időnként nem kell elkészítenie ezt a pillanatfelvételt, akkor ez nem lesz probléma, de ha gyakrabban használ különféle képernyőképeket, akkor örömmel hallja, hogy van egy fantasztikus funkció, amely időt és idegeket takaríthat meg.

Az útmutató ezen részében megmutatjuk a teljes funkciót, amely létrehoz egy rövid kódot, amelyet felhasználhat bármilyen kívánt weboldal pillanatképeinek készítéséhez..

Automatikus képernyőkép létrehozása:

  1. Nyissa meg a function.php fájlt
  2. Másolja és illessze be a következő kódot:
  3. wp_webscreen funkció ($ atts, $ content = NULL) {
    kivonat (shortcode_atts (array (
    "snap" => 'http://s.wordpress.com/mshots/v1/',
    "url" => 'http://www.firstsiteguide.com',
    "alt" => 'wploop',
    "w" => '600', // szélesség
    "h" => '450' // magasság
    ), $ atts));
    
    $ img = '” $ alt. '„
    return $ img;
    }
    add_shortcode ("képernyő", "wp_webscreen");
  4. Módosítsa az alapértelmezett változókat a tömbben
  5. Változtatások mentése

Ez a funkció létrehoz egy rövid kódot, amelyet a WordPress webhely bárhol használhat. Függetlenül attól, hogy egy weboldal képernyőképeit egy üzenetben, oldalsáv-widgetben vagy a láblécben szeretné használni, egyszerűen c / p helyezze el a rövid kódot a megfelelő helyen:

[képernyő url = ”http://www.firstsiteguide.com” alt = ”fsg” w = ”600 ″ h =” 450 ″]

A legfontosabb ebben a funkcióban az, hogy a képet dinamikus URL-ként menti, ami azt jelenti, hogy ha egyszer készít egy pillanatfelvételt a rövid kóddal, akkor automatikusan frissíti magát a jövőben, és mindig megjeleníti a rövid kódban megadott webhely jelenlegi megjelenését..

Vegye figyelembe, hogy a rövid kód paramétereit közvetlenül tőle megváltoztathatja. Nem kell módosítania a function.php fájlban található kódot, ha másik URL pillanatképét szeretné készíteni, vagy pillanatképet szeretne más dimenzióban elkészíteni..

Példa:

Tegyük fel, hogy el szeretne készíteni egy képernyőképet a Google-ról, és 200 × 400 képpont méretűvé szeretné tenni:

[képernyő url = ”http://www.google.com” alt = ”Google” w = ”200 ″ h =” 400 ”

Még ennél is könnyebbé teheti azáltal, hogy egy rövid kódot egy gombba ment, így egyetlen gombnyomással beillesztheti azt egy üzenetbe..

Következtetés

A WordPress webhelyén lévő képek javításához nem kell telepítenie az összes beépülő modult és funkciót, amelyeket említettünk. Reméljük, hogy találtál legalább néhány tippet, amelyek segítenek a képek optimalizálásában vagy bármilyen módon javításában.

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