Vytváření odpovědné záhlaví ve WordPressu 3.4

Mezi všechny nové funkce a vylepšení, které nedávné vydání WordPress 3.4 představil, je skrytý klenot. Funkce vlastního záhlaví hlaviček byla již nějakou dobu podporována aplikací WordPress, avšak již dříve její pevné rozměry byly příliš nepohyblivé, aby byly ve věku citlivého designu hodně užitečné.

Nová verze je flexibilní a zavádí jednodušší a čistší kód pro tuto oblíbenou volbu. Jako vývojáři témat nyní můžeme jít dál, s ohledem na potřebu optimalizace pro mobilní návštěvníky.

Dříve byly rozměry hlavičkového obrazu předdefinovány a spravovány pomocí HEADER_IMAGE_HEIGHT a HEADER_IMAGE_WIDTH konstant a nahraný soubor byl oříznut tak, aby odpovídal těmto omezením. Ale od verze 3.4 vlastní obrázek záhlaví podporuje flexibilní šířky a výšky a osvobozuje nás od těchto ošklivých konstant. Zní to zajímavě, že? Uvidíme, jak to lze udělat.

Co budeme dosáhnout

Nejdříve bychom se měli rozhodnout, která z dostupných (a široce diskutovaných) schopností citlivých obrazů nám vyhovuje. Můžeme si dovolit vlastní značku pro tento obrázek, přičemž vezmeme v úvahu jeho důležitost pro branding stránek a zároveň jeho nezávislost na struktuře či značení příspěvku. Z tohoto pohledu je technika "noscript" opravdu slibná. Chcete-li shrnout techniku, funguje to takto:

Specifikujeme alternativní obrazové odkazy pro vybrané zarážky jako datové atributy a

Měla by být doprovázena příslušným stylem CSS a skriptem, který dává práci jQuery Picture. Kromě toho bychom chtěli mít předem vymezený soubor záhlaví, který by byl vybrán (stejným způsobem jako v tématu Twenty Eleven). Dále bychom chtěli dát uživateli možnost nahrát svůj vlastní obrázek do administrátorského panelu. Za předpokladu, že dojde k nahrání plnohodnotné verze snímku, vytvoříme potřebné střední velikosti s vestavěnou podporou náhledů WordPress v kombinaci s flexibilními hlavičkami. Vlastní hlavička by měla vypadat takto:

Dost, promluvme se do kódu.

Krok 1: zaregistrujte vlastní hlavičku s vaším tématem

$default_url = get_template_directory_uri().'/_inc/img/city-large.jpg';$args = array('default-image'          => $default_url,'random-default'         => false,'width'                  => 1000,'height'                 => 300,'flex-height'            => true,'flex-width'             => true,'header-text'            => false,'default-text-color'     => '','uploads'                => true,'wp-head-callback'       => 'frl_header_image_style','admin-head-callback'    => 'frl_admin_header_image_style','admin-preview-callback' => 'frl_admin_header_image_markup',);add_theme_support('custom-header', $args);

Jedná se o nový registrační kód zavedený v aplikaci WordPress 3.4. Vidíte v něm celou sadu parametrů Kodex , ale pro náš úkol jsou nejdůležitější následující:

• default-image - url do plné velikosti výchozího obrázku ve složce motivu
• width , height - maximální hodnoty podporované naším tématem
• flex-height , flex-width - nastavte jako "true" tyto parametry umožňují flexibilní velikosti obrazu
• header-text - v našem tématu se nezobrazí text nad obrázkem
• uploads Povolit nahrávání v admin
• wp-head-callback - funkce, která se má volat v sekci sekce témat
• admin-head-callback - funkce, která se má volat v sekci náhledu stránky náhledu
• admin-preview-callback - funkce pro vytváření náhledu v administrátorské obrazovce

Pokud jste v předchozím tématu použili vlastní hlavičkový obrázek a přemýšlíte nad tím, jak se porovnávají techniky, je zde seznam ekvivalentů mezi starými konstantami a novými parametry (klíče pole):

HEADER_IMAGE        -> 'default-image'HEADER_IMAGE_WIDTH  -> 'width'HEADER_IMAGE_HEIGHT -> 'height'NO_HEADER_TEXT      -> 'header-text'HEADER_TEXTCOLOR    -> 'default-text-color'

Krok 2: Zaregistrujte výchozí obrázky, ze kterých si můžete vybrat

V našem příkladu poskytneme dva předdefinované obrázky jako možnosti pro záhlaví a každá z nich by měla mít tři varianty: -large.jpg , -medium.jpg a -thumb.jpg pro odpovídající rozsah šířky oken. Nejmenší velikost bude také použita jako miniaturka v administrátorském rozhraní.

register_default_headers(array('city' => array('url' => '%s/_inc/img/city-large.jpg','thumbnail_url' => '%s/_inc/img/city-thumb.jpg','description' => 'City'),'forest' => array('url' => '%s/_inc/img/forest-large.jpg','thumbnail_url' => '%s/_inc/img/forest-thumb.jpg','description' => 'Forest')));

Kód je zcela vysvětlující, jediný detail, který vyžaduje pozornost, je správná url pro obrázky: -large.jpg pro plnou velikost a -thumb.jpg pro náhled ( %s - je zástupným místem pro aktivní složku témat, která bude automaticky nahrazena aplikací WordPress).

Krok 3: zaregistrujte další velikosti obrázků

add_image_size('header_medium', 600, 900, false);add_image_size('header_minimal', 430, 900, false);

