ich behaupt einfach mal, dass wirklich jeder, der sich mit WordPress ein wenig beschäftigt CSS braucht. Und aus diesem Grund mache ich hier völlig unverschämt Werbung für mein eigenes Buch. Basis Know-how CSS .

Geschrieben hat Hannes Schluchtmann und ich und wir versuchten soviele praktische Tipps wie irgend möglich unterzubringen und das nötige *Must-have* Wissen so einfach und kurz unterzubringen, dass es nicht langweilt und Du dennoch genug lernst.

Wenn Du auch nur ein wenig CSS Basiswissen hast, dass Du ausbauen möchtest, dann ist dieses CSS Buch für Dich.

Mehr INFO zu meinem Buch gibts bei Data direkt oder auf der WebDesign-in.de, die ich anläßlich der Erscheinung des Buches neu machte.

Übers Weitersagen freu ich mich, über Kritik und Ergänzungen zum Buch nicht minder und wenn Du davon profitierst, wäre es nett, wenn Du es mit schreibst.

pre{
font-size:0.9em;	
width:420px; 
overflow:auto; 
line-height:2.8em;
}

Funktioniert prima. Vor allem die Angabe line-height macht das Lesen vom Code entschieden einfacher als wenn man keine line-height Angabe macht.

Problematisch wird dies im Internet Explorer, da der bei einziligem Code, den pre Tag extrem niedrig anzeigt aber sofort einen vertikalen Scrollbalken liefert, wie hier am Bild zu sehen ist. Das zweite Bild zeigt dieselbe pre Zeile im Firefox, der eindeutig mehr unterem Rand liefert, der das Lesen erleichtert und natürlich keinen vertikalen Scrollbalken.

Der IE erschwert lesen.

Firefox liefert mehr unteren Rand..

Lösbar ist dies nur, indem man dem IE genug padding-bottom gibt, damit auch dieser Browser lesbaren Text mit pre und overflow auto liefert. Er bringt zwar dann immer noch den meist völlig unnötigen vertikalen Scrollbalken , aber leichter lesbar ist es allemal.

pre{font-size:0.9em;padding-bottom:20px;width:420px; overflow:auto; line-height:2.8em;}

Artikelhistorie

Erstveröffentlichung:Oktober 12, 2005 @ 21:13

.... ein Leben ohne IE.. wäre langweilig.

Realisiert haben mag sie dies alles in einer statischen Seite von WordPress.

Dazu benötigt man “benutzerdefinierte Felder”. Wissen wie man Text eines Artikels auf einer statischen Seite darstellt, einen eigenen Loop und außerdem CSS Kenntnisse. Ich bringe ein Beispiel wie es funktionieren kann. Es gibt deren sicher mehrere Möglichkeiten.

Am Ende des Artikels findest Du weitere Links, die weiterhelfen und erklären.

benutzerdefinierte Felder läßt man so anzeigen

Wenn Dein benutzerdefiniertes Feld *hausaufgaben* heißt.

<?php $key="hausaufgaben"; echo get_post_meta($post->ID, $key, true); ?>

Beiträge /Artikel werden auf einer statischen Seite so angezeigt

Der eigene Loop sieht so aus.

