Opprette en Responsive Header i WordPress 3.4

Blant alle de nye funksjonene og forbedringene som den siste versjonen av WordPress 3.4 har introdusert, er det en skjult perle. Funksjonen for tilpasset topptekst har blitt støttet av WordPress i noen tid, men tidligere har de faste dimensjonene gjort det for immobilt for å være mye brukt i en aldrende responsiv design.

Den nye versjonen gjør den fleksibel og introduserer enklere og renere kode for dette populære alternativet. Som temautviklere kan vi nå gå videre med tanke på behovet for å optimalisere for mobile besøkende.

Tidligere ble dimensjonene til et topptekst forhåndsdefinert og administrert med HEADER_IMAGE_HEIGHT og HEADER_IMAGE_WIDTH konstanter og den opplastede filen ble beskåret for å passe disse begrensningene. Men siden versjon 3.4 støtter det tilpassede toppbildet fleksible bredder og høyder og frigjør oss fra disse stygge konstanter. Høres spennende, ikke sant? La oss se hvordan det kan gjøres.

Hva vi skal oppnå

Først av alt bør vi avgjøre hvilken av de tilgjengelige (og allment diskuterte) responsive bildeteknikker som passer oss. Vi har råd til oss selv tilpasset merking for dette bildet, tatt i betraktning dens betydning for nettstedets branding og samtidig dens uavhengighet fra et innleggs struktur eller markup. Fra dette synspunkt ser "noscript" -teknikken veldig lovende ut. For å oppsummere teknikken fungerer det som følger:

Vi spesifiserer alternative bilde referanser for valgte breakpoints som data attributter av a

Det skal være ledsaget av passende CSS styling og et skript som setter jQuery Bilde til jobb. Bortsett fra det, ønsker vi å ha et sett med forhåndsdefinerte headerbilder som skal velges fra (på samme måte som vi har det i Twenty Eleven-temaet). Videre ønsker vi å gi brukeren muligheten til å laste opp sitt eget bilde i administrasjonspanelet. Forutsatt at en full størrelse versjon av bildet er lastet opp, vil vi opprette de nødvendige mellomstørrelsene med den innebygde WordPress-miniatyrstøtten kombinert med header fleksible størrelser. Vår egendefinerte overskrift bør til slutt se slik ut:

Nok snakk, la oss dykke inn i kode.

Trinn 1: Registrer egendefinert overskrift med temaet ditt

$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 introdusert i WordPress 3.4. Du kan se hele settet av parametere for det i Codex , men for vår oppgave er følgende de viktigste:

• default-image - URL til full størrelse på standardbilde i temaets mappe
• width , height - Maksimumverdier støttet av vårt tema
• flex-height , flex-width - Sett som "ekte", disse parameterne tillater bildet å ha fleksible størrelser
• header-text - Vi skal ikke vise tekst over bildet i vårt tema
• uploads - aktiver opplastinger i admin
• wp-head-callback - funksjon som skal kalles i temahode-seksjonen
• admin-head-callback - funksjon som skal kalles i forhåndsvisningshovedavsnitt
• admin-preview-callback - Funksjon for å lage forhåndsvisningsoppslag på administrasjonsskjermen

Hvis du har brukt et egendefinert headerbilde i temaet ditt før, og lurer på hvordan teknikkene sammenligner, her er en liste over ekvivalenter mellom gamle konstanter og nye parametere (arrayens nøkler):

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

Trinn 2: Registrer standardbilder for å velge mellom

I vårt eksempel gir vi to forhåndsdefinerte bilder som alternativer for toppteksten, og hver av dem skal ha tre varianter: -large.jpg , -medium.jpg og -thumb.jpg for tilsvarende rekkevidde av vindubredder. Den minste størrelsen vil også bli brukt som miniatyrbilde i administrasjonsgrensesnittet.

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 ganske selvforklarende, den eneste detaljen som krever oppmerksomhet er en riktig URL for bildene: -large.jpg for full størrelse og -thumb.jpg for miniatyrbilde ( %s - er en plassholder for den aktive temamappen som automatisk vil bli erstattet av WordPress).

Trinn 3: Registrer flere bildestørrelser

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

