原文地址:WordPress Date Button

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

翻译者:hitigon

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

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

date button

第一步:输入代码

(请不要复制粘贴,输入到模板中)

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

为了符合结构格式,在源代码中应该如下图所示:
date_button_codes.gif

这些代码的意义解释:

<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,下图是我的日期按钮背景图片:

date_button_template.gif

第三步:为其创建样式

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

本文地址:【WP常用技巧翻译】创建漂亮的 Wordpress 日期按钮

TAG标签:, , ,

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

  1. WordPress 常用技巧40+则,诚邀您的参与翻译 - WordPress中文站
  2. 给 WordPress 博客创建漂亮的日期按钮 - WordPress中文站
  3. WordPress 常用技巧40+则 : 从1981年2月开始的人生
  4. WordPress 常用技巧40+则 - 从1981年2月开始的人生

必填

必填,绝不公开

  •  

    2009年七月
    « 六    
     12345
    6789101112
    13141516171819
    20212223242526
    2728293031