<?php rewind_posts();
global $more;
$more = 1;
 
	$my_query = new WP_Query('order=asc&showposts=500');
         while ($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate = $post->ID; ?>
 
 
das ganze html und alles was man anzeigen lassen mag
 
 
 
<?php endwhile; ?>

Ich weiß nicht wieviele Artikel angezeigt werden sollen, doch die Anzahl ist ja änderbar,ebenso kann man die Ausgabe auf Artikel einer oder mehrerer Kategorien beschränken und oder gar keine spezielle Ordnung angeben.

<?php rewind_posts();
 
 
	$my_query = new WP_Query('cat=3,5,7&showposts=10');
         while ($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate = $post->ID;
global $more;
$more = 1; ?>
 
 
das ganze html und alles was man anzeigen lassen mag
 
 
 
<?php endwhile; ?>

Hier werden nur die Artikel aus den Kategorien mit der ID 3 /5 oder 7 geholt und nur 10 an der Zahl. Der zuletzt geschrieben Artikel erscheint als 1.

Damit die beiden Spalten gestaltet werden braucht man ein wenig html und css.

Das template für die statische Seite könnte dann so aussehen.

<?php
/*
Template Name: Produktinfo
*/
?>
 
<?php get_header(); ?>
 
 
<div class="border">
 
 
   <?php rewind_posts();
 
 
	$my_query = new WP_Query('order=asc&showposts=500');
         while ($my_query->have_posts()) : $my_query->the_post();
           $do_not_duplicate = $post->ID;
         global $more;
         $more = 0; ?>
 
             <div class="post" id="post-<?php the_ID(); ?>">
 
 
 
			<div class="entry"> 
                                <h2><a href="<?php the_permalink() ?>" rel="bookmark" title=" <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
				<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>
 
 
					<?php the_content(''); ?>
				</div>
 
<div class="meta-key"><?php $key="hausaufgaben"; echo get_post_meta($post->ID, $key, true); ?></div>
 
			</div>
 
 <?php endwhile; ?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Vor dem Loop ergänzte ich um die class border.

Dieser gibt man mit einem Hintergrundbild, das man vertical wiederholen läßt den sichtbaren Rand, der durchgängig sein sollte. Wieviel das Hintergrundbild horizontal in die Mitte gerückt werden muss, muss man selber herausfinden. Bei mir sind es 45%.

Die class entry läßt man nach rechts fließen (float) und die class meta-key nach links fließen. Der class post schafft man an dieser Fließerei ein Ende zu setzen.

 
.border{background-image:url(images/border.gif); background-position:45% 0;background-repeat:repeat-y; }
 
.post{clear:both;}
 
.entry{float:right; text-align:left;}
 
.meta-key{float:left;}

Welche Angaben man noch mag oder braucht – bitte selber ergänzen.

Edit am 22.03.07

Sergej erstellte ein Seo Plugin für WordPress, das sowohl den title tag wie die meta description indiviualisiert und automatisiert.

Bequem im Admincenter alle Einstellungen machen. Vorher jedoch alle title Angaben und meta description oder meta keywords aus der header.php Deines Themes löschen. Sonst erscheint alles doppelt.

Wer jedoch eine Lösung auch für die Blätterfunktion oder für spezielle Tagging Plugins haben mag, muss diese immer noch selber einfügen. Doch Sergejs Plugin ist sicher eine tolle Erleichterung für viele, die sich nicht über die php template tags von WP trauen. Ich habe es getestet, es ist in Deutsch und bedarf außer genauem Lesen keinerlei Erklärungen.

Ein großes Danke an Sergej, der meine Anregungen in diesem Kommentar aufgriff und innerhalb kürzester Zeit verwirklichte.

Wer jedoch die title Angaben selber machen oder auch die Blätterfunktion berücksichtigen mag, den empfehle ich das Lesen der folgenden Zeilen. Wie immer sind Code Beispiele dabei..

 
 
<title><?php if (is_home()) { bloginfo('name'); ?><?php } elseif (is_category() || is_page() ||is_single()||is_search()) { ?> <?php } ?><?php wp_title(''); ?></title>

Dies bedeutet ausgesprochen:

Wenn es die Hauptseite ist, dann zeige den Namen des Blogs, ist es eine Kategorie, eine statische Seite, eine Single Seite oder die Seite mit den Suchergebnissen, dann zeige den jeweiligen Titel an.

Jetzt tauchte die Frage auf, was man machen muss, damit man:

im titel der category noch was anders drinstehen haben möchte und im titlevon single zBsp. auch?

Ich bin für durchschaubare einfache Lösungen, daher würde ich dies so machen:
Wie immer, bitte aufpassen, ob copy&paste funktioniert!

 
<?php if (is_home()): ?>
	<title><?php bloginfo('name'); ?>      </title>
    <?php endif; ?>
 
<?php if (is_category()): ?>
	<title><?php wp_title(''); ?> - <?php bloginfo('name'); ?> - und noch was dazu     </title>
    <?php endif; ?>
 
<?php if (is_single ()): ?>
	<title><?php wp_title(''); ?> - <?php bloginfo('name'); ?>     </title>
    <?php endif; ?>
 
<?php if (is_search ()): ?>
	<title><?php wp_title(''); ?>- &auml;rgernis </title>
    <?php endif; ?>
 
<?php if (is_page ()): ?>
	<title><?php wp_title(''); ?>-statische Seite   </title>
    <?php endif; ?>

Dies heißt:

• Wenn es die Startseite ist, zeige den Namen.
• Wenn es eine Kategorie ist, zeige den Namen der Kategorie – den Namen des Blogs – und noch was dazu.
• Wenn es eine Single Seite ist, zeige den Titel des Artikels – den Blognamen.
• Wenn es die Suchergebnisseite ist, zeige den Titel -Ärgernis.
• Wenn es eine statische Seite ist, zeige den Titel -statische Seite.

Dies soll nur die Möglichkeiten aufzeigen.

Wie man bei einer Single Seite auch die dazugehörige Kategorie anzeigen kann – ?? Sorry, da muss ich passen, da es ja möglich ist einen Artikel in mehrern Kategorien anzuzeigen und ich es nicht schaffte dies außerhalb des sogenannten Loops zu machen.

Sollte dies wer können, gebe ich gerne ‘Credit’ dafür.

edit am 4.09.gegen Abend

In diesem Kommentar spendierte Haerzi noch folgende Lösung:

 
<?php if (is_home()): ?>
 
 <title><?php wp_title(); ?>  <?php bloginfo('name');  if ($paged != 1  && $paged) { echo(" Seite $paged"); } ?></title>
 
    <?php endif; ?>

Ich biete hier einen Seitenumbruch nach so und sovielen Beiträgen an, und dank obiger Erweiterung haben jetzt auch die Seite 2, 3, oder 56000 unterschiedliche titles.

Danke

Artikelversionen:

Erstveröffentlichung: 29.08.06

Edit am 4.09.06 gegen Abend – verschiedene title bei *Blätterfunktion*

Edit am 22.03.07 Sergej Müller SEO-Plugin für WordPress ergänzt

This article in english: How To Design Your Own WordPress Theme.

Wie immer:Viele Wege führen nach Rom, dies hier ist nur einer. Dieser Artikel ist wegen all der Code Beispiele lang. Du kannst jeden Schritt gleich mitmachen. Ein Texteditor wäre gut – WordPad reicht völlig.

Sollte ich am Schluss keinen Kommentar von Dir lesen, oder niemals Dein fertiges Werk bestaunen können, dann fällt Dir der Himmel auf den Kopf. Da bin ich absolut sicher!

• Du brauchst WordPress .
• Am besten das leereblank WordPress Theme von mir.
• Ein bisschen Zeit und Kaffee (solltest Du meinen, Du wirst krank dabei geht auch Tee
• Wenn Du ein bisschen von HTML und CSS verstehst wäre es von Vorteil, doch Du kannst auch einfach alles machen und dabei ein wenig was lernen.
• Einen Editor, wie erwähnt WordPad reicht auch. Dreamweaver nicht, weil der die Template Tags von WP verändert!
• Magst Du das gleich online machen, dann muss das Theme die chmod Rechte:beschreibbar haben.

Jetzt brauchen wir eine Struktur eines Layouts Layout Gala==>Layout Gala Design n.30.

Zwei fluide Spalten, ein Header und ein Footer.

Alle Dateien immer sichern!

Layout Gala Design n.30.==>Quellcode ==> CSS

<style type="text/css">
html,body{margin:0;padding:0;}
body{font: 76% arial,sans-serif;}
p{margin:0 10px 10px;}
a{display:block;color: #006;padding:10px;}
div#header{position:relative;}
div#header h1{height:80px;line-height:80px;margin:0;
padding-left:10px;background: #EEE;color: #79B30B;}
div#header a{position:absolute;right:0;top:23px;}
div#content p{line-height:1.4;}
div#navigation{background:#B9CAFF;}
div#extra{background:#FF8539;}
div#footer{background: #333;color: #FFF;}
div#footer p{margin:0;padding:5px 10px;}
div#footer a{display:inline;padding:0;color: #C6D5FD;}

div#wrapper{float:left;width:70%;}
div#navigation{float:right;width:29.9%;}
div#extra{clear:both;width:100%;}
</style>

Kopiere alles ab html bis zur letzten geschwungenen Klammer von div#extra in die [Admincenter==>Theme==>Theme Editor==>] style.css =>danach klicke auf speichern..

Layout Gala Design n.30.==>Quellcode ==> HTML

Jetzt brauchen wir das HTML zu genau diesen CSS Angaben. Ich nutze immer jede Menge an HTML Kommentaren, damit ich den überblick nicht verliere, und damit auch später eventuell andere sich auskennen.

Der Text in den Codebeispielen ist Englisch wie im Original, weil er an und für sich egal ist. Aber damit Du weiß was ich wann wo herauskopierte.

<body>
       <div id="container">
          <div id="header"><h1>Header</h1>download this layout
            </div><!--ende von  id header-->
 
      <div id="wrapper">
          <div id="content">
               <p><strong>1) Content here.</strong> column long long column very long ...l very.
                   </p>
              <p>very make make fill silly long long ..
                  </p>
                 and so on....
             </div><!-- ende von id content-->
        </div><!--ende von  id wrapper-->
 
       <div id="navigation">
            <p><strong>2) Navigation here.</strong> l
            </p>
       </div><!--ende von id navigation-->
 
    <div id="extra">
          <p><strong>3) More stuff here.</strong> very text make long column 
               </p>
         </div><!--ende von id extra-->
 
     <div id="footer">
            <p>The footer. You can go to the ...
              </p>
       </div><!--ende von id footer-->
</div><!--ende von id container-->
 
</body>

Erkennbar ist jetzt, dass “div id container” der Layer, die Box drumherum ist. Denn “id container” fängt gleich nach dem body Tag an und endet vor dem ganz unten.

Dieses HTML richtig in die verschiedenen .php Templates von WordPress bringen.

Wenn Du auch nur ganz wenig von HTML weißt, dann weißt Du, dass der body Tag gleich dem /head Tag beginnt und zu 99,9999% findest Du dies in der header.php. Der body Tag endet vor /html und dies ist sicher in der footer.php. Div id header und div id footer absolut das gleiche.

[Admincenter==>Theme==>Theme Editor==>] header.php

<body>
<div id="container">
  <div id="header">
                     <!--blog titel-->
               <h1>
		<a href="< ?php echo get_settings('home'); ? >/">< ?php bloginfo('name'); ? ></a>
 
                  <!--blog beschreibung-->
                  < ?php bloginfo('description'); ? >
               </h1>
       </div><!--ende von  id header-->
<!--header.php end-->

[Admincenter==>Theme==>Theme Editor==>] footer.php

<!--footer.php-->
<div id="footer">
	<p>
		<?php bloginfo('name'); ?> l&auml;ft stressfrei mit 
		<a href="http://wordpress.org/">WordPress</a>
		<br /><a href="feed:<?php bloginfo('rss2_url'); ?>">RSS Feed</a>
		and <a href="feed:<?php bloginfo('comments_rss2_url'); ?>">RSS Feed für Kommentare</a>.
		<!-- <?php echo get_num_queries(); ?> queries. <?php timer_stop(1); ?> seconds. -->
	        <!--wichtig-->
		<?php wp_footer(); ?>
          </p>
      </div><!--ende von id footer-->
</div><!--ende von id container--></body>
</html>

Das leere WP Theme hat jede Menge an HTML Kommentaren. Du findest dort wo eine single.php anfängt oder aufhört, wo die page.php beginnt und sie endet und es ist wichtig, dass das HTML zwischen diesen Kommentaren steht.

Wenn Du Dir jetzt das Blog ansiehst, sieht es nicht gerade hübsch aus. Aber für den überblick reichts.

Jetzt div id wrapper und div id content.

[Admincenter==>Theme==> Theme Editor==>] index.php

<?php get_header(); ?>
 
	<!--index.php-->
<div id="wrapper">
          <div id="content">
        <!--the loop-->
	<?php if (have_posts()) : ?>
and so on ........
 
 
                    Leider
		<?php include (TEMPLATEPATH . "/searchform.php"); ?>
        <!--nicht loeschen -->
	<?php endif; ?>
 
               </div><!-- ende von  id content-->
        </div><!--ende von id wrapper-->
<!--index.php end-->
<!--include sidebar-->
<?php get_sidebar(); ?>
<!--include footer-->
<?php get_footer(); ?>

Schau Dir jetzt Deine Seite an… aus dem Chaos entsteht Neues …

Nun “div id navigation”. Die rechte Spalte .

[Admincenter==>Theme==> Theme Editor==>] sidebar.php

<!--sidebar.php-->
<div id="navigation">
		<!--suche-->
....
.....
<?php } ?>
</div><!--ende von id navigation-->		
 
