WordPress Layout: Kopfzeile neu gestalten (Twenty Ten)

In diesem Artikel zeigen wir, wie man bei WordPress für das mitgelieferte Thema Twenty Ten eigene Kopfzeilen-Bilder mit neuen Bild-Abmessungen (Breite, Höhe) einbringen kann, und wie man die Position des Kopfzeilenbilds verändert.

In unserem Beispiel soll das Kopfzeilen-Bild nur mehr so breit wie der Contentbereich sein (640px) und direkt über dem Content sitzen. Die Kopfzeilen-Bilder soll man weiterhin durch individuelle Artikelbilder ersetzen können.

Layout Skizze


Wir setzen voraus, dass wir an einem Kind-Thema von Twenty Ten arbeiten, damit die Arbeit auch nach dem nächsten Update von WordPress erhalten bleibt.


Vorab die Frage: möchten Sie ein downloadbares Child Thema (Kind Thema), in dem das, was jetzt folgt, bereits umgesetzt ist? Wenn ja, dann bitte um Ihren Kommentar am Ende des Artikels. Wenn nein, dann sagen Sie uns das doch auch.

Los geht’s

Legen Sie Kopien der folgenden Twenty Ten Dateien unter demselben Namen in das Verzeichnis des Kind Themas:

  • header.php
  • page.php (für die Darstellung in Seiten)
  • single.php (für die Darstellung in Artikeln)

Zusätzlich benötigen wir eine Datei function.php. Falls diese Datei im Verzeichnis des Kind-Themas noch nicht existiert, so legen Sie eine leere Datei unter diesem Namen an.

Die Kopfzeilen-Bilder

Wir wollen die originalen Kopfzeilen-Bilder von Twenty Ten loswerden, und eigene Bilder mit einer neuen Breiten- und Höhenangabe einbringen. Unsere neuen Kopfzeilen-Bilder werden die Dimension 640 x 240 Pixel haben.

Richten Sie im Verzeichnis Ihres Kind-Themas ein Unterverzeichnis namens images ein, und darin ein Unterverzeichnis namens headers. Legen Sie in dieses Verzeichnis Ihre neuen Kopfzeilen-Bilder, sowie die dazugehörenden kleineren Thumbnail-Bilder. Folgen Sie dazu am besten dem Namensschema von Twenty Ten, wo es z.B. zum Bild sunset.jpg das Thumbnail-Bild sunset-thumbnail.jpg gibt.

Die großen Bilder sind 640 Pixel breit, die Thumbnail-Bilder sind nur 230 Pixel breit (Sie können für die Thumbnails aber beliebige Größen wählen).

Die Struktur sieht also so aus:

In der Datei functions.php im Kind-Themenverzeichnis werden die mitgelieferten Bilder von Twenty Ten entfernt und stattdessen die eigenen hinzugefügt.

Was passiert hier? In der PHP-Funktion childtheme_setup() werden erst einmal die neuen Bilddimensionen gesetzt (bzw. die bestehenden von Twenty Ten überschrieben).

Danach wird der Pfad zum Verzeichnis des Kind Themas in der Variable $childtheme_dir abgelegt.

Es werden nun die eigenen Bilder registriert (jeweils mit URL zum Bild, URL zum Thumbnail-Bild und einer Bildbeschreibung), und die Originalbilder von Twenty Ten mit Hilfe der Funktion childtheme_remove_twenty_ten_headers() „abgemeldet“.

Sollten Sie Ihr Thema nie in einer anderen Sprache als Deutsch ausgeben wollen, dann können Sie bei description auch gleich eintragen:
'description' => 'Rote Blume'
bzw.
'description' => 'Blaue Blume'

Ab nun sollten Sie bereits in der Administration Ihres Blogs unter „Design“ / „Kopfzeile“ nur mehr Ihre Bilder (Rote Blume und Blaue Blume) sehen und eines davon zur Anzeige im Kopfzeilenbereich auswählen können.

Neue Kopfzeilenbilder in WordPress Child Theme von Twenty Ten

Ortswechsel

Nun verschieben wir die Position der Kopfbild-Zeile. Öffnen Sie im Editor die Datei header.php im Verzeichnis des Kind-Themas und schneiden Sie den folgenden Teil mit Strg-X (Windows) bzw. cmd-X (MacOS) heraus, behalten Sie also den ausgeschnittenen Code im Zwischenspeicher:

Öffnen Sie nun die Datei page.php im Verzeichnis des Kind-Themas und fügen Sie den ausgeschnittenen Code unmittelbar nach

ein. Entsprechendes tun Sie mit der Datei single.php.

Fertig.

Hat’s geklappt? Haben Sie Anregungen? Würden Sie etwas anders umsetzen? Wollen Sie Downloads?

Ähnliche Artikel:

Beteilige dich an der Unterhaltung

1 Kommentar

Schreib einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.