Jak zlepšit obrázky v WordPress

Jak zlepšit obrázky v WordPress


Je to už dlouho, protože obrázky byly něco příliš velkého na načtení přes internet. Webové stránky dnes bez nich nemohou existovat. I když rychlost internetu v průběhu let dramaticky vzrostla, je důležité, abyste se na svém blogu starali o obrázky.

Jen proto, že je snadné nahrávat obrázky na váš web, to neznamená, že byste to měli dělat bez přípravy. Neoptimalizované obrázky mohou ve skutečnosti vaše stránky zranit mnoha způsoby; od ovlivnění způsobu, jakým si o vás návštěvníci myslí, až po rychlost vašeho webu a hodnocení SEO. Pokud jste na to ještě nepřemýšleli, jsme tu, abychom vám ukázali několik způsobů, jak vylepšit obrázky ve WordPressu.

V této příručce se chystáme ukázat:

  • Jak optimalizovat obrázky pro WordPress, aby zrychlil váš web a vylepšil SEO
  • Změňte způsob, jakým WordPress komprimuje obrázky JPEG
  • Nejoblíbenější pluginy pro optimalizaci obrázků pro WordPress
  • Přidejte líné načítání svých videí a obrázků
  • Atraktivní zobrazení před a po obrázcích
  • Jak vytvářet interaktivní obrázky – kreslit, přidávat popisy a odkazy
  • Jak regenerovat další velikosti obrázku
  • Odstraňte atributy obrazu šířky a výšky pomocí jQuery
  • Jak vytvořit vlastní velikosti obrázků v programu Media Uploader
  • Vytvořte automatický snímek obrazovky libovolného webu a publikujte jej jako obrázek ve svém příspěvku

Contents

Jak optimalizovat obrázky pro WordPress, abyste zrychlili svůj web a vylepšili SEO

Proč byste měli optimalizovat obrázky pro WordPress? Pokud se budete snažit, můžete očekávat následující:

  • Rychlejší stránka
  • Lepší SEO
  • Menší zálohy
  • Menší využití šířky pásma
  • Šťastnější uživatelé

Měli byste také vědět, že existují různé fáze, ve kterých můžete obrázky optimalizovat. O obrázky se můžete postarat ještě před jejich nahráním na blog, nebo to můžete udělat po nahrání.

Rychle otestujte obrázky na svém webu

Než začnete pracovat na optimalizaci, můžete rychle zkontrolovat rychlost a výkon webu. Pomocí některého z nástrojů ze seznamu se rychle dozvíte, v jakém tvaru jsou obrázky na vašem webu.

Rádi používáme GTmetrix které vám dokonce ukážou přesné obrázky, které způsobují pomalejší načítání vašeho webu.

Před nahráním optimalizujte obrázky pro WordPress

Při blogování většina lidí neprovede všechny nezbytné kroky k optimalizaci svých obrázků. Obvykle by lidé jen pořídili fotografii ze svého fotoaparátu nebo smartphonu, stáhli ji z Internetu nebo ji vytvořili pomocí počítačového softwaru.

Nemyslí na formáty, rozměry obrázků ani názvy souborů. Pokud obrázek vypadá dobře, prostě předpokládají, že je připraven pro internet. Pokud nekontrolujete obrázky, stavíte se k katastrofě.

Změna velikosti obrázků

Změna velikosti obrázků

Neprovádějte obrázky na svůj web WordPress, než zkontrolujete šířku a výšku každého obrázku. Pokud například zobrazujete obrázky nejvýše 700 pixelů, není opravdu nutné nahrávat širší obrázek. Pokud tak učiníte, budete mít větší soubor, který váš web zpomalí, zatímco výstup bude stejný. WordPress vytvoří další velikost, ale to není omluva nezpracovávat obrázky před nahráním.

Změna velikosti obrázků je rychlá a snadná. Existuje mnoho bezplatných nástrojů, jako je Microsoft Paint, které vám s tím pomohou. Můžete dokonce najít bezplatné online nástroje pro změnu velikosti obrázků, jako je Snadná změna velikosti.

Rozměry obrázku se budou lišit od tématu k tématu. Pokud si nejste jisti, který z nich byste měli použít, podívejte se blíže na své téma WordPress a prohlédněte si obrázky, vyhledejte dokumentaci nebo požádejte o pomoc o pomoc.

Změňte kvalitu

Po změně rozměrů byste měli zvážit změnu kvality obrázků. V závislosti na softwaru existují různé způsoby úpravy kvality obrázků. Například vždy populární Photoshop vám umožňuje ukládat obrázky pro web. Tato možnost vám umožní ukládat obrázky v nižší kvalitě, ale budou optimalizovány pro váš web.

Pokud se také rozhodnete uložit obrázek jako JPEG, Photoshop vás požádá o výběr úrovně kvality. V takovém případě snížení kvality z 12 na pouhých 8 dramaticky zmenší velikost obrázku, zatímco rozdíl v kvalitě nebude tak velký.

Pokud stále nepoužíváte žádný software ke změně kvality svých obrázků, můžete vyzkoušet zdarma online Tiny PNG nářadí. Stačí nahrát obrázek a zjistit, jaký rozdíl to může mít.

Vyberte správný formát

I po změně velikosti a kvality byste měli zvážit změnu formátu. Pro začátečníky stačí vybrat správný formát a z obrázku můžete odebrat několik kilobajtů, ne-li více.

