WordPress als ’statisches‘ CMS
23. November 2006 | 7 Kommentare 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.
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.
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:
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
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.
<?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:
<?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.
29. November 2006, 18:30 Uhr
Schöne Sache, das! Nur leider funktioniert das PlugIn Polyglot (http://fredfred.net/skriker/index.php/polyglot/lang/en/ ) nicht mit NAVIGO.
Oder habt ihr da nen Tip?
Danke!
29. November 2006, 19:57 Uhr
@H:
Ja, ist klar, weil der Navigo-Aufruf in der index.php steht und damit konstant bleibt.
Wir haben zweisprachige WordPress-Seiten immer mit einer separaten Navigation gelöst, wie auf der Seite http://irkutsk.undkonsorten.com.
Es gibt hier einfach zwei getrennte Seitenbäume deutsch/russisch. Alle russischen Seiten sind Unterseiten von der PageID=2 und sie bekommen ein separates Seitentemplate bei denen Navigo mit nur die russische Navigation ausgibt. Bei der Standard-Seite auf Deutsch werden die Seiten die unter der PageID=2 liegen einfach exkludiert.
30. November 2006, 16:08 Uhr
hmmm…
Polyglot wird ja auch in die index.php eingesetzt und tauscht dort nur entsprechende inhalte aus bzw. verbirgt die nicht gewählte sprache.
das müsste doch funktionieren!
wenn man WP anständig als CMS einsetzen möchte, dann sollte eine einfach zu handelnde zweisprachigkeit möglich sein.
bisher bin ich ja noch nicht zufrieden fündig geworden.
prinzipiell aber trotzdem ne gute anpassung, euer navigo.
19. Januar 2007, 17:51 Uhr
[…] Meiner Meinung nach, ist aber die Lösung über das Navigo-Plugin noch immer die bessere und komfortablere, weil man dort erstens die nicht aktiven Navigations-Ebenen auch einklappbar sind. Zweitens unterscheidet Navigo nicht nur zwischen aktiver/nichtaktiver Seite, sondern auch zwischen aktivem/nicht-aktivem Level bei Navigationen mit mehreren Ebenen, so dass man aktive Level anders einfärben kann als inaktive. Ein absolutes Muss, will man WordPress als CMS verwenden. Um Seiten mit Navigo zu verstecken, verwenden wir ein leicht modifiziertes Navigo (navigo.zip), bei dem man Seiten über &exclude=2 ausschließen kann. Damit man die Seiten nicht alle einzeln hardcodiert verstecken muss, richten wir standardgemäß eine Hilfsseite (hier z.B. id=2) ein. Will man eine Seite ausblenden, setzt man die Hilfsseite einfach auf “übergeordnete Seite” und weg ist sie. […]
5. September 2007, 00:37 Uhr
[…] undkonsorten » WordPress als ’statisches’ CMS :: Wie man WordPress in ein kleines, und einfach zu bedienendes CMS umwandelt, erfahrt Ihr hier… (tags: wordpress cms) […]
31. März 2008, 01:06 Uhr
[…] WordPress als ’statisches’ CMS […]
27. Oktober 2008, 16:41 Uhr
genau diesen input habe ich gesucht.
genau diesen geistigen anstoss hatte ich gesucht!
danke!