Nischenseiten ohne WordPress – Teil 1




WordPress ist als reines Blogsystem gestartet, eignet sich aber längst auch als CMS für normale Webseiten. Wer mit einem Design von der Stange zufrieden ist und alles weitere über Plugins löst, kommt damit auch gut zurecht. Doch manchmal benötigt man einfach viele Dinge nicht die ein so großes System wie WordPress mitbringt. Ist die Seite klein und überschaubar, lohnt es sich ein eigenes kleines System mit HTML, PHP und MySQL zu erstellen. Mit der richtigen Vorarbeit ist auch so eine Lösung leicht zu pflegen, zu erweitern und eignet sich gut für kleine Nischenseiten. 

Gerade in Sachen Ladegeschwindigkeit kann sich eine schlanke Webseite positiv für das Ranking in Suchmaschinen auswirken – und da kann ein CMS mit vielen Funktionen und Erweiterungen, die häufig nicht mal benötigt werden, schon ausbremsen.
In diesem ersten Teil wird das HTML-Layout für die Webseite erstellt, welches später mit PHP und MySQL wieder zerpflückt und mit Inhalt wie Text, Bilder und Videos gefüllt werden kann. Dies soll aber auch kein kompletter HTML- oder Programmierkurs sein, es ist sicherlich auch nicht immer alles zu 100 Prozent richtig – aber Einsteiger können bestimmt einiges lernen.


Artikelbild Nischenseiten erstellen

Der HTML-Quelltext wird also in verschiedene Teile gesplittet. Warum?
Herkömmliche, statische Webseiten haben ein Problem: Wenn das Projekt viele Unterseiten hat und zum Beispiel etwas im Navigationsmenü geändert werden soll, müssen diese Änderungen in jeder Datei vorgenommen werden. Wäre es nicht hilfreich wenn alle Unterseiten auf die gleiche Navigation zugreifen könnten und nur diese einfach einmal geändert werden muss? Genau.

Was wird benötigt?

Um HTML, JavaScript oder PHP-Code zu erstellen, wird nicht unbedingt ein spezielles Programm benötigt. Dafür würde auch der einfache Texteditor von Windows genügen. Dieser ist allerdings extrem rudimentär und erleichtert die Arbeit keineswegs. Sinnvoller sind also auf diese Arbeit spezialisierte Programme, wie zum Beispiel Notepad++ oder WebArchitect.
Neben vielen speziellen Funktionen bieten diese vor allem Syntax-Highlighting (Befehle und Strukturen werden farblich hervorgehoben), das erleichtert den Überblick und die Lesbarkeit.

Für die späteren Arbeitsschritte mit PHP und MySQL wird zudem ein Webserver auf dem eigenen Computer benötigt. Das klingt komplizierter als es ist. Die Apachefriends.org bieten dafür den XAMPP-Server an. XAMPP (X steht für Windows, Linux oder Mac, A für Apache, M für MySQL, P für PHP und P für Perl) ist ein Komplettpaket für einen Apache-Webserver, der auf dem eigenen Rechner installiert und bei Bedarf gestartet werden kann. Apache ist sehr weit verbreitet und läuft bei so ziemlich jedem Webhoster. Mit dem XAMPP hat man also ein quasi ein komplettes Entwicklungssystem unter Realbedingungen. PHP und MySQL sollten 2015 bei keinem Webhoster mehr ein großes Problem darstellen.
XAMPP ist aber nicht geeignet für den Einsatz auf einem echten Webserver. Theroetisch könnte, wenn XAMPP installiert und aktiv ist, der eigene Rechner auch die eigene Webseite hosten.

Um den installierten Webserver zu testen, muss dieser über das Control-Center gestartet werden. Dazu einfach neben dem Eintrag “Apache” auf “Start” klicken. Das Feld daneben sollte sich nun grün färben und dort das Wort “running” erscheinen.

 

Nischenseiten ohne CMS - XAMPP Control Center

Das XAMPP Control-Center

Um zu testen ob der Webserver auch funktioniert, genügt die Eingabe von http://localhost im Browser. Dann sollte eine ähnliche Seite wie diese angezeigt werden:

 

Nischenseiten ohne CMS - Apache gestartet

Apache… läuft!

Der Apache arbeitet im Unterordner /htdocs. Dieser befindet sich Installationsverzeichnis unter [Laufwerk]/xampp/htdocs. Für dieses Beispielprojekt sollte im Ordner /htdocs der Unterordner /beispielprojekt erstellt werden.

