sidebar.php – das Menü mit Leben füllen

Nun wollen wir mal ein paar typische WordPress Elemente in den noch leeren Bereich auf der rechten Seite bringen. Ein Standard-Theme platziert in der Sidebar unter anderem:

  • die statischen Seiten im Blog (Impressum, About, etc.)
  • Kategorien
  • Archiv (bsp.: Januar 2010, Dezember 2009, November 2009, etc.)
  • Meta-Daten (Login/Logout, RSS, etc.)

Da ich hier das Rad nicht neuerfinden, sondern dir lediglich die Grundlagen aufzeigen möchte, halte ich mich an die Standard-Sidebar. Fühl dich aber frei deine sidebar.php nach deinen Bedürfnissen anzupassen. Ich für meinen Teil, lasse in der Regel den Meta-Part weg und füge stattdessen eine Liste der 5 neuesten Kommentare oder der letzten 5 Artikel ein.

sidebar.php und Inhalte

Lege als erstes die Datei sidebar.php in deinem Theme-Ordner an. Nun wechsel in die index.php und nutze die funktion „get_sidebar()“ um die Sidebar einzubinden:

index.php

<?php get_header(); ?>

	<div id="main">
		
		<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
			<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
			<div class="entry">
				<?php the_content(); ?>
			</div>
		<?php endwhile; endif; ?>
		
	</div><!-- main -->
	
	<div id="sidebar">
		<?php get_sidebar(); ?>
	</div><!-- sidebar -->	

<?php get_footer(); ?>

Die Sidebar wird nun verwendet, aber bislang natürlich noch nichts angezeigt. Damit sich das ändert, werden wir als erstes mal ein „mini About“ verfassen, also wer wir sind und worum es in unserem Blog geht.

sidebar.php

<h2>&Uuml;ber diesen Blog</h2>
<p class="mini_about">
	Hallo, mein Name ist Christian und du siehst hier das Tutorial Template aus dem <a href="http://wordpress.lernenhoch2.de/handbuch/">Wordpress Template Tutorial</a> auf <a href="http://lernenhoch2.de/">Lernen²</a>
</p>

Du solltest nun in etwa folgendes erhalten:

So, das war ja bislang noch nichts dynamisches, aber zumindest funktioniert die Sidebar und wird korrekt angezeigt. Als nächstes wollen wir uns die Kategorien unseres Blogs anzeigen lassen:

<h2>&Uuml;ber diesen Blog</h2>
<p class="mini_about">
	Hallo, mein Name ist Christian und du siehst hier das Tutorial Template aus dem <a href="http://wordpress.lernenhoch2.de/handbuch/">Wordpress Template Tutorial</a> auf <a href="http://lernenhoch2.de/">Lernen²</a>
</p>

<h2>Kategorien</h2>
<ul>
	<?php wp_list_categories('orderby=name&order=ASC&title_li='); ?>
</ul>

WordPress bietet uns einige mächtige Template-Funktionen, die wir fast nach Belieben einsetzen können. „wp_list_categories()“ ist eine davon und über die Parameter können wir die Ausgabe steuern. Eine Liste aller Parameter und welche Werte akzeptiert werden, findest du hier: wp_list_categories() oder auf deutsch: wp_list_categories() deutsch.

In unserem Beispiel sagen wir WordPress: Gib uns eine Liste mit allen Kategorien, sortiere die Liste anhand der Namen („orderby=name“) und sortiere sie aufsteigend („order=ASC“ – also von a-z). Wir können auch das selbe erreichen, indem wir wp_list_categories() komplett leerlassen, denn die DEFAULT-Werte für diese Funktion sind die selben. Wenn wir den Parameter „title_li“ nicht auf „leer“ setzen, wird uns ein „Categories“ oben an die Liste geklatscht.

Du kannst nun ein bisschen mit dieser Funktion rumspielen:

  • Versuche die Reihenfolge von aufsteigend, zu absteigend (DESC) zu ändern
  • Versuche eine Kategorie auszuschließen
  • Wenn du mehr als 5 Kategorien hast, versuche die Liste auf 5 Kategorien zu beschränken
  • Versuche die Liste nach der Anzahl an Beiträgen pro Kategorie zu sortieren. Die Kategorie mit den meisten Beiträgen soll oben stehen, die mit den wenigsten, unten.

Man kann zwar nicht alles, aber sehr sehr viel mit den WordPress Template-Funktionen erreichen. Wenn dir also die Standard-Ausgabe nicht gefällt/genügt, dann hilft meist ein kurzer Blick in die Dokumentation um das gewünschte Ergebnis zu erzielen.

sidebar.php – Archiv anzeigen

Das Archiv ist eine typische Erkennungsmarke für einen Blog. Meist wird eine Liste der letzten 10-20 Monate aufgelistet, chronologisch absteigend. Das wollen wir auch mal probieren:

<h2>&Uuml;ber diesen Blog</h2>
<p class="mini_about">
	Hallo, mein Name ist Christian und du siehst hier das Tutorial Template aus dem <a href="http://wordpress.lernenhoch2.de/handbuch/">Wordpress Template Tutorial</a> auf <a href="http://lernenhoch2.de/">Lernen²</a>
</p>

<h2>Kategorien</h2>
<ul>
	<?php wp_list_categories('orderby=name&order=ASC&title_li='); ?>
</ul>

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

