Fold Page List deutsch – aufklappbare Seitennavigation

letztes Update:22.09.11 von

Fold Page List von Rob Schumann bietet eine einfache Möglichkeit viele statische Seiten mit Unterseiten anzuzeigen. Darüberhinaus bieter dieses Plugin viele zusätzliche CSS classes, um alle Zustände einer solchen dynamischen Navigation zu gestalten. Hier die deutsche Anleitung.

Page Fold List erzeugt eine dynamische Seitennavigation und alle Möglichkeiten der wp-list-pages Spielereien bleiben dabei erhalten. Es bietet viele zusätzliche CSS classes und es bietet die Möglichkeit auch die Unterseiten einer Unterseite mit einem Klick auf die Hauptseite anzuzeigen oder eben nicht.

Die englische Erklärung und den Download des Plugins findest Du auf Rob Schumanns Seite. Dieses Plugin ist mit Garett Page Link Manager absolut kompatibel.

  • Einfach herunterladen.
  • Entpacken.
  • In den Ordner wp-content/plugins/ hochladen.
  • Aktivieren.
  • Die sidebar.php Deines Themes öffnen nach wp-list-pages suchen und dies mit
    nanchfolgendem Code ersetzen, je nachdem was Du magst.

1. Möglichkeit:

ohne Link Manager Plugin

<?php wswwpx_fold_page_list('title_li=<h2>Seiten</h2>','true'); ?>

mit Link Manager Plugin

<?php gdm_wswwpx_fold_page_list('title_li=<h2>Seiten</h2>','true'); ?>
eine Seite mit einer Unterseite, die wiederum eine Unterseite hat angeklickt
alle Unterseiten einer Seite sind sofort sichtbar. 

Ganz egal welche Funktionen der wp-list-pages Du nimmst, wenn Du danach ein Koma setzt und unter den Hochkommata true schreibst, dann faltet Fold Page List alle Unterseiten einer Seite auf.

2. Möglichkeit:

ohne Link Manager Plugin

<?php wswwpx_fold_page_list('title_li=<h2>Seiten</h2>'); ?>

mit Link Manager Plugin

<?php gdm_wswwpx_fold_page_list('title_li=<h2>Seiten</h2>'); ?>
eine Seite mit einer Unterseite angeklickt
Die Seite zeigt nur die erste Unterseite an. 

Möchtest Du nicht, dass etwaige Unterseiten einer Unterseite gleich sichtbar sind, dann lasse einfach das ‘true’ weg.

Nachfolgend die unterschiedlichen CSS classes des Plugins.

Page Fold List aktiviert – Quelltext der Startseite

Quelltext bei Aktivierung des Plugins Fold Page Menu
Fold Page List aktiviert aber noch keine Seite angeklickt 
<ul>
    <li id="pagenav"><h2>Seiten</h2>
        <ul><li class="page_item"><a href="..>eine Seite ohne Unterseite</a>
                </li>
             <li class="page_item page_folder"><a href="..>eine Seite mit Unterseite</a>
                 </li>
             <li class="page_item"><a href="..>eine Seite ohne Unterseite</a>
                  </li>
                   usw...
       </ul>
    </li>
</ul>

Die id pagenav und die class page_item macht WordPress von sich aus immer.

Es ist anhand der zusätzlichen css class page_folder ersichtlich, dass das Plugin von sich aus erkennt , ob eine Seite eine Unterseite hat oder nicht. Somit sind diese Seiten mit Unterseiten auch anders gestaltbar.

Page Fold List beim Klick auf eine Seite mit Unterseite

eine Seite mit einer Unterseite angeklickt
eine Seite angeklickt , die eine Unterseite hat, die keine weitere Unterseite mehr hat. 
<ul><li id="pagenav"><h2>Seiten</h2>
         <ul><li class="page_item"><a href="...>Seite ohne Unterseite</a>
                      </li>
                 <li class="page_item page_folder"><a href="....>Seite mit Unterseite</a>
                       </li>
                 <li class="page_item"><a href="...>Seite ohne Unterseite</a>
                       </li>
                <li class="page_item current_page_item page_folder"><a href="..">aktivierte Seite mit Unterseite</a>
 
                    <ul>
	                 <li class="page_item"><a href="..>Unterseite ohne weitere Unterseite</a>
	                   </li>
                   </ul>
             </li>
        </ul>
    </li>
</ul>

Die CSS class current_page_item macht WordPress immer. Damit sind die aktivierten Seiten gestaltbar.