<!--sidebar.php end-->

Schau es Dir nicht an! Der Header und der Footer sind sicher links, content ist Grau und Dir wird schwindelig .
Nun das HTML oben und die CSS Angaben erzählen uns von div id extra. Und dieses sollte das Floaten auflösen. Da es aber jetzt noch kein div id extra wo gibt, fließt alles irgendwie durcheinander.

Ein neues WP Template erstellen und WP befehlen dieses zu nutzen

Aus diesem Grund suchte ich genau dieses Layout Gala Design n.30 als Beispiel aud .

1. Öffne Deinen Editor speichere eine leere Seite als extra.php. Und lade diese in den Theme Ordner.
wp-content/themes/yourtheme/.
2. [Admincenter==>Theme==> Theme Editor==>] extra.php

<!--extra.php-->
 <div id="extra">
          <p><strong>3) More stuff here.</strong> very text make long column 
               </p>
         </div><!--end of id extra-->
<!--end of extra.php-->

Ganz oben zeigt das HTML diese extra.php sollte zwischen sidebar.php und footer.php sein.

[Admincenter==>Theme==> Theme Editor==>] index.php

 
</div><!-- ende von  id content-->
        </div><!--ende von  id wrapper-->
<!--index.php end-->
<!--include sidebar-->
<?php get_sidebar(); ?>
 