Obrazové formáty

Obecné pravidlo je velmi jednoduché. Pokud máte fotografii, vytvořte ji jako JPEG. Pokud máte logo, vektorový obrázek nebo velmi jednoduchou grafiku generovanou počítačem, použijte PNG. Pokud máte opravdu malý obrázek bez přechodů nebo chcete zobrazit jednoduchou animaci, jako je ta výše uvedená, můžete použít GIF. Obecně budou obrázky PNG mnohem větší než obrázky ve formátu JPEG a změna formátu vám může pomoci.

V mnoha případech nedojde při změně formátování k výrazným rozdílům v kvalitě, ale můžete očekávat rozdíl ve velikosti. Příště před nahráním fotografie PNG ji vyfotografujte a zkuste ji uložit jako JPEG, abyste viděli rozdíl. Pro podrobnější vysvětlení, prosím podívejte se na rozdíl mezi PNG, JPEG, GIF a SVG.

Postarej se o názvy souborů

I když název souboru může znít nedůležité, je to vlastně něco, o čem byste si měli být vědomi. Název vašeho obrazového souboru obsahuje cenné informace pro SEO. Pokud chcete, aby ostatní mohli najít váš obrázek na Googlu a dalších vyhledávačích, měli byste mu dát správné jméno.

Doporučujeme pojmenovat obrázky bez použití mezer. Nezapomeňte zahrnout klíčová slova, pokud chcete, aby se stránka a obrázek hodnotily. Pokud například nahráváte obrázek Ferrari California, název souboru by měl být „ferrari-california.jpg“. Používáte-li pro WordPress plugin SEO, již víte, že kontroluje vaše alt tagy na klíčová slova. Ano, je opravdu důležité mít správné jméno obrázku.

Optimalizovat obrázky pro WordPress po nahrání

Po přípravě obrázků v počítači můžete pokračovat v nahrávání. Doufejme, že vaše obrázky jsou správné velikosti a kvality. Zajistili jste správný formát a název souboru. Po nahrání vás WordPress požádá o další informace. Nevynechávejte meta informace; vyplňte podrobnosti o svých obrázcích, abyste je mohli snadno uspořádat a připravit na SEO.

Název, popis, alt text a titulek

Když se staráte o technické aspekty, neměli byste na SEO zapomenout. Název a popis vždy přidejte na své médium. Pomůže vám to se správou médií WordPress a také bude usilovat o lepší SEO. Nezapomeňte také na alt tag, který se zobrazí pro návštěvníky, kteří váš obrázek nemohou správně vidět. Nejen to bude užitečné pro vaše uživatele, ale také vám pomůže se SEO. Vaše stránka bude mít lepší hodnocení a uživatelé budou moci vaše nové obrázky snáze najít.

Přestože titulky nebudete nikdy potřebovat, u obrázků, které vyžadují další vysvětlení (například snímky obrazovky), je nutné přidat..

Úpravy obrázků pomocí WordPress

Pokud si uvědomíte, že obrázek stále potřebuje další úpravy, měli byste vědět, že vám to WordPress umožňuje i po nahrání souboru. Změňte obrázky rotace, oříznutí a měřítka už jste nahráli. Můžete dokonce upravit pouze miniaturu nebo všechny ostatní velikosti. Nativní editor WordPress je velmi jednoduchý, ale můžete ho čas od času ušetřit.

Znovu vygenerujte všechny miniatury

Většina předchozích technik vám pomůže s novými obrazovými soubory, které se stále chystáte nahrát. Ale co když už máte stovky, ne-li tisíce souborů již nahraných na váš web WordPress? Nebojte se; stále můžete tyto obrázky optimalizovat a měnit jejich velikost.

Pro rychlou opravu by vás mohl zajímat bezplatný plugin Regenerate Thumbnails, který používá více než milion uživatelů. Pokud chcete větší kontrolu nad obrázky, měli byste se podívat na některé z nejlepších pluginů WordPress pro optimalizaci obrázků, které vám ukážeme v následujících řádcích tohoto článku..

Jak regenerovat další velikosti obrázku

Používejte doplňky WordPress

Samozřejmě existují desítky pluginů WordPress, které vám mohou pomoci optimalizovat obrázky na vašem webu. Přejděte dolů a podívejte se na nejlepší pluginy WordPress pro optimalizaci obrázků.

Lazy V případě potřeby načtěte obrázky

Někdy bude kvalita obrázků mnohem důležitější než jejich velikost. To platí zejména pro fotografy, kteří chtějí, aby jejich fotografie byly prvotřídní. Nemohou riskovat zmenšení velikosti ani kvality souborů. To však neznamená, že byste měli zapomenout na optimalizaci. Chcete-li v tomto případě optimalizovat obrázky pro WordPress, měli byste zvážit líné načítání.

Líné zatížení je technika, která načítá obrázky pouze tehdy, když je uživatelé potřebují (přejděte na ně). Pokud byste například do jednoho článku nahráli dvacet kvalitních fotografií, značně by to zpomalilo váš web. Pokud ale obrázky jen líně načtete, článek by byl bleskový a fotografie by se načítaly pouze v případě potřeby – v okamžiku, kdy se k nim uživatel dostane.

Mít citlivé obrázky

