WordPress als ’statisches‘ CMS

23. November 2006 | 7 Kommentare

Wordpress als CMS bei macht-es-wahr.de Eigentlich ist WordPress ja ein reinrassiges Blog-CMS, bei dem immer die aktuellsten Artikel auf der Startseite angezeigt werden. Die statischen Seiten stehen dabei eher im Schatten.

Es gibt jedoch Webseiten, bei denen die statischen Seiten, genauso wichtig sind wie die aktuellen Beiträge oder bei denen sogar gänzlich auf aktuelle Beträge verzichtet werden soll. Gleichzeitig wünschen sich viele Kunden auch für die statischen Seiten eine übersichtliche Navigation. All das lässt sich auch mit WordPress und ein paar angepassten Plugins hervorragend umsetzen – zudem noch suchmaschinenfreundlich, barrierefrei und XHTML- und CSS-konform.

Das haben wir z.B. für www.macht-es-wahr.de, eine Kampagne des Rates für Nachhaltige Entwicklung, so gemacht.

Wie man WordPress in ein kleines, und einfach zu bedienendes CMS umwandelt, erfahrt Ihr hier…

Dreispaltiges Layout

Die Standard-WordPress-Seite ist zweispaltig und sieht so aus.

WordPress Standard - zweispaltiges Layout

Oben das header-div, die Inhalte landen in dem narrowcolumn-div und rechts daneben in dem sidebar-div gibt es die Navigationen für Seiten, Kategorien, Archiv, Suche, Links usw.

Schauen wir uns dazu die index.php des Templates genauer an: Dort wird zuerst das header-div über <?php get_header(); ?> eingefügt. Dann folgt das <div id=“content“ class=“narrowcolumn„>, in dem die Post ausgeben werden. Nach dem narrowcolumn-div kommt das sidebar-div, das sich die index.php über ein <?php get_sidebar(); ?> holt. Am Ende folgt noch das footer-div, mit der WordPress-Eigenwerbung und den RSS-Feed-Links. Man holt es sich über <?php get_footer(); ?>.

Das zweispaltiges Layout wird dann über die CSS-Zuweisungen für die divs in der style.css erreicht.

Kommen wir nun zu unserem Beispiel mit dreispaltigem Layout, in dem wir neben dem narrowcolumn-div auch noch die linke Navigationsleiste platzieren müssen. Wir haben sie navbar getauft.

WordPress als CMS - dreispaltiges Layout und Navigationsleiste

Dazu legen wir in der index.php vor dem narrowcolumn-div ein <div id=“navbar“> Navigation </div> an. Die Ausrichtung links neben der narrowcolum, erreichen wir über folgende CSS-Angabe in der style.css des Templates:

div#navbar {

clear:both;
float: left;
margin: 0;
padding: 0;
width: 190px;
}

Das <div id=“content“ class=“narrowcolumn“> soll nun rechts von der navbar und links von
der sidebar liegen. Dies erreichen wir über ein float: left (narrowcolumn); bzw float: right; (sidebar) in der style.css

div.narrowcolumn {
float: left;
margin: 0;
padding: 0;
width: 400px;
}div#sidebar {
float:
right;
padding: 0;
margin: 0;
width: 190px;
}

Wenn die Kästen jetzt auf der Seite umherspringen, anstatt alle sauber nebeneinander zu liegen, so könnte es daran liegen, dass Eure drei divs breiter sind als das das page div Unsere drei divs hier sind jetzt insgesamt 780 Pixel breit. So breit sollte dann auch mindestens das page-div sein.

Passt vor allem auf, wenn Ihr die Angaben für margin und padding hochsetzt, damit die Schrift nicht an den Rändern klebt: auch diese erhöhen die Breite der divs. Auch zu große Bilder in den DIV oder Texte ohne Umbrüche können im vor allem InternetExplorer das selbe Phänomen hervorrufen (mehr dazu: CSS-Box-Modell).

Die Navigationsleiste für Seiten-Navigation erstellen

Jetzt haben wir das Layout. Es fehlt noch die linke Navigation. Für eine gut anpassbare Navigationsleiste verwenden wir ein leicht modifiziertes Navigo-Plugin , um auch bestimmte Seiten ausblenden zu können. Das könnt ihr Euch hier herunterladen. Die beiden Dateien einfach in das WordPress-Plugin-Verzeichnis kopieren und das Plugin aktivieren.

navigo.zip, modified by undkonsorten

Eine Anleitung zu Navigo steht Euch jetzt auch direkt unter Optionen » Navigo. Hier könnt Ihr den unten stehenden Quellcode erzeugen. Allerdings steht hier die exclude-Funktion nicht zur Verfügung. Die könnt Ihr aber manuell einfügen. Mit exclude=1,2 könnt ihr bestimmte Seiten aus der Navigation ausschließen. Dies ist z.B. dann sinnvoll, wenn man Hilfsseiten für die Meta-Navigation anlegt, wie es in richtigen CMS wie TYPO3 ganz normal ist.

<div id=“navbar“>
<?php if(function_exists(’navigo‘))
navigo(‚exclude=2&collapse=true&sort_column=menu_order‘);
?>
</div>

Wir erhalten jetzt eine Liste mit allen angelegten Seiten. Diese formatieren wir über die Stylesheets solange, bis sie unseren Vorstellungen entspricht.

Die Navigationsleiste für Seiten-Navigation erstellen

Für die Meta-Navigation mit [Home | Kontakt | Impressum | Sitemap | Suche] im Footer legen wir uns eine Hilfsseite meta-navigation (id: 2) für die Meta-Navigation und verstecken sie dann im bei Navigo für die allgemeine Seitennavigation. Die footer.php fügen wir folgenden Code ein:

<div id=“footer“>
<?php if(function_exists(’navigo‘)) navigo(‚child_of=2&sort_column=menu_order‘);
?>
</div>

Mit dem Befehl child_of=2 lassen wir uns alle Seiten der meta-navigation (id: 2) ausgeben. Auch diese Seiten-Liste sollte man dann entsprechen über die CSS formatieren.

Das war’s schon. Viel Spaß beim Basteln!

LINKS: Beispiele für ’statische‘ WordPress-Seiten:

macht-es-wahr.de
einheitspreis.de
irkutsk.undkonsorten.com
integratv.de

Andere Tutorials zum gleichen Thema:

WordPress als CMS – ein Beispiel (Peruns Weblog) – Ähnliches Spiel, nur etwas weniger flexibel und automatisch.
WordPress als CMS – bei sw-guide.de – Der Such-Aspekt ist hier zu beachten!
WordPress als CMS – ein Fallbeispiel – bei netzspielwiese.del – Auch alles noch etwas handgestickt, aber mit guten weiterführenden Links.

Ähnliche Artikel:

Meta-Daten

Autor: undkonsorten, Thomas Alboth
Tags+Kategorien:
Kategorie: CMS, Stylesheets (CSS), Tutorial, WordPress



7 Kommentare

Auch mal Kommentieren:

Kommentar