<!--include extra.php-->
<?php include (TEMPLATEPATH . '/extra.php'); ?>
 
<!--include footer-->
<?php get_footer(); ?>

Diese Angabe:

<!--include extra.php-->
<?php include (TEMPLATEPATH . '/extra.php'); ?>

befiehlt WP das neue Template zu nutzen, es wird includiert, eingebunden. /extra.php oder /wasauchimmerdumagst.php oder oder oder……..

Jetzt sieht die Seite sicher wesentlich besser aus, Browsercache leeren mit strg+F5,

Die Template Hierarchie von WP

Mit der index.php und einer style.css alleine funktioniert WP auch. Hast Du aber eine page.php für die statischen Seiten kannst Du dort leichter eigene Angaben für diese Seiten machen. Die category.php zeigt die Kategorien, die archive.php die Monats und Jahresarchive etc. Category-3.php nutzt WP automatisch nur für die Kategorie mit der ID 3.

D.h. wenn Du jetzt auf eine statische Seite klickst wird Chaos herrschen, ebenso bei all den anderen Klicks.

[Admincenter==>Theme==> Theme Editor==>]archive.php

<?php get_header(); ?>
<div id="wrapper">
          <div id="content">
	<!--the loop-->
 
		<?php if (have_posts()) : ?>
 
