Bei einer Unterseite eine weitere Unterseite erstellen

eine verständnisfrage: ob eine unterseite in der horizontalen navigation unter der hauptseite angezeigt wird (wie bei Hugo's Laufblog) hängt vom verwendeten theme ab?
oder kann man diese funktion auch themeunabhängig (als coder-laie) einbauen?

jela

Is eigentlich ganz einfach:

<?php wp_list_pages('depth=3'); ?>

Die 3 steht für die Tiefe, die du anzeigen möchtest. Bis zur 2. Unterseite wird also angezeigt:

Bla
- Blubb
-- BlaBlubb
--- BlaBlubbBla

"BlaBlubbBla" würde also nicht mehr angezeigt werden.

jetzt muss ich mich mit ein meinem anliegen auch noch mal einklinken. allerdings bitte ich um die nachsicht, dass ich keine php-kenntnisse habe.
ich habe folgende code-schnipsel in der header.php meines benutzten themes (Cherry Berry 2) ausfindig gemacht:

<div id="nav">
    <ul>
    <li class="<?php if ( is_home() or is_single() ) { ?>page_item current_page_item<?php } else { ?>page_item<?php } ?>"><a href="<?php echo get_settings('home'); ?>">start</a></li>
    <?php wp_list_pages('sort_column=menu_order&depth=1&title_li='); ?>
    </ul>
</div>

wenn ich jetzt depth=1 auf =2 ändere bekomme ich die nächste ebene der unterseiten in der horizontalen navigation angezeigt - allerdings in einer reihe mit den hauptseiten. kann man das ändern, dass die unterseiten unter der jeweiligen hauptseite stehen. und dann vllt. sogar so, dass die unterseiten in der navigation erst auftauchen, wenn man die hauptseite angeklickt hat (so wie bei Hugo's Laufblog)?

danke marX für deine antwort!

&hierarchical=1 funktioniert in der tat nicht :(
die seiten(links) werden immer noch "inline" dargestellt. scheint also da am theme zu klemmen. gibt es da noch eine einflussmöglichkeit?

The Fold Page List Plugin klappt hingegen, sodass die unterseiten wenigstens erst bei anwahl der entsprechenden hauptseite inline daneben auftauchen.

Zitat von marX

Link zum Anschauen?

marX
du hast eine PN.

ist ein blog über das leben meiner tochter, aber nur für eine geschlossene benutzergruppe. daher bitte ich um verständnis, dass ich nichts öffentlich mache.

jela

hallo marX,

vielen dank für deine mühe!

Zitat von marX

Der Code sieht also vollständig wie folgt aus:

PHP

<div id="nav">
    <ul>
    <li class="<?php if ( is_home() or is_single() ) { ?>page_item current_page_item<?php } else { ?>page_item<?php } ?>"><a href="<?php echo get_settings('home'); ?>">start</a></li>
    <?php wp_list_pages('sort_column=menu_order&depth=1&title_li='); ?>
    </ul>
</div>
<?php
if($post->post_parent) {
  $children = wp_list_pages("title_li=&child_of=".$post->post_parent."&echo=0");
} else {
  $children = wp_list_pages("title_li=&child_of=".$post->ID."&echo=0");
}
if ($children) { ?>
  <ul> 
    <?php echo $children; ?> 
  </ul> 
<?php } ?>

Alles anzeigen

habe ich so eingefügt. zur orientierung hier nochmal der original code an dieser stelle:

<div id="nav">
    <ul>
    <li class="<?php if ( is_home() or is_single() ) { ?>page_item current_page_item<?php } else { ?>page_item<?php } ?>"><a href="<?php echo get_settings('home'); ?>">start</a></li>
    <?php wp_list_pages('sort_column=menu_order&depth=1&title_li='); ?>
    </ul>
</div>

Zitat

So das war der HTML/PHP-Teil, der die Subpages anzeigt. Jetzt muss noch ein wenig am CSS gedreht werden. Zuerst style.css, Zeile 41. Dort steht etwa:

Code

#nav {
background:transparent url(images/trans20.png) repeat scroll 0%;
font-size:1.3em;
[COLOR=Red][B]height:40px;[/B][/COLOR]
margin:-40px auto 0pt;
text-transform:uppercase;
width:950px;
}

In der markierten Zeile änderst du den Wert auf [COLOR=Green]80px[/COLOR].
Ein paar Zeilen weiter unten (Zeile 45) findest du folgenden Code:

Code

#nav ul {
margin:0pt;
padding:0pt 15px;.
[COLOR=#008000][B]clear:left;[/B][/COLOR]
}

Die grün markierte Zeile fügst du ein.

hab ich auch gemacht. der ganze bereich sieht dann in meinem fall so aus:

#nav {width: 950px; height: 80px; margin: -[COLOR=Blue]80[/COLOR]px auto 0 auto; font-size: 1.3em; text-transform: uppercase;  
background: url(images/trans20.png);}
*html #nav {width: 950px; font-size: 1.3em; text-transform: uppercase; height: 40px;
background: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/trans20.png', sizingMethod='scale');}
#nav ul {padding: 0 15px; margin: 0; clear: left;}
#nav li {padding: 0 0; margin: 0; list-style-type: none; display: inline;}
#nav li a {display: block; float: left; height: 40px; line-height: 40px; padding: 0 10px; text-decoration: none;}
#nav li a:hover {text-decoration: underline; background: url(images/trans50.png);}
#nav li.current_page_item a, #nav li.current_page_parent a {font-weight: bold; text-decoration: none; background: #fff url(images/navbg.jpg) repeat-x; color: #333;}

ich habe dann allerdings noch margin: -[COLOR=Blue]40[/COLOR]px auf margin: -[COLOR=Blue]80[/COLOR]px geändert. das sah dann zwar besser aus, aber ehrlich gesagt bin ich mit dem ergebnis nicht zufrieden. zum einen hängen die links der unterseiten bei anwahl der hauptseite ganz links am rand untereinander (was sicher von dir nicht so gewollt war ;) ) und zum anderen ist der navi-bereich permanent 80 pixel hoch, was vom layout schon komisch aussieht. du kannst es dir ja nochmal ansehen, ich lasse es heute nochmal so stehen.

