博客的日期徽章和评论气泡

当您的博客变得越来越大时，您会遇到的一件事是，您需要将更多信息压缩到更小的空间中，才能显示您想要显示的所有信息。我为此做的一件事是添加了一个日期图标，然后在其上添加一个气泡，其中包含评论数量。

如您所见，此“盾牌”显示了日期、月份和评论数量。本文将向您展示如何实现这种效果！

首先，我使用的是由 Marek Sotak 制作的 日历图标。我还基于他的想法创建了特定月份的图像，因此您不必使用文本将月份添加到图像中，从而使日历图标的布局更加美观。

我们将从创建以下这样的日历图标开始

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

使用以下 CSS

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

这将创建日期框，现在我们需要为 12 个月中的每一个创建一条线

.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; }

完成之后，图像将呈现如下

现在您可能已经注意到，到目前为止的 HTML 代码非常简单，这是 Marek 的构建方式，但它可访问性并不强。虽然如果您使用的是支持 CSS 的浏览器，它就很有意义，但如果您没有使用，它就没有那么有意义了。因此我们将将其更改为以下内容

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

并将此添加到 CSS 中

p.date span { display: none; }

添加评论气泡

现在我们将进入最关键的部分：添加一个带有评论数量的气泡。要正确地执行此操作，我们需要在日期周围添加一个边界框，我们将其称为“盾牌”，并添加一个名为 commentscloud 的 div。它将如下所示

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

我们对 shield div 只做一件事，就是为其设置 position: relative;，这样我们就可以在 commentscloud 上使用 position: absolute;。完整的 CSS 如下所示

.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;
}

呈现结果如下

在 WordPress 中实现

CSS 非常简单：只需将其添加到主题的 style.css 中即可。对于 HTML，您需要打开主题的相应页面，例如 index.php，并查找 the_post()。您需要在需要显示徽章的位置添加以下代码

<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>

这样应该可以正常工作。要查看此外观的示例，请访问我的网站：Yoast - 网站调整。

 

这篇文章是 Joost 的客座文章

Joost（发音为 Yoast，因此他的域名）de Valk 是一位知名的 WordPress 插件 作者和在线营销人员。他的博客涵盖了 WordPress、SEO 和在线营销方面的所有内容，此外，他还运营着 每周 WordPress 新闻稿。