Verschachtelte Listen und die Sidebar in WP

Die Sidebar von WordPress ist der Quell der Fragen. Jeder mag logischerweise diese ganz eigen gestalten und die Template Tags bieten dafür wirklich unendliche Möglichkeiten. Wer jedoch auch noch auf vaildes (X)HTML Wert legt oder wer vielleicht die Anzeige der „Letzten Kommentare“, der „Letzten Beiträge“, der Linkliste etc. in der Sidebar von WordPress anders gestalten mag, verzweifelt sehr oft an der verschachtelten Liste des Default Themes von Kubrick, die in fast allen Themes übernommen wird.

Vor allem, weil manche Teile in einer verschachtelten ungeordneten Liste sind manche nicht.

Ich beschreibe hier nur, wie man sich diese verschachtelte ungeordnete Liste der Sidebar so aufbereiten kann, dass man 1. den überblick behält und 2. wirklich viele Gestaltungsmöglichkeiten hat. Wie man diese Listen dann gestalten kann ist eine andere Sache.

So sieht eine korrekt verschachtelte ungeordnete Liste aus:

<ul> 
  <li>
   <ul>
    <li>
    </li>
   </ul>
  </li>
</ul>

Nach einem ul MUSS ein li kommen und in dieses li darf man wieder HTML Tags einbauen, oder man kann auch gleich lostippen. Jedem ul und li kann man eine id oder eine class zuweisen, dies macht die Gestaltungsmöglichkeiten fast unendlich.

h2 wird meist für die Titeln, überschriften verwendet:

<ul> 
   <li><h2>Blogroll</h2>
    <ul>
       <li>
        </li>
     </ul>
     </li>
</ul>

In der Sidebar des Default Themes Kubrick wird ganz oben, gleich nach dem ersten div der erste ul Tag (das erste Element) geöffnet und unten geschlossen. Und genau dies führt zum Chaos, denn manchmal mag man etwas nur anzeigen lassen, wenn auf eine Kategorie geklickt wurde und schon stimmt das Design nicht mehr und der Code wird invalid, weil etwas fehlt.

Hier der Original Ausschnitt aus dem Theme Kubrick.

<div id="sidebar">
<ul>
			
<li>
<?php include (TEMPLATEPATH . '/searchform.php'); ?>
</li>

<!-- Author information is disabled per default. 
Uncomment and fill in your details if you want to use it.
<li><h2>Author</h2>
<p>A little something about you, the author. 
Nothing lengthy, just an overview.</p>
</li>
-->

Es ist erkennbar, dass die Suchfunktion nur in einer einfachen ungeordneten Liste steht, die am Ende der Suchfunktion NICHT geschlossen wurde.
Wenn man jetzt diese Liste gleich schließt und immer nur dann öffnet, wenn man sie wieder braucht erleichtert dies die Arbeit und den überblick.

1..Abschnitt einfache ungeordnete Liste:

<div id="sidebar">
<ul>

<li>
?php include (TEMPLATEPATH . '/searchform.php'); ?>
</li>
</ul>
<!-- Author information is disabled per default. 
Uncomment and fill in your details if you want to use it.
<ul><li><h2>Author</h2>
<p>A little something about you, the author. 
Nothing lengthy, just an overview.</p>
</li></ul>
-->

Wenn Du beide Codeteile vergleichst, erkennst Du wo ich überall die Liste geschlossen habe und wo ich sie wieder öffnete.

So gehe ich jetzt Abschnitt für Abschnitt diese Sidebar durch, der Code spricht für sich, das Vergleichen kann ich Dir nicht abnehmen, da Deine Sidebar sicher anders aussieht. Doch das System ist erkennbar. Viel Spaß.

2.. Abschnitt einfache ungeordnete Liste:

<ul>