......
....
<!--nicht loeschen -->
	<?php endif; ?>
 
	       </div><!-- ende von  id content-->
        </div><!--ende von  id wrapper-->
<!--archive.php end-->
 
<?php get_sidebar(); ?>
<!--include extra.php-->
<?php include (TEMPLATEPATH . '/extra.php'); ?>
<!--include footer-->
<?php get_footer(); ?>

[Admincenter==>Theme==> Theme Editor==>]single.php

<!--single.php-->
	<div id="wrapper">
            <div id="content">
<!--loop-->			
  <?php if (have_posts()) :
......
......
Leider,.....
 
<!--nicht loeschen-->
<?php endif; ?>
 
	</div><!-- ende von  id content-->
        </div><!--ende von  id wrapper-->
<!--single.php end-->
 
 
<?php get_sidebar(); ?>
<!--include extra.php-->
<?php include (TEMPLATEPATH . '/extra.php'); ?>
<!--include footer-->
<?php get_footer(); ?>

Versuche es jetzt selber bei den anderen Templates.

Single.php und ab wann beginnt ein Artikel und wann endet er?

Das da erzeugt einen Artikel.

 <!--the loop-->
	<?php if (have_posts()) : ?>
		<!--the loop-->
		<?php while (have_posts()) : the_post(); ?>
 
			<!--beitrags titel als link-->
				<h2 id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link für <?php the_title(); ?>"><?php the_title(); ?></a></h2>
		     <!--post zeit -->	
                     <?php the_time('F jS, Y') ?>
 
                      <!--post autor-->
                      <?php the_author() ?>
 
				<!--post text mit dem lies weiter link-->
					<?php the_content('weiterlesen &raquo;'); ?>
				<!--zeigt die kategorien, edit link, kommentare-->
 
				Geschrieben in  <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('Kein Kommentar &#187;', '1 Kommentar &#187;', '% Kommentare &#187;'); ?>
 
 
	        <!--ende eines posts-->
		<?php endwhile; ?>