Das Layout der Webseite

Das Layout dieser Beispielseite basiert auf einem Layout, das auch bei einem echten Projekt im Einsatz ist. Die Beispielseite ist nicht sehr umfangreich und verfügt darum auch nur über wenige Menüpunkte. Wer mehr benötigt, kommt also nicht um ein Aufbohren des Menüs herum. Das Layout ist responsive und passt sich der jeweiligen Bildschirmauflösung an.

Also alles recht überschaubar. Das Stylesheet ist im Moment nicht wichtig. Denn wir kümmern uns jetzt darum, den HTML-Quelltext sinnvoll in einzelne Dateien aufzuteilen. Dazu kommt nun PHP ins Spiel. Je nach Konfiguration des Servers muss der PHP-Code in Dateien mit der Endung .php ausgeführt werden. Da dies in der Konfiguration des Apache häufig so voreingestellt ist, wird das auch in diesem Beispiel so sein. Als ersten Schritt speichern wir also die Datei index.html im Hauptverzeichnis des Beispielprojekts als index.php ab. Danach sollte die index.html in irgendetwas anderes umbenannt werden wie indexalt.html – denn Webserver sind meist so konfiguriert das die index.html vor der index.php aufgerufen wird und so unsere Änderungen keine Wirkung zeigen.

Struktur mit Ordnern

Ordnung ist das halbe Leben. Und gerade wenn viele Dateien im Spiel sind, ist es wichtig diese in passenden Ordnern unterzubringen. Wir werden die index.php nun in 6 einzelne Dateien aufsplitten, die während des Aufrufens der Seite wieder zu einem Gesamtkunstwerk zusammengesetzt werden. (Wer sich die folgenden Arbeitsschritte sparen möchte, für den stehen die Dateien unten auch zum Download zur Verfügung).

Dazu sind zunächst die passenden Ordner erforderlich. Darum sollte nun im Hauptverzeichnis des Beispielprojektes folgende Unterordner angelegt werden:

  • /meta – beinhaltet den HEAD der Webseite
  • /header – beinhaltet den Seitenkopf (Logo)
  • /navi – beinhaltet die Navigation
  • /content – beinhaltet die Dateien mit dem eigentlich Seiteninhalt
  • /footer – beinhaltet den Fußbereich der Webseite
  • /inc – beinhaltet verschiedene Dateien die eingebunden werden können/müssen/sollen

Jetzt geht’s los. Die Ordnerstruktur ist vorhanden und nun kann die index.php in Ihre verschiedenen Teile aufgesplittet werden.
Wie im Screenshot zu sehen, wird der Bereich zwischen <doctype html> und </head> markiert und in eine neue, leere Datei kopiert. Diese neue Datei einfach im Ordner /meta als head.php abspeichern.

Nischenseiten ohne CMS

Quelltext kopieren und als .php speichern

Danach muss in der index.php (aus der gerade der Code kopiert wurde) der markierte Quelltext durch folgendes ersetzt werden:

Hier kommt zum ersten Mal PHP ins Spiel. PHP-Code muss immer zwischen <?php und ?> stehen. Der Befehl include bindet dann die Datei,  die in Klammern und Anführungszeichen steht, in die aktuelle Datei ein. Also die Datei head.php im Unterverzeichnis /meta.

Als nächstes muss der Bereich <header> und </header> in eine neue Datei kopiert und diese im Ordner /header als header.php abgespeichert werden.
Der kopierte Quelltext wird einfach ersetzt durch ein:

Die weiteren Schritte in Kurzform:

Der Bereich <nav> … </nav> in die Datei navi.php im Ordner /navi
Der Bereich <main> … </main> in die Datei startseite.php in den Ordner /content
Der Bereich <footer> … </footer> in die Datei footer.php in den Ordner /footer

Die index.php sollte nun so aussehen:

Ziemlich geschrumpft, oder? Das soll auch so sein. Läuft XAMPP? Dann einfach mal den Browser öffnen und die Adresse http://localhost/beispielprojekt aufrufen. Diese URL ruft im Verzeichnis/htdocs/beispielprojekt die Datei index.php auf, führt die include-Befehle aus und setzt die ursprüngliche HTML-Seite wieder zusammen, wie ein Blick in den Quelltext zeigt.

Im nächsten Teil kommt dann auch die Datenbank zum Einsatz. Mit Unterstützung der Datenbank bekommt die Webseite einen Hauch von Dynamik, dafür ist aber auch etwas Vorarbeit nötig.




Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.