Búa til móttækilegan haus í WordPress 3.4

Meðal allra nýrra aðgerða og úrbóta sem nýleg útgáfa af WordPress 3.4 hefur kynnt er falinn gimsteinn. The Custom Header Image lögun hefur verið stutt af WordPress um nokkurt skeið, en áður var fast stærð þess gerði það of óbreytt til að vera mikið notað á aldrinum móttækilegri hönnun.

Hin nýja útgáfan gerir það sveigjanlegt og kynnir auðveldara og hreinni kóða fyrir þennan vinsæla valkost. Sem þema verktaki getum við nú farið lengra með hliðsjón af nauðsyn þess að hámarka fyrir farsíma gesti.

Áður var málið á hausmyndinni fyrirfram skilgreint og tókst með HEADER_IMAGE_HEIGHT og HEADER_IMAGE_WIDTH fastar og skráin sem hlaðið var upp var klipptur til að passa þessar takmarkanir. En frá útgáfu 3.4 styður sérsniðin hausmyndin sveigjanlegan breidd og hæð og leysir okkur frá þessum ljótu stöðlum. Hljómar heillandi, er það ekki? Við skulum sjá hvernig hægt er að gera það.

Það sem við ætlum að ná

Fyrst af öllu ættum við að ákveða hver af þeim tiltækum (og víða ræddum) móttækilegum myndatækni mun henta okkur. Við getum veitt okkur sérsniðna merkingu fyrir þessa mynd, með hliðsjón af mikilvægi þess að vörumerkja svæðisins og á sama tíma sjálfstæði hennar frá uppbyggingu eða uppbyggingu póstsins. Frá þessu sjónarmiði lítur "noscript" tækni mjög áberandi. Til að draga saman tækni, virkar það sem hér segir:

Við tilgreinir aðrar myndarvísanir fyrir valin brotalínur sem gögnareiginleikar a

Það ætti að fylgja viðeigandi CSS stíl og handrit sem setur jQuery mynd í vinnuna. Burtséð frá því viljum við hafa sett af fyrirfram ákveðnum hausmyndum til að velja úr (á sama hátt og við höfum það í tuttugu og ellefu þema). Þar að auki viljum við gefa notandanum möguleika á að hlaða inn eigin mynd sinni í stjórnborðinu. Miðað við að full stærð útgáfa af myndinni sé hlaðið upp munum við búa til nauðsynleg millistig með innbyggðu WordPress smámyndir stuðningnum ásamt sveigjanlegum stærðum. Sérsniðin haus ætti að lokum að líta svona út:

Nóg tala, við skulum kafa inn í kóða.

Skref 1: Skráðu sérsniðið haus með þema þinni

$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);

Þetta er ný skráningarkóði kynnt í WordPress 3.4. Þú getur séð allt sett af breytum fyrir það í Codex , en fyrir verkefni okkar eru eftirfarandi mikilvægustu:

• default-image - url í fullri stærð sjálfgefin myndar í möppunni þema
• width , height - hámarksgildi sem þema okkar styður
• flex-height , flex-width - Stilltu sem "sönn" þessi breytur leyfa myndinni að hafa sveigjanlegar stærðir
• header-text - við ætlum ekki að sýna texta yfir mynd í þema okkar
• uploads - gera kleift að hlaða inn í admin
• wp-head-callback - Virka skal hringja í þemahlutdeild
• admin-head-callback - virka að hringja í forsýningarsíðu höfuðsíðu
• admin-preview-callback - virka til að framleiða forskoðunarmerki í stjórnaskjánum

Ef þú hefur notað sérsniðið hausmynd í þema þínu áður og er að velta því fyrir sér hversu tæknin er að bera saman, er hér listi yfir jafngildi milli gömlu mynda og nýrra breytinga (lyklar arrayar):

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

Skref 2: Skráðu sjálfgefna myndir til að velja úr

Í dæmi okkar munum við bjóða upp á tvær fyrirfram skilgreindar myndir sem valkosti fyrir hausinn og hver þeirra ætti að hafa þrjár afbrigði: -large.jpg , -medium.jpg og -thumb.jpg fyrir samsvarandi svið glugga breidd. Minnsti stærðin verður einnig notuð sem smámynd í stjórnborðinu.

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óðinn er alveg sjálfskýrandi, eina smáatriðið sem krefst athygli er rétt url fyrir myndirnar: -large.jpg fyrir fullri stærð og -thumb.jpg fyrir smámynd ( %s - er staðgengill fyrir virka þema möppuna sem verður sjálfkrafa skipt út fyrir WordPress).

Skref 3: Skráðu fleiri myndastærðir

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

