Liebe Besucher, derzeit nehme ich aus Zeitmangel keine Aufträge an.

Ich installiere und gestalte Ihre eigene Internetseite ab einmalig 50 €


29.06.16

WordPress Menü mit Beitragsbilder realisieren

Für ein Projekt wünschte der Kunde auf der Startseite eine Übersicht über bestimmte Unterseiten der Website – und zwar nach folgendem Prinzip: Hier sollte jeweils der Titel stehen und darüber eine repräsentative Grafik. Es sollte also ein modernes Kachel-Menü erstellt werden. So sollte diese Anordnung dann aussehen (bzw. tut sie es nun):

Wordpress Menü mit Bildern

Was man hier sieht, ist natürlich zunächst die Überschrift nebst der WordPress-Seitenbeschreibung. Der Clou kommt darunter: Dies ist ein ganz normales Menü, welches man bequem in der Menüverwaltung von WordPress administrieren kann (Punkte anordnen, hinzufügen, entfernen). Denn es wird hierbei der Seitentitel ausgegeben und zusätzlich das Artikelbild! Dies setzt natürlich voraus, dass diesen Seiten ein solches Bild in der Seitenadministration zugeordnet wurde (also das „Featured Image“).

Zunächst dachte ich bei der Realisierung über einen ganz einfachen händischen html-Aufbau nach. Dies würde schnell gehen und ließe sich von mir zu einhundert Prozent nach Wunsch per css „stylen“. Jedoch hätte dies natürlich den großen Nachteil, dass der Kunde hier kaum Eingriffsmöglichkeiten hat! Würde er einen Seitentitel ändern, würde dies bei diesem Bilder-Menü natürlich nicht automatisch berücksichtigt werden, vom automatischen Hinzufügen neuer Seiten ganz zu schweigen.

Dann kam mir die Idee, dies einfach über ein ganz normales, reguläres Menü zu erledigen, für welches der Kunde einfach im Admin-Bereich seiner WordPress-Installation per „Drag & Drop“ die Menüpunkte verwalten kann. Die Artikelbilder werden dann in der Ausgabe automatisch hinzu gefügt.

Der Code

Wie Sie das WordPress-Bilder-Menü in Ihr Template einfügen können, möchte ich an dieser Stelle beschreiben. Der Code ist sehr kurz und setzt sich aus vier kleinen Komponenten zusammen:

Menü in der functions.php registrieren

Zunächst muss das neue Menü natürlich in der Datei „functions.php“ des Themes registriert werden:

/* Menü registrieren */
if ( function_exists('register_nav_menus') ) {
    register_nav_menus(array(
           'menu-startseite' => __( 'Menu Startseite' ),
        'menu-eins' => __( 'Menu eins' ),
        'menu-zwei' => __( 'Menu zwei' ),
    ));
}

Bei dem obigen Code werden, wie man sieht, insgesamt drei Menüs registriert. Entweder sie fügen die Zeile „‚menu-startseite‘ => __( ‚Menu Startseite‘ )“ ihrer bestehenden Menü-Registrierung hinzu (auf die Kommas am Ende achten). Oder sie nehmen den ganzen Block und entfernen bei Bedarf die beiden anderen Zeilen / Menüs.

Nun geht es in der functions.php aber noch etwas weiter. Folgendes muss hier ebenfalls eingetragen werden:

register_activation_hook(__FILE__, 'init');

function init(){
}

function addNavImage($sorted_menu_objects, $args){
    if($args->theme_location != 'menu-startseite'){
        return $sorted_menu_objects;
    }
    foreach($sorted_menu_objects as $menu_object){
        if(in_array($menu_object->object, array('post', 'page', 'any_post_type'))){
            $title = $menu_object->title;
            $menu_object->title = has_post_thumbnail($menu_object->object_id) ? get_the_post_thumbnail($menu_object->object_id, 'thumbnail') . $menu_object->title : $menu_object->title;
        }
    }

    return $sorted_menu_objects;
}

add_filter('wp_nav_menu_objects', 'addNavImage', 10, 2);

Beachten Sie hierbei die siebte Zeile: Hier findet sich die Menübezeichnung wieder. Sollten Sie den ersten Code bereits vollständig übernommen haben, müssen Sie hier nichts ändern. Soll jedoch einem bereits bestehenden WordPress-Menü Bilder hinzugefügt werden, dann muss in dieser Zeile der (Registrierungs-) Name des Menüs eingetragen werden.

Was macht dieser Code? Er sucht nach einem Menü mit einem bestimmten Namen (wie eben erwähnt) und setzt hinter den Titel jeweils noch das dazugehörige Artikelbild (falls vorhanden).

Das Menü in die Seite einbauen

Nun muss das neue Menü mit den Bildern natürlich noch irgendwo auf der WordPress-Seite erscheinen. Werden konventionelle Menüs meist im header oder footer eingesetzt, ergibt dies für so ein Kachelmenü mit Bildern weniger Sinn (es sei denn, man stylt es sehr klein oder arrangiert eine Mouse-Over-Lösung). Bei meinem Projekt hatte ich es lediglich auf der Startseite eingebettet. Nirgendwo sonst erscheint es also. Dies ist der Code:

<?php wp_nav_menu( array( 'theme_location' => 'menu-startseite', 'container' => false, 'menu_id' => 'menu-startseite', 'menu_class' => 'menu' ) ); ?>

Menü stylen per css

Nun sollte bereits alles funktionieren: Dem bestimmten Menü (Bei mir heißt es „menu-startseite“ / ggf. ändern) wird nun jeweils ein Artikelbild pro im Menü aufgeführter Seite hinzu gefügt. Ohne css jedoch wird dies ein wildes Durcheinander. Daher benötigt man noch etwas Code für die style.css:

#menu-startseite {text-align:center} 
#menu-startseite li {display:inline-block;width:140px;vertical-align:top;margin:30px;line-height:1.2em;text-align:left;filter:brightness(0.9);-webkit-filter:brightness(0.9)}
#menu-startseite li:hover {filter:brightness(1);-webkit-filter:brightness(1)}

Der CSS-Code ist nur ein Beispiel und jeder kann ihn anpassen, wie es gefällt. Hier definiere ich z. B. einen Mouse-Over: Die Bilder werden dann leicht heller, wenn man mit der Maus darüber fährt. Ich habe zudem auch globale CSS-Angaben, was die <ul>s anbelangt. Wichtig ist nur, dass dem Kachelmenü mit den Bildern eine ID zugeordnet ist: #menu-startseite. Dies kann freilich auch geändert werden. Weiterhin besitzt das Menü noch die Klasse „menu“. Diese kann man nutzen, wenn man allen seinen Menüs bestimte CSS-Eigenschaften global verleihen möchte (z. B. Linkfarbe).

Fazit

Durch die Möglichkeit, dass WordPress durchaus auch die Artikelbilder von Seiten in einem Menü ausgeben kann, ist es recht einfach, „Kachel-Menüs“ zu erstellen, welche natürlich insbesondere für Touch-Screens sinnvoll sind. Ich mag diese opulenten Menüs mit den Grafiken auch für Projekte, die nicht ganz so seriös erscheinen müssen bzw. visuell auch mal dezent fetzen können.

Kommentare sind geschlossen.