Divi: Nejlepší WordPress téma všech dob!

více Stahování 901.000, Divi je nejoblíbenější téma WordPress na světě. Je kompletní, snadno použitelný a je dodáván s více než šablonami 62 zdarma.

I když nelze ignorovat rostoucí přijetí responzivních obrázků, může být velmi obtížné využít tuto funkci v rámci omezení velkého CMS, jako je WordPress. I když je zcela možné navrhnout funkci ve vašem tématu sami, je to obtížné úsilí a vyžaduje to čas.

Naštěstí se spuštěním WordPress 4.4 budou mít vývojáři témat a pluginů možnost používat ve svých produktech responzivní obrázky. Od začátku tohoto vydání byl do jádra WordPressu sloučen plugin „Responsive Images RICG“, což znamená, že podpora responzivních obrázků je nyní jako interní výchozí funkce WordPress. Pojďme se podívat na to, jak to funguje a jak jej můžete využít k tomu, abyste ze svého webu WordPress dostali to nejlepší.

reagující-image-trac-wordpress

Jak fungují citlivé snímky

Jakmile upgradujete na WordPress 4.4, veškerý váš obsah a obrázky budou mít znaky „srcset“ a „ velikosti Které jsou filtrovány, aby se zajistilo, že existuje každá dostupná velikost obrázku, při zachování velikosti původního požadovaného obrázku. Je důležité si uvědomit, že vlastní změny budou ignorovány z „ srcset »Pokud se poměr stran liší od požadovaného původního obrazu. Navíc vyvoláním obrázku pomocí funkce " wp-get-attachment image Vrátí také citlivý obraz.

Dále jen " Citlivé obrazy Jedná se o funkci na pozadí, což znamená, že vše se děje automaticky pokaždé, když uživatel nahraje obrázek na WordPress prostřednictvím rozhraní pro nahrávání médií. Když se obrázek objeví na stránce, bude mít atribut „ srcset "A" velikosti V důsledku tohoto procesu na pozadí.

To znamená, že nová funkce responzivních obrázků nebude mít viditelné uživatelské rozhraní. Nejsou k dispozici žádné možnosti přepínání, vyplnitelné formuláře ani zaškrtávací políčka. To znamená, že vývojáři témat by měli upravit své „ functions.php Aby jejich obrázky měly přesnost s atributem „ velikosti ". Ve skutečnosti, když mluvíme o responzivních obrázcích ve WordPressu, mluvíme konkrétně o atributech “ srcset "A" velikosti Které se nacházejí na značce obrázku.

Zatímco WordPress udělá výjimečnou úlohu vložením všech dostupných velikostí do atributu “ srcset ", Atribut" sizes "je předvídání o něco obtížnější. Vlastně atribut „ velikosti Je odpovědný za to, že prohlížeči sdělí, jak je obrázek podle dostupných rozměrů okna. Vzhledem k tomu, že se informace budou lišit v závislosti na stylu uživatelského motivu, nejlepší, co můžeme udělat, je poskytnout rozumné výchozí nastavení takto:

Vytvořte si snadno svůj web pomocí Elementoru

Elementor vám umožní tvořit Snadno a zdarma jakýkoli design webových stránek nebo blogu s profesionálním vzhledem. Přestaňte platit hodně za web, který si můžete udělat sami.

sizes="(max-width: {{image-width}}) 100vw, {{image-width}}"

Tento výchozí atribut „ velikosti Dělá dvě věci. Nejprve se ujistí, že platný atribut „ velikosti Existuje na obrázku, který se nedávno stal povinným požadavkem podle specifikace. Za druhé zajišťuje, že prohlížeč neposkytuje zdroj obrázku, který je větší než původní požadovaná šířka. V případě manipulace s CSS se velikost obrázku bude lišit v závislosti na šířce oken, na druhou stranu výchozí hodnota " velikosti Bude méně užitečný.

Od výchozího atributu „ velikosti „Pomůže pouze s obrázky, které CSS nezmění, budou k dispozici závorky filtrů, které vývojářům motivů umožní nastavit„ atribut “ velikosti „Z každého obrázku je zajištěno, že je dokonalý“ velikosti Dodává se do každého zastavovacího bodu.

