Tworzenie responsywnego nagłówka w WordPressie 3.4

Wśród wszystkich nowych funkcji i ulepszeń wprowadzonych przez ostatnie wydanie WordPress 3.4 jest ukryty klejnot. Funkcja Custom Header Image jest od pewnego czasu obsługiwana przez WordPress, jednak wcześniej jej stałe wymiary sprawiły, że stała się zbyt nieruchoma, by mogła być użyta w dobie szybkiego projektowania.

Nowa wersja zapewnia elastyczność i wprowadza łatwiejszy i czystszy kod dla tej popularnej opcji. Jako twórcy motywów możemy teraz pójść dalej, biorąc pod uwagę potrzebę optymalizacji pod kątem użytkowników mobilnych.

Poprzednio wymiary obrazu nagłówka były wstępnie zdefiniowane i zarządzane przy pomocy HEADER_IMAGE_HEIGHT i HEADER_IMAGE_WIDTH stałe i przesłany plik zostały przycięte w celu dopasowania do tych ograniczeń. Ale od wersji 3.4 niestandardowy obraz nagłówka obsługuje elastyczne szerokości i wysokości i uwalnia nas od tych brzydkich stałych. Brzmi intrygująco, prawda? Zobaczmy, jak można to zrobić.

Co zamierzamy osiągnąć

Przede wszystkim powinniśmy zdecydować, które z dostępnych (i szeroko omawianych) technik reagowania na obrazki będą dla nas odpowiednie. Możemy sobie pozwolić na każdy niestandardowy znacznik dla tego obrazu, biorąc pod uwagę jego znaczenie dla marki witryny, a jednocześnie jej niezależność od struktury postu lub znaczników. Z tego punktu widzenia technika "noscript" wygląda naprawdę obiecująco. Podsumowując tę ​​technikę, działa następująco:

Podajemy alternatywne odniesienia do obrazu dla wybranych punktów przerwania jako atrybuty danych a

Towarzyszyć mu powinna odpowiednia stylistyka CSS oraz skrypt, który uruchamia obraz jQuery. Oprócz tego chcielibyśmy mieć zestaw predefiniowanych obrazów nagłówka do wyboru (w ten sam sposób, w jaki mamy go w temacie Twenty Eleven). Co więcej, chcemy dać użytkownikowi możliwość wgrania własnego obrazu w panelu administracyjnym. Zakładając, że załadowana zostanie pełna wersja obrazu, stworzymy niezbędne rozmiary pośrednie z wbudowaną obsługą miniatur w WordPress w połączeniu z elastycznymi rozmiarami nagłówka. Nasz niestandardowy nagłówek powinien ostatecznie wyglądać tak:

Dość gadania, zanurzmy się w kod.

Krok 1: zarejestruj niestandardowy nagłówek za pomocą swojego motywu

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

Jest to nowy kod rejestracyjny wprowadzony w WordPress 3.4. Możesz zobaczyć cały zestaw parametrów dla niego w Kodeks , ale dla naszego zadania najważniejsze są:

• default-image - adres URL do pełnego rozmiaru domyślnego obrazu w folderze motywu
• width , height - maksymalne wartości obsługiwane przez nasz motyw
• flex-height , flex-width - ustawione jako "prawda" te parametry pozwalają obrazowi mieć elastyczne rozmiary
• header-text - nie będziemy wyświetlać tekstu na obrazie w naszym motywie
• uploads - włącz przesyłanie do administratora
• wp-head-callback - funkcja do wywołania w sekcji nagłówka motywu
• admin-head-callback - funkcja do wywołania w sekcji nagłówka strony podglądu
• admin-preview-callback - funkcja do tworzenia znaczników podglądu na ekranie administratora

Jeśli wcześniej używałeś niestandardowego obrazu nagłówka w swoim motywie i zastanawiasz się, jak te techniki się porównują, tutaj znajduje się lista ekwiwalentów między starymi stałymi a nowymi parametrami (klucze tablicy):

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

Krok 2: zarejestruj domyślne obrazy do wyboru

W naszym przykładzie udostępnimy dwa predefiniowane obrazy jako opcje dla nagłówka, a każdy z nich powinien mieć trzy warianty: -large.jpg , -medium.jpg i -thumb.jpg dla odpowiedniego zakresu szerokości okna. Najmniejszy rozmiar będzie również używany jako miniatura w interfejsie administratora.

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

Kod jest dość oczywisty, jedynym szczegółem, który wymaga uwagi, jest poprawny adres URL obrazów: -large.jpg dla pełnego rozmiaru i -thumb.jpg dla miniatury ( %s - jest symbolem zastępczym aktywnego folderu tematycznego, który zostanie automatycznie zastąpiony przez WordPress).

Krok 3: zarejestruj dodatkowe rozmiary obrazu

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