Ačkoli většina motivů WordPress reaguje, nemusí to nutně znamenat, že vaše obrázky také reagují. Protože nechcete, aby se na malou obrazovku načítal velký obrázek, budete si muset zaregistrovat další velikosti obrázků pro svůj web. Pokud vaše téma nepoužívá responzivní obrázky, zvažte zaměstnání profesionála – není to tak snadné, jak by to mohlo znít.

Optimalizujte obrázky pro sociální média

Pokud se chcete ujistit, že vaše obrázky vypadají dobře na sociálních médiích, budete muset udělat další krok a optimalizovat metaznačky a označení schématu.

Pokud používáte SEO plugin jako Yoast, nezapomeňte zkontrolovat nastavení. Například Yoast vám umožní nastavit několik věcí souvisejících se sociálními médii. Přejděte na SEO -> Sociální sítě a zadejte informace na Facebooku, Twitteru, Google+ a Pinterestu.

Pokud chcete více a chcete optimalizovat obrázky pro další weby sociálních médií, podívejte se WPSSO – přesné značky metadat + schéma schématu pro optimalizaci sociálního sdílení a plugin SEO.

Změňte způsob, jakým WordPress komprimuje obrázky JPEG

Pokud na svůj web WordPress nahráváte spoustu obrázků JPEG, možná jste si všimli, že ztrácí svou původní kvalitu. Pokud jste přemýšleli, jestli je na vině WordPress, nyní budete mít svou odpověď – ano, je to tak!

Jakmile nahrajete obrázek ve formátu JPEG, WordPress automaticky změní kompresi a rozhodne, že chcete obrázek ztratit na kvalitě. Konkrétněji, WP používá 90% kompresi na vašich JPGE. To je skvělé, pokud jsou vaše obrázky pouze k použití jako miniatury příspěvků nebo k zobrazení v příspěvku, ale pokud nahráváte fotografie, chcete, aby byly co nejlepší, správné?

Naštěstí budete potřebovat pouze jeden řádek kódu, abyste to mohli změnit.

Zastavení komprese obrázků JPEG:

Pokud si nepřejete, aby byly vaše obrázky JPEG komprimovány, jednoduše zkopírujte a vložte následující kód do souboru features.php:

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

Nezapomeňte změny uložit a jste připraveni nahrát nové obrázky.

Na druhou stranu nemusí být pro vás obrázky tak velké. Možná budete chtít, aby byly ještě více komprimované a ušetřili čas při načítání vašeho webu. Pokud změníte poslední číslo v tomto řádku kódu, změníte kvalitu nově nahraných obrázků.

Komprimujte obrázky JPEG ještě více:

Čím nižší číslo, tím více obrázků bude komprimováno. Chcete-li například komprimovat tyto soubory JPEG ještě více, budete potřebovat tento kód:

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

Nezapomeňte; výchozí úroveň komprese je 90.

Důležité: To bude mít vliv pouze na obrázky, které nahrajete po vložení kódu do funkce.php. Chcete-li změnit velikost a kvalitu obrázků, které již máte v knihovně, budete potřebovat plugin. Podívejte se, jak regenerovat další velikosti obrázku.

Nejoblíbenější pluginy pro optimalizaci obrázků pro WordPress

Na začátku tohoto článku jsme hovořili o tom, jak optimalizovat obrázky pro WordPress, abyste zrychlili svůj web a vylepšili SEO. Jak jste mohli vidět, existuje několik různých metod, které můžete použít. Je důležité starat se o obrázky ještě před jejich nahráním na svůj blog. Pokud jsou však obrázky již na webu, může se stát, že nebude možné znovu každý obrázek znovu vytvořit a poté je znovu nahrát..

Nebojte se; nikdo od vás neočekává, že tak učiníte. Zůstaňte s námi v následujících minutách a chystáme se vám ukázat nejoblíbenější doplňky pro optimalizaci obrázků pro WordPress.

Pro optimalizaci obrázků stačí vybrat ze seznamu plugin. Budete jej muset nakonfigurovat a vybrat věci, které vám plugin udělá. Poté budete moci uvolnit a delegovat práci na plugin podle svého výběru, zatímco můžete začít organizovat své mediální soubory.

Následující pluginy vám pomohou komprimovat obrázky na kterémkoli webu WordPress, který máte. Zrychlí načítání stránek a nakonec vám pomůže vylepšit SEO.

WP Smush

CENA: Zdarma

S více než 700 000 aktivními instalacemi musí být WP Smush jedním z nejlepších pluginů pro optimalizaci obrázků pro WordPress. Může rychle optimalizovat obrázky pomocí různých kompresních technik. Skvělá věc při komprimaci obrázků pomocí programu WP Smush je, že obrázky neztratí na kvalitě. Nevěříš nám? Vyzkoušejte plugin.

Když jsme hovořili o přípravě obrázků pro WordPress, zmínili jsme se, že změna velikosti je zásadní součástí procesu optimalizace. S tímto pluginem se nemusíte obávat, protože WP Smush vám umožňuje nastavit maximální rozměry. Poté budou všechny větší obrázky automaticky zmenšeny, než je přidáte do knihovny.

Tento fantastický plugin může pracovat se soubory JPEG, GIF a PNG. Funguje se všemi vašimi adresáři, automaticky se stará o přílohy a dokonce pracuje na vícenásobných stránkách. Na každém obrázku můžete ručně pracovat nebo hromadně upravit padesát z nich. Pokud chcete ještě lepší výsledky a více možností, podívejte se na WP Smush PRO.

EWWW Image Optimizer

CENA: Zdarma

