Jak udělat WordPress Obrázky reagovat
WordPress je opravdu mocná platforma. Vytváření citlivého tématu a jeho začlenění je docela snadné, jakmile znáte základy témat. Odpovědné obrázky, na druhé straně, nejsou něco, co se WordPress zabývá mimo krabici. Mohli byste jít dolů po cestě ruční generování každé velikosti obrazu, pak v editoru HTML můžete ručně napsat značku obrázku, srcset atributy a každý obrázek. Nejde to jen o čas, ale může to být problém pro všechny administrátory, kteří nejsou HTML gramotní.
Naštěstí existuje způsob, jak WordPress udělat vše těžké zvedání. Může generovat všechny velikosti obrázků z jednoho snímku a potom prostřednictvím pluginu implementovat značku obrázku a atributy srcset kdekoli se autor rozhodne vložit obrázek.
Krok 1: Upravte funkce functions.php a vygenerujte další velikosti snímků
Pokaždé, když nahrajete obrázek, WordPress jej ukládá ve své původní velikosti. V těchto standardních velikostech také automaticky vygeneruje 3 kopie velikosti (buď výška nebo šířka se mohou měnit podle poměru snímků):
- Miniaturní (150 × 150)
- Střední (300 × 300)
- Velké (1024 × 1024)
Je to opravdu výkonná funkce, protože lze přizpůsobit libovolnou velikost obrazu. To znamená, že nemusíte vytvářet více kopií snímku v různých velikostech. Právě nahrajete jeden snímek a aplikace WordPress vytvoří kopie velikosti.
To se provádí úpravou souboru functions.php. Chcete-li přidat nové velikosti obrázků, je třeba přidat volání do funkce add_image_size . Zde je příklad, který přidává čtyři nové velikosti snímků:
add_image_size( 'sml_size', 300 );add_image_size( 'mid_size', 600 );add_image_size( 'lrg_size', 1200 );add_image_size( 'sup_size', 2400 );Každá volání funkce obsahuje název (takže WordPress může identifikovat velikost) a šířku. Nové rozměry budou mít šířku 300, 600, 1200 a 2400 pixelů. Je možné, že pomocí funkce add_image_size funkce WordPress také nastaví výšku nebo oříznutí obrazu, ale výše uvedený příklad zachová původní poměr stran obrazu. (Více se dozvíte o funkci add_image_size v souboru WordPress Codex .)
Výše uvedený příklad zobrazuje pouze čtyři nové přidané velikosti obrázků, ale možná budete chtít přidat více či méně ... bude to založeno na návrhu motivu. Nyní, kdykoli se obrázek přenese do aplikace WordPress, generuje nové velikosti obrázků. Dalším krokem je zahrnutí do HTML.
Krok 2: nainstalujte plugin RICG Responsive Images
Aby aplikace WordPress mohla produkovat všechny velikosti obrázků, je třeba nainstalovat nový plugin: RICG citlivé obrázky zapojit. Po instalaci a aktivaci budou všechny velikosti obrázků zahrnuty do značky obrázků pomocí atributu srcset.
Typicky, když je obrázek přidán do stránky v aplikaci WordPress, výstupní HTML vypadá takto:
V atributu src je jeden obrázek.
Po instalaci pluginu bude HTML vypadat takto:
Všechny nové velikosti obrázků byly přidány pomocí atributu srcset .
Plugin také obsahuje Picturefill.js , citlivý obraz polyfill, který přidává podporu jak prvku obrazu, tak novým atributům pro element img. Toto, společně s atributy srcset, které jsou nyní součástí tagu obrázku, je to, co činí vaše snímky citlivé.
Vaše snímky nyní reagují
Nyní budou obrázky na vašem webu reagovat - prohlížeč zvolí nejvhodnější obrázek ke stažení.
Uživatelé na zařízeních s menšími obrazovkami získají menší obrázky. Vaše webové stránky se budou načítat rychleji, protože tyto obrázky budou stahovat rychleji, budou potřebovat méně šířky pásma uživatelů. Uživatelé na zařízeních s většími obrazovkami získají větší obrázky. Neobjevují se pixely nebo mají nižší kvalitu.
Existuje pouze jeden potenciální problém s touto metodou: bude pracovat pouze s obrázky nahranými do aplikace WordPress po instalaci pluginu RICG Responsive Images. Pokud se jedná o zbrusu novou webovou stránku, na které pracujete, nemusí to být problém, avšak jestliže je to stávající web s existujícím obsahem, nové velikosti obrázků, které jste přidali do funkce functions.php, nebudou vygenerovány. Naštěstí nemusíte znovu přidávat všechny obrázky - existuje plugin, který vám může pomoci.
Krok 3: Instalace pluginu pro opětovné generování velikostí obrázků (volitelné)
The Regenerovat miniatury plugin projde všemi existujícími přílohami obrázků a znovu generuje nové velikosti obrázků na základě nových vytvořených v functions.php - je to spořič v reálném čase a vyžaduje pouze kliknutí jediného tlačítka.
Po instalaci přejděte do Nástroje -> Regen. Miniatury a potom klikněte na tlačítko "Regenerovat všechny miniatury". Objeví se stavový řádek a uvidíte informace o tom, kolik obrazů bylo změněno.
Nyní budou všechny existující obrázky na vašem webu zobrazovány správně pomocí značky obrázků pomocí atributu srcset .
Vybrané snímky používají obrázek zařízení a obrázek mobilního zařízení přes Shutterstock.