Skapa en Responsive Header i WordPress 3.4

Bland alla nya funktioner och förbättringar som den senaste versionen av WordPress 3.4 har introducerat finns en dold pärla. Funktionen Custom Header Image har tagits emot av WordPress under en tid, men tidigare har dess fasta dimensioner gjort det för immobilt för att vara till stor nytta under åldern av en responsiv design.

Den nya versionen gör den flexibel och introducerar enklare och renare kod för detta populära alternativ. Som tematillverkare kan vi nu gå vidare med tanke på behovet av att optimera för mobila besökare.

Tidigare förutbestämdes och hanterades dimensionerna för en headerbild med HEADER_IMAGE_HEIGHT och HEADER_IMAGE_WIDTH konstanter och den uppladdade filen beskärdes för att passa dessa begränsningar. Men sedan version 3.4 stödjer den anpassade headerbilden flexibla bredder och höjder och frigör oss från dessa fula konstanter. Låter spännande, eller hur? Låt oss se hur det kan göras.

Vad vi ska uppnå

Först av allt bör vi bestämma vilken av de tillgängliga (och diskuterade) responsiva bildteknikerna passar oss. Vi har råd med oss ​​själva anpassade markup för denna bild, med tanke på dess betydelse för webbplatsens branding och samtidigt dess oberoende från en post struktur eller markup. Ur denna synvinkel ser tekniken "noscript" riktigt lovande ut. För att sammanfatta tekniken fungerar den enligt följande:

Vi anger alternativa bildreferenser för valda brytpunkter som data attribut av a

Det ska åtföljas av lämplig CSS-styling och ett manus som sätter jQuery Picture till jobbet. Bortsett från detta vill vi ha en uppsättning fördefinierade headerbilder att väljas ut från (på samma sätt som vi har det i tjugofemte temat). Dessutom vill vi ge användaren möjlighet att ladda upp sin egen bild i adminpanelen. Om vi ​​antar att en fullstor version av bilden laddas upp, skapar vi de nödvändiga mellanstorlekarna med det inbyggda WordPress-miniatyrstödet kombinerat med toppmoderna storlekar. Vår anpassade rubrik ska så småningom se ut så här:

Noga prata, låt oss dyka in i kod.

Steg 1: registrera anpassad rubrik med ditt 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);

Detta är en ny registreringskod som introducerades i WordPress 3.4. Du kan se hela uppsättningen parametrar för den i Kodex , men för vår uppgift är följande viktiga:

• default-image - URL till full storlek på standardbilden i tematmappen
• width , height - Högsta värden som stöds av vårt tema
• flex-height , flex-width - Ange som "sant" med dessa parametrar kan bilden ha flexibla storlekar
• header-text - Vi kommer inte att visa text över bilden i vårt tema
• uploads - aktivera uppladdningar i admin
• wp-head-callback - Funktion som ska kallas i tematrådsavsnittet
• admin-head-callback - Funktion som ska kallas i förhandsgranskning av sidhuvudsektion
• admin-preview-callback - Funktion för att producera förhandsgranskningsmarkup på adminskärmen

Om du har använt en anpassad headerbild i ditt tema tidigare och undrar hur teknikerna jämförs, här är en lista över ekvivalenter mellan gamla konstanter och nya parametrar (matrisens nycklar):

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

Steg 2: registrera standardbilder att välja mellan

I vårt exempel ger vi två fördefinierade bilder som alternativ för rubriken och var och en av dem borde ha tre varianter: -large.jpg , -medium.jpg och -thumb.jpg för motsvarande antal fönsterbredder. Den minsta storleken kommer även att användas som en miniatyrbild i admingränssnittet.

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 är ganska självförklarande, den enda detalj som kräver uppmärksamhet är en korrekt webbadress för bilderna: -large.jpg för full storlek och -thumb.jpg för miniatyrbild ( %s - är en platshållare för den aktiva temapappen som automatiskt ersätts av WordPress).

Steg 3: registrera ytterligare bildstorlekar

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

