Ich habe in den letzten Tagen an der Umsetzung einer neuen Webseite gearbeitet. Ziel war es, WordPress als Content Management System einzusetzen. Entgegen der Verwendung als Blogsystem stehen dann natürlich die statischen Seiten im Vordergrund und nicht so sehr die Blogging-Funktionen. Dabei ist natürlich die Bearbeitung der Inhalte etwas eingeschränkt, da es für jede Seite nur ein Eingabefeld gibt. In anderen Content Management Systemen wie etwa TYPO3 lassen sich mehrere Absätze innerhalb einer Seite anlegen. Außerdem werden mehrer Spalten auf einer Seite unterstützt, welche sich bequem im Backend (der Benutzeroberfläche) anlegen und auch von ungeübten Nutzern bearbeiten. Wie es aber trotzdem möglich ist, klassische Firmenwebseiten in WordPress aufzubauen, schreibe ich hier.
Zunächst geht es um die Struktur der Seite, die möglichst dynamisch angelegt sein soll, so dass das Hinzufügen, Verschieben und Ändern von Seiten innerhalb von WordPress geschehen kann. Es verbietet sich also somit, feste Links in die Menüs einzufügen.
Die Seiten anzulegen und die Struktur aufzubauen ist erst einmal kein Problem, hier gibt man beim Anlegen der Seiten die Reihenfolge an. So kann man die Seiten sehr einfach in verschiedenen Hierarchien anlegen.
Die Webseite, die aufgebaut werden sollte, hat eine dreistufige Menüstruktur. In einer Hauptnavigation im Kopfbereich stehen Links zur ersten Ebene, in einem Submenü auf der linken Seite Links zu Seiten der zweiten und dritten Ebene.
Die erste Ebene zu verlinken ist eigentlich kein Problem, hier reicht die Codezeile:
<?php wp_list_pages('title_li=&child_of=0&depth=1'); ?>
, um Links zur ersten Ebene zu erzeugen. Für das Submenü (2. und 3. Ebene) habe ich zuerst auf die Funktion „wp_list_pages“ zurückgegriffen, was auch grundsätzlich funktioniert. Jedoch wurden mit dem Script, welches ich verwendete, ab der dritten Ebene die Links zu den Seiten der zweiten Ebene nicht mehr angezeigt.
Hier bietet das PlugIn „Fold Page List“ Abhilfe. Mit diesem PlugIn können Navigationen realisiert werden, die erst auf Klick die Unterseiten anzeigen.
Trotzdem ist auch hier noch eine etwas komplexere PHP-Abfrage notwendig, um die Navigation korrekt hinzubekommen.
<?php
$g_page_id = $wp_query->get_queried_object_id();
$ancestorIDs = _wswwpx_page_get_ancestor_ids($g_page_id);
$grandParent = $ancestorIDs[1];
wswwpx_fold_page_list("title_li=&sort_column=menu_order&child_of=".$grandParent);?>
fragt zunächst alle Page-IDs ab, ermittelt daraus alle IDs der Unterebenen und gibt dann alle „Kinder“ über das PlugIn aus. Das Schöne daran ist, dass die Links zur dritten Ebene auch erst nach Klick angezeigt werden, also sich erst „aufblättern“, wenn es notwendig ist.
Als weiteres Problem stellte sich heraus, dass ich veränderbare Inhalte zu den Seiten hinzufügen wollte. Wie oben schon beschrieben, hat WordPress keine Funktion, mehrere Spalten in der Eingabemaske zu verwalten. Es gibt aber die „Spezialfelder“, mit denen man eine ähnliche Funktion einbauen kann. Für Text ist das kein Problem, hier kann man auf „<?php the_meta(); ?>“ zurückgreifen, welches alle Inhalte der Spezialfelder als Liste ausgibt. Der Name des Spezialfeldes wird dabei auch mit ausgegeben und mit einer Span-Klasse markiert. So konnte ich zum Beispiel einen Kasten in einer Spalte aufbauen, auch wenn dabei noch ein klein wenig Code in der Eingabe notwendig war.
UPDATE: Für die Einbindung von weiterem Content bietet sich übrigens auch das PlugIn „Secondary HTML Content“ an! Dieses PlugIn einfach installieren und man hat eine komfortable Möglichkeit, Text in einen weiteren Inhaltscontainer einzuladen. Im Template muss dann über die Funktion „get_secondary_content()“ der Inhalt eingebunden werden. Somit entfällt der bei umfangreicheren Texten doch recht mühselige Umgang mit den „Custom fields“.
Ein Nachteil dieser Lösung ist aber, dass die Funktion von WordPress alle Spezialfelder in einer Liste ausgibt. Nun sollte aber jede Seite auch noch mit einer individuellen Kopfgrafik aufgebaut werden, die VOR der Seitenüberschrift im Quelltext auftauchen sollte. Ich konnte diese Bilder also nicht über den Artikel einfügen, denn damit hätte ich das gewünschte Layout nicht hinbekommen und das Bild erschien unterhalb der Seitenüberschrift.
Mit dem PlugIn „Get Custom Field Values“ kann man Werte aus den Spezialfeldern auslesen und innerhalb eines Loops verwenden. So hatte ich die Möglichkeit, je ein Spezialfeld für die individuellen Kopfbilder und die rechten Spalten anzulegen, ohne daß über „the_meta()“ gleich alle Inhalte angezeigt werden.
Innerhalb des Loops gebe ich dann Folgendes über der Seitenüberschrift aus:
<?php echo c2c_get_custom('NameDesFeldes', '<img class="NameDerKlasse" src="PfadZuDenBildern', '.jpg" />', 'blank'); ?>
Damit lese ich das Feld „Name des Feldes“ aus und erzeuge den Quelltext für die Einbindung des Bildes. Im Spezialfeld für das Kopfbild braucht man jetzt nur noch den Bildnamen einzugeben. Ach ja, die Bildverwaltung mache ich dann über das sehr schöne PlugIn „NextGEN Gallery„. In der Albumübersicht kann der Pfad und auch der Bildname sehr einfach ermittelt werden.
Hier ein Link zur Webseite, um die es dabei ging: www.susan-reinhold.de
Sehr schöne und schlichte Umsetzung… Würde noch PicLense & Shutter deaktivieren, das braucht die Seite ja nicht.
Danke. Die beiden Funktionen habe ich in NexGenGallery entfernt. Es ist auch noch darauf hinzuweisen, dass ich die festen Bilder auch mit der Medienverwaltung von WordPress einbinden kann. Das verwendete Script läd einfach aus einem festen Verzeichnis die Bilder.
Das ist ein ganz großartiges kleines und übersichtliches Codeschnipsel für die aufklappbare Navigation. Vielen Dank dafür.
Ich habe eine weitere Frage dazu.
Wäre es auch möglich über WordPress eine „sprechende Navigation“ einzufügen und am besten mit deinem Code zu verbinden?
Also ich möchte bei jedem Navigationspunkt der Unternavigation ein span in den a-tag legen der Zusatztext zum jeweiligen Navigationspunkt enthält.
Bestenfalls diesen Text über die Custom Fields pro Navipunkt eingeben.
Geht das?
Ich bin keine Leuchte in php und WordPress-Einsteiger. Wäre für jede Hilfe dankbar..
Hallo Manuela,
Das erfordert eine ziemlich komplexe Kombination der angesprochenen Techniken. Zunächst musst du innerhalb des Scripts zum Aufruf der Sub-Navigation als Titel das entsprechende Spezialfeld einfügen. Also folgender Ablauf: In die Zeile
der Aufruf des Spezialfeldes
. Es kann dann sein, dass das dann geht, gebe aber keine Garantie. Ein zusätzliches span-Element kann man innerhalb eines Links nicht dafür verwenden (belehre mich, wenn doch?), ich würde deswegen das title-Tag verwenden.
Hallo Thomas,
könntest du mir kurz schreiben, wie ich den aufruf des spezialfeldes in die zeile
schreibe? ich hab hier und da nämlich enorme syntax-probleme..
spans in a-tags sind, soweit ich weiß, standardkonform. divs nicht. deshalb verwendet man spans. also xhtml/css-mäßig passt das schon.. 🙂
also der quelltext soll so ausgegeben werden:
navipunktzusatztext
Hallo Manuela,
versuchs mal so:
<?php
$g_page_id = $wp_query->get_queried_object_id();
$ancestorIDs = _wswwpx_page_get_ancestor_ids($g_page_id);
$grandParent = $ancestorIDs[1];
wswwpx_fold_page_list("title_li="echo c2c_get_custom('NameDesFeldes')"&sort_column=menu_order&child_of=".$grandParent);?>
Wie gesagt, ob das klappt, kann ich nicht sagen. Theoretisch schon. Denk aber daran, dass beide im Artikel angegebenen PlugIns installiert sein müssen!
hallo Thomas,
dein code hat leider nicht funktioniert.
aber ich hab erstmal geschafft spans in die a-tags zu schreiben.
<?php
#span-tag einem a-tag hinzufügen
add_filter('wp_list_pages', 'add_span');
function add_span ($output) {$output=preg_replace(':(.*):','$2Zusatztext',$output);
return $output;}
#Unternavigation auslesen
$g_page_id = $wp_query->get_queried_object_id();
$ancestorIDs = _wswwpx_page_get_ancestor_ids($g_page_id);
$grandParent = $ancestorIDs[1];
wswwpx_fold_page_list("title_li=&sort_column=menu_order&child_of=".$grandParent);
?>
jetzt muss ich nur schaffen, die stelle an der zusatztext steht mit einer variable zu ersetzen, die dann einen wert über die custom fields bekommt..
mal schauen, ob ich das hinkriege..
schönen abend dir..
manuela
Hallo Zusammen …
Bei mir funktioniert das hier leider nicht:
Die dritte ebene wird nicht ausgegeben …
Muss man noch etwas anderes einstellen?
Für Hilfe wäre ich dankbar!
Gruß, mag
Hallo Zusammen!
Leider wird meine erste Naviebene nicht mehr angezeigt, wenn ich den hier gezeigten quelltext für die ausgabe verwende, sondern nur die eigentliche zweite und dritte:
get_queried_object_id();
$ancestorIDs = _wswwpx_page_get_ancestor_ids($g_page_id);
$grandParent = $ancestorIDs[1];
wswwpx_fold_page_list("title_li=&sort_column=menu_order&child_of=".$grandParent);?>
Muss ich noch etwas anderes beachten?
Für Hilfe wäre ich dankbar!
gruß, mag
Hallo Mag,
eigentlich sollte es wie beschrieben funktionieren. Achte darauf, dass das PlugIn „FoldPageList“ installiert ist. Dort, wo die erste Menüstufe eingebaut werden soll reicht der „Standard-Aufruf“
. In meinem Fall steht dieser Aufruf in der Datei „header.php“.
Hier noch einmal der vollständige Aufruf des Submenüs als unnumbered list in der als Submenü verwendeten Datei „Sidebar.php“:
Ich hoffe, Du kommst damit klar…
Liebe Grüße, Thomas
P.S.: schick mir doch eine kurze Nachricht, wenn das geklappt hat.
Hallo zusammen,
bin gerade auf diesen Artikel gestoßen und er hat mir bereits sehr gut geholfen.
Allterdings hätte ich noch eine Frage und vllt kann mir da jemand helfen?
Das SubMenü (also die Ebene 2-X) übernimmt ja nach dem obenstehenden Code das Layout class=“submenu“; das gilt ja allerdings für alle Ebenen (zumindest ist es das was bei mir passiert). Gibt es eine Möglichkeit, wie man den verschiedenen Ebenen unterschiedliche Layouts zuweisen kann?
Über eine Antwort würde ich mich freuen!
Viele Grüße
derFlu
Hallo Flu,
jedes weitere Element erhält eine Klasse (z. B. „li class=page_item“), so dass Du über diese Selektoren ziemlich genau bestimmen kannst, wie die Link-Ebenen aussehen sollen. Schau Dir doch den Code auf der Seite an, dann erkennst Du, wie es gemacht wird. Spezifiziere einfach nach dem Schema „#iD .Klasse a {Angaben}“ dann haut das hin.
Hi,
super.. klappt! Vielen Dank für die schnelle Antwort!!!
Grüße
Hallo Thomas,
bin gerade über Deinen Artikel gestolpert, da ich gerade vor der Frage stand eine Seite mit ählichen Features entweder mit Typo3 oder mit WordPress umzusetzen. Da ich WordPress noch nicht im Detail kenne wollte ich die Seite mit WordPress machen und bin genau auf die von Dir genannten Probleme gestoßen. Ich habe mich dann doch wieder für Typo3 entschieden, da ich der Meinung bin, dass gerade die Arbeit mit verschiedenen Inhalstspalten dort für den Redakteur wesentliche leichter von der Hand geht (vorausgesetzt man customized das Typo3 Backend soweit, dass der Redakteur nur noch das sieht was er braucht – was ja einfach möglich ist). Da Du ja auch Erfahrung mit Typo3 hast interessiert mich Deine Einschätzung wann Du mit Typo3 und wann mit WordPress arbeiten würdest.
Grüße
Christian
Hallo Christian,
ich finde WordPress dann sinnvoll, wenn die Seite insgesamt etwas übersichtlicher bleibt und die Struktur insgesamt nicht so verschachtelt wird. Typo3 ist meiner Meinung nach sowohl für den Redakteur als auch für den Entwickler etwas komplizierter, weswegen ich bei eher unerfahrenen „Redakteuren“ eher WordPress empfehlen würde. Die Installation von typo3 ist auch nicht so einfach und „narrensicher“, insgesamt hat da WordPress noch einige Vorteile. Als Entwickler entfällt bei WordPress die spezielle typo3-Syntax und beschränkt sich auf PHP-Anfragen.
WordPress hat hingegen Einschränkungen bei speziellen Anforderungen und stellt gerade dann recht hohe Anforderungen, wenn es um die Umsetzung von speziellen Ideen geht. Hier ist typo3 oft noch um Einiges voraus. typo3 ist eben ein vollwertiges CMS, WordPress nur ein Blog-System, welches sich zu einem CMS ausbauen lässt.
Lieber Thomas,
ich schreibe dir erst, nachdem ich mich über andere, von google zum Thema geteiltes Menü bzw. split menu ausgespuckte Seiten an einer Lösung für mein Problem versucht habe. In WP bin ich noch ziemlich unfirm, und du hast bei http://www.susan-reinhold.de (klasse Seite!) genau das hingekriegt, was ich brauche.
Auch auf die Gefahr hin, mich komplett bloßzustellen: Wo muss ich die Code Schnipsel einfügen bzw. was damit ersetzen?
Ich habe mir das genannte Plugin „fold page list“ installiert, aber ich komme einfach nicht weiter. Sorry, ich wäre dir für jegliche Unterstützung dankbar, Liza
Hallo Liza,
mein Ansatz damals war schon OK, danke auch für das Lob zur Seite.
Mit der neuen WordPress-Version kann man solch ein Menü auch einfacher gestalten. Hier sollte man sein Template Widget-fähig gestalten; Nun kann man im Backend eigene Menüs zusammenstellen.
Ansonsten funktioniert meine Methode so: Dort, wo das Hauptmenü erscheinen soll, trägt man das Script für die erste Ebene ein (). Also meist in der Datei „header.php“, denn dies Menü ist ja für alle Seiten gleich.
In die Datei „sidebar.php“ kommt dann der Aufruf für die Ebene darunter, also der Teil „get_queried_object_id();
$ancestorIDs = _wswwpx_page_get_ancestor_ids($g_page_id);
$grandParent = $ancestorIDs[1];
wswwpx_fold_page_list(„title_li=&sort_column=menu_order&child_of=“.$grandParent);?>“
Am besten schaust Du dir noch einmal die Standard-Templates von WordPress an. Soweit verstanden?
Gruss, Thomas