如何在wordpress中做出如下样式的日期图标呢？

date_button

第一步，准备背景图片

用Photoshop类似的软件做出一张如下的图片：

date_button_template

第二步，在wordpress中调用日期

写出如下代码：

<div class="post-date">
<div class="month"><?php the_time('M') ?></div>
<div class="day"><?php the_time('d') ?></div>
</div>

如果你要使用上面的代码，自己用键盘敲出来，不要粘贴拷贝，这样引号部分会出错。下面我来解释php部分的代码是什么意思。

<?php the_time('M') ?>：调用月份
<?php the_time('d') ?>：调用日期

第三步，用CSS样式化

.post-date{float: left; display: inline; margin: 0 10px 0 0; background: url(images/date_button_template.gif) no-repeat;}

date_button_template.gif是刚才我们做好的背景图片的名字，它应该是放在images文件夹里面的，所以我们使用的路径是images/date_button_template.gif，这个路径一定要写对，要不图片显示不出来。

原文：WordPress Date Button

分享到：