WordPress & Webwork

WordPress: Eigenes Menü mit Grafiken ergänzen

Grafiken in das WordPress-Menü integrieren: simpler als man denkt!

Die Möglichkeit eigene Menüs zu erstellen hat WordPress schon seit einigen Jahren, ich denke jedoch, dass Sie kaum ausgereizt wird.

Standardmäßig kann man hier Seiten, Links und Kategorien angeben um ein Menü zu erstellen. Je nach Theme ist es auch möglich mehrere Menüs zu erstellen bzw. anzeigen zu lassen, im Zweifelsfall als Widget in der Sidebar.

Es gibt aber auch Möglichkeit, die zwar naheliegend sind, aber nicht immer offensichtlich. So ist es durchaus möglich Navigationspunkte (Eltern) zu erstellen, die nicht anklickbar sind. Es ist aber auch möglich die Navigation mit Bildern bzw. kleinen Grafiken zu ergänzen.

Grafiken in die Navigation integrieren

Grafik im WordPress-Menü

Grafik im WordPress-Menü

Um eine Grafik in einem Menü einzubinden genügt es sie als Link einzufügen. Dabei gibt man als URL die Ziel-Adresse der Verlinkung an und als Link-Text den Image-Tag, z. B. <img src="/wp-content/uploads/2014/06/grafik.gif" />

Dabei muss man nur darauf achten, dass die Grafik nicht zu groß ist für den Platz in der Navigation.

Wer einen Text mit Grafik möchte kann sogar einen kompletten Div-Bereich einfügen, z. B.

<div style="
    background-image: url('/wp-content/uploads/2014/06/grafik.gif');
    background-repeat: no-repeat;
    display: inline;
    margin: 0;
    padding: 0 0 0 40px;
"> perun.net</div>

Über die style-Angaben muss dann nur noch die Position bzw. der notwendige Platz bestimmt werden.

via Mike’sTechBlog

6 Reaktion(en)

  1. Torsten

    Man kann im Menü auch einfach CSS-Klassen hinzufügen (den Punkt ggf. über Optionen einblenden), dann kann man solche Grafiken/Icon-Fonts per CSS hinzufügen.

  2. Pingback: WordPress-Newsletter Nr. 148 | perun.net

  3. lotta

    1000 – Danke für den Tipp, ich habe erfolgreich Grafiken, sogar mit Hover Effekt über css, in die Hauptnavigation (TwentyTwelve) einbinden können.

    Leider bekomm ich die Grafiken aber nicht im responsiven Toggle Menü angezeigt und suche mich in der CSS dumm und dusselig. Wo und wie kann ich es denn steuern, dass auch im responsiven Menü und auf den kleinen Geräten, die Grafiken angezeigt werden.

    Wäre über jeden Tipp und Hilfe dankbar.

    Schöne Grüße

    1. Lotta

      … ich hab es dann doch noch selbst gefunden 😉 Mußte die Anweisungen einfach etwas höher im Stylesheet einbinden, dann klappt es auch responsive im Toggle Menü!!!

Die Kommentare in diesem Beitrag sind geschlossen.