Datum-Badges und Kommentar-Blasen für deinen Blog

Eines der Dinge, denen man begegnet, wenn der eigene Blog größer wird, ist, dass man mehr Informationen auf weniger Raum unterbringen muss, um alle gewünschten Informationen anzeigen zu können. Eine der Dinge, die ich dazu getan habe, ist, ein Icon für das Datum hinzuzufügen, und darüber eine Blase mit der Anzahl der Kommentare.

Wie Sie sehen können, zeigt dieser „Schild“ den Tag, den Monat und die Anzahl der Kommentare. Dieser Artikel zeigt Ihnen genau, wie Sie diesen Effekt erzielen können!

Zunächst einmal verwende ich die Kalender-Icons von Marek Sotak. Ich habe auch seine Idee weiterentwickelt, spezifische Bilder für jeden Monat zu haben, sodass Sie den Monat nicht mit Text in das Bild einfügen müssen, was ein schöneres Layout des Kalender-Icons ermöglicht.

Wir beginnen damit, ein Kalender-Icon wie dieses zu erstellen

<p class="date month8">18</p>

Mit dem folgenden CSS

p.date {
	width: 42px;
	height: 10px;
	padding: 18px 0 14px 0;
	text-align: center;
}

Das macht die Datumsbox, jetzt brauchen wir eine Zeile für jeden der 12 Monate

.month1 { background: url(images/cal_01.gif) no-repeat 0 0; }
.month2 { background: url(images/cal_02.gif) no-repeat 0 0; }
.month3 { background: url(images/cal_03.gif) no-repeat 0 0; }
.month4 { background: url(images/cal_04.gif) no-repeat 0 0; }
.month5 { background: url(images/cal_05.gif) no-repeat 0 0; }
.month6 { background: url(images/cal_06.gif) no-repeat 0 0; }
.month7 { background: url(images/cal_07.gif) no-repeat 0 0; }
.month8 { background: url(images/cal_08.gif) no-repeat 0 0; }
.month9 { background: url(images/cal_09.gif) no-repeat 0 0; }
.month10 { background: url(images/cal_10.gif) no-repeat 0 0; }
.month11 { background: url(images/cal_11.gif) no-repeat 0 0; }
.month12 { background: url(images/cal_12.gif) no-repeat 0 0; }

Wenn das erledigt ist, wird das Bild so gerendert

Wie Sie bemerkt haben, war der HTML-Code bisher recht einfach, so wie Marek ihn zusammengestellt hat, aber er ist nicht sehr zugänglich. Zwar ergibt er Sinn, wenn Sie einen Browser mit CSS haben, aber er ergibt nicht so viel Sinn, wenn Sie keinen haben. Also werden wir ihn so ändern

<p class="date month8"><span>Aug</span> 18<span>th</span></p>

Und das fügen wir zum CSS hinzu

p.date span { display: none; }

Hinzufügen der Kommentar-Blase

Nun kommen wir zum pikanten Teil: dem Hinzufügen einer Blase mit der Anzahl der Kommentare darin. Um dies richtig zu machen, benötigen wir eine Begrenzungsbox um das Datum, die wir „Schild“ nennen, und wir fügen eine div namens commentscloud hinzu. Es wird so aussehen

<div class="shield"> 
	<p class="date month8"><span>Aug</span> 18<span>th</span></p> 
	<div class="commentscloud">5</div> 
</div>

Alles, was wir mit der shield div machen, ist, ihr position: relative; zu geben, damit wir position: absolute; auf der commentscloud verwenden können. Das vollständige CSS sieht so aus

.shield {
	position: relative;
}
.commentscloud {
	position: absolute;
	text-align: center;
	top: -4px;
	left: 22px;
	width: 30px;
	height: 24px;
	padding: 3px 0;
	background: url(images/bubble.png) no-repeat 0 0;
}

Was zu diesem Ergebnis führt

Implementierung in WordPress

Das CSS ist einfach: Fügen Sie es einfach Ihrer theme’s style.css hinzu. Für das HTML müssen Sie die entsprechende Seite Ihres Themes öffnen, zum Beispiel index.php, und nach the_post() suchen. Sie müssen den folgenden Code hinzufügen, wo auch immer das Badge angezeigt werden soll

<div class="shield">
	<p class="date month<?php the_time('n'); ?>">
		<span><?php the_time('F'); ?></span> 
		<?php the_time('j'); ?>
		<span><?php the_time('S'); ?></span>
	</p>
	<div class="commentscloud">
		<?php comments_number('0', '1', '%'); ?>
	</div>
</div>

Auf diese Weise sollte es gut funktionieren. Ein Beispiel dafür, wie das aussieht, finden Sie auf meiner Website: Yoast – Websites optimieren.

 

Dieser Beitrag ist ein Gastbeitrag von

Joost (ausgesprochen Yoast, daher sein Domainname) de Valk ist ein bekannter WordPress Plugins Autor und Online-Marketeer. Sein Blog behandelt alle Themen rund um WordPress, SEO und Online-Marketing im Allgemeinen, und darüber hinaus betreibt er einen wöchentlichen WordPress-Newsletter.