Speichere die Dateien und spiel Dich einfach ein bisschen damit. Versuch und Irrtum sind gute Lehrmeister und es kann nichts schiefgehen, weil Du ja Sicherungen hast!

… Bei Fragen, fragen, war es hilfreich erzähl es weiter und denke an den Himme ..

In der wp-includes/functions-formatting.php wurde ich fündig. Wenn Du auch diese Probleme hast, dann kannst Du meine Lösung gerne ausprobieren.

edit am 24.1.07² auch WP 2.1 hat dieses Problem, die Lösung dafür steht am Ende dieses Artikels.

Lösung für WordPress Version kleines als WP 2.1 also WP 2.00-2.07

1. wp-includes/functions-formatting.php sichern, dann mit einem Editor Deiner Wahl öffnen.
2. br s werden gekillt. Ich kann damit keinen Abstand machen.
3. Zeile 57 ungefähr.

function wpautop($pee, $br = 1) {
    $pee = $pee . "\n"; // just to make things a little easier, pad the end
//    $pee = preg_replace('|<br />\s*<br />|', "\n\n\n", $pee);

Diese beiden Querstriche dorthin machen wo Du sie siehst. Man nennt dies auskommentieren. Auf deutsch unbrauchbar machen.

4. Bei verschiedenen HTML Tags wird ein br gesetzt, obwohl es nicht hingehört.
5. Suche alle Zeilen ab Zeile 67 , die ungefähr so aussehen:

 $pee = preg_replace('!<p>\s*(</?(?:table|thead|tfoot|

Sie haben auf alle Fälle jede Menge HTML Tags und der erste davon ist immer “table”.

Sieh nach, ob der html tag, wo die br ungewollt auftauchen, dort dabei steht.

Wenn nicht ergänze ihn einfach.

Lösung für WP 2.1

Sicher die Datei:wp-includes/formatting.php.
Öffne sie dann und ändere folgendes in der Zeile 55.

function wpautop($pee, $br = 1) {
	$pee = $pee . "\n"; // just to make things a little easier, pad the end
	$pee = preg_replace('|<br />\s*<br />|', "\n\n", $pee);
	// Space things out a little
	$allblocks = '(?:table|thead|tfoot|caption|colgroup|tbody|tr|td|th|d......................

bei ‘allblocks’ stehen jede Menge an html tags drin, fehlt dort einer, dann kommen die breaks. Daher habe ich in dem Fall einfach col ergänzt. Hineingeschrieben und den senkrechten Trennstrich gemacht. Gespeichert, hochgeladen und fertig.

function wpautop($pee, $br = 1) {
	$pee = $pee . "\n"; // just to make things a little easier, pad the end
	$pee = preg_replace('|<br />\s*<br />|', "\n\n", $pee);
	// Space things out a little
	$allblocks = '(?:table|thead|tfoot|caption|colgroup|col|tbody|tr|td|th|d......................

Abspeichern, hochladen und zumindest bei mir waren dann diese Probleme behoben. WENN das Automatische Reparieren von HTML Tags abgestellt ist und man NICHT den Editor verwendet.

²
dieser Artikel wurde am 15.01.06 das erste Mal veröffentlicht.

Ganz einfach ist dies nicht zu beantworten, weil es auf den Grundaufbau des jeweiligen Cascading Style Sheet ankommt, aber meist führt folgender Weg zum Ziel:

[Schritt 1]</div><!--das ist das div des headers, das geschlossen werden muss.-->
[Schritt 2]<div id="menu">
[Schritt 3]<ul>
 [Schritt 4]  <?php wp_list_pages..............
[Schritt 5]</ul>
[Schritt 6]</div><!-- id menu end-->

Erklärung:

1. Schritt 1:
   Die Liste sollte unterhalb des Headers erscheinen, daher erweist es sich oft als gut, den Header vorher zuzumachen.
2. Schritt 2:
   Ich nehme eine id, weil eine class oft nicht die “Macht” hat. Der Name “menu” ist willkürlich ausgesucht, kann auch anders genannt werden.
3. Schritt 3:
   Für eine horizontale Liste ist es einfacher keine verschachtelte Liste zu nehmen. Der template tag wp_list_pages erzeugt die “li” selber, also müssen nur die fehlenden ul nachgereicht werden.
4. Schritt 4:
   Der template tag, welcher auch immer für Dein Anliegen passt.
5. Schritt 5 und 6:
   Alles was man “aufgemacht” hat muss man wieder “zumachen”.

In die style.css Deines Themes kommt dann folgendes:

[1] #menu  ul {position:relative; top:10px!important;top:15px; padding:0; margin:0% 3% 0% 0%; }
[2] #menu ul li {display:inline; margin:0 1px; }
[3] #menu  li {padding:2px 10px;}
[4] #menu  li:hover {padding:2px 10px;}
[5] #menu  a:hover {background-color:transparent;}

• [1] die beiden Angaben bei top:…. sind einmal für den Internet Explorer und einmal für Firefox, Mozilla, Opera. Der Internet Explorer zeigt Abstände anders als die anderen Browser an. Versteht dieses !important aber überhaupt nicht. So kann man dies nutzen zwei Angaben für ein und dieselbe Sache zu machen. Ob die 10px reichen oder zuviel sind, kann man allgemein nicht sagen.
• [2] wichtig ist dieses display inline , denn dieses inline macht aus der an und für sich vertikalen Liste eine horizontale. Die margin Angaben sind wiederum nicht allgemein bestimmbar.
• [3] Padding ist der Innenabstand, man sollte padding Werte bei einer horizontalen Liste angeben, damit der Abstand auch links und rechts gut aussieht und benutzbar bleibt. Zu eng erschwert das Draufklicken, wenn man zB. ein ungeübter Maus und Internetnutzer ist.
• [4] Gibt man dem li einen hover Effekt- der ist sichtbar, wenn man mit der Maus drüber fährt, erleichtert dies ebenfalls das Draufklicken und man hat außerdem mehr Gestaltungsmöglichkeiten.
• Es geht um Links, die sollte man – wenn es irgendwie geht, so wie die anderen Links auf der Website gestalten. Da man aber manchmal ein Hintergrundbild verwendet oder die Farbe beim Drüberfahren mit der Maus nicht passt oder die horizontale Liste am Ende des Headerbildes erscheinen soll, kann man die Links in dieser horizontalen Liste anpassen.

Ich weiß, sehr allgemein diese Tipps, aber ohne mehr über die Website zu wissen, wo diese horizontale Liste hin soll, kann ich nur spekulieren und sehr allgemein erklären.

Bei Fragen, einfach die Kommentarfunktion nutzen und meist haben viele andere auch Fragen und sind sehr froh, wenn sich jemand zu fragen getraut .

…gut erholt aus dem Urlaub zurück

edit:09.02.06
Ich antworte hier, weil in den Kommentaren zuwenig html erlaubt ist -aus Sicherheitsgründen.;)

 
 #menu  ul {position:relative; top:10px!important;top:15px; padding:0; margin:0% 3% 0% 0%; }
#menu ul li.page_item {display:inline; margin:0 1px; }
 #menu  li {padding:2px 10px;}
 #menu  li:hover {padding:2px 10px;}
 #menu  a:hover {background-color:transparent;}
#menu li {	list-style-type: none;
	list-style-image:none;}

mit dem list style type none verbietest Du die Bullets mit list style image etwaige Bildchen, die Du vielleicht woanders in einer Liste hast anstatt der Bullets.

Die Zwischenstriche:
1. Möglichkeit -in allen Browsern sichtbar:
Du verwendest nicht den template tag wp_list_pages, sondern verlinkst selber jede Seite.

<div id="menu">
<ul><li> a href="deinedomain.de/....." title=".....">Blubsch</a></li>
</ul></div>

Nachteil: ist aufwändig.

2.Möglichkeit: der Internet Explorer zeigt dies nicht an, Browser schon.;)

Du schreibst in die style.css folgendes dazu:

 
#menu ul li:before{
	 content:"\|";
	 text-align:center;
 
}

