Erstellen einer Responsive Kopfzeile in WordPress 3.4

Unter all den neuen Funktionen und Verbesserungen, die die aktuelle Version von WordPress 3.4 eingeführt hat, gibt es ein verstecktes Juwel. Die Funktion " Benutzerdefinierte Kopfbild" wird seit einiger Zeit von WordPress unterstützt, aber zuvor waren sie aufgrund ihrer festen Abmessungen zu unbeweglich, um in Zeiten reaktionsschnellen Designs von großem Nutzen zu sein.

Die neue Version macht es flexibel und führt einfacheren und saubereren Code für diese beliebte Option ein. Als Theme-Entwickler können wir jetzt noch weiter gehen und die Optimierung für mobile Besucher berücksichtigen.

Zuvor waren die Dimensionen eines Header - Bildes vordefiniert und wurden mit dem verwaltet HEADER_IMAGE_HEIGHT und HEADER_IMAGE_WIDTH Konstanten und die hochgeladene Datei wurde abgeschnitten, um diese Einschränkungen zu erfüllen. Seit Version 3.4 unterstützt das benutzerdefinierte Header-Image flexible Breiten und Höhen und befreit uns von diesen unschönen Konstanten. Klingt faszinierend, nicht wahr? Mal sehen, wie es geht.

Was wir erreichen werden

Zunächst sollten wir entscheiden, welche der verfügbaren (und vieldiskutierten) ansprechenden Bildtechniken zu uns passen. Wir können uns jedes benutzerdefinierte Markup für dieses Bild leisten, wobei wir auf seine Bedeutung für das Branding der Website und gleichzeitig auf seine Unabhängigkeit von der Struktur oder dem Markup eines Posts achten. Unter diesem Gesichtspunkt sieht die "noscript" -Technik sehr vielversprechend aus. Um die Technik zusammenzufassen, funktioniert es wie folgt:

Wir geben alternative Bildreferenzen für ausgewählte Haltepunkte als Datenattribute von a an

Es sollte von einem geeigneten CSS-Styling und einem Skript begleitet werden, das jQuery Picture zum Laufen bringt. Abgesehen davon möchten wir eine Reihe vordefinierter Header-Bilder haben, aus denen wir auswählen können (genauso wie wir es im Twenty Eleven-Thema haben). Darüber hinaus möchten wir dem Benutzer die Möglichkeit geben, sein eigenes Bild im Admin-Panel hochzuladen. Unter der Annahme, dass eine Vollversion des Bildes hochgeladen wird, erstellen wir die erforderlichen Zwischengrößen mit der integrierten WordPress-Thumbnail-Unterstützung in Kombination mit flexiblen Größen der Kopfzeile. Unser benutzerdefinierter Header sollte schließlich so aussehen:

Genug geredet, lass uns in den Code eintauchen.

Schritt 1: Registrieren Sie benutzerdefinierte Kopfzeile mit Ihrem 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);

Dies ist ein neuer Registrierungscode, der in WordPress 3.4 eingeführt wurde. Sie können den gesamten Parametersatz dafür in der Kodex , aber für unsere Aufgabe sind die wichtigsten:

• default-image - URL auf die volle Größe des Standardbildes im Ordner des Designs
• width , height - Maximalwerte, die von unserem Thema unterstützt werden
• flex-height , flex-width - als "wahr" gesetzt, erlaubt dieser Parameter dem Bild, flexible Größen zu haben
• header-text - Wir werden keinen Text über Bild in unserem Thema zeigen
• uploads - Aktivieren Sie Uploads im Admin
• wp-head-callback - Funktion, die in der Kopfzeile des Themas aufgerufen werden soll
• admin-head-callback - Funktion, die im Kopfbereich der Vorschauseite aufgerufen werden soll
• admin-preview-callback - Funktion zum Erstellen von Vorschau-Markups im Admin-Bildschirm

Wenn Sie zuvor ein benutzerdefiniertes Header-Bild in Ihrem Design verwendet haben und sich fragen, wie die Techniken miteinander verglichen werden, finden Sie hier eine Liste von Äquivalenten zwischen alten Konstanten und neuen Parametern (die Schlüssel des Arrays):

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

Schritt 2: Registrieren Sie Standardbilder zur Auswahl

In unserem Beispiel stellen wir zwei vordefinierte Bilder als Optionen für den Header bereit und jeder von ihnen sollte drei Varianten haben: -large.jpg , -medium.jpg und -thumb.jpg für den entsprechenden Bereich der Fensterbreiten. Die kleinste Größe wird auch als Miniaturansicht in der Admin-Oberfläche verwendet.

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

