Tutorial: Gleiches Menü auf allen Seiten.

Dreami · 22.10.2009, 21:58

Wenn man eine Webseite macht, merkt man sehr schnell, dass es sehr aufwendig ist, das Menü zu verwalten. Jedesmal wenn man einen neuen Menüpunkt hat muss man den in alle Seiten bringen. Da Menüs oftmals mehrzeilig sind, muss man hier einen geeigneten Editor haben und auch damit ist es noch ziemlich schwierig.
Wäre es nicht viel einfacher, das Menü in einer Datei zentral zu haben?
Dazu gibt es die PHP-Funktion include(). Diese Funktion lädt die Datei die zwischen den Klammern steht in die Datei, in der der Code steht nach.

Damit das hier funktioniert muss euer Server PHP unterstützen. Das ist meistens standardmässig deaktiviert. Die Dateinamen der Inhaltsseiten müssen PHP-kompatibel sein, also z.B. .php oder .phtml. Ich würde .php empfehlen.
Danach schreibt ihr erstmal die ganze Seite ohne das Menü. Dort wo der Kommentar steht, kommt später das Menü hin:

HTML-Code:

<html>
<body>
<head>
<title>Testseite mit PHP</title>
</head
<body>
<!-- Hier kommt das Menü hin -->
Hier der Inhalt
</body>
</html>

Danach schreibt ihr den Inhalt des Menüs. Achtung: include() liest die ganze Datei nur aus und schreibt sie in die ursprüngliche Datei. Ihr könnt also alles was vor und nach den <body>-Tags kommt weglassen, die <body>-Tags natürlich auch
Die Datei könnt ihr jetzt z.B. als Test.php speichern.
Jetzt macht ihr eine zweite Seite auf und schreibt z.B. folgendes hinein:

HTML-Code:

<a href="/">Ich bin ein Link zur Startseite</a>

Damit habt ihr ein Menü, in dem ein Link zur Startseite ist mit dem Text "Ich bin ein Link zur Startseite".
Diese Datei speichert ihr nur der Einfachheit halber z.B. unter dem Namen menu.html. Achtet darauf, dass Test.php und menu.html im gleichen Ordner sind.

Jetzt könnt ihr das Menü in die ursprüngliche Datei einbinden. Öffnet also wieder Test.php und löscht den Kommentar. Die Datei sollte am Ende so aussehen:

HTML-Code:

<html>
<body>
<head>
<title>Testseite mit PHP</title>
</head
<body>
<?php
include(menu.html);
?>
Hier der Inhalt
</body>
</html>

Der Tag <?php weist den Server an, ab hier PHP zu benutzen. Er führt die Funktion include() mit der Datei menu.html aus. Danach muss ?> stehen, damit der Server weiss, dass der PHP-Teil zu Ende ist.
Am Ende solltet ihr dann eine Seite haben auf der der Link zur Startseite ist und darunter "Hier der Inhalt" steht.
Das Ganze macht bei einer Seite noch nicht soviel Sinn. Wenn ihr aber eine zweite Seite habt, z.B. Moep.php, macht das mehr Sinn.
Macht also eine zweite Seite mit dem folgenden Inhalt:

HTML-Code:

<html>
<body>
<head>
<title>Testseite mit PHP</title>
</head
<body>
<?php
include(menu.html);
?>
Das ist die Moep-Seite
</body>
</html>

Ihr könnt diese Datei z.B. Moep.php nennen. Achtet darauf dass sie im selben Verzeichnis wie menu.html ist.
Wenn ihr Moep.php öffnet solltet ihr den Link sehen (wie auf Test.php) und den Text "Das ist die Moep-Seite.

Ihr könnt jetzt menu.html öffnen. Schreibt dorthin in eine neue Zeile:

HTML-Code:

<a href="Test.php">Link zur Testseite</a>
<a href="Moep.php">Link zur Moepseite</a>

Öffnet jetzt Moep.php und ihr solltet die 3 Links und den Inhalt sehen. Wenn ihr jetzt auf Test.php geht seht ihr das gleiche, nur dass hier natürlich der Inhalt anders ist.

Wenn ihr das Ganze in der Praxis sehen möchtet, hier meine Seite: http://trg.kellerone.de. Ich empfehle euch, die Quelltexte zu lesen. Das Menü ist hier menu.html. Am besten lest ihr den Quelltext von http://trg.kellerone.de/menu.html und vergleicht den Quelltext mit der Startseite http://trg.kellerone.de/index.php.