die notwendigen eingriffe scheinen mir jetzt doch weitreichender zu sein, als ich das vermutet habe und das layout leidet zu arg, wenn der navi-bereich permanent 80 pixel hoch ist. ich habe keine skrupel den versuch an dieser stelle abzubrechen, da ich befürchte, dass du das halbe theme dafür umbauen müsstest. das halte ich für absolut nicht zumutbar.
für dein engagement bekommste aber auf jeden fall +++ von mir :)

jela

Zitat von marX

...
Ich seh grad, dass ich mich beim Code etwas vertan hatte. Hier mal die Änderung:
...
Das schließende </div> muss natürlich nach der kompletten Navigation stehen.

sauber, jetzt sieht es erst mal so aus, wie du es sicher gedacht hattest.

Zitat

Wegen der Höhe:
Du kannst zusätzlich noch in der style.css, Zeile 47, die Werte für height und line-height anpassen (jeweils gleiche Werte) um die Höhe der Navigation zu begrenzen, zum Beispiel auf je 30px. Dann kannst du die Höhe und margin-top auf 60px bzw. -60px (2 x 30px - du siehst den Zusammenhang?) setzen. Mit den Werten kannst du spielen bis du die gewünschten erhalten hast.

prima, das mache ich jetzt bzw. hab ich schon probiert und verstanden

Zitat

Wenn du es noch zwischen Haupt- und Unternavigation trennen willst, dann kannst du den beiden <ul> im <div id="nav"> noch 2 Klassen oder IDs geben, um sie per CSS unterschiedlich zu stylen.

das wäre schon fast optmal, dann könnte ich die unternavigation etwas kleiner machen. könntest du mir dafür noch die notwendige änderung/ergänzung mitteilen? ich merke zwar, dass ich mich in einiges schon reindenken kann, aber letztlich bin ich doch nachwievor laie.

Zitat

Kommen wir jetzt in die richtige Richtung? Wenn nicht, dann lass bitte den geänderten Code stehen. Dann hab ichs (bzw. mein Firebug) leichter, den Code weiter anzupassen. ;-)

ja, es geht schon weit dahin, was ich gut finde :)
optimal wäre es natürlich, wenn sich der navi-bereich erst/nur dann nach unten klappend erweitern würde, wenn es unterseiten gibt. halt so ähnlich wie bei dem iTheme von Hugo's Laufblog
vllt geht es aber auch, wenn man die hauptseiten-navi vertikal vermittelt, sodass es ohne unternavigation noch gut aussieht und wenn diese dazukommt fügt sie sich kleiner unten an. also dann ohne ausklappende erweiterung.
*grml* etwas schwer das zu beschreiben...

jela