Page Fold List beim Klick auf eine Seite mit Unterseite, die wiederum eine Unterseite hat.

eine Seite mit einer Unterseite, die wiederum eine Unterseite hat angeklickt
eine Seite angeklickt , die eine Unterseite hat, die eine weitere Unterseite hat. 
<ul><li id="pagenav"><h2>Seiten</h2>
         <ul><li class="page_item"><a href="..>Seite ohne weiter Unterseite</a>
                  </li>
               <li class="page_item current_page_ancestor page_folder"><a href="... >Seite mit Unterseite, die wiederum eine Unterseite hat</a>
                   <ul>
	             <li class="page_item current_page_item page_folder"><a href="...>Unterseite , die eine Unterseite hat</a>
 
	                <ul>
		            <li class="page_item"><a href="..>Unterseite der Unterseite</a>
		              </li>
	                </ul>
	           </li>
               </ul>
           </li>
           <li class="page_item"><a href=..>Seite ohne Unterseite</a>
               </li>
     </ul>
  </li>
</ul>

Fold Page List fügt zur “Mutterseite” der beiden Unterseiten die CSS class current_page_ancestor dazu, somit ist auch dieser “Zustand” gestaltbar.

Fazit mit diesem Plugin Fold Page List ist nicht nur die Sidebar aufgeräumt und er überblick bewahrt, sondern es stehen für die verschiedenen Zustände der jeweils aktivierten Seiten eigene css classes zur Verfügung und ermöglichen somit eine höchst einfallsreiche und individuelle Gestaltung. Da hat ein CSS Freak programmiert. Ich finde dies einfach sehr, sehr gut. :-)

viel Spaß mit der Seiten- Navigation