Der Code ist ziemlich selbsterklärend, das einzige Detail, das Aufmerksamkeit erfordert, ist eine korrekte URL für die Bilder: -large.jpg für die volle Größe und -thumb.jpg für das Vorschaubild ( %s - ist ein Platzhalter für den aktiven Themenordner, der automatisch durch WordPress ersetzt wird.

Schritt 3: Weitere Bildgrößen registrieren

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

Wenn Sie diese zusätzlichen Größen zu unserem Design hinzufügen, wird WordPress angewiesen, beim Hochladen eines Bildes für den benutzerdefinierten Header eine Variante für jedes dieser Designs zu erstellen. Die entsprechende Variante kann später unter Verwendung des Namens erhalten werden. Der Trick besteht darin, einen ziemlich großen Wert für die Höhe anzugeben, wodurch das Bild in der Größe nach Breite geändert wird und seine Höhe aus dem Seitenverhältnis abgeleitet wird.

Schritt 4: Markup für das Frontend

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

Auch hier ist alles unkompliziert. Mit dem frl_header_image_markup Funktion erstellen wir das Markup, das benötigt wird, damit unsere reaktionsfähige Technik funktioniert. Der interessanteste Teil hier ist, Bild-URLs für große, mittlere und kleine Zustände zu erhalten. Die WordPress 3.4 Funktion get_custom_header Gibt ein benutzerdefiniertes Header-Objekt zurück, das alle erforderlichen Daten enthält. Ob $custom_header hat eine richtig eingestellt attachment_id Eigentum, wir haben es mit einem hochgeladenen Bild zu tun und sollten Zwischengrößen verwenden wp_get_attachment_image_src . Wenn es keine solche Eigenschaft gibt, haben wir es mit einem unserer Standardbilder zu tun, sodass wir Zwischengrößen basierend auf unserer eigenen Namenskonvention erhalten können.

Mit frl_header_image_style Wir injizieren CSS und JavaScript, die unser Image ansprechen. Diese Funktion wird automatisch aufgerufen, da wir sie als benutzerdefinierten Header-Registrierungsparameter angegeben haben. Aber die _markup Funktion sollte direkt im Thema aufgerufen werden - offensichtlich irgendwo in der header.php

Nach diesem Schritt haben wir bereits unser erstes Standard-Header-Bild in einer ansprechenden Weise angezeigt.

Schritt 5: Markup für die Admin-Vorschau

Unter Aussehen -> Kopfmenü haben wir nun einen Bildschirm, mit dem wir das benutzerdefinierte Kopfbild ändern können, indem wir eines aus vordefinierten Optionen auswählen oder ein neues Bild hochladen. Wir werden den Header einfach aussehen lassen.

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 verwenden wir nur eine Bildgröße (voll) in unserem Markup und beziehen seine URL mit dem get_header_image Funktion ( frl_admin_header_image_markup ist dafür verantwortlich). Wir sollten jedoch ein geeignetes Styling für die Vorschau bereitstellen, damit es das reaktive Verhalten darstellt ( frl_admin_header_image_style ist dafür verantwortlich). Beide Funktionen werden automatisch aufgerufen, da wir sie als benutzerdefinierte Header-Registrierungsparameter angegeben haben. Jetzt können wir absolute Freiheit genießen und ein benutzerdefiniertes Header-Bild einstellen.

Ein Wort der Warnung

Mit Freiheit kommt Verantwortung. Wenn ein Benutzer die Flexibilität hat, benutzerdefinierte Bilder hochzuladen, haben wir keine Kontrolle über die Größe und Proportionen des Bildes. Wenn ein hochgeladenes Bild die von uns bereitgestellten Breiten- und Höhenbeschränkungen überschreitet, sollte es abgeschnitten werden. Wenn dies jedoch im neuen Live Theme Customizer statt im Bildschirm Appearance -> Header geschieht, wird das Header-Bild nicht beschnitten (zumindest für den Moment). Der Live Theme Customizer ist eine ziemlich neue Funktion, so dass zukünftige Verbesserungen wahrscheinlich sind, aber vorläufig sollten wir vorsichtig sein.

Ein anderes Problem könnte auftreten, wenn ein hochgeladenes Bild eine geringere Breite hat, als von unserem Themendesign beabsichtigt. Unser Code wird es dehnen, um die gesamte Containerbreite zu füllen, so dass die Qualität des Bildes leiden könnte. Die Wahrheit ist, dass alles anpassbare von Natur aus gebrochen werden kann. Das Bereitstellen von soliden Richtlinien für Ihre Benutzer wird Ihnen helfen, aber in gewissem Maße müssen Sie sie tun lassen, was sie wollen.

Fazit

Um es zusammenzufassen: Wir haben jetzt neue Funktionen eingeführt, die in dem neueren WordPress 3.4 eingeführt wurden, um ein benutzerdefiniertes Headerbild zu unterstützen. Wir haben es reaktionsfähig gemacht, indem wir die "noscript" -Technik verwenden , die es uns ermöglicht, nicht nur die Größe eines Bildes in Übereinstimmung mit der Browser-Breite einzustellen, sondern auch Bilder unterschiedlicher Größe für verschiedene Breiten zu bedienen. Wir liefern unser Thema mit zwei vordefinierten Varianten, aber jedes Bild kann über eine Admin-Oberfläche hochgeladen werden und unsere Kopfzeile reagiert weiterhin.

Sie können den Code und die Beispielbilder herunterladen, die in diesem Artikel verwendet werden von hier .


Haben Sie mit benutzerdefinierten Headern in WordPress gearbeitet? Welche Verbesserungen in Version 3.4 haben Auswirkungen auf die Arbeit mit WordPress? Treten Sie dem unten stehenden Gespräch bei.