Za zábavným jménem je pro WordPress jeden z nejoblíbenějších doplňků pro optimalizaci obrázků. Stejně jako v předchozím případě může EWWW Image Optimizer komprimovat vaše obrázky, aniž by to ovlivnilo jejich kvalitu. Když si myslíte, že plugin může váš web zrychlit během několika sekund, budete již na cestě si jej stáhnout. Jakmile to uděláte, budete mít možnost optimalizovat obrázky hromadně a galerie jako GRAND FlaGallery, NextCellent a NextGEN dokonce získají své vlastní stránky pro hromadnou optimalizaci.

Všechny obrázky, které ve WordPress používají třídu WP_Image_Editor, budou automaticky optimalizováno, zatímco můžete kouzlo ručně zpracovat na všech ostatních. Líbí se nám, že si vyberete složky, které chcete optimalizovat. Další informace o tom, které pluginy používají třídu, otevřete oficiální Stránka EWWW Image Optimizer v úložišti WordPress.

Komprimujte obrázky JPEG a PNG

CENA: Zdarma

Tiny Compress Images

Pokud vám roztomilá panda s logem WordPress nedovolí, abyste se o tomto pluginu dozvěděli více, nevíme, co bude. A pokud vypadá panda povědomě, je to proto, že je to ta samá, která vám pomáhá komprimovat obrázky na webu TinyPNG. Jo, zdá se, že zvíře je všestrannější, než jsme si původně mysleli. Ale zaměřme se na plugin.

Pokud jdete s tímto pluginem, Panda automaticky optimalizuje vaše obrázky. Pokaždé, když nahrajete nový, plugin se ujme a provede svou práci. Přesto můžete jednotlivé obrázky optimalizovat nebo to udělat hromadně pouhým přechodem do knihovny médií.

Komprimujte obrázky JPEG a PNG dokonce podporuje animované PNG, funguje perfektně na více místech, je kompatibilní s WooComerce a nebude mít problémy s WP Offload S3.

Skvělá věc na zásuvném modulu je, že umožňuje nastavit atributy maximální šířky a výšky pro všechny obrázky. Pokud jste si dělali starosti s tím, co to bude dělat metadata, nebojte se; panda udrží všechny informace neporušené.

Neexistují žádná omezení velikosti souboru, můžete nastavit widget ovládacího panelu, a to dokonce funguje s mobilní aplikací WordPress. Protože toto vše, obrázky Compress JPEG a PNG mají více než 100 000 aktivních instalací a zaslouží si místo na seznamu nejlepších pluginů pro optimalizaci obrázků pro WordPress.

Nemožnost

CENA: Zdarma

Nemožnost

Přestože vás obálka tohoto pluginu může vyděsit, věnujte chvilku a podívejte se na všechny funkce Imsanity. Oh, i název pluginu zní šíleně, že? Až budete v pořádku s názvem pluginu, uvidíte, že má co nabídnout.

Imsanity může automaticky měnit měřítko obrázků, umožňuje nastavit maximální rozměry a dokonce nabízí možnost hromadné změny velikosti. To je důležité, pokud již na svém blogu máte stovky obrázků, které vyžadují optimalizaci.

Tento bezplatný plugin je skvělá volba, pokud se s nastavením pluginu moc nechcete potýkat. Stačí nainstalovat a aktivovat Imsanity, nastavit několik možností a na to můžete zapomenout; bude řídit svou vlastní cestu k optimalizaci obrazu.

Milovali jsme možnost, která vám umožňuje převádět obrázky BMP do formátu JPG. Jen v případě, že máte hodně souborů BMP, které jste před časem omylem nahráli, bude to zachránce.

ShortPixel Image Optimizer

CENA: Zdarma

ShortPixel Image Optimizer

S více než 30 000 aktivními instalacemi je ShortPixel Image stále jedním z nejpopulárnějších pluginů pro optimalizaci obrázků pro WordPress. Doplněk je nabitý funkcemi a pro weby, které mají spoustu obrázků, je třeba mít na optimalizaci.

ShortPixel Image Optimizer nejen optimalizuje dokumenty JPG, PNG, GIF a PDF, ale také vám umožní převést jakýkoli obrázek JPEG, PNG nebo GIF na WebP. Doplněk funguje dobře s dalšími zásuvnými moduly galerie a nezáleží na tom, zda váš web používá HTTP nebo HTTPS. Umožní vám odstranit EXIF ​​data z obrázků (něco, co budou mít fotografové rádi).

Plugin rozpoznává obrázky, které již byly optimalizovány, takže je v případě potřeby přeskočí. Získáte povolit nebo zakázat automatickou optimalizaci a pomocí tohoto fantastického pluginu dělat mnohem, mnohem více. Podívejte se na oficiální stránku v úložišti a podívejte se na všechny funkce.

Optimus – WordPress Image Optimizer

CENA: Zdarma

Optimus

Stejně jako dříve zmíněný plugin i Optimus optimalizuje vaše obrázky pro WordPress, a to i bez ovlivnění kvality vašich obrázků. Můžete nechat plugin pracovat automaticky, nebo můžete vypnout možnost a optimalizovat obrázky pouze v případě potřeby.

Optimus pracuje na multisite, není cizí webovým stránkám elektronického obchodování WordPress a je zcela optimalizován pro WordPress Mobile Apps a Windows Live Writer. Zrychlí váš web, aniž byste se museli dotknout řádku kódu. Plugin nabízí mnohem více, ale budete se muset přihlásit k prémiové verzi. Chcete-li zobrazit další informace, přejděte na oficiální stránku v úložišti pluginů WordPress.

