Tutorial: Menü mit Reitern erstellen

In diesem Tutorial werde ich beschreiben wie man zum Kubrick (DE) Theme ein Reitermenü hinzufügt. Diese Anleitung kann jedoch auf andere Themes Übertragen werden. PHP Kenntnisse sollten vorhanden sein, da auch Änderungen in einer PHP Datei von Wordpress gemacht werden muss. Aber nun von Anfang an. Als erstes solltet ihr ein Backup der Serverdaten machen, da immer mal was schief gehen kann… Ladet euch dazu das gesamte Wordpressverzeichnis vom Server runter und speichert es auf eurem Rechner. Danach fertigt ihr eine Kopie von dem Ordner an. In dem einem wird gearbeitet und der andere dient als Backup.

Nehmt die Datei

und öffnet sie mit einem Bildbearbeitungsprogramm. Schneidet wie auf dem Bild zu sehen in den Header zurecht sodass der Header direkt am Bildrand aufhört. Den unteren Teil speichert ihr unter dem selben Namen. Der obere Teil wird nicht mehr gebraucht.

Als nächstes müssen die Bilder für die Reiter erstellt werden. Insgesamt werden vier Bilder benötigt. Ein Bild für den linkenTeil, ein Bild für den rechten Teil (breit) und das ganze auch für den Mouseover Effekt. Bei mir sehen die Bilder so aus:

Speichert die Bilder unter einem aussagekräftigen Namen im images Ordner ab.
Öffnet jetzt die Datei header.php, geht zu der Stelle

und ersetzt diese durch folgenden Code:

<div id="header"
style="padding:0px;margin:0px;margin-bottom:10px;">
    <div id="headnavi">
            <?php
                $args["category"] = 45;
                $args["title_before"] = "";
                $args["category_before"] = "";
                $args["category_after"] = "";
                $args["orderby"] = "rating";
                wp_list_bookmarks_head($args);
            ?>
    </div>
	<a  href="<?php echo get_option('home'); ?>/">
<img src="
<?php bloginfo('stylesheet_directory'); ?>
/images/kubrickheader.jpg"
alt="header" style="margin:0px;padding:0px;" /></a>
</div>

Damit ist jetzt das Menü schon in den Header eingebunden nun werden die Stylesheets angepasst. Öffnet dafür die style.css und fügt diesen Code ein:

Außerdem müsst ihr im Abschnitt /* Begin Structure den Block # header durch diesen Code ersetzen:

kopiert darin die Funltion wp_list_bookmarks() und nennt sie in wp_list_bookmarks_head() um. In der neuen Funktion ändert ihr nun die Stellen (2 Stück) an denen steht

in

um. Jetzt sind alle Änderungen gemacht. Ladet jetzt alles auf euren Server wieder hoch. Das Menü sollte jetzt noch leer sein und nicht angezeigt werden. Damit in dem Menüs nun auch Links angezeigt werden erstellt eine Link-Kategorie mit dem Namen Headnavi und fügt dort die die Links hinzu, die im Head angezeigt werden. Diese werden aufsteigend nach ihrem Rating sortiert angezeigt. Solltet ihr eine Linkliste in der Sidebar haben empfehle ich euch den Code wie folgt zu bearbeiten, denn dann wird die Kategorie Headnavi nicht in der Sidebar angezeigt.
Dazu müsst ihr den Code

durch diesen Code ersetzen:

Viel Spaß mit dem neuen Menü

2 Kommentare zu “Tutorial: Menü mit Reitern erstellen”

Wordpress 2.7.1 und Menütutorial - Datei, Handbearbeitet, Hinweis, übertragen, Gerrit, Menü - Garbereder.de

[...] wird auch die Datei wp-include/bookmark-template.php verändert. Deswegen an alle die, das Menütutorial umgesetzt haben der Hinweis, dass diese Datei von Handbearbeitet werden muss und nicht einfach [...]

Tutorial: Menü mit Reitern erstellen II - Update von Wordpress, bookmarks-templatephp, methodsphp, Datei, Theme, Wordpress - Garbereder.de

[...] einfach die integrierte Updatefunktion verwenden kann, da die Datei bookmarks-template.php wie im ersten Teil des Tutorials beschrieben verändert wurde. Damit dies nicht mehr passiert kann man sich behelfen. Dazu [...]

Kommentieren