Chcete prodávat své produkty na internetu?

Stáhněte si zdarma WooCommerce, nejlepší pluginy pro e-commerce pro prodej vašich fyzických a digitálních produktů na WordPress a snadné vytvoření vašeho online obchodu. Ideální pro začátečníky.

Je důležité si zde uvědomit, že pokud je to možné, nemělo by se vaše téma spoléhat na výchozí hodnotu velikosti„Poskytnout přesné informace o podpoře responzivního obrazu.“ Ve skutečnosti je výchozí atribut „ velikosti »Nepovoluje prohlížeči změnit zdroj obrázku, pokud je okno menší než původní velikost požadovaného obrázku. Nebude také možné změnit zdroj, pokud je obrázek upraven pomocí CSS v zarážce, když je obrázek možná větší než požadovaná původní velikost.

Pokud jste vývojář motivu nebo máte přístup ke kódové základně WordPress, filtrujte obrázky v motivu, abyste poskytli přesnost s atributem “ velikosti Je jednou z nejdůležitějších věcí, které můžete udělat po vydání nové verze brzy. Následuje příklad háku v „ wp_calculate_image_sizes Což můžete vyvinout tak, aby vyhovovalo vašemu tématu.

function adjust_image_sizes_attr( $sizes, $size ) {
   $sizes = '(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px';
   return $sizes;
}
add_filter( 'wp_calculate_image_sizes', 'adjust_image_sizes_attr', 10 , 2 );

V tomto příkladu se zaškrtnutí použije na veškerý obsah včetně doporučených obrázků a miniatur. Lze přidat další logiku, která zajistí, že různé typy obrázků budou mít různé hodnoty.

code-source-wp-image-citlivý

Byly přidány nové funkce pro atribut „ srcset "A" velikosti Lze přidat k obrázku, který byl přidán do WordPress prostřednictvím Správce médií, k obrázkům přidaným k zobrazení obsahu. Funkce wp_get_attachment_image_sizes Vrátí výchozí atribut “ velikosti Který lze upravit filtrem motivu v souboru " functions.php “. Funkce wp_get_attachment_image_srcset vrátí atribut srcset »Který bude obsahovat všechny dostupné velikosti požadovaného obrázku. Naleznete dokumentaci a příklady použití těchto nových funkcí referenční adresář vývojářů.

Konfigurace responzivních obrázků pro vaše téma

S novými funkcemi přichází několik nových závorek, které lze použít k poskytnutí nové úrovně podpory pro responzivní obrázky, které nejlépe odpovídají vašemu tématu. Háček max_srcset_image_width "Umožní vývojáři motivů filtrovat maximální šířku obrázku, který má být zahrnut do" srcset “. Háček wp_calculate_image_srcset »Filtruje atributy« srcset »Obrázky, zatímco háček (filtr)« wp_calculate_image_sizes "Umožní vývojáři motivů přizpůsobit" velikosti Aby lépe odpovídaly zarážkám obrazu v jejich motivu.

Pokud hledáte příklad, jak nejlépe filtrovat atribut „ velikosti Z obrázku bude dokonalým příkladem nové téma twentysixteen. V souboru functions.php tohoto tématu filtrují poslední dvě funkce atribut „ velikosti Reagovat na různé zarážky obrazu v rámci motivu.

responzivní filtry obrázek Výukový program WordPress #

Aktualizace na WordPress 4.4 znamená, že uživatelé budou okamžitě těžit z responzivní kompatibility obrázků, která zvýhodní zobrazení ostrých a jasných obrázků při každé velikosti okna a hustotě pixelů. To také povede ke zvýšení výkonu, protože stránky již nebudou muset dlouho načítat velké a těžké obrázky. I když se jedná o automatický proces pro uživatele, vývojáři motivů budou muset upravit velikost obrázků pro jejich motivy.

To je vše pro tento tutoriál, doufám, že vám pomůže lépe porozumět významu a koncepci responzivních obrázků na WordPress. Neváhejte a sdílejte tento tutoriál se svými přáteli na svých oblíbených sociálních sítích.

 

11 akcie
podíl6
tweet1
Zadat4