Een responsieve koptekst maken in WordPress 3.4

Onder alle nieuwe functies en verbeteringen die de recente versie van WordPress 3.4 heeft geïntroduceerd, is er een verborgen juweeltje. De functie Aangepaste koptekstafbeelding wordt al enige tijd ondersteund door WordPress, maar eerder maakte de vaste afmetingen het te immobiel om van veel nut te zijn in het tijdperk van responsief ontwerp.

De nieuwe versie maakt het flexibel en introduceert eenvoudigere en schonere code voor deze populaire optie. Als thema-ontwikkelaars kunnen we nu verder gaan, rekening houdend met de noodzaak om te optimaliseren voor mobiele bezoekers.

Voorheen werden de afmetingen van een headerafbeelding vooraf gedefinieerd en beheerd met de HEADER_IMAGE_HEIGHT en HEADER_IMAGE_WIDTH constanten en het geüploade bestand is bijgesneden om aan deze beperkingen te voldoen. Maar sinds versie 3.4 ondersteunt de aangepaste headerafbeelding flexibele breedtes en hoogtes en bevrijdt ons deze lelijke constanten. Klinkt intrigerend, nietwaar? Laten we kijken hoe het kan worden gedaan.

Wat we gaan bereiken

Allereerst moeten we beslissen welke van de beschikbare (en veel besproken) responsieve beeldtechnieken bij ons passen. We kunnen ons enige aangepaste opmaak voor deze afbeelding veroorloven, rekening houdend met het belang ervan voor de branding van de site en tegelijkertijd de onafhankelijkheid van de structuur of markup van een post. Vanuit dit oogpunt ziet de "noscript" -techniek er veelbelovend uit. Om de techniek samen te vatten, werkt het als volgt:

We specificeren alternatieve afbeeldingsreferenties voor gekozen onderbrekingspunten als gegevensattributen van a

Het moet vergezeld gaan van een geschikte CSS-stijl en een script waarmee jQuery Picture werkt. Afgezien daarvan zouden we graag een set van voorgedefinieerde header-afbeeldingen hebben om uit te kiezen (op dezelfde manier als we het hebben in het Twenty Eleven-thema). Bovendien willen we de gebruiker de mogelijkheid bieden om zijn eigen afbeelding te uploaden in het beheerdersdashboard. Ervan uitgaande dat een full-size versie van de afbeelding wordt geüpload, zullen we de nodige tussenformaten creëren met de ingebouwde WordPress-miniatuurondersteuning in combinatie met flexibele kopgroottes. Onze aangepaste header zou er uiteindelijk als volgt uit moeten zien:

Genoeg gepraat, laten we in code duiken.

Stap 1: registreer aangepaste koptekst met uw thema

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

Dit is een nieuwe registratiecode die is geïntroduceerd in WordPress 3.4. Je kunt de hele set parameters daarvoor zien in de Codex , maar voor onze taak zijn de volgende de belangrijkste:

• default-image - url naar de volledige grootte van de standaardafbeelding in de map van het thema
• width , height - maximale waarden ondersteund door ons thema
• flex-height , flex-width - ingesteld als "true" stelt deze afbeelding flexibele afmetingen beschikbaar
• header-text - we gaan geen tekst over de afbeelding weergeven in ons thema
• uploads - uploads inschakelen in admin
• wp-head-callback - functie die moet worden aangeroepen in de themakop
• admin-head-callback - functie die moet worden aangeroepen in het kopgedeelte van de voorbeeldpagina
• admin-preview-callback - functie om voorbeeldopmaak in het beheerdersscherm te produceren

Als u eerder een aangepaste headerafbeelding in uw thema hebt gebruikt en zich afvraagt ​​hoe de technieken zich verhouden, volgt hier een lijst met equivalenten tussen oude constanten en nieuwe parameters (de sleutels van de array):

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

Stap 2: registreer standaardafbeeldingen om uit te kiezen

In ons voorbeeld bieden we twee voorgedefinieerde afbeeldingen als opties voor de koptekst en elk ervan zou drie varianten moeten hebben: -large.jpg , -medium.jpg en -thumb.jpg voor het overeenkomstige bereik van vensterbreedten. Het kleinste formaat wordt ook als miniatuur gebruikt in de beheerdersinterface.

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

De code spreekt voor zich, het enige detail dat aandacht vereist is een correcte URL voor de afbeeldingen: -large.jpg voor volledige grootte en -thumb.jpg voor thumbnail ( %s - is een tijdelijke aanduiding voor de actieve themamap die automatisch door WordPress wordt vervangen).

Stap 3: registreer extra beeldformaten

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

