Oprettelse af en Responsive Header i WordPress 3.4

Blandt alle de nye funktioner og forbedringer, som den seneste version af WordPress 3.4 har introduceret, er der en skjult perle. Funktionen Custom Header Image er blevet understøttet af WordPress i nogen tid, men tidligere har dens faste dimensioner gjort det for immobilt til at være meget anvendeligt i en aldrende responsiv design.

Den nye version gør den fleksibel og introducerer lettere og renere kode til denne populære mulighed. Som temaudviklere kan vi nu gå videre under hensyntagen til behovet for at optimere til mobile besøgende.

Tidligere var dimensionerne af et headerbillede foruddefineret og styret med HEADER_IMAGE_HEIGHT og HEADER_IMAGE_WIDTH konstanter og den uploadede fil blev beskåret for at passe disse begrænsninger. Men siden version 3.4 understøtter brugerdefineret headerbilledet fleksible bredder og højder og frigør os fra disse grimme konstanter. Det lyder spændende, ikke? Lad os se, hvordan det kan gøres.

Hvad vi skal nå

Først og fremmest bør vi beslutte, hvilken af ​​de tilgængelige (og bredt diskuterede) lydhørste billedteknikker passer til os. Vi har råd til os selv en brugerdefineret markering for dette billede under hensyntagen til dets betydning for webstedets branding og samtidig dets uafhængighed fra en post struktur eller markup. Fra dette synspunkt ser "noscript" -teknikken rigtig lovende ud. For at opsummere teknikken fungerer det som følger:

Vi angiver alternative billedreferencer for valgte breakpoints som dataattributter af a

Det skal ledsages af passende CSS styling og et script, der sætter jQuery Picture til arbejde. Derudover vil vi gerne have et sæt prædefinerede headerbilleder, der skal vælges fra (ligesom vi har det i Twenty Eleven-temaet). Desuden vil vi gerne give brugeren mulighed for at uploade sit eget billede i admin panelet. Hvis vi antager, at en fuld størrelse version af billedet er uploadet, vil vi oprette de nødvendige mellemstørrelser med den indbyggede WordPress miniature support kombineret med header fleksible størrelser. Vores brugerdefinerede overskrift skal i sidste ende se sådan ud:

Nok snak, lad os dykke ind i kode.

Trin 1: Registrér brugerdefineret header med dit tema

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

Dette er en ny registreringskode introduceret i WordPress 3.4. Du kan se hele sæt parametre for det i Codex , men for vores opgave er følgende de vigtigste:

• default-image - URL til den fulde størrelse af standardbilledet i temaets mappe
• width , height - Maksimumsværdier understøttes af vores tema
• flex-height , flex-width - Sæt som "sande" med disse parametre tillader billedet at have fleksible størrelser
• header-text - vi vil ikke vise tekst over billede i vores tema
• uploads - aktiver uploads i admin
• wp-head-callback - Funktion, der skal kaldes i temahovedafsnit
• admin-head-callback - Funktion, der skal kaldes i forhåndsvisningshovedafsnit
• admin-preview-callback - Funktion til at producere preview markup på admin skærmen

Hvis du har brugt et brugerdefineret headerbillede i dit tema før og undrer dig over, hvordan teknikkerne sammenlignes, her er en liste over ækvivalenter mellem gamle konstanter og nye parametre (arrayets nøgler):

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

Trin 2: Registrér standardbilleder for at vælge imellem

I vores eksempel giver vi to foruddefinerede billeder som valgmuligheder for overskriften, og hver af dem skal have tre varianter: -large.jpg , -medium.jpg og -thumb.jpg for det tilsvarende interval af vinduebredder. Den mindste størrelse vil også blive brugt som en miniature i admin interface.

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

Koden er helt selvforklarende, den eneste detalje der kræver opmærksomhed er en korrekt url for billederne: -large.jpg for fuld størrelse og -thumb.jpg til miniaturebillede ( %s - er en pladsholder til den aktive temamappe, som automatisk erstattes af WordPress).

Trin 3: Registrér yderligere billedstørrelser

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