Přidejte líné načítání svých videí a obrázků ve WordPress

Jakmile na svůj web začnete přidávat velké množství obrazových a obrazových materiálů, je zřejmé, že se začne načítat pomaleji. Bez ohledu na to, odkud pocházejí, videa a velké obrázky budou na vašem webu působit jako těžká váha a donutí návštěvníky čekat mnohem déle, než je potřeba k načtení veškerého obsahu. S WordPress by to nemělo být velké a tady je způsob, jak situaci snadno vyřešit.

Pokud znáte cestu kolem PHP, existuje skvělý článek o přidání líného načítání obrázků a nekonečného posouvání, které napsali naši kolegové o Elegantní témata.

Pokud ne, v příštích několika řádcích zmíníme některé z nejpopulárnějších líných načítání pluginů, které budou zrychlete načítání stránek. A nemusíte dělat nic jiného, ​​než nainstalovat plugin a nastavit jej v několika rychlých krocích.

Líné zatížení pro videa

CENA: zdarma

Líné zatížení pro videa

Pokud máte hodně videí YouTube a Vimeo, měli byste zvážit instalaci tohoto pluginu. Jakmile jej nastavíte, plugin umístí na vaše video obrázek, a proto se váš web načte mnohem rychleji. Jakmile návštěvník přejde na video, zobrazí se tento obrázek s tlačítkem „přehrát“. Po kliknutí se video začne načítat a přehrávat. Na webu vývojáře si můžete prohlédnout jednoduché demo.

WP YouTube Lyte

CENA: Zdarma

WP YouTube Lyte

Tento plugin provede svou práci rychlým a snadným způsobem. Po instalaci stačí přidat odkaz na vaše video YouTube nebo použít zkratku pro přidání jednoho. Můžete si vybrat mezi přidáním normálního videa, seznamu skladeb nebo pouze zvuku z vybraného videa. Poté vaše videa na YouTube získají obrázek, který umožní líné načítání. Kliknutím na obrázek spustíte přehrávání videa nebo zvuku.
Podívejte se na ukázku na webu vývojáře.

a3 Lazy Load

CENA: Zdarma
DEMO 1
DEMO 2

a3 Lazy Load

Tento je věnován vašemu mobilnímu webu. Pokud máte mnoho obrázků nebo videí, které chcete svým návštěvníkům zobrazit na mobilních zařízeních, měli byste se podívat na a3 Lazy Load. To vám umožní přidat líné načítání k vašim obrázkům a videím a plugin vám dokonce umožní zvolit přechodové efekty, které se objeví uživatelům při procházení obsahu, který se načítá.

V oblasti správy můžete snadno zapnout a vypnout obsah, který chcete líně načíst. Pokud je zapnutý, bude obsah načten pouze v okamžiku, kdy návštěvník přejde na tuto část obsahu.
K dispozici je pěkně ukázané demo, které obsahuje 1000 obrázků – každý je načten pouze jednou, když na něj přejdete. Protože tento plugin líně načítá videa, existuje i ukázka videa, kterou můžete vidět kliknutím na výše uvedený odkaz.

BJ Lazy Load

CENA: Zdarma

BJ Lazy Load

Pokud nepotřebujete podporu pro videa a chcete, aby se obrázky jen líně načítaly, podívejte se na tento plugin WP. Po instalaci a nastavení nahradí vaše obrázky, miniatury, obrázky Gravatar a dokonce i prvky iframe zástupným symbolem. Podobně jako dříve zmíněný plugin, načte obsah až poté, co k němu uživatel přijde.

Ať už se jedná o obrázky nebo videa, která chcete líně načíst, pomůže vám jeden z výše uvedených pluginů během několika sekund. Všechny jsou zdarma, takže není důvod k tomu, abyste nezkoušeli alespoň jeden z pluginů a zjistili, jak velkou váhu bude mít vaše ramena. Samozřejmě existuje mnoho dalších pluginů se stejnou funkcí a můžete si je prohlížet a vyzkoušet je všechny.

Atraktivní zobrazení před a po obrázcích

Jsme si jisti, že jste již viděli mnoho příkladů obrázků před / po. Nevím o vás, ale první věcí, kterou máme na paměti, když vidíme frázi „před a po“, je fitness tréninkový program, kde lidé ukazují svá těla před a po tréninkovém programu.

Pokud o tom přemýšlíte, většina webů používá k předvedení rozdílů jednoduchý přístup – pořizují oba obrázky a umisťují je vedle sebe nebo dokonce nad sebe. Pokud chcete stejný výsledek, nečetli byste tento článek, protože už víte, jak to udělat.

Co kdybychom vám řekli, že existuje vizuálně ohromující způsob, jak to vyřešit před / po problému a je to jen na dosah ruky? No, je tu a po nastavení, budete chválit vývojáře, protože konečný výsledek je opravdu, opravdu v pohodě.

Dvacet dvacet

CENA: zdarma

Dvacet dvacet

Twenty Twenty je název tohoto úžasného pluginu, který si můžete zdarma stáhnout v úložišti pluginů WordPress.

Plugin vám umožní umístit jeden obrázek na druhý a umožní vám hrát s posuvníkem, abyste jej mohli skrýt / odhalit. Podívejte se na ukázku a uvidíte, o čem mluvíme.