Zarejestrowanie tych dodatkowych rozmiarów za pomocą naszego motywu spowoduje, że WordPress stworzy wariant dla każdego z nich podczas przesyłania obrazu do niestandardowego nagłówka. Odpowiedni wariant można uzyskać później, używając nazwy. Sztuczka polega na określeniu dość dużej wartości wysokości, dzięki czemu obraz zmienia się o szerokość i pozostawia jego wysokość na podstawie współczynnika kształtu.

Krok 4: znaczniki dla interfejsu użytkownika

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

Znowu wszystko jest proste. Dzięki frl_header_image_markup funkcja tworzymy znaczniki potrzebne do naszej responsywnej techniki do pracy. Najciekawszą częścią jest tutaj uzyskanie adresów URL obrazu dla dużych, średnich i małych państw. Funkcja WordPress 3.4 get_custom_header zwraca niestandardowy obiekt nagłówka zawierający wszystkie niezbędne dane. Gdyby $custom_header ma poprawnie ustawiony attachment_id właściwość, mamy do czynienia z przesłanym obrazem i powinniśmy pobrać średnie rozmiary za pomocą wp_get_attachment_image_src . Jeśli nie ma takiej właściwości, mamy do czynienia z jednym z naszych domyślnych obrazów, abyśmy mogli uzyskać rozmiary pośrednie na podstawie naszej własnej konwencji nazewnictwa.

Z frl_header_image_style wprowadzamy kod CSS i JavaScript, dzięki którym nasz obraz reaguje. Ta funkcja zostanie wywołana automatycznie, ponieważ określiliśmy ją jako niestandardowy parametr rejestracji nagłówka. Ale _markup funkcja powinna być wywołana bezpośrednio w temacie - oczywiście gdzieś w środku header.php

Po tym kroku już domyślnie wyświetliliśmy nasz domyślny obraz nagłówka.

Krok 5: znaczniki dla podglądu administratora

W menu Wygląd -> Nagłówek mamy teraz ekran, który pozwala nam zmienić niestandardowy obraz nagłówka, wybierając jedną z wcześniej zdefiniowanych opcji lub przesyłając nowe zdjęcie. Nagłówek będzie wyglądał prosto.

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

W admin używamy tylko jednego rozmiaru obrazu (pełnego) w naszym znaczniku i uzyskujemy jego adres URL z get_header_image funkcja ( frl_admin_header_image_markup jest za to odpowiedzialny). Ale powinniśmy zapewnić odpowiednią stylizację do podglądu, tak aby reprezentowała responsywne zachowanie ( frl_admin_header_image_style jest za to odpowiedzialny). Obie funkcje będą wywoływane automatycznie, ponieważ określiliśmy je jako niestandardowe parametry rejestracji nagłówka. Teraz możemy cieszyć się absolutną swobodą, ustawiając niestandardowy obraz nagłówka.

Słowo ostrzeżenia

Z wolnością wchodzi odpowiedzialność. Dając użytkownikowi możliwość przesyłania niestandardowych obrazów, nie mamy żadnej kontroli nad rozmiarem i proporcjami obrazu. Jeśli przesłany obraz przekracza podane przez nas ograniczenia szerokości i wysokości, powinien zostać przycięty. Ale jeśli wszystko to dzieje się w nowym Konfiguratorze żywych motywów zamiast na ekranie Wygląd -> Nagłówek , obraz nagłówka nie zostanie przycięty (przynajmniej na razie). Live Custom Customizer to całkiem nowa funkcja, więc przyszłe ulepszenia wydają się prawdopodobne, ale na razie powinniśmy być ostrożni.

Kolejny problem może pojawić się, jeśli przesłany obraz ma mniejszą szerokość niż jest to zamierzone w naszym projekcie motywu. Nasz kod rozciąga go, aby wypełnić całą szerokość pojemnika, aby pogorszyła się jakość obrazu. Prawda jest taka, że ​​dowolna konfigurowalna z natury rzeczy może być zepsuta. Zapewnienie solidnych wytycznych dla użytkowników pomoże, ale w pewnym stopniu musisz pozwolić im działać tak, jak chcą.

Wniosek

Podsumowując: wprowadziliśmy teraz nowe funkcje wprowadzone w WordPress 3.4, aby obsłużyć niestandardowy obraz nagłówka. Uczyniliśmy to responsywnym za pomocą techniki "noscript", która pozwala nam nie tylko dopasować rozmiar obrazu zgodnie z szerokością przeglądarki, ale także wyświetlać obrazy o różnych rozmiarach dla różnych szerokości. Dostarczamy nasz motyw z dwoma predefiniowanymi wariantami, ale każdy obraz może być przesłany za pośrednictwem interfejsu administratora, a nasz nagłówek nadal będzie reagował.

Możesz pobrać kod i przykładowe obrazy wykorzystane w tym artykule stąd .


Czy pracujesz z niestandardowymi nagłówkami w WordPress? Jakie udoskonalenia w wersji 3.4 wpływają na sposób pracy z WordPress? Dołącz do rozmowy poniżej.