Als u deze extra formaten registreert met ons thema, krijgt WordPress opdracht om voor elk daarvan een variant te maken bij het uploaden van een afbeelding voor de aangepaste koptekst. De juiste variant kan later worden verkregen met behulp van de naam. De truc is om een ​​vrij grote hoogte te specificeren, waardoor het formaat van de afbeelding met de breedte wordt gewijzigd en de hoogte van de afbeelding wordt afgeleid van de beeldverhouding.

Stap 4: markup voor de 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;?>

Nogmaals, alles is duidelijk. Met de frl_header_image_markup functie maken we de markup die nodig is om onze responsieve techniek te laten werken. Het meest interessante deel hier is het verkrijgen van afbeeldings-URL's voor grote, middelgrote en kleine toestanden. De WordPress 3.4-functie get_custom_header retourneert een aangepast header-object dat alle benodigde gegevens bevat. Als $custom_header is goed ingesteld attachment_id property, we hebben te maken met een geüploade afbeelding en moeten tussenformaten krijgen via wp_get_attachment_image_src . Als er geen dergelijke eigenschap is, hebben we te maken met een van onze standaardafbeeldingen, zodat we tussenmaten kunnen verkrijgen op basis van onze eigen naamgevingsconventie.

Met frl_header_image_style we injecteren de CSS en JavaScript die onze afbeelding responsief maken. Deze functie wordt automatisch gebeld omdat we deze hebben opgegeven als een aangepaste registratieparameter voor de koptekst. Maar de _markup functie moet direct in het thema worden aangeroepen - uiteraard ergens in de header.php

Na deze stap hebben we al onze eerste standaardkopie-afbeelding op een responsieve manier weergegeven.

Stap 5: markup voor beheerdersvoorbeeld

In het menu Vormgeving -> Koptekst hebben we nu een scherm waarmee we de aangepaste koptekstafbeelding kunnen wijzigen door een van de vooraf gedefinieerde opties te kiezen of door een nieuwe afbeelding te uploaden. We zullen de kop er eenvoudig uit laten zien.

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

In admin gebruiken we slechts één afbeeldinggrootte (volledig) in onze markup en verkrijgen we de URL met de get_header_image functie ( frl_admin_header_image_markup is verantwoordelijk voor dat). Maar we moeten een geschikte stijl voor de preview bieden, zodat deze het responsieve gedrag vertegenwoordigt ( frl_admin_header_image_style is verantwoordelijk voor dat). Beide functies worden automatisch gebeld omdat we ze hebben opgegeven als aangepaste registratieparameters voor de koptekst. Nu kunnen we genieten van absolute vrijheid door een aangepaste headerafbeelding in te stellen.

Een woord van waarschuwing

Met vrijheid komt verantwoordelijkheid. Door een gebruiker de flexibiliteit te geven om eigen afbeeldingen te uploaden, hebben we geen controle over de grootte en verhoudingen van de afbeelding. Als een geüploade afbeelding de breedte- en hoogtelimieten overschrijdt die we hebben opgegeven, moet deze worden bijgesneden. Maar als dit allemaal gebeurt in de nieuwe Live Theme Customizer in plaats van het scherm Vormgeving -> Header , wordt de headerafbeelding niet bijgesneden (tenminste voorlopig). De Live Theme Customizer is een vrij nieuwe functie, dus toekomstige verbeteringen lijken waarschijnlijk, maar voor het heden moeten we voorzichtig zijn.

Een ander probleem kan zich voordoen als een geüploade afbeelding een kleinere breedte heeft dan door ons themaontwerp is bedoeld. Onze code zal het uitrekken om de hele containerbreedte te vullen, zodat de kwaliteit van de afbeelding zou kunnen lijden. De waarheid is dat alles wat je kunt aanpassen, van nature gebroken kan zijn. Het bieden van goede richtlijnen voor uw gebruikers zal helpen, maar tot op zekere hoogte moet u ze laten doen wat ze willen.

Conclusie

Om samen te vatten: we hebben nu nieuwe functies geïmplementeerd die zijn geïntroduceerd in de opnieuw ingediende WordPress 3.4 om een ​​aangepaste headerafbeelding te ondersteunen. We hebben het responsief gemaakt met behulp van de "noscript" -techniek waarmee we niet alleen de grootte van een afbeelding kunnen aanpassen aan de breedte van de browser, maar ook afbeeldingen van verschillende grootte voor verschillende breedten kunnen weergeven. We leveren ons thema met twee vooraf gedefinieerde varianten, maar elke afbeelding kan worden geüpload via een beheerdersinterface en onze koptekst blijft reageren.

U kunt de code en voorbeeldafbeeldingen downloaden die in dit artikel worden gebruikt vanaf hier .


Heb je in WordPress met aangepaste headers gewerkt? Welke verfijningen in versie 3.4 hebben invloed op de manier waarop u met WordPress werkt? Neem deel aan het onderstaande gesprek.