So aktivieren Sie das Bedienfeld für benutzerdefinierte Kopfzeilenbilder in WordPress 3.0

Wenn Sie noch keine Gelegenheit hatten, WordPress 3.0 zu testen, dann verpassen Sie es nicht. Wir haben zahlreiche Beiträge zu den Funktionen von WordPress 3.0 erstellt und auch Screenshots von WordPress 3.0 gezeigt. Ein bemerkenswertes Upgrade in dieser Version ist ein neues Standarddesign Zwanzig Zehn. Dieses Thema hat viele großartige Funktionen aktiviert, aber eine der Funktionen, die viele Benutzer wünschen, ist der Bereich Benutzerdefinierte Kopfzeilen. In diesem Artikel erfahren Sie, wie Sie benutzerdefinierte Header mit einem Back-End-Verwaltungsbereich in WordPress 3.0 aktivieren können.

Was genau wird diese Funktion tun??

In Ihrem Admin-Panel wird eine Registerkarte erstellt, auf der Sie die Header-Bilder ändern können. Sie können Standardbilder registrieren, wenn Sie ein Designdesigner sind, um Benutzern mehr Optionen zu bieten. Benutzer können außerdem benutzerdefinierte Bilder für die Kopfzeile hochladen. Last but not least nutzt dieses Feature Post-Thumbnails auf einzelnen Postseiten. Wenn Ihr Postminiaturbild groß genug ist, um auf die Kopfzeilengröße zu passen, verwendet es Ihr Postminiaturbild als Kopfzeile anstelle des Standardbildes. Wenn Ihr Miniaturbild größer ist, wird es für Sie zugeschnitten.

Schauen Sie sich den Screencast an

Wie füge ich das hinzu??

Wir haben den Code direkt von Twenty Ten übernommen Functions.php Datei. Sie müssen die folgenden Codes in Ihr Theme einfügen Functions.php Datei.

 array ('url' => '% s / images / headers / berries.jpg', 'thumbnail_url' => '% s / images / headers / berries-thumbnail.jpg', 'description' => __ ('Beeren') , 'yourtheme')), 'cherryblossom' => array ('url' => '% s / images / headers / cherryblossoms.jpg', 'thumbnail_url' => '% s / images / headers / cherryblossoms-thumbnail.jpg ',' description '=> __ (' Cherry Blossoms ',' yourtheme ')),' concave '=> array (' url '=>'% s / images / headers / concave.jpg ',' thumbnail_url '=> '% s / images / headers / concave-thumbnail.jpg', 'description' => __ ('Concave', 'yourtheme')), 'farn' => array ('url' => '% s / images / headers / fern.jpg ',' thumbnail_url '=>'% s / images / headers / fern-thumbnail.jpg ',' description '=> __ (' Fern ',' yourtheme ')),' Waldboden '=> array ('url' => '% s / images / headers / forestfloor.jpg', 'thumbnail_url' => '% s / images / headers / forestfloor-thumbnail.jpg', 'description' => __ ('Waldboden') , 'yourtheme')), 'inkwell' => array ('url' => '% s / images / headers / inkwell.jpg'), 'thumbnail_url' => '% s / images / headers / inkwell-t humbnail.jpg ',' description '=> __ (' Inkwell ',' yourtheme ')),' path '=> array (' url '=>'% s / images / headers / path.jpg ',' thumbnail_url ' => '% s / images / headers / path-thumbnail.jpg', 'description' => __ ('Pfad', 'yourtheme')), 'sunset' => array ('url' => '% s / images / headers / sunset.jpg ',' thumbnail_url '=>'% s / images / headers / sunset-thumbnail.jpg ',' description '=> __ (' Sunset ',' yourtheme '))));  endif; if (! function_exists ('yourtheme_admin_header_style'))): / ** * Formatiert das Kopfzeilenbild, das im Erscheinungsbild> Header-Admin-Bedienfeld angezeigt wird. * * Über add_custom_image_header () in Ihremtheme_setup () referenziert. * * @since 3.0.0 * / function yourtheme_admin_header_style () ?> #headimg height: px; Breite: px;  #headimg h1, #headimg #desc display: none;   

Das ist für mich Jibbrisch. Bitte erkläre

Natürlich mag das für manche von Ihnen falsch aussehen. Dies ist hauptsächlich für Designdesigner, aber wir werden unser Bestes tun, um es aufzuschlüsseln. Bevor Sie beginnen, stellen Sie sicher, dass Sie diesen Code kopieren und in Ihren Code-Editor einfügen, damit Sie die erforderlichen Änderungen vornehmen können.

Hinweis: Wir verwenden / images / headers / als Verzeichnis, in dem Sie Ihre Standard-Header-Images speichern.

• Sie starten den Code, indem Sie eine Funktion yourtheme_setup () erstellen..
• In Zeile 21 definieren wir das Standardheaderbild. Beachten Sie, dass es eine Variable% s gibt, die im Wesentlichen ein Platzhalter für den URI des Designverzeichnisses ist.
• In Zeile 25 und 26 definieren Sie die Bildbreite und -höhe. Standardmäßig ist es auf 940px breit und 198px hoch eingestellt. Sie können es ändern, indem Sie diese beiden Zeilen bearbeiten.
• Ab Zeile 42 beginnen wir, die Standardheader zu registrieren. Dies sind die Bilder, die als Optionsfeld in Ihrem Admin-Panel angezeigt werden. Wenn Sie mehr Optionen benötigen, folgen Sie einfach dem verwendeten Format.
• In Zeile 95 wählen wir die Kopfzeile. Sie müssen diese Einstellungen nicht ändern, da Sie sie bereits in Zeile 25 und 26 festgelegt haben.

Das ist alles, was Sie für die Datei functions.php des Themas tun. Als Nächstes gehen wir darauf ein, wie Sie dies zu Ihrem Thema hinzufügen werden.

Code, der in Ihrem Design hinzugefügt werden soll

Dieser Code wird höchstwahrscheinlich in das Thema aufgenommen header.php Datei. Sie können es nach Belieben gestalten.

ID) && (/ * $ src, $ width, $ height * / $ image = wp_get_attachment_image_src (get_post_thumbnail_id ($ post-> ID), 'post-thumbnail')) && $ image [1]> = HEADER_IMAGE_WIDTH): // Wir haben ein neues Header-Image! echo get_the_post_thumbnail ($ post-> ID, 'post-thumbnail'); sonst:?>  

Was macht dieser Code??

• Zunächst wird geprüft, ob es sich um einen einzelnen Beitrag oder eine Seite handelt. Es wird auch geprüft, ob für diesen Beitrag / diese Seite ein Thumbnail vorhanden ist und ob dieser groß genug ist.
• Wenn es sich bei der Seite um eine einzelne Seite handelt und die Miniaturansicht groß genug ist, wird die für diesen Beitrag spezifische Miniaturansicht des Beitrags angezeigt.
• Wenn es sich nicht um eine einzelne Seite handelt oder das Postminiaturbild nicht groß genug ist, wird der Standardheader angezeigt.

Wir hoffen, dass dieses Tutorial hilfreich war. Wir haben ein paar E-Mails erhalten, die nach diesem Tutorial gefragt haben. Daher haben wir den Code vom Twenty-Ten-Thema heruntergebrochen. Wenn Sie Fragen haben, können Sie gerne in den Kommentaren nachfragen.