Dobře, nyní, když jste připojeni k tomuto malému pluginu, uvidíme, jak vytvořit tento ohromující efekt. I když je poměrně snadné znovu vytvořit demo efekt, budete stále potřebovat znát cestu kolem základního HTML. Pojďme:

  1. Vytvořte nový příspěvek nebo otevřete existující příspěvek
  2. Vložte dva obrázky do příspěvku. Pokud pracujete v Visual Editoru, měli byste vidět obrázek jeden nad druhým. Pokud pracujete v textovém editoru, měli byste vidět kód podobný tomuto:
  3. 
    
    
    
  4. Před první obrázek zadejte značku [twentytwenty]
  5. Po druhém zadejte značku [/ twentytwenty]
  6. V textovém editoru byste měli něco takového skončit:

    [dvacet]
    
    
    
    [/ twentytwenty]
    
  7. Abyste dosáhli nejlepších výsledků, ujistěte se, že jsou vaše obrázky stejné velikosti
  8. Náhled nebo publikování příspěvku a užijte si vizuální ohromení před a po obrázcích

Jak vytvářet interaktivní obrázky – kreslit, přidávat popisy a odkazy

Dnes je obtížné provozovat web bez multimédií. Obrázky, videa a hudba jsou součástí prakticky každého webu. Průměrný uživatel internetu je silně závislý na vizuálních podnětech, takže se musíte starat o vizuální a interaktivní části vašeho webu. Články s obrázky přijímají 94% více zhlédnutí než ti bez nich. Je také známo, že multimédia na webových stránkách mohou zvýšit návratnost investic do marketingu obsahu.

Doufáme, že vás nemusíme přesvědčovat, abyste se na svých stránkách starali o obrázky. I když nepoužíváte obrázky ve článcích (které byste měli), používáte doporučené obrázky, že? Existuje poměrně mnoho doplňků galerie, které vám mohou pomoci spravovat obrázky na vašem webu WordPress, můžete mít témata související s fotografováním, připojit Instagram k vašemu webu WordPress a udělat tak mnohem více. Ale co kdybyste chtěli vytvořit více interaktivního obsahu?

Pro začátečníky by vás mohlo zajímat přidání obrazových efektů, které budou vaši uživatelé milovat. Nezapomeňte na Virtuální realitu ve WordPress, která je čím dál populárnější poté, co Automattic představil VR na WordPress.com. Stále něco chybí. Je možné vytvářet interaktivní obrázky s klikatelnými díly? Ano, je to možné a chystáme se vám ukázat, jak zábavné a snadné to je.

Upozornit

CENA: Zdarma
DEMO

První věc, kterou se vám bude líbit, je, že je zcela zdarma! Stejně jako u jakéhokoli jiného pluginu z úložiště WordPress si jej můžete během několika minut stáhnout, nainstalovat a aktivovat. Bezplatná verze vám umožní pracovat s jedním interaktivním obrázkem. Pokud chcete více, budete se muset přihlásit k verzi PRO, ale o tom si promluvíme později.

Plugin reaguje a nemusíte se obávat, že se interaktivní obrázky na jakémkoli zařízení zobrazují správně. Nejen, že se obrázek bude škálovat podle velikosti obrazovky, ale bude fungovat ve většině moderních a starších prohlížečů (stolních i mobilních). Draw Attention používá prvky plátna, když jsou zobrazeny v nových prohlížečích, zatímco pokud je načtete do staršího, vrátí se do obrazových map..

Funkce

Než se dostaneme k příkladu, který vám ukáže, jak mocný tento jednoduchý plugin je, podívejme se, co můžete očekávat od Draw Attention:

  • Kreslit – Po nahrání obrázku získáte šanci na něj nakreslit obrazce. Vyberte jakoukoli část vašeho obrázku, na kterou bude možné kliknout
  • Barvy – Přizpůsobte barvy tak, abyste si hotspoty mohli přizpůsobit designu svého webu
  • Zvýrazněte kurzor – Zobrazit jinou část obrázku, pokud se uživatel přesune nad vybranou část
  • Zobrazit více informací – Zobrazit další informace o vybrané části obrázku
  • Přejděte na adresu URL – Přesměrujte uživatele na libovolnou adresu URL, pokud kliknou na výběr

Nakreslete nastavení pozornosti

Příklad – interaktivní mapa Havaje

Použijeme příklad z demonstračního webu, abychom vám ukázali, co přesně s Draw Attention můžete udělat. Podívejme se tedy, jak vypadá interaktivní mapa Havaje, když byla vytvořena pomocí pluginu.

První věc, kterou byste museli udělat, je najít obraz Havajských ostrovů. Poté, co přejdete na Upozornit -> Upravit obrázek, měli byste nahrát obrázek do oblasti na pravém postranním panelu. Jakmile se obrázek načte, zábava může začít.

Zde si můžete vybrat barvy pro zvýraznění (barva, ohraničení, neprůhlednost atd.), Upravit „další informační pole“ (obrázek, nadpis, barva textu atd.). Pokud nechcete vybrat každou barvu obrázku ručně, můžete rychle vybrat barevné schéma z pravého postranního panelu.

Upozornit - jak vytvářet interaktivní obrázky ve WordPressu

