韶华白首

原文地址：WordPress Date Button

WordPress 常用技巧40+则，诚邀您的参与翻译

翻译者：hitigon

转载请注明原文链接，谢谢合作

我不知道我的那些日期按钮怎么样，但似乎你们都很喜欢。是的，今天，我们将来学习如何为WordPress创建一个漂亮的日期按钮。总共有三步简单的步骤：

第一步：输入代码

（请不要复制粘贴，输入到模板中）

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

为了符合结构格式，在源代码中应该如下图所示：

这些代码的意义解释：

<div class=”post-date”> – 我正在建立一个盒模型或者一个被命名为”post-date”的DIV(层标签)。当然我也可以将它命名为“little-potato.”。

<div class=”post-month”> – 在post-month盒模型中，建立一个现实月份的盒模型。

<?php the_time(’M’) ?> – 这里我使用了php函数the_time(‘M’)，用来调用缩写的月份值。例如：六月June的英文缩写为JUN。但在我的日期按钮例子中，并没有使用JUN代替JUNE，这是因为我并没有调用函数缩写版本的代码。

</div> – 结束月份的盒模型。（即关闭DIV标签-译者注）

<div class=”day”> – 建立日期盒模型。

<?php the_time(’d’) ?> – 使用PHP函数the_time(‘d’)，用来调用日期值，会显示成两位数值。例如：03

</div> – 结束日期盒模型。

</div> – 没有任何内容可以添加到我的日期按钮中了，所以这里我也结束（关闭）了post-date盒模型（或者称DIV标签），因为我必须按顺序关闭所有打开的标签。

（更多关于date的显示选项，请访问php.net）

第二步：建立背景图片

你需要某些设计类软件用来设计你的日期按钮的背景图片，如Photoshop，下图是我的日期按钮背景图片：

第三步：为其创建样式

这一步需要你了解一点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/为你的图片文件夹。