Funktion im TwentyTen

Die im TwentyTen-Theme eingebaute Funktion stellt einige Header schon von sich aus zur Verfügung und bietet die Möglichkeit weitere per Upload hinzu zu fügen. Jedoch werden die neuen Header in der Mediathek abgelegt und stehen somit nicht in der Liste der auswählbaren Headerbilder.

Ändert man nun wieder den Header, so wird das „alte“ Bild nicht aus der Mediathek entfernt und liegt dort nun ungenutzt herum. Auch ist ein Rückgängigmachen zum vorigen Headerbild so nicht möglich. Man müsste es erneut hochladen. Dies ist ein Umstand der mich etwas gestört hat und so kam ich auf die Idee daran etwas in meinem Theme zu ändern.

Meine Idee

Die Headerbilder liegen innerhalb des Themes im Ordner images/headers/, wo jedes Bild zwei mal vorhanden ist. Einmal in der Grösse des eigentlichen Headers und zusätzlich noch als Thumbnail für die Übersicht der Auswahl im Backend.

Hier wäre es doch schön, wenn sich die Auswahl im Backend nach den vorhandenen Bildern in diesem Ordner richten würde. Also, wenn ich ein neues Bild, inklusive Thumbnail, in diesem Ordner ablegen – was ich ganz einfach per FTP erledigen kann – sollte es dort mit in der Übersicht aufgenommen werden.

Anpassung bzw. Austausch der Funktion

Die bisherige Funktion erstellt ein Array mit vordefinierten Bildern.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// Default custom headers packaged with the theme. %s is a placeholder for the theme template directory URI.
register_default_headers(array(
    'berries' => array(
        'url' => '%s/images/headers/berries.jpg',
        'thumbnail_url' => '%s/images/headers/berries-thumbnail.jpg',
        /* translators: header image description */
        'description' => __('Berries', 'twentyten')
    ),
    'cherryblossom' => array(
        'url' => '%s/images/headers/cherryblossoms.jpg',
        'thumbnail_url' => '%s/images/headers/cherryblossoms-thumbnail.jpg',
        /* translators: header image description */
        'description' => __('Cherry Blossoms', 'twentyten')
    ),
    [....]
));

Nun kann ich natürlich für jedes weitere Bild dieses Array erweitern, was aber schnell ermüdend wird, denn für jedes Neue Bild einen neuen Eintrag in das Array einfügen ist auf Dauer einiges an Arbeit.

Hier kommt eine kleine Modifikation der functions.php zum Einsatz. Dafür wird zunächst eine neue Funktion hinzugefügt, welche in der Lage ist, angegebene Ordner zu durchsuchen.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
/**
 * Verzeichnis nach bestimmten Dateien durchsuchen
 */

if(!function_exists('my_ScanDirectory')) {
    function my_ScanDirectory($var_sPath, $var_sWhat = 'all', $var_bRekursiv = true) {
        $var_sPath = preg_replace('~(.*)/$~', '\\1', $var_sPath); // letzten Slash aus dem String entfernen
        $array_list = array();
        $var_sDirectory = opendir($var_sPath);

        while($dir_entry = readdir($var_sDirectory)) {
            switch($var_sWhat) {
                case 'file':
                    if(is_file("$var_sPath/$dir_entry")) {
                        $array_list[] = $var_bRekursiv ? "$var_sPath/$dir_entry" : $dir_entry;
                    }
                    break;

                case 'dir':
                    if(is_dir("$var_sPath/$dir_entry") && !preg_match('~^\.\.?$~', $dir_entry)) {
                        $array_list[] = $var_bRekursiv ? "$var_sPath/$dir_entry" : $dir_entry;
                    }
                    break;

                default:
                    if(!preg_match('~^\.\.?$~', $dir_entry)) {
                        $array_list[] = $var_bRekursiv ? "$var_sPath/$dir_entry" : $dir_entry;
                    }
            }

            // Unterverzeichnisse?
            if(!preg_match('~^\.\.?$~', $dir_entry) && is_dir("$var_sPath/$dir_entry") && $var_bRekursiv) {
                $array_list2 = my_ScanDirectory("$var_sPath/$dir_entry", $var_sWhat, $var_bRekursiv);

                foreach($array_list2 as $dir_entry2) {
                    $array_list[] = $dir_entry2;
                }
            }
        }

        closedir($var_sDirectory);
        sort($array_list);

        return $array_list;
    }
}