lg

Ein Braille Schrift Service hift bei diesem Problem. In einen Kommentar auf einer meiner anderen Websites fand ich den Hinweis dazu.
Braille Post Service sagt von sich selber:

Wir empfangen Ihre Nachricht, drucken diese in Punktschrift aus, packen das Ganze in einen Umschlag, den wir mit der Adresse des Empfängers versehen, und ab geht die Post als Blindensendung.

Diesen Service gibt es in mehreren Sprachen. Deutsch, französisch und niederländisch, soweit ich herausfand. Eine Sache für die ich gerne Werbung mache und einlade es mir gleichzutun.

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> weblog archives
			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><a href="http://wordpress.org/" title="Powered by WordPress, state-of-the-art semantic personal publishing platform.">WordPress</a></li>
					<?php wp_meta(); ?>
				</ul>
				</li>
			<?php } ?>
</ul></div><!--sidebar end-->

Listen orden und schlichten obwohl der Fachausdruck ungeordnete Liste heißt.

Veränderst Du Funktionsdateien, dann dokumentiere dies.
Beim nächsten Update überschreibst Du Deine Veränderungen und suchst dann wieder wie, was und wo es geht.

Diese Regel hat mir schon viel Zeit erspart und so nutze ich diesen Artikel, um die Veränderungen für mich zu dokumentieren und Dir als Tipps und Tricks zur Verfügung zu stellen.