Zaregistrováním těchto dodatečných velikostí s námětem budeme instruovat WordPress, aby vytvořil variantu pro každou z nich při nahrávání obrázku pro vlastní hlavičku. Vhodnou variantu lze získat později pomocí jména. Trikem je specifikovat poměrně vysokou hodnotu výšky, což způsobuje, že obraz má být změněn o šířku a jeho výška je odvozena z poměru stran.

Krok 4: Značka pro front-end

function frl_header_image_markup(){/* get full-size image */$custom_header = get_custom_header();$large = esc_url($custom_header->url);$mininal = $medium = '';/* get smaller sizes of image */if(isset($custom_header->attachment_id)){ //uploaded image$medium_src = wp_get_attachment_image_src(intval($custom_header->attachment_id), 'header_medium', false);if(isset($medium_src[0]))$medium = esc_url($medium_src[0]);$minimal_src = wp_get_attachment_image_src(intval($custom_header->attachment_id), 'header_minimal', false);if(isset($minimal_src[0]))$mininal = esc_url($minimal_src[0]);}else{ //default image$medium = esc_url(str_replace('-large', '-small', $custom_header->url));$mininal = esc_url(str_replace('-large', '-thumb', $custom_header->url));}/* fallback for some unexpected errors */if(empty($medium))$medium = $large;if(empty($mininal))$mininal = $large;?>

Opět je vše jednoduché. S frl_header_image_markup funkce vytváříme značku potřebnou pro naši schopnost reagovat. Nejzajímavější částí je získání adres URL obrázků pro velké, střední a malé státy. Funkce WordPress 3.4 get_custom_header vrátí vlastní objekt záhlaví, který obsahuje všechna potřebná data. Li $custom_header je správně nastavena attachment_id vlastnictví, máme co do činění s nahraným obrazem a měli bychom získat střední velikosti pomocí wp_get_attachment_image_src . Pokud taková vlastnost neexistuje, jednáme s jedním z našich výchozích obrázků, abychom získali středně velké velikosti založené na vlastním pojmenování.

S frl_header_image_style my vstřikujeme CSS a JavaScript, díky nimž bude náš obraz reagovat. Tato funkce se bude volat automaticky, protože jsme ji specifikovali jako vlastní registrační parametr záhlaví. Ale _markup funkce by měla být volána přímo v tématu - samozřejmě někde uvnitř header.php

Po tomto kroku jsme již dříve zobrazili náš první výchozí snímek hlavičky citlivě.

Krok 5: Označení náhledu adminem

Ve skupinovém rámečku Vzhled -> Záhlaví máme nyní obrazovku, která nám umožňuje změnit vlastní obrázek záhlaví výběrem jednoho z předdefinovaných možností nebo nahráním nového obrázku. Budeme mít hlavičku vypadat jednoduše.

function frl_admin_header_image_markup() {$image = get_header_image();?>
#header-image {max-width: 1000px;max-height: 400px; }#header-image img {vertical-align: bottom;width: 100%;height: auto; }

V administraci používáme v naší značce pouze jednu velikost obrázku (plnou) a získáme její adresu URL get_header_image funkce ( frl_admin_header_image_markup za to odpovídá). Měli bychom však poskytnout vhodný styl pro náhled tak, aby reprezentoval citlivé chování ( frl_admin_header_image_style za to odpovídá). Obě funkce budou volána automaticky, protože jsme je specifikovali jako vlastní registrační parametry záhlaví. Nyní můžeme mít absolutní svobodu a nastavit vlastní hlavičkový obrázek.

Slovo opatrnosti

Se svobodou přichází odpovědnost. Umožňuje uživateli flexibilitu nahrát vlastní obrázky, nemáme žádnou kontrolu nad velikostí a proporcemi obrazu. Pokud nahraný snímek přesáhne stanovené šířky a výšky, měl by být oříznut. Pokud se však toto vše stane v novém Live Theme Customizer místo obrazovky Appearance -> Header , obrázek záhlaví nebude oříznut (alespoň zatím). Live Theme Customizer je zcela novou vlastností, takže budoucí vylepšení jsou zřejmě pravděpodobné, ale prozatím bychom měli být opatrní.

Další problém by mohl vzniknout, pokud má nahraný snímek menší šířku, než je určen tvarem motivu. Náš kód bude natáhnout tak, aby vyplnil celou šířku kontejneru, aby mohla trpět kvalita obrazu. Pravdou je, že vše, co lze přizpůsobit, může být svou povahou přerušeno. Poskytnutí pevných pokynů vašim uživatelům vám pomůže, ale do jisté míry je musíte nechat dělat tak, jak to bude.

Závěr

Shrnutí: Nyní jsme implementovali nové funkce představené v novější verzi aplikace WordPress 3.4, která podporuje vlastní hlavičkový obrázek. Učinili jsme to pomocí technologie "noscript" , která nám umožňuje nejen přizpůsobit velikost obrazu v závislosti na šířce prohlížeče, ale také zobrazovat obrázky různých velikostí pro různé šířky. Téma dodáváme s dvěma předdefinovanými variantami, ale každý obrázek by mohl být nahráván přes rozhraní administrátora a naše záhlaví bude stále citlivé.

Můžete si stáhnout kód a ukázkové obrázky použité v tomto článku odtud .


Pracovali jste s vlastními záhlavími v aplikaci WordPress? Jaké vylepšení ve verzi 3.4 mají vliv na to, jak pracujete s aplikací WordPress? Připojte se ke konverzaci níže.