Diese Funktion erlaubt drei Optionen, wobei nur die erste zwingend notwendig ist. Diese legt den Ordner fest, welcher durchsucht werden soll. In der zweiten Option wird angegeben, nach was gesucht werden soll, also ob nach Dateien ( ‚file‘ ), Verzeichnissen ( ‚dir‘ ) oder eben alles ( ‚all‘ ). Wird diese weggelassen, wird nach allem gesucht was sich in diesem Ordner befindet. Option Nummer drei ist eher ein Schalter. Hier wird festgelegt, ob auch Unterverzeichnisse beachtet werden sollen oder nicht. Per Default ist dieser auf true gesetzt. Sollen Unterverzeichnisse ignoriert werden, hier einfach false setzen.

Nun aber zur eigentlichen Funktion, welche das Array mit den Headerbilder zur Verfügung stellt. Wie oben zu sehen, wird hier register_default_headers(); aufgerufen, und dabei gleich das Array fest definiert. Dies wird nun geändert.

Als erstes wird nach Headerbildern gesucht.

1
2
3
4
5
6
7
8
/**
 * Nach Headerbildern suchen
 */
$var_sPathHeaderpics = TEMPLATEPATH . '/images/headers';
$var_sType = 'file';
$var_bRecursive = false;
$array_headerImagesList = my_ScanDirectory($var_sPathHeaderpics, $var_sType, $var_bRecursive);
$array_Headers = array();

In den Zeilen 4, 5 und 6 werden die Optionen festgelegt und in Zeile 7 die Funktion aufgerufen. Der Rückgabewert der Funktion – ein Array – wird hier in $array_headerImagesList gespeichert. In Zeile 8 wird ein Array initialisiert, welches später noch gebraucht wird.

Damit sind nun alle, wirklich alle Bilder die sich in dem Verzeichnis images/headers/ befinden in einem Array abgelegt – $array_headerImagesList. Nun gilt es die heraus zu filtern, für die auch ein Thumbnail verfügbar ist, denn das ist ja die Bedingung um in die Liste der verfügbaren Headerbilder eingetragen zu werden. Die Thumbnails haben im Übrigen den Zusatz „-thumbnail“ im Namen.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// Nur ausführen, wenn User im Backend
if(is_admin()) {
    for($count_i = 0; count($array_headerImagesList) > $count_i; $count_i++) {
        if(!strstr($array_headerImagesList[$count_i], '-thumbnail')) {
            $array_HeaderIMageParts = explode('.', $array_headerImagesList[$count_i]);
           
            // Prüfen ob es auch ein Thumbnail gibt
            if(in_array($array_HeaderIMageParts['0'] . '-thumbnail.' . $array_HeaderIMageParts['1'], $array_headerImagesList)) {
                $array_Headers[$array_HeaderIMageParts['0']] = array(
                    'url' => '%s/images/headers/' . $array_HeaderIMageParts['0'] . '.' . $array_HeaderIMageParts['1'],
                    'thumbnail_url' => '%s/images/headers/' . $array_HeaderIMageParts['0'] . '-thumbnail.' . $array_HeaderIMageParts['1'],
                    'description' => $array_headerImagesList[$count_i]
                );
            }
        } else {
            continue;
        }
    }
}

Damit das alles natürlich auch nur ausgeführt wird, wenn man im Backend des Blogs ist, steht die Abfrage in Zeile 2. Die Prüfung ob ein Thumbnail zu einem Bild vorhanden ist, geschieht hier in Zeile 8. Somit werden Bilder, für die ein solches Thumbnail nicht existiert direkt aussortiert. Mit dieser Schleife wird das Array $array_Headers mit den nötigen Daten gefüllt und kann somit an WordPress übergeben werden. Dies geschieht mit:

1
register_default_headers($array_Headers);

Hier ist nun auch schon der Unterschied zu sehen. Während im Original von TwentyTen das Array während des Aufrufes von register_default_headers(); fest eingebaut wird, wird es nun vorher erzeugt und anschliessend an die Funktion übergeben.

Wo liegt der Sinn dieser Änderung

Alles was ich nun noch tun muss, ist ein Bild – nennen wir es header.jpg – mit den Maßen des Headers und ein dazugehöriges Thumbnail – header-thumbnail.jpg – im Ordner images/headers/ des Themes zu hinterlegen, und schon kann dieses in der Übersicht ausgewählt werden.

Vorgegebene Headerbilder

Vorgegebene Headerbilder

Noch ein paar Worte zum Schluss

Die hier von mir vorgestellte Änderung ist bei dem von mir verwendeten Theme eingebaut und funktioniert hier auch. Natürlich übernehme ich wie immer keine Garantie, dass dies bei euch alles so auf Anhieb funktionier. Auch bitte ich, solche Änderungen am Theme niemals in der Liveumgebung eures Blogs zu machen, sondern immer vorher auf einem Testsystem prüfen, ob auch alles so funktioniert.

Ich wünsche euch viel Erfolg und Spass damit :-)

12 Meinungen zu “WordPress: Headerbilder bei TwentyTen basierenden Themes

  1. Wenn man nun die Original-Vorlagen so gar nicht mag, könnte man dann nicht einfach die vorhandenen Header- und Thumbnail-Bilder überschreiben? Das wäre doch viel einfacher. :)

  2. Hallo Weibchen des Chaos :-)

    Ich muss ehrlich gestehen, ich habe nur auf einen Kommentar gewartet, in dem genau diese Frage gestellt wird. Und ja, es ist einfacher, so lange sich die Anzahl der Bilder in Rahmen hält.

    Aber …. !!!
    Zwei Gründe die meiner Meinung dagegen sprechen, einfach die vorhandenen Bilder zu überschreiben.
    A) Ich persönlich habe etwas dagegen, wenn mein Header beispielsweise blossom.jpg heisst. Sorry, aber da es mein Header ist, möchte ich auch festlegen wie die Datei heisst. :-)
    B) Möchte man sich dadurch nun eine Art „Archiv“ von Headern aufbauen, welche je nach Bedarf, z.B. Jahreszeit, gewechselt werden, ist es auf Dauer auch recht mühsam immer darauf zu achten auch den richtigen der „alten“ Header zu überschreiben. So hinterlege ich einfach die saisonalen Header im Verzeichnis und es kostet mich nur noch ein Klick im Backend und der Header ist gewechselt.

  3. Ich hab ja nur gefragt, musst nicht gleich krummer Hund zu mir sagen :D
    Ich wollte aber auch nicht den Namen „blossem.jpg“ behalten, sondern den eigenen. Kann man denn den Namen im Code nicht mit ändern? Dann ist es immer noch einfacher als ne neue Funktion zu generieren. Du hast meinen alten Header ja auch schlicht header.jpg genannt, von daher kann ich den doch überschreiben. Und ich will auch keine 20 Header da reinsetzen, sondern maximal 3. *denk*

  4. Hallo,
    genau nach so etwas habe ich gesucht. Ich bekomme aber meine functions.php nicht geändert und möchte hiermit fragen, ob ich eine geänderte Datei zugesandt bekommen könnte.
    Herzlichen Dank
    Marguerite

  5. Hallo,

    ich nutze ein ähnliches Theme. Ich suche eine Möglichkeit für das jeweilige Bild in der Headerline einen spezifischen Link für jede zu hinterlegen. Gibt es hierzu bereits eine Lösung.

Schreibe einen Kommentar

Ihre Email-Adresse wird nicht veröffentlicht. Pflichtfelder sind durch * markiert.

Sie können folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>