Registrering av dessa ytterligare storlekar med vårt tema kommer att instruera WordPress att skapa en variant för var och en av dem när du laddar upp en bild för den anpassade rubriken. Den lämpliga varianten kan erhållas senare med namnet. Tricket är att ange ett ganska högt höjdvärde, vilket gör det tvungen att ändra bilden med bredd och lämnar sin höjd för att härledas från bildförhållandet.

Steg 4: Markera för 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;?>

Återigen är allt enkelt. Med frl_header_image_markup funktion vi skapar den markering som behövs för vår responsiva teknik för att arbeta. Den mest intressanta delen här är att få bildadresser för stora, medelstora och små stater. WordPress 3.4-funktionen get_custom_header returnerar ett anpassat rubrikobjekt som innehåller all nödvändig data. Om $custom_header har en korrekt uppsättning attachment_id egendom, vi har att göra med en uppladdad bild och ska få mellanliggande storlekar med wp_get_attachment_image_src . Om det inte finns någon sådan egenskap hanterar vi en av våra standardbilder så att vi kan få mellanstorlekar baserat på vår egen namnkonvention.

Med frl_header_image_style vi injicerar CSS och JavaScript som gör vår bild mottaglig. Denna funktion kommer att kallas automatiskt eftersom vi har angett det som en anpassad huvudregistreringsparameter. Men _markup funktionen ska kallas direkt i temat - uppenbarligen någonstans inne i header.php

Efter detta steg har vi redan fått vår första standardhuvudbild som visas på ett responsivt sätt.

Steg 5: Markup för administratörsvisning

Under Utseende -> Header- menyn har vi nu en skärm som gör att vi kan ändra den anpassade header-bilden genom att välja en från fördefinierade alternativ eller ladda upp en ny bild. Vi kommer att få huvudet att se enkelt 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 använder vi bara en bildstorlek (full) i vår markering och får dess URL med get_header_image funktion ( frl_admin_header_image_markup ansvarar för det). Men vi bör tillhandahålla en lämplig styling för förhandsgranskningen så att den representerar det responsiva beteendet ( frl_admin_header_image_style ansvarar för det). Båda funktionerna kommer att ringas automatiskt eftersom vi har angett dem som anpassade huvudregistreringsparametrar. Nu kan vi njuta av absolut frihet och ange en anpassad headerbild.

Ett försiktighetsord

Med frihet kommer ansvar. Att ge användaren flexibiliteten att ladda upp anpassade bilder har ingen kontroll över bildens storlek och proportioner. Om en uppladdad bild överstiger bredd- och höjdgränserna som vi har angett bör den beskäras. Men om allt detta händer i den nya Live Theme Customizer istället för skärmen Utseende -> Header , kommer huvudbilden inte beskäras (åtminstone för tillfället). Live Theme Customizer är en helt ny funktion så framtida förbättringar verkar troligt, men för närvarande bör vi vara försiktiga.

Ett annat problem kan uppstå om en uppladdad bild har en mindre bredd än vad som är avsedd av vår design. Vår kod kommer att sträcka den för att fylla hela behållarens bredd så att kvaliteten på bilden kan leda till. Sanningen är vad som helst som kan anpassas, kan av sin natur brytas. Att ge solida riktlinjer för dina användare kommer att hjälpa, men i viss utsträckning måste du låta dem göra som de vill.

Slutsats

För att sammanfatta: Vi har nu implementerat nya funktioner som introduceras i den återstående WordPress 3.4 för att stödja en anpassad header image. Vi gjorde det lyhört med hjälp av "noscript" -tekniken som gör det möjligt för oss att inte bara justera storleken på en bild i enlighet med webbläsarens bredd, utan också servera olika storlekar för olika bredder. Vi levererar vårt tema med två fördefinierade varianter, men en bild kan laddas upp via ett admingränssnitt och vår rubrik kommer fortfarande att vara responsiv.

Du kan ladda ner koden och prova bilder som används i den här artikeln härifrån .


Har du arbetat med anpassade rubriker i WordPress? Vilka förbättringar i version 3.4 påverkar hur du arbetar med WordPress? Gå med i konversationen nedan.