Schweizer WordPress Magazin

Anleitungen

Ein Sideblog erstellen – ohne Plugins und Double Content

Im ersten MailPress Newsletter habe ich bereits verschiedene Plugins vorgestellt, mit denen man im Nu einen Sideblog einrichten kann, der in Form eines Sidebar Widgets eingeblendet wird. Wie versprochen zeige ich euch heute, wie man auch ganz gut ohne Plugins eine solche Lösung basteln kann. Mit sauberem Code und ohne Double Content.

Alles was man dazu braucht ist eine zusätzliche Kategorie wie etwa Asides oder Sideblog. Für den Blog im Blog muss man auch die Beitragsschlaufe (Loop) ein wenig modifizieren, um das mehrmalige Erscheinen eines Beitrags, sprich Double Content, zu vermeiden.

Änderungen im Theme

Der Code, den ich in den nächsten Zeilen präsentieren werde, basiert teilweise auf dem Theme The Morning After, welches zur Zeit auch hier im Einsatz ist. Es bringt nämlich von Haus aus eine sehr gute und trotzdem einfache Implementation eines Sideblogs mit sich. Das Grundgerüst für ein Sideblog ist folgendes:

<ul>
	<?php $the_query = new WP_Query('category_name=asides&showposts=6&orderby=post_date&order=desc');
	while ($the_query->have_posts()) : $the_query->the_post();
	$do_not_duplicate = $post->ID; ?>
	<li><?php echo strip_tags(get_the_content(), '<a>'); ?> <a href="<?php the_permalink(); ?>"
	rel="bookmark" title="Permanenter Link zu <?php the_title(); ?>">#</a></li>
	<?php endwhile; ?>
</ul>

Wie man unschwer erkennen kann, kreieren wir einen neuen Query, also eine zusätzliche Loop. Dabei geben wir der Funktion WP_Query diverse Parameter mit:

• category_name bezeichnet die Kategorie, von der die Beiträge ausgelesen werden. Hier muss sie klein geschrieben werden.
• showposts gibt die Anzahl Beiträge an, die maximal angezeigt werden.
• orderby gibt an, wie die Beiträge sortiert werden. Sinnvollerweise verwenden wir das Datum
• order gibt die Reihenfolge an. Soll der neuste Beitrag zuoberst sein, wird desc eingegeben. Ansonsten asc.

Weitere Informationen zur Klasse WP_Query findet man im WordPress Codex.

Double Content verhindern

In unserem Blog haben wir jetzt zwei Schleifen. Die eine ist unsere neue Schleife für den Sideblog, die andere ist die standardmässige Loop, welche auch die Asides-Beiträge beinhaltet. Das wollen wir jetzt ändern. Als Beispiel nehme ich hier das Default-Theme (Kubrick), welches in jeder WordPress-Version dabei ist:

Vorher:

<div id="content" class="narrowcolumn">

<?php if (have_posts()) : ?>

	<?php while (have_posts()) : the_post(); ?>

		<div class="post" id="post-<?php the_ID(); ?>">
			<h2><a href="<?php the_permalink() ?>" rel="bookmark"
			title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
			<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>

			<div class="entry">
				<?php the_content('Read the rest of this entry »'); ?>
			</div>

			<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?>
			Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>
			<?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?></p>
		</div>

	<?php endwhile; ?>

	<div class="navigation">
		<div class="alignleft"><?php next_posts_link('« Older Entries') ?></div>
		<div class="alignright"><?php previous_posts_link('Newer Entries »') ?></div>
	</div>

<?php else : ?>

	<h2 class="center">Not Found</h2>
	<p class="center">Sorry, but you are looking for something that isn't here.</p>
	<?php include (TEMPLATEPATH . "/searchform.php"); ?>

<?php endif; ?>

</div>

Nachher:

<div id="content" class="narrowcolumn">

<?php if (have_posts()) : ?>

			<?php $the_query = new WP_Query('cat=-99,&showposts=10&orderby=post_date&order=desc');
			while ($the_query->have_posts()) : $the_query->the_post();
			$do_not_duplicate = $post->ID; ?>

		<div class="post" id="post-<?php the_ID(); ?>">
			<h2><a href="<?php the_permalink() ?>" rel="bookmark"
			title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
			<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>

			<div class="entry">
				<?php the_content('Read the rest of this entry »'); ?>
			</div>

			<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?>
			Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>
			<?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?></p>
		</div>

	<?php endwhile; ?>

	<div class="navigation">
		<div class="alignleft"><?php next_posts_link('« Older Entries') ?></div>
		<div class="alignright"><?php previous_posts_link('Newer Entries »') ?></div>
	</div>

<?php else : ?>

	<h2 class="center">Not Found</h2>
	<p class="center">Sorry, but you are looking for something that isn't here.</p>
	<?php include (TEMPLATEPATH . "/searchform.php"); ?>

<?php endif; ?>

</div>

Hast du etwas bemerkt? Richtig: Wir haben bloss eine Zeile durch vier andere ersetzt. Wieder kommt WP_Query zum Einsatz, um die Beiträge anzuzeigen. Geändert hat sich nur eine Kleinigkeit:

Mit dem Parameter cat geben wir an, welche Kategorien in die Loop einfliessen. Das lässt sich mit einem Minus vor der Kategorie-ID umkehren: cat=-99 schliesst die Kategorie mit der ID 99 aus (man beachte das Minus vor der Zahl). In unserem Fall ist dies die Kategorie Sideblog. Muss man natürlich anpassen. ;-)

Zwischenstand

So sieht unser Sideblog nach den bisherigen Schritten aus:

Anpassungen am Stylesheet

Der Sideblog wird bei uns - der Standards wegen - in einer ungeordneten Liste ausgegeben. Da diese ohne ein gewisses Styling ziemlich karg aussieht, peppen wir unseren Sideblog ein bisschen auf. Dafür verpassen wir dem <ul>-Element eine neue CSS-Klasse. Der Verständnis halber taufen wir sie sidebar. Somit sieht die Liste wie folgt aus:

<ul class="sidebar">*Für Code siehe oben*</ul>

Jetzt kann man die style.css des Themes bearbeiten. Für den gleichen Look wie auf der Startseite des WordPress Magazins benutzt man folgenden Code:

ul.sidebar { list-style: none; margin: 0; }
ul.sidebar li { padding: 0 0 0.5em 12px; margin: 0 0 0.5em 0;
border-bottom: 1px solid #dadada; border-left: 5px solid #dadada; }

Und jetzt natürlich noch die Erklärung:

• list-style: none - Damit die Aufzählungspunkte wegfallen
• padding - Innenabstand
• margin - Aussenabstand
• border - Links ist er dicker als unten