49 Kommentare zu "Fold Page List deutsch – aufklappbare Seitennavigation"

  1. stefan

    12.11.06 um 11:42

    Hmmm,irgendwie bekomme ich das bei meinem Template nicht hin, dass die (Unter)-Seiten eingerückt sind.

    Wo muss ich denn da ansetzen ?

  2. texto

    12.11.06 um 15:28 
    ul li#pagenav ul li ul li

    nehme ich an wird für Dich interessant sein stefan
    aber ohne es zu sehen, ist vieles Spekulation

    lg

  5. texto

    05.03.07 um 10:47

    Hi Heiner

    laut Aussage des Autors müßte dem so sein, doch schreibe dem was Du gemacht hast und was wie nicht funktionierte, denn nur*es funktionierte nicht* ist als Fehlerbeschreibung nicht hilfreich für die helfen Wollenden.

    lg

  6. maru-design

    22.03.07 um 13:59

    Hallo! Super Script…Großes Log!!! Vielen Dank für die deutsche Erklärung! :) Ich habe da jedoch noch eine Frage, gibt es Möglichkeiten auch die Navigation (durch Klick auf die Oberseite) wieder zuschließen?

    Würde mich um eine Antwort sehr freuen!
    Liebe Grüße

  7. texto

    22.03.07 um 14:35

    Hi maru-design— interessanter Name ;)

    nein, denn dies ist kein onclick Menü, denn dies mag ja Google und die anderen Suchmaschinen nicht so wirklich, sondern ein dynamisches Menü

    lg

  8. Alexander

    16.04.07 um 04:48

    Hallöle, ich hab das ganze grade mal eingebaut! Schönes Ding!

    Nur ein kleines Problem, es ignoriert die Anweisung von den true/false Angaben?

  9. Klaus

    21.06.07 um 16:23

    Hallo texto,

    vielen Dank für deine deutsche Beschreibung! Nach diesem Tool habe ich wirklich lange gesucht.
    Könntest Du mir bitte weiter helfen?
    Ich baue gerade eine Seite nach dieser Anleitung auf.
    Gibt es die Möglichkeit dem gewählten Reiter eine andere Farbe zu geben und die Unterpunkte einzurücken?

    Ich danke Dir vielmals für deine Antwort.

    Gruß

    Klaus

  10. texto

    21.06.07 um 16:46

    Hi Klaus das steht oben..

    Die CSS class  current_page_item macht WordPress immer. Damit sind die aktivierten Seiten gestaltbar.

    mit dieser css class spricht man die gerade aktivierte Seite an und kann sie so gestalten.

    lg

  11. Klaus

    22.06.07 um 10:38

    Hallo,

    gelesen habe ich deinen Text……aber…;-)
    Wo und wie muss ich das genau ändern?
    Gibt es dafür vielleicht auch ein einfacheres Plugin?

    Gruß Klaus

  12. texto

    22.06.07 um 11:04

    Hi

    das liegt am CSS,

    versuche mal

    am Ende in der style.css

    .current_page_item{background-color:#ff0000;color:#fff;}

    da wird der Hintergrund rot und die Schrift weiß

    ;)
    geht nur darum, um es funktioniert
    dann ebenfalls ganz unten:

    #sidebar ul ul ul{padding-left:4px;}

    nur nehme ich an, ist dafür die sidebar zu schmal

    lg

  13. gunn0r

    28.07.07 um 00:09

    Moin!
    Danke für die super Anleitung! Ist zwar schon älter, funktioniert aber immer noch! ;)
    Leider scheitere ich im Moment mit dem Versuch bei einem page_folder-Element ein Pluszeichen einzublenden und, wenn dieses Element gewählt wurde (li class=”page_item current_page_item page_folder”), das Plus- in ein Minuszeichen zu ändern. Langsam komme ich zu der Vermutung, dass dies nur im Plugin durch eine zusätzliche CSS-Klasse bewerkstelligt werden kann, oder täusche ich mich da?
    Ich muss dazu sagen, dass nicht alle Elemente “Kinder” haben.
    Vielleicht weiss ja jemand Rat?

  14. Dr.StyleSheet

    30.07.07 um 22:33

    Hallo,
    wirklich ein nützliches plug-in, jedoch habe ich ein kleines Problem – es funktioniert wunderbar, aber der page link manager v0.3 funktioniert danach nicht mehr. ich habe schon einiges ausprobiert, doch es will nicht klappen. Sobald ich wp_list_pages rausnehme funktioniert es nicht mehr, dafür aber page_fold_list.

    Habe ich evtl. was übersehen?


    Pages

    Vielen Dank für Antworten.

    MFG

    Dr. Stylesheet

  16. texto

    01.08.07 um 07:34

    Oh Herr Dr.StyleSheet
    sorry das wusste ich nicht, vielleicht ist in der neuen Version das Plugin nicht mehr drin ?

    lg

  17. Axel

    16.08.07 um 17:09

    Hallo,

    Ich versuche mich gerade an Fold Page List. In dem obigen Artikel wird das Plug-in fuer die Seitennavigation benutzt. Ich hab mir sagen lassen, dass es aber auch mit einer horizontalen Header-Navigation funktioniert. Ich has das plug-in geladen und folgenden code…

    …in meine header.php getan (als Ersatz fuer php wp_list_pages). Jetzt zerhauts mir die ganze Seite. Ich bin ein ziemlicher Neuling mit php und waere sehr dankbar fuer einen Tip.

    Axel

  18. texto

    16.08.07 um 18:59

    das ist ein Problem der style.css und sicher nicht des php Axel,

    also das Themes, Designs, -ohne URL kann ich nicht helfen.
    lg

  19. plagiat

    06.09.07 um 20:34

    und schon wieder bei texto fündig geworden! vielen Dank für die leichtverständlichen Erklärungen!

  20. Steffi

    10.10.07 um 11:04

    Hallo,
    ich möchte gerne das nur der aktive link farblich unterlegt wird und habe am ende der css folgenden code eingebaut:

    .current_page_item, .current_page_item a:link, .current_page_item a:visited, .current_page_item a:hover, .current_page_item a:active {
    background: #93c1ff;
    color: #93c1ff;
    }

    das klappt auch innerhalb eines unter- menü nur nur wenn ich auf der ober- menü klicke werden alle innerhalb des unter- menüs farblich hinterlegt.

    Gruß aus Essen

  21. chris

    02.12.07 um 00:40

    Hallo texto, danke für diese Seiten. Ich muss nun leider die Erfahrung machen (WP2.3.1), dass FoldPageList 1.74 im Zusammenspiel mit PageLinkManager 0.3 bei Nutzung von Widgets nicht funktioniert. Bei Nutzung der Widgets ist sidebar.php nicht mehr relevant(?) – wo setze ich nun gdm_wswwpx_fold_page_list ein? Chris

  22. texto

    02.12.07 um 00:51

    hi Chris entweder Widgets nutzen oder eine individuelle Sidebar.
    beides geht ohne php zu können nicht.

    lg

  23. Senad

    13.01.08 um 02:20

    Toll, daß mal jemand die Anleitung ins Englische geändert hat! Mir hats geholfen, danke!

    Jedoch habe ich nun ein anderes Problem und weiß nicht ob dies auf das Plugin oder auf mein Themen zurückzuführen ist!

    Ich bekomm keine Seitenanordnung hin! Weder die ID-Nummer wird als Reihenfolge akzeptiert, noch anderes, es scheint, daß WordPress bei mir immer eine Anordnung nach Alphabet macht.

    Was wäre denn die Lösung hierfür??

    Danke schon mal

  24. texto

    13.01.08 um 16:53

    Hi Senad das Plugin müßte all diese Parameter unterstützen, wenn nicht, bitte an den Pluginautor wenden.

    lg

  27. texto

    16.01.08 um 16:22

    Jo Ingo;)

    ich übersetze, promote, spiel manchmal erklärbär bei Plugins, aber wenn sie dann nicht tun was sie sollten muss der Coder ran ;)

    lg

  28. robotobi

    17.01.08 um 17:41

    salut.
    ich hatte auch das problem mit der umsortierung meiner navi-reihenfolge. nach einigem stöbern fand ich dann die lösung:
    ich habe das plugin mit einem anderen string eingebunden:

    so ist die im adminbereich eingestellte reihenfolge wieder da.

  29. robotobi

    17.01.08 um 17:42

    hrm… irgendwie ist der code weg…

    nochmal ohne php lade befehl..:

    if ( function_exists('wswwpx_fold_page_list') ) {
    wswwpx_fold_page_list('title_li=&amp;sort_column=menu_order');
} else {
    wp_list_pages('title_li=&amp;sort_column=menu_order');
}

  30. texto

    17.01.08 um 17:56

    Hi robotobie
    ja diese Anzeige zeigt auch meine wp-list-pages Spielerei Seite, aber wenn es dann heißt dies funktioniert nicht, dachte ich :da muss der Autor ran..;)

    Danke Dir und ja Code ist hier in den Kommentaren verboten -ich bin da eine Sicherheitsfanatikerin -irgendwie…

    lg

  31. Stefan

    26.08.08 um 23:05

    Hi Texto!

    Ist ja eine wahre Fundgrube hier! Großes Lob! Weiß nicht, ob ich bei WordPress geblieben wär, wenn’s die Seite nicht gäbe. :-)

    Nun hab ich aber meine erste Frage, auf die ich keine Lösung gefunden habe: Ist es möglich mit Fold Paage List die ersten BEIDEN Menüebenen immer anzuzeigen, und nur die weiteren je nach Bedarf aufzuklappen?

    also standartmäßig

    HAUPTP1
    Verweis1.1
    Verweis1.2
    Verweis1.3
    —
    HAUPT2
    Verweis2.1
    Verweis2.2
    Verweis2.3
    —
    HAUPT3
    Verweis3.1
    Verweis3.2
    Verweis3.3

    Das soll immer stehen, und die nächttiefer Ebene erst bei Bedarf dann aufgeklappt werden (was ja schon toll funktioniert).
    —
    Wenn ich sowohl “HAUPT” und alle “Verweis” als Ebene1 angebe, sind alle sofort sichtbar, klar. Dann hab ich aber das Problem, dass ich die HAUPT-Punkte nicht gezielt anders formatieren kann und zwischen allen Einträgen die selben Abstände habe.

  34. blautaucher83

    18.03.09 um 20:49

    Gibt es die gleiche Funktion auch für Kategorien und Archive?

    Würde auch diese Navigation etwas übersichtlicher gestalten

  37. texto

    21.03.09 um 15:25

    hallo blauer Taucher

    oben in deinem Browser: Ansicht==>Quelltext und dann siehst du die css und html Angaben

    lg

  38. Mastermind

    04.08.09 um 17:27

    Hallo

    Super Seite die mir schon sehr weitergeholfen hat. Danke dafür!

    nach langem Suchen habe ich nun endlich eine Möglichkeit gefunden, die Navigation meiner Seiten über Font Page List so anzupassen, dass die Seiten 2. und 3. Ebene angezeigt werden.

    Nun habe ich noch ein kleines Problem und bekomme es nicht gelöst.

    Es gibt jeweils für die Anzeige der 2. und 3. Ebene zwei getrennte Codeschnipsel.
    Wenn ich nun aber eine Seite der 2. Ebene die Seiten der 3. Ebene enthält anklicke, erscheinen 2. und 3. Ebene gemeinsam. Ist klar da ich beide Codes stehen habe.
    Ich möchte nun beide Codeschnipsel so zusammenfügen das nur die 2. Ebene angezeigt wird, wenn ich Seiten der 2. Ebene habe und nur die 3. Ebene angezeigt wird, wenn ich Seiten der 3. Ebene habe.

    Hier die Codeschnipsel

    Anzeige der 2. Ebene:

    get_queried_object_id();
    $ancestorIDs = _wswwpx_page_get_ancestor_ids($g_page_id);
    $grandParent = $ancestorIDs[1]; ?>

    Anzeige der 3. Ebene

    Ich hoffe es findet sich jemand der mir helfen kann. Ich finde seit Wochen keine Lösung und bin verzweifelt .

    Danke für Euren Support

    Stefan

  39. Mastermind

    04.08.09 um 17:28

    Sorry, der Code für die 3. Ebene fehlt

    Ich hoffe es findet sich jemand der mir helfen kann. Ich finde seit Wochen keine Lösung und bin verzweifelt .

  40. texto

    04.08.09 um 19:18

    hmm mal beim Pluginautor probiert?

    ich muss da passen – eventuell im Jobforum forum.wordpress-deutschland.org

  41. Roland

    05.09.09 um 22:59

    Hi!

    Ich hab gerade im falschen Beitrag meine Frage gestellt… Eigentlich meinte ich fold_page_list und die Frage war, wie ich die untermenüs im css anspreche um diese zu verändern…

    Sorry und Danke :)

  42. texto

    06.09.09 um 12:08

    Hi Roland meine Glaskugeln tun sonntags so gar nichts,
    schick mir nen Link an die Email Adresse hier
    mts@ name der domain hier ;)
    und dann kann ichs dir gut sagen

    lg

  43. daniel p.

    19.10.09 um 19:27

    hi monika,
    wenn du zurück bist, würds mich riesig freuen, wenn du drei sekunden über folgendes “problem” nachdenkst…

    mit dem oben von dir genannten code ( .current_page_item{background-color:#ff0000;color:#fff;} ) wird bei mir beim klick auf den eltermenüpunkt eben der elternmenüpunkt UND ZUSÄTZLICH die jeweiligen untermenüpunkte rot hinterlegt. dabei will ich nur den elternmenüpunkt in dem moment hinterlegt haben. beim anschließenden klick auf einen untermenüpunkt wird nur dieser hinterlegt = richtig/gewollt.

    vorsorglich noch meine sidebar:

    Startseite

    was mach ich falsch?!?

    danke dir ;-)

  45. daniel p.

    29.10.09 um 20:30

    hi monika,
    ich nochmal… du bist zurück, ich gehe dafür am sonntag 10 tage weg. wäre gigantisch, wenn du drei sekunden einen blick auf o.g. prob werfen könntest

  46. texto

    29.10.09 um 20:23

    huch ich komm von der Startseite ja nicht weg …. ich weiß nicht wo ich mir was ansehen sollte

    wenn Du Firefox nutzt hol Dir firebug, da kannst Du das css gleich editieren, also zumindest soweit, dass Du die Änderungen siehst,
    je genauer Du den Selektor auswählst in dem Fall das *a* desto genauer wirds eingefärbt

    .current_page_item .page_item a zb oder eben noch genauer ..aber wie erwähnt ich seh nichts

  47. Jenny

    06.04.10 um 13:04

    Gibt es mittlerweile eine Lösung zu oben genannten Problem?

    Ist bei mir nämlich leider genauso:
    Neben dem Oberpunkt sind auch alle Unterpunkte dieses Oberpunkts aktiv.

  48. Sascha

    28.07.10 um 19:27

    Hi,

    vielen Dank für die tolle Anleitung! Hat mir bei einer Seite von mir sehr weitergeholfen!
    Dank der vielen Kommentare hier hat der Einbau sogar ohne größere Probleme geklappt!
    Gruß
    Sascha

  49. Pit Mayen

    26.11.10 um 10:06

    Hi,

    ich habe das Problem das ich die Hauptpunkte nicht verlinkt bekomme? Sowohl bei der fold category list als auch bei der fold page list.

    Dh. bei klick auf den Hauptpunkt öffnet sich das Menue. Artikel die mit dem Hauptmenuepunkt verknüpft sind werden aber nicht angezeigt.

    lg

    Pit

1 Ping zu "Fold Page List deutsch – aufklappbare Seitennavigation"
  1. WordPress als CMS mit aufklappbaren Menüs
    [...] Fold Page List Plugin habe ich bei Texto.de erfahren. Mit Hilfe dieses Plugins werden Unterseiten nur dann angezeigt, wenn ...