Registrering af disse ekstra størrelser med vores tema vil instruere WordPress til at oprette en variant for hver af dem, når du uploader et billede til den brugerdefinerede overskrift. Den relevante variant kan fås senere ved at bruge navnet. Tricket er at angive en ret højdeværdi, hvilket gør det tvunget til at ændre størrelsen på bredden og efterlader sin højde af aspektforholdet.

Trin 4: Opmærkning til fronten

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

Igen er alt ligefrem. Med frl_header_image_markup funktion vi skaber den markering der er nødvendig for vores responsive teknik til at arbejde. Den mest interessante del her er at få billedwebadresser til store, mellemstore og små stater. WordPress 3.4-funktionen get_custom_header returnerer et brugerdefineret header objekt, som indeholder alle nødvendige data. Hvis $custom_header har et korrekt sæt attachment_id ejendom, vi har at gøre med et uploadet billede og skal få mellemliggende størrelser ved hjælp af wp_get_attachment_image_src . Hvis der ikke findes en sådan egenskab, har vi at gøre med et af vores standardbilleder, så vi kan opnå mellemstørrelser baseret på vores egen navngivningskonvention.

Med frl_header_image_style vi injicerer CSS og JavaScript, der gør vores billede lydhør. Denne funktion kaldes automatisk, fordi vi har angivet den som en brugerdefineret headerregistreringsparameter. Men _markup funktionen skal kaldes direkte i temaet - åbenbart et sted inde i header.php

Efter dette trin har vi allerede fået vores første standard header billede vist på en lydhør måde.

Trin 5: Markup for admin preview

Under Udseende -> Hovedmenu har vi nu en skærm, som gør det muligt for os at ændre det brugerdefinerede overskriftsbillede ved at vælge en fra foruddefinerede indstillinger eller uploade et nyt billede. Vi skal have overskriften ser enkelt ud.

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

I admin bruger vi kun en billedstørrelse (fuld) i vores markering og få sin URL med get_header_image funktion ( frl_admin_header_image_markup er ansvarlig for det). Men vi bør give en passende styling til previewen, så den repræsenterer den lydhøre adfærd ( frl_admin_header_image_style er ansvarlig for det). Begge funktioner kaldes automatisk, fordi vi har angivet dem som brugerdefinerede overskriftsregistreringsparametre. Nu kan vi nyde absolutte friheder ved at indstille et brugerdefineret headerbillede.

Et ord af forsigtighed

Med frihed kommer ansvar. At give brugeren fleksibilitet til at uploade brugerdefinerede billeder, vi har ingen kontrol over størrelsen og proportionerne af billedet. Hvis et uploadet billede overstiger de bredde- og højdegrænser, vi har angivet, skal det beskæres. Men hvis alt dette sker i den nye Live Theme Customizer i stedet for Skærmbilledet Udseende -> Hovedtekst , vil overskriftsbilledet ikke blive beskåret (i det mindste for nu). Live Theme Customizer er en helt ny funktion, så fremtidige forbedringer synes sandsynligt, men vi bør være forsigtige i dag.

Et andet problem kan opstå, hvis et uploadet billede har en mindre bredde end det, der er beregnet af vores tema design. Vores kode vil strække den for at fylde hele beholderbredden, så kvaliteten af ​​billedet kan lide. Sandheden er noget, der kan tilpasses, af sin art, blive brudt. At give solide retningslinjer for dine brugere vil hjælpe, men i et vist omfang må du lade dem gøre, som de vil.

Konklusion

For at opsummere: Vi har nu implementeret nye funktioner introduceret i resent WordPress 3.4 for at understøtte et brugerdefineret header image. Vi gjorde det lydhørigt ved hjælp af "noscript" -teknikken, der gør det muligt for os ikke kun at justere størrelsen på et billede i overensstemmelse med browserbredden, men også tjene forskellige størrelser i forskellige bredder. Vi leverer vores tema med to foruddefinerede varianter, men ethvert billede kan uploades via en admin-grænseflade, og vores overskrift vil stadig være lydhør.

Du kan downloade koden og prøve billeder, der bruges i denne artikel herfra .


Har du arbejdet med brugerdefinerede overskrifter i WordPress? Hvilke forbedringer i version 3.4 har betydning for, hvordan du arbejder med WordPress? Deltag i samtalen nedenfor.