Wie könnte ich so ein Menü in Wordpress-Theme implementieren?

Was WP angeht, wäre ein Theme mit einen Header-Widget-Bereich praktisch dafür, da könnte man dann einfach mit dem Text-Widget den nötigen HTML-Code einbinden, ansonsten kann man den auch in die header.php einfügen, damit der dann beim nächsten Update nicht weg ist, bietet sich dafür alternativ zu einem Child-Theme ein solches Plugin wie dieses an

https://de.wordpress.org/plugins/header-footer/

Der Code selbst könnte dann jeweils pro Button z.B. so aussehen

<A HREF="http://www//Linkziel/"
<IMG SRC="http://www//grafik/button_norm.png" onmouseover="src='http://www//grafik/button_hover.png'" onmouseout="src='http://www//grafik/button_norm.png'" BORDER=0>
</A>

Achte auf die Anführungs- und Zollzeichen, zusätzliche Tags wie Alt und TITLE nach Belieben hinzufügen.

button_norm.png -> Ist dabei die Grafik, die standardmäßig angezeigt wird.
button_hover.png -> Ist dabei die Grafik, die beim Überfahren mit dem Mauszeiger angezeigt wird.


Nachtrag: Falls die Buttons (je nach Theme möglich) unterstrichen dargestellt werden sollten, füge einfach über den o.g. Codeschnipsel noch diese Zeile ein

<style type="text/css">a:hover, a:active {text-decoration: none;}</style>

 

https://de.wordpress.org/plugins/menu-icons/

 

Also erstmal würde ich dir davon abraten, es so umzusetzen wie im von dir verlinkten Beispiel.
Anders als offensichtlich die Macher deines Beispiels, gehe ich nicht davon aus, dass die Icons so wirklich selbsterklärend sind und würde also nicht auf einen erklärenden textlichen Zusatz verzichten wollen.

Machen kannst du sowas ziemlich einfach und wie meistens führen einige Wege zum Ziel.

Wenn die Seiten, auf die deine Spezialnavigation verlinken soll, tatsächlich Seiten sind (pages), ist der Weg über ein WordPress Nav-Menü aus meiner Sicht der einfachste.
Wenn es Beiträge (posts) sind, könnte auch das Umstylen einer Beitrags- oder Kategorieübersichtsseite zielführend sein.

Für den gewünschten Hovereffekt setzst du deine Grafiken sinnvollerweise als Hintergrundgrafiken über CSS ein. -> Bau dir ein Sprite / Iconsprite (-> Futter für die Suchmaschine deiner Wahl). Und im Navmenu, d.h. bei seiner Ausgabe durchs PHP, brauchst du eigentlich gar nichts zu schrauben, weil das Menu dir schon standardmäßig eigene IDs für jedes Menü-Item mitbringt, über die du sie dann im CSS ansprechen kannst.

Gruß
helix

 

Ich bin zwar ein Freund davon, das Rad nicht jedesmal neu erfinden zu müssen und setzte daher auch gerne auf Plugins, wenn sie möglichst nebenwirkungsfrei zielführend sind, aber in diesem Fall ist mit dem o.g. Plugin die Umsetzung des Menüs von der verlinkten Beispielwebsite nur bedingt möglich, ohne tiefer von Hand eingreifen zu müssen und dann kann man auch direkt auf eine Lösung auf Codeebene setzen.

Das Plugin dienst in erster Linie dazu, normale Menüs mit kleinen Icons vor dem Menütext aufzupeppen, setzt man dafür eigene Grafiken ein und entfernt den Menütext, kommt man schon in die Richtung des o.g. Beispiels, aber es fehlt noch der Hovereffekt und die Größe sowie der automatische Beschnitt müssen auch noch von Hand tiefer im Code angepasst werden, ferner ist man auf die vom Theme vorgegebenen Menüs und ihre Positionen beschränkt und kann also nur ein vorhandenes Menüs damit aufpeppen bzw. ersetzten und kein zusätzliches hinzufügen.

Dennoch für seinen eigentlichen Zweck ein durchaus berechtigtes Plugin...