Nejhmotnější část se odehrává v Oblasti hotspotu obrazovka nastavení. Zde získáte obrázek v plné velikosti. Jediné, co musíte udělat, je začít kreslit a vytvářet nový hotspot. Můžete přidat libovolný počet bodů, což znamená, že můžete vytvářet komplexní výběry, jak chcete. Můžete vytvořit tolik hotspotů a každý může mít svá vlastní nastavení.

V tomto příkladu byste tedy měli vybrat jeden z ostrovů. Vyberte název ostrova, přidejte popis a další obrázek, který se zobrazí, jakmile se uživatel umístí na aktivní bod (pravá část obrázku GIF zobrazeného výše).

Měli byste opakovat proces pro každý z ostrovů, které chcete být interaktivní. Až budete hotspoty hotové, zkopírujte krátký kód z pravé strany. Vložte krátký kód do příspěvku, stránky, widgetu nebo kamkoli chcete, aby se vám zobrazila nová interaktivní mapa, a máte hotovo! Pokud chcete uživatele přesměrovat na jakoukoli jinou stránku, jakmile kliknou na výběr, stačí místo popisu vybrat adresu URL. Snadno!

PRO verze

Zatímco bezplatná verze bude perfektní, pokud potřebujete jen jeden obrázek, PRO verze vám umožní mít na vašem webu tolik interaktivních obrázků, kolik chcete. Ačkoli to bude nejdůležitější věc, kterou byste měli zvážit, verze PRO vám poskytne ještě více než více obrázků.

Funkce Možnosti rozvržení vám umožní zobrazit další informace o vybraných částech obrázku. Můžete například zobrazit informace v lightboxu nebo na jednoduchém panelu nástrojů, který se objeví poté, co se uživatel přesune nad vybranou část obrázku.

K dispozici je také dvacet předdefinovaných barevných palet, takže nemusíte upravovat každou barvu ručně. Verze PRO vás bude stát 74 USD za licenci na jeden web, ale pokud potřebujete více než jeden interaktivní obrázek, bude to neomylný.

Jak regenerovat další velikosti obrázku

Je poměrně snadné zaregistrovat nové velikosti obrázků v motivu WordPress. Poté, co jste svému systému řekli, jak velké by měly být vaše obrázky, pojmenujte je a rozhodl se je oříznout, můžete obrázky distribuovat kamkoli budete chtít. Ale co staré obrázky?

Pokud jste použili jednu z technik, které jsme vám ukázali, připravili jste trávník na nové obrázky. Ať už používáte nově zaregistrované velikosti obrázků pro miniatury příspěvků, nebo povolíte autorům jejich použití v příspěvcích, nová pravidla platí pouze pro obrázky, které jsou nahrány po provedení změny v souboru function.php. Chcete-li změnit starší obrázky, doporučujeme použít plugin Regenerate Thumbnails.

Regenerovat miniatury:

CENA: Zdarma
  1. Jít do Pluginy-> Přidat nový
  2. Hledat “Regenerate Thumbnails”
  3. Nainstalujte a aktivujte plugin
  4. Navigovat do Nástroje-> Regen.Thumbnails

Pokud chcete změnit velikost všech svých obrázků, jednoduše klikněte na tlačítko „Regenerovat všechny miniatury“ a počkejte, než plugin provede tvrdou práci.

Jak regenerovat další velikosti obrázku

Pokud si chcete prohlédnout obrázky, které mají být změněny, nebo pokud chcete změnit velikost pouze některých obrázků, přejděte do knihovny médií, kde najdete novou možnost v části Hromadné akce a jednu vedle každého obrázku v galerie.

Dobrá věc na pluginu je, že neodstraní vaše původní obrázky. Vytvoří pouze nové velikosti obrázků, které můžete použít ve svém motivu, zatímco původní velikosti vám zůstanou, abyste je později mohli použít, nebo je smažete ručně, pokud se rozhodnete, že je nepotřebujete..

A je to. Užijte si své nové miniatury nebo se podívejte na Jednoduché velikosti obrázků plugin, který dokáže udělat totéž.

Odstraňte atributy obrazu šířky a výšky pomocí jQuery

Při přidávání obrázků do příspěvku WordPress systém automaticky přidá do obrázku jeho atributy výšky a šířky. To je obvykle dobrá věc, ale jsou chvíle, kdy se vám nebude líbit skutečnost, že každý obrázek získá tyto atributy.

Pokud chcete odstranit atributy přímo v okamžiku nahrávání, můžete to udělat pomocí jednoduché funkce, kterou jsme vám ukázali naposledy.

Pokud si však článek přečtete nebo vyzkoušíte funkci sami, všimli jste si, že to ovlivní pouze obrázky nahrané po instalaci funkce do vašeho systému WP. Pokud již máte databázi plnou příspěvků s vloženými obrázky, výše uvedená funkce vám s vašimi starými atributy obrázků moc nepomůže.

Protože pravděpodobně nemůžete ručně procházet každý obrázek a mazat šířku a výšku jeden po druhém, pravděpodobně budete potřebovat jinou funkci, která tyto atributy odstraní pro všechny existující obrázky vložené do vašich příspěvků. V takovém případě jste na správném místě, protože vám chceme ukázat jednoduchý způsob automatického odstranění atributů obrazu šířky a výšky pomocí několika řádků kódu jQuery. S předchozí větou se nemusíte bát – nemusíte ani vědět, co je jQuery, postupujte podle následujících tří kroků a budete hotovi v jiffy.