Að skrá þessar viðbótarstærðir með þemað okkar mun leiðbeina WordPress til að búa til afbrigði fyrir hvert þeirra þegar þú hleður upp mynd fyrir sérsniðið haus. Viðeigandi afbrigði er hægt að nálgast síðar með því að nota nafnið. The bragð er að tilgreina nokkuð stór hæð gildi, þannig að sveitir myndina sem á að breyta stærð með breidd og skilur hæð þess að vera unnin úr hlutföllum.

Skref 4: Markmið fyrir framhliðina

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;?>

Aftur er allt einfalt. Með frl_header_image_markup virka við búum til markup sem þarf fyrir móttækilegan tækni okkar til að vinna. Áhugasamasta hlutinn hérna er að fá myndaslóðir fyrir stórar, miðlungs og smærri ríki. The WordPress 3.4 virka get_custom_header skilar sérsniðnum haus mótmæla sem inniheldur allar nauðsynlegar upplýsingar. Ef $custom_header hefur rétt sett attachment_id eign, við erum að fást við hlaðið mynd og ættum að fá millistig stærðar með því að nota wp_get_attachment_image_src . Ef það er engin slík eign eigum við að takast á við eina af vanræksluðum myndum okkar svo að við getum fengið millistigsstærð byggt á eigin nafngiftarsamningi okkar.

Með frl_header_image_style Við sprautum CSS og JavaScript sem gerir mynd okkar móttækileg. Þessi aðgerð verður kallað sjálfkrafa vegna þess að við höfum tilgreint það sem sérsniðið hausskráningarbreytu. En _markup virka ætti að hringja beint í þemað - augljóslega einhvers staðar inni í header.php

Eftir þetta skref höfum við nú þegar haft fyrstu sjálfgefna hausmyndina sem birtist á móttækilegan hátt.

Skref 5: Markup fyrir forskoðunarforrit

Undir Útlit -> Heiti valmyndinni höfum við nú skjá, sem gerir okkur kleift að breyta sérsniðnum hausmyndinni með því að velja einn úr fyrirfram ákveðnum valkostum eða hlaða upp nýju mynd. Við erum að fara að hafa hausinn að líta einfalt.

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; }

Í admin notum við aðeins eina myndastærð (full) í merkingu okkar og fá vefslóðina með get_header_image virka ( frl_admin_header_image_markup er ábyrgur fyrir því). En við ættum að veita viðeigandi stíl fyrir forskoðunina þannig að það táknar móttækilegan hegðun ( frl_admin_header_image_style er ábyrgur fyrir því). Báðar aðgerðir verða kallaðir sjálfkrafa vegna þess að við höfum tilgreint þau sem sérsniðnar hausskráningarbreytur. Nú getum við notið alger frelsis og stillt sérsniðið hausmynd.

Orð af varúð

Með frelsi kemur ábyrgð. Ef notandi er svigrúm til að hlaða upp sérsniðnum myndum höfum við ekki stjórn á stærð og hlutföllum myndarinnar. Ef upplýst mynd fer yfir breiddar- og hæðarmörk sem við höfum gefið upp ætti það að vera uppskera. En ef allt þetta gerist í nýju Live Themes Customizer í stað Útskins -> Header skjár, verður hausmyndin ekki uppskera (að minnsta kosti núna). The Live Theme Customizer er alveg nýtt eiginleiki svo að framtíðarbreytingar virðast líklega, en í dag ættum við að vera varkár.

Annað vandamál gæti komið upp ef myndin sem hlaðið er upp hefur minni breidd en það er ætlað af þemahönnuninni. Kóðinn okkar mun teygja það til að fylla alla ílátið breidd þannig að gæði myndarinnar gæti þjást. Sannleikurinn er eitthvað sem hægt er að sérhanna, að eðlilegu máli sé brotinn. Að veita traustar leiðbeiningar fyrir notendur þínar munu hjálpa, en að einhverju leyti þarftu að láta þá gera eins og þeir vilja.

Niðurstaða

Til að draga saman: Við höfum nú sett upp nýjar aðgerðir sem kynntar eru í WordPress 3.4 til að styðja við sérsniðna haussmynd. Við gerðum það móttækilegt með því að nota "noscript" tækni sem gerir okkur kleift að stilla ekki aðeins stærð myndar í samræmi við breidd vafra heldur einnig þjóna mismunandi stærðum myndum fyrir mismunandi breidd. Við afhendum þemað okkar með tveimur fyrirfram skilgreindum afbrigðum, en allir myndir gætu verið hlaðið inn með admin tengi og hausinn okkar mun enn vera móttækilegur.

Þú getur hlaðið niður kóðanum og sýnt myndir sem notaðar eru í þessari grein héðan .


Hefur þú unnið með sérsniðnum hausum í WordPress? Hvaða fágun í útgáfu 3.4 hefur áhrif á hvernig þú vinnur með WordPress? Skráðu þig í samtalið hér að neðan.