Fold Page List deutsch – aufklappbare Seitennavigation

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

49 Beiträge zu “Fold Page List deutsch – aufklappbare Seitennavigation

  1. Kommentar Autor
    stefan
    Kommentar

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

    Wo muss ich denn da ansetzen ?

  2. Kommentar Autor
    Monika
    Kommentar
    
    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

  3. Kommentar Autor
    Marko
    Kommentar

    Sehr gut DANKE, danach habe ich gesucht!!!!

  4. Kommentar Autor
    Monika
    Kommentar

    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

  5. Kommentar Autor
    maru-design
    Kommentar

    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

  6. Kommentar Autor
    Monika
    Kommentar

    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

  7. Kommentar Autor
    Alexander
    Kommentar

    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?

  8. Kommentar Autor
    Klaus
    Kommentar

    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

  9. Kommentar Autor
    Monika
    Kommentar

    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

  10. Kommentar Autor
    Klaus
    Kommentar

    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

  11. Kommentar Autor
    Monika
    Kommentar

    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

  12. Kommentar Autor
    gunn0r
    Kommentar

    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?

  13. Kommentar Autor
    Dr.StyleSheet
    Kommentar

    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

  14. Kommentar Autor
    Dr.StyleSheet
    Kommentar

    Hallo nochmal,
    Also mit v0.25 des page link managers funktioniert es, aber nicht mit version 0.3

    MFG

    Dr.StyleSheet

  15. Kommentar Autor
    Monika
    Kommentar

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

    lg

  16. Kommentar Autor
    Axel
    Kommentar

    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

  17. Kommentar Autor
    Monika
    Kommentar

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

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

  18. Kommentar Autor
    plagiat
    Kommentar

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

  19. Kommentar Autor
    Steffi
    Kommentar

    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

  20. Kommentar Autor
    chris
    Kommentar

    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

  21. Kommentar Autor
    Monika
    Kommentar

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

    lg

  22. Kommentar Autor
    Senad
    Kommentar

    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

  23. Kommentar Autor
    Monika
    Kommentar

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

    lg

  24. Kommentar Autor
    Senad Imsirovic
    Kommentar

    Danke, werde weiterforschen!

    Liebe Grüße

  25. Kommentar Autor
    Monika
    Kommentar

    Ingo

    1. wordpress verwenden
    2. gab ich die Antwort hier schon einmal

    :zwinker:

    lg

  26. Kommentar Autor
    Monika
    Kommentar

    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

  27. Kommentar Autor
    robotobi
    Kommentar

    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.

  28. Kommentar Autor
    robotobi
    Kommentar

    hrm… irgendwie ist der code weg…

    nochmal ohne php lade befehl..:

    if ( function_exists('wswwpx_fold_page_list') ) {
        wswwpx_fold_page_list('title_li=&sort_column=menu_order');
    } else {
        wp_list_pages('title_li=&sort_column=menu_order');
    }
    
  29. Kommentar Autor
    Monika
    Kommentar

    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

  30. Kommentar Autor
    Stefan
    Kommentar

    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.

  31. Kommentar Autor
    Birgit
    Kommentar

    Plugin installiert… bei mir werden leider gar keine Unterseiten angezeigt… :(

  32. Kommentar Autor
    Monika
    Kommentar

    Birgit -frag einfach den Pluginautor, das ist besser als über 3 Ecken

    lg

  33. Kommentar Autor
    blautaucher83
    Kommentar

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

    Würde auch diese Navigation etwas übersichtlicher gestalten

  34. Kommentar Autor
    Karl
    Kommentar

    @blautaucher83,

    Der gleichen Autor hat eine Ähnliche Plugin für Kategorien gemacht:

  35. Kommentar Autor
    blautaucher83
    Kommentar

    Vielen Dank für den Tipp.
    Jetzt muss ich nur noch herausfinden wie ich die Navigation mit css formatiere.

    Auf meiner HP http://www.blautaucher83.de ist die Navigation wie ich sie gerne auch im Blog hätte

    Welche css Befehle brauche ich für die Seiten und für die Unterseiten?

  36. Kommentar Autor
    Monika
    Kommentar

    hallo blauer Taucher

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

    lg

  37. Kommentar Autor
    Mastermind
    Kommentar

    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

  38. Kommentar Autor
    Roland
    Kommentar

    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 :)

  39. Kommentar Autor
    Monika
    Kommentar

    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

  40. Kommentar Autor
    daniel p.
    Kommentar

    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 ;-)

  41. Kommentar Autor
    daniel p.
    Kommentar

    oh. der code ist weg. siehst du ihn wenigstens?

  42. Kommentar Autor
    daniel p.
    Kommentar

    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

  43. Kommentar Autor
    Monika
    Kommentar

    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

  44. Kommentar Autor
    Jenny
    Kommentar

    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.

  45. Kommentar Autor
    Sascha
    Kommentar

    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

  46. Ping WordPress als CMS mit aufklappbaren Menüs

  47. Kommentar Autor
    Pit Mayen
    Kommentar

    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

  48. Ping Wordpress: Vertikales Menü soll aufklappbar sein : senn-seo.de