Odebrat atributy obrázku šířka a výška:

  1. Otevřete soubor header.php ze složky motivu
  2. Zkopírujte a vložte tento kód kamkoli mezi a tagy:
  3.  
  4. Uložit změny

A máte hotovo! Kód udělá své kouzlo po otevření příspěvku, který obsahuje obrázek a odstraní z něj značky šířky a výšky.

Jak vytvořit vlastní velikosti obrázků v programu Media Uploader

Pokud používáte Media Uploader k práci s obrázky ve WordPress, pravděpodobně jste viděli mnoho možností pro obrázky. Mezi mnoha z nich si můžete vybrat velikost obrázku, kterou můžete poslat do svého článku.

Na výběr jsou možnosti miniatur, střední, velké a plné velikosti, ale všechny tyto možnosti mají předdefinované hodnoty. Pokud tedy používáte vlastní motiv, častěji než kdykoli budete zasekávat se měnící se šířkou a výškou pro každý obrázek znovu a znovu.

Vlastně to nemusíte dělat. Existuje úhledná malá funkce s názvem add_image_size (), což je skvělý nástroj pro vývojáře. A po tomto článku bude pro vás také užitečné.

Řekněme, že vaše téma má vlastní šířku a chcete snadno vložit obrázky, aby se tam perfektně hodily. Řekněme, že šířka je 666 pixelů (nebudeme se zabývat tím, proč jste nastavili šířku na toto číslo, je to vaše volba). Chcete-li to provést, musíte do aplikace Media Uploader přidat další přepínač. S níže uvedeným kódem přidáte ještě jednu velikost, což je poloviční velikost původní velikosti.

  1. Otevřete soubor features.php
  2. Zkopírujte a vložte tento kód:
  3. function custom_image_sizes () {
    add_image_size ('one-size', 333, 333, true);
    add_image_size ('other-size', 666, 666, true);
    }
    
    add_action ('init', 'custom_image_sizes');
    
    funkce show_image_sizes ($ velikosti) {
    $ velikosti ['one-size'] = __ ('Custom Size 1', 'isitwp');
    $ velikosti ['other-size'] = __ ('Custom Size 2', 'isitwp');
    vrátit $ velikosti;
    }
    
    add_filter ('image_size_names_choose', 'show_image_sizes');
  4. Uložit změny
  5. Zkuste přidat obrázek z aplikace Media Uploader, kde byste měli vidět své nové možnosti velikosti v části „Nastavení zobrazení příloh“

Vytvořte automatický snímek obrazovky libovolného webu a publikujte jej jako obrázek ve svém příspěvku

Pokud chcete zobrazit miniaturu webové stránky, měli byste jít na webovou stránku, vytisknout ji nebo pořídit snímek obrazovky s programem nebo doplňkem prohlížeče. Pak budete muset obrázek upravit, oříznout na správnou velikost a nahrát do WordPress, abyste mohli použít snímek obrazovky v příspěvku.

Pokud tuto snímek nemusíte pořizovat občas, nebude to problém, ale pokud používáte snímky obrazovky z různých webových stránek častěji, budete rádi, když uslyšíte, že existuje úžasná funkce, která ušetří vám čas a nervy.

V této části průvodce vám chceme ukázat úplnou funkci, která vytvoří krátký kód, který můžete použít k pořízení snímků libovolné webové stránky, kterou chcete..

Vytvořit automatický snímek obrazovky:

  1. Otevřete function.php
  2. Zkopírujte a vložte následující kód:
  3. funkce wp_webscreen ($ atts, $ content = NULL) {
    extrakt (shortcode_atts (array (
    "snap" => 'http://s.wordpress.com/mshots/v1/',
    "url" => 'http://www.firstsiteguide.com',
    "alt" => 'wploop',
    "w" => '600', // šířka
    "h" => '450' // výška
    ), $ atts));
    
    $ img = ''. $ alt. '';
    návrat $ img;
    }
    add_shortcode ("screen", "wp_webscreen");
  4. Změňte výchozí proměnné v poli
  5. Uložit změny

Tato funkce vytvoří krátký kód, který můžete snadno použít kdekoli na svém webu WordPress. Ať už chcete například použít screenshot webové stránky v příspěvku, widgetu postranního panelu nebo v zápatí, jednoduše na krátkém kódu c / p na správném místě:

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

Co je skvělé na této funkci je, že uloží obrázek jako dynamickou adresu URL, což znamená, že jakmile vytvoříte snímek s krátkým kódem, v budoucnu se automaticky obnoví a vždy zobrazí aktuální vzhled webových stránek uvedených v krátkém kódu..

Mějte na paměti, že z něj můžete přímo změnit parametry krátkého kódu. Pokud chcete pořídit snímek jiné adresy URL nebo vzít snímek v jiné dimenzi, nemusíte upravovat kód v souboru features.php..

Příklad:

Řekněme, že chcete pořídit snímek obrazovky Google a zvětšit jej na 200 × 400 pixelů:

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

Vše můžete ještě usnadnit uložením krátkého kódu do tlačítka, takže jej můžete vložit do příspěvku jediným kliknutím na tlačítko.

Závěr

Nemusíte instalovat všechny pluginy a funkce, které jsme zmínili, abyste vylepšili obrázky na svém webu WordPress. Doufáme však, že jste našli alespoň několik tipů, které vám pomohou optimalizovat obrázky nebo je jakýmkoli způsobem vylepšit.

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