【WP常用技巧翻译】创建漂亮的 Wordpress 日期按钮
(1 votes, average: 4.00 out of 5)
Loading ...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/为你的图片文件夹。
TAG标签：wordpress专题, WP技巧, WP设计, 翻译
12 条留言我要留言 »
1 - kuku | 2008-08-05 at 8:44 上午
你好，你前面的文章“【WP常用技巧翻译】使用自定义页面作为首页”显示不完全，我刷新了几遍都显示不完整，具体可以看看我的截图：
http://i3.6.cn/cvbnm/c0/f8/a8/609a019ff37bddcb4ed36449d18b65c1.jpg
希望可以调整一下
2 - hitigon | 2008-08-05 at 12:02 下午
您好！我这边显示正常，不知道是不是您网络的问题。但还是十分感谢您的关注，呵呵。
3 - kuku | 2008-08-05 at 10:04 下午
我这里用IE不行，我现在用ff试了一下 发现可以了 呵呵
4 - hitigon | 2008-08-05 at 10:22 下午
呵呵，抱歉了～我知道IE下有错误的，但经常使用了Firefox所以一时忘记了。因为准备自己做主题，所以一直没有来解决这个问题。实在抱歉，谢谢哦
5 - atlinux | 2008-08-20 at 9:24 下午
老大，第一段代码插在哪个文件的哪个部分？请指教。
6 - hitigon | 2008-08-20 at 9:41 下午
插在模板的页面，可以是首页index.php 独立日志页面single.php，放在认为合适的地方
7 - 浊风 | 2008-10-17 at 3:47 上午
这些都是你自己翻译的吗？
这些外语文章都是自己找的？
8 - hitigon | 2008-10-17 at 2:45 下午
这个是Wpchina的翻译作业 呵呵
Trackbacks