Ich habe einen Editor, der mir eine Zeilennummerierung anzeigt, die Zahl in der Klammer ist immer die Zeilenangabe.

template – functions – links.php

1. Navigation auf der Startseite oben.
Als “title” wollte ich: 1 Seite zurück und 1 Seite nach vor.Wie am Bild zu sehen ist.

Dafür fügte ich bei : function next _ posts _ link – vor “preg _ replace” – folgendes ein:

(Zeile: 445)
 echo '" title="1 Seite zurück ">'. preg usw.

und bei : function previous _ posts _ link – ebenfalls vor “preg _ replace”:

(Zeile:465)
        echo '" title="1 Seite nach vor">'. preg usw.

2. Navigation bei der Gesamtartikelansicht – also single.php – oben.
Als “title” wollte ich: zum Artikel: und die Anzeige des Titels.Wie am Bild zu sehen ist.

Dafür änderte ich die: function previous _ post _ link:

 (Zeile:275)
 $string = '<a href="'.get_permalink($post->ID).'" title="zum Artikel: '.$title.'">';

und die: function next _ post _ link.

(Zeile:295)
$string = '<a href="'.get_permalink($post->ID).'" title="zum Artikel:'.$title.'">';

3. Der “Edit” Link, den man als Admin sieht, der hatte auch keinen title Attribut:
function edit _ comment _ link

(Zeile:195)
  echo "$before <a title='Edit' href='http://www.texto.de/'>$link</a> $after";

und function edit _ post _ link.

(Zeile:182)
    echo "$before <a title=\"Edit\" href=\"$location\">$link</a> $after";

4. Weiters änderte ich noch folgende Funktion:

(Zeile:11)
function permalink_anchor($mode = 'id') {
    global $id, $post;
    switch(strtolower($mode)) {
        case 'title':
            $title = sanitize_title($post->post_title) . '-' . $id;
            echo '<a title="'.$title.'" id="'.$title.'"></a>';
            break;
        case 'id':
        default:
            echo '<a title="post-'.$id.'" id="post-'.$id.'"></a>';
            break;
    }
}

Außerdem bin ich alle Templates des Themes durchgegangen und fügte alle fehlenden “title” Tags hinzu , die ich fand.