Registrering av disse ekstra størrelsene med temaet vårt, vil instruere WordPress for å lage en variant for hver av dem når du laster opp et bilde for den egendefinerte toppteksten. Den riktige varianten kan oppnås senere ved å bruke navnet. Trikset er å spesifisere en ganske høy høydeverdi, slik at det krever at bildet skal resizes med bredde og etterlater sin høyde som avledes av aspektforholdet.

Trinn 4: Markering for 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;?>

Igjen er alt greit. Med frl_header_image_markup funksjon vi oppretter oppslaget som trengs for vår responsive teknikk til arbeid. Den mest interessante delen her er å skaffe bildeadresser for store, mellomstore og små stater. WordPress 3.4-funksjonen get_custom_header Returnerer et egendefinert headerobjekt som inneholder alle nødvendige data. Hvis $custom_header har et riktig sett attachment_id eiendom, vi har å gjøre med et opplastet bilde og bør få mellomliggende størrelser ved hjelp av wp_get_attachment_image_src . Hvis det ikke finnes en slik egenskap, har vi å gjøre med et av våre standardbilder, slik at vi kan få mellomliggende størrelser basert på vår egen navngivningskonvensjon.

Med frl_header_image_style Vi injiserer CSS og JavaScript som gjør vårt bilde responsivt. Denne funksjonen kalles automatisk fordi vi har angitt den som en tilpasset headerregistreringsparameter. Men _markup funksjonen skal kalles direkte i temaet - åpenbart et sted inne i header.php

Etter dette trinnet har vi allerede fått vårt første standardkoplingsbilde vist på en responsiv måte.

Trinn 5: Markup for admin forhåndsvisning

Under Utseende -> Header- menyen har vi nå en skjerm som lar oss endre det egendefinerte topptekstbildet ved å velge en fra forhåndsdefinerte alternativer eller laste opp et nytt bilde. Vi skal ha overskriften ser enkel ut.

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 bruker vi bare en bildestørrelse (full) i vårt oppslag og får sin URL med get_header_image funksjon ( frl_admin_header_image_markup er ansvarlig for det). Men vi bør gi en passende styling for forhåndsvisningen slik at den representerer den responsive oppførselen ( frl_admin_header_image_style er ansvarlig for det). Begge funksjonene vil bli kalt automatisk fordi vi har angitt dem som tilpassede overskrift registreringsparametere. Nå kan vi nyte absolutt frihet og sette et egendefinert topptekstbilde.

Et ord med forsiktighet

Med frihet kommer ansvar. Å gi brukeren fleksibiliteten til å laste opp egendefinerte bilder, har ingen kontroll over størrelsen og proporsjonene av bildet. Hvis et opplastet bilde overstiger bredde- og høydegrensene som vi har oppgitt, skal det beskjæres. Men hvis alt dette skjer i den nye Live Theme Customizer i stedet for Skjermbildet Utseende -> Overskrift , vil overskriftsbildet ikke bli beskåret (i hvert fall for nå). Live Theme Customizer er en ganske ny funksjon, slik at fremtidige forbedringer virker sannsynlig, men for øyeblikket bør vi være forsiktige.

Et annet problem kan oppstå hvis et opplastet bilde har en mindre bredde enn det som er beregnet av vårt tema design. Vår kode vil strekke den for å fylle hele beholderbredden slik at kvaliteten på bildet kan lide. Sannheten er noe som kan tilpasses, kan av sin natur bli ødelagt. Å gi solid retningslinjer for brukerne dine vil hjelpe, men til en viss grad må du la dem gjøre som de vil.

Konklusjon

For å oppsummere: Vi har nå implementert nye funksjoner introdusert i den gjenværende WordPress 3.4 for å støtte et tilpasset topptekstbilde. Vi gjorde det responsivt ved hjelp av "noscript" -teknikken som gjør at vi ikke bare kan justere størrelsen på et bilde i samsvar med nettleserbredden, men også servere forskjellige størrelser for ulike bredder. Vi leverer temaet vårt med to forhåndsdefinerte varianter, men et bilde kan lastes opp via et administrasjonsgrensesnitt og vår overskrift vil fortsatt være responsiv.

Du kan laste ned koden og prøve bilder som brukes i denne artikkelen herfra .


Har du jobbet med egendefinerte overskrifter i WordPress? Hvilke forbedringer i versjon 3.4 påvirker hvordan du jobber med WordPress? Bli med i samtalen nedenfor.