<li>
<?php /* If this is a 404 page */ if (is_404()) { ?>
<?php /* If this is a category archive */ } elseif (is_category()) { ?>
<p>You are currently browsing the archives for the 
<?php single_cat_title(''); ?> category.</p>

<?php /* If this is a yearly archive */ } elseif (is_day()) { ?>
<p>You are currently browsing the <a href="<?php echo get_settings('siteurl'); ?>">
<?php echo bloginfo('name'); ?></a> 
for the day <?php the_time('l, F jS, Y'); ?>.</p>

<?php /* If this is a monthly archive */ } elseif (is_month()) { ?>
<p>You are currently browsing the 
<a href="<?php echo get_settings('siteurl'); ?>">
<?php echo bloginfo('name'); ?></a> weblog archives
for <?php the_time('F, Y'); ?>.</p>

<?php /* If this is a yearly archive */ } elseif (is_year()) { ?>
<p>You are currently browsing the 
<a href="<?php echo get_settings('siteurl'); ?>">
<?php echo bloginfo('name'); ?></a> weblog archives
for the year <?php the_time('Y'); ?>.</p>

		 <?php /* If this is a monthly archive */ } elseif (is_search()) { ?>
<p>You have searched the 
<a href="<?php echo get_settings('siteurl'); ?>">
<?php echo bloginfo('name'); ?></a> weblog archives
for <strong>'<?php echo wp_specialchars($s); ?>'</strong>. 
If you are unable to find anything in these search results, 
you can try one of these links.</p>

<?php /* If this is a monthly archive */ } 
elseif (isset($_GET['paged']) && !empty($_GET['paged'])) { ?>
<p>You are currently browsing the 
<a href="<?php echo get_settings('siteurl'); ?>">
<?php echo bloginfo('name'); ?></a> weblog archives.</p>

<?php } ?>


</li>
</ul>

3.. Abschnitt einfache ungeordnete Liste:

<ul>
<?php wp_list_pages('title_li=<h2>Pages</h2>' ); ?>
</ul>

4.. Abschnitt verschachtelte ungeordnete Liste:

<ul>
<li><h2>Archives</h2>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
</li>
</ul>

5.. Abschnitt einfache ungeordnete Liste in einer if Abfrage:

<?php /* wenn das die Hauptseite ist */ 
if ( is_home() || is_page() ) 
{ ?>
<ul>

 <?php wp_get_archives('type=year'); ?>
<?php /* If this is a yearly archive */ 
} elseif (is_year()) 
{ ?>
<?php wp_get_archives('type=monthly'); ?>

</ul> 
<?php } ?>

6.. Abschnitt verschachtelte ungeordnete Liste:

<ul>
<li><h2>Categories</h2>
<ul>
<?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>
</ul>
</li>
</ul>

7.. Abschnitt verschachtelte ungeordnete Liste in einer if Abfrage:

<ul>
<?php /* If this is the frontpage */ 
if ( is_home() || is_page() ) 
{ ?>
<?php get_links_list(); ?>

<li><h2>Meta</h2>
<ul>
<?php wp_register(); ?>
<li><?php wp_loginout(); ?></li>
<li>Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr>
</li>
<li><a href="http://gmpg.org/xfn/">
<abbr title="XHTML Friends Network">XFN</abbr>
</a></li>
<li>WordPress</li>
<?php wp_meta(); ?>
</ul>
</li>
<?php } ?>
</ul></div><!--sidebar end-->
Listen orden und schlichten obwohl der Fachausdruck ungeordnete Liste heißt. ;)
2

2 Beiträge zu “Verschachtelte Listen und die Sidebar in WP

  1. Kommentar Autor
    daniel
    Kommentar

    hi,

    bin gerade am lernen ;-)

    du schreibst oben „nach einem ul MUSS ein li kommen“. beim überarbeiten des kubrick-themes wie von dir beschrieben ist das aber doch gar nicht der fall, siehe z.b. dein 3. oder 6. abschnitt.

    bin etwas irritiert und vielleicht schreibst du mir ja eine antwort – würde mich sehr freuen :-)

  2. Kommentar Autor
    Monika
    Kommentar

    hi daniel

    wenn WP den Code ausgibt kommt dann das li ;) das nötig ist, darum brauchts man nicht immer selber tippen

    lg