Mit wp_get_archives() (oder wp_get_archives() de) können wir uns eine Liste des Archivs ausgeben lassen. Die Default-Werte geben ein Monats-Archiv aus, man kann aber auch ein Wochen oder sogar Tages-Archiv anzeigen lassen (das macht aber nur bei Blogs Sinn, die mehrere Artikel täglich haben, meiner Meinung nach).

Die WordPress Blogroll

Ein weiteres, wesentliches Element eines WordPress Themes, ist die Blogroll. In der Blogroll werden Blogs verlinkt, die du im WordPress Backend einträgst.

<h2>&Uuml;ber diesen Blog</h2>
<p class="mini_about">
	Hallo, mein Name ist Christian und du siehst hier das Tutorial Template aus dem <a href="http://wordpress.lernenhoch2.de/handbuch/">Wordpress Template Tutorial</a> auf <a href="http://lernenhoch2.de/">Lernen²</a>
</p>

<h2>Kategorien</h2>
<ul>
	<?php wp_list_categories('orderby=name&order=ASC&title_li='); ?>
</ul>

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

<h2>Blogroll</h2>
<ul>
	<?php wp_list_bookmarks(); ?>
</ul>

wp_list_bookmarks() (oder wp_list_bookmarks() de)

Wir werden uns später noch weiter mit der Sidebar.php befassen, doch das sollte vorerst reichen. Wenn du magst, kannst du dir hier weitere WordPress-Template-Funktionen anschauen und dich für deine Sidebar inspirieren lassen: WordPress Template Tags (und auf deutsch)

hier geht's weiter...



Kommentare


Hallo,

Ich habe das Problem das die Sidebar nicht rechts angezeigt wird sondern einfach unter dem artikel.


Das hat wahrscheinlich eher was mit CSS als mit WordPress zu tun. Wahrscheinlich ist die Breite einer Box zu groß und dadurch wird die Sidebar einfach nach unten geschoben.


Hi,

vielen Dank für deine großartige Erklärung. Leider läuft bei mir der Text eines Artikels über den Div-Bereich und somit dann über die Sidebar weiter?! Konnte noch keine Lösung finden…. Wäre für jeden Lösungsvorschlag dankbar.

Gruß
Sören


hat der Text keine Zeilenumbrüche drin? wird wahrscheinlich ein CSS Fehler sein, eventuell ein "float:left" welches nicht mittels "clear:both" geschlossen wird.


Hi,
hab folgendes Problem, 1. Hab ich wie Sönke aus irgendeinem Grund die Sidebar unter den Artikeln und 2. Ist bei mir immer bei dem Artikel der als Oberstes steht die Überschrift weit nach rechts verschoben.

Hast du eine Idee wie ich das beheben kann?

Gruß
Patrick


Hast du den Code aus dem Tutorial kopiert oder Änderungen vorgenommen?
In welchem Browser tritt der Fehler auf?


Der Code ist fast 1:1 Übernommen, lediglich vom Inhalt (Artikel Inhalt etc.) sind anders, wollte das tutorial von grund auf durchgehen und es dann wenn ich durch bin für meine verhältnise abändern. Aufgetreten ist das ganze im Firefox


Versuch mal den Testblog aufzurufen und sag mir ob dort der Fehler auch auftritt: http://test.lernenhoch2.de/


nö, da gehts aus irgend einem grund ohne probleme


Versuch mal folgendes:
Geh in den .css Code und ändere die Breite der "main" box von 520px auf 320px:
#main{width: 320px; padding: 20px; float: left;}

und teste ob die Sidebar immernoch unterhalb des Artikels auftaucht.


Ausprobieren…. Und ist immer noch drunter :(


Dann weiß ich leider auch nicht mehr weiter.

Normalerweise sollten zwei CSS-Divs, die mit Float: left gekennzeichnet sind, nebeneinander stehen. Außer die gesamt-Breite (+paddings und margins) ist größer als die Eltern-Box, in diesem Fall werden die Boxen untereinander dargestellt.


Was mich am meisten wunder ist vorallem dingen die sache mit dem Obersten Artikel, das die Überschrift davon immer weit nach rechts verschoben wird. Weißt du vllt. wie ich das lösen kann? vllt. löst sich dadurch das andere problem gleich mit

mfg
Patrick


Ne leider nicht, das kann an vielem liegen. Habe mir aber mal gerade deine verlinkte Seite angeschaut und in Chrome sowie in Firefox sieht alles korrekt aus.


hab den Fehler gefunden -.-, der Inhalt für main in der index.php stand außerhalb des div tags für main :P


Vielen Dank.
Hatte das selbe Problem und hab erstmal gesucht.
Vielleicht sollte das Ganze mal angepasst werden im Tutorial.


Ich würde noch anmerken, daß ASC für ASCENDING steht, und die gegenteilige Reihenfolge wahrscheinlich mit DESC (DESCENDING) erreicht wird.


Vielen Dank für dein Tutorial. Bei der sidebar.php kann man auch eine dynamische Funktion integrieren, so dass die Sidebar mit Widgets gefüllt werden kann. Bei einer zukünftigen Umgestaltung ist man dann etwas flexibler.

Kommentar schreiben

Kommentar

Hilfe:

<strong>fettgedruckt</strong> => fettgedruckt

<em>kursiv</em> => kursiv

<a href="http://wordpress.lernenhoch2.de">Link</a> => Link

[code]<?php echo 'hello world'; ?>[/code]

*

Feedback Formular