Browse > Home / Wordpress专题 / 【WP常用技巧翻译】创建漂亮的 Wordpress 日期按钮

| Subcribe via RSS

【WP常用技巧翻译】创建漂亮的 Wordpress 日期按钮

1 Star2 Stars3 Stars4 Stars5 Stars (1 votes, average: 4 out of 5)
Loading ... Loading ...
8月 3rd, 2008 Posted in Wordpress专题

原文地址: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/为你的图片文件夹。


作者信息: 关注互联网,关注IT,希望从事于专业网页设计工作,为目标努力中.


相关日志

12 Responses to “【WP常用技巧翻译】创建漂亮的 Wordpress 日期按钮”

  1. kukuNo Gravatar Says:

    你好,你前面的文章“【WP常用技巧翻译】使用自定义页面作为首页”显示不完全,我刷新了几遍都显示不完整,具体可以看看我的截图:
    http://i3.6.cn/cvbnm/c0/f8/a8/609a019ff37bddcb4ed36449d18b65c1.jpg

    希望可以调整一下

    [回复]

    hitigonNo Gravatar Reply:

    您好!我这边显示正常,不知道是不是您网络的问题。但还是十分感谢您的关注,呵呵。

    [回复]

    kukuNo Gravatar Reply:

    我这里用IE不行,我现在用ff试了一下 发现可以了 呵呵

    [回复]

    hitigonNo Gravatar Reply:

    呵呵,抱歉了~我知道IE下有错误的,但经常使用了Firefox所以一时忘记了。因为准备自己做主题,所以一直没有来解决这个问题。实在抱歉,谢谢哦


  2. WordPress 常用技巧40+则,诚邀您的参与翻译 - WordPress中文站 Says:

    [...] 创建漂亮的 Wordpress 日期按钮(by [...]


  3. 给 WordPress 博客创建漂亮的日期按钮 - WordPress中文站 Says:

    [...] WordPress Data Button 一文对此进行了详细的介绍,图文并茂并包含代码的详细解释。邵华白首博客翻译了此文,感兴趣的网友请浏览:【WP常用技巧翻译】创建漂亮的 Wordpress 日期按钮。 [...]


  4. atlinuxNo Gravatar Says:

    老大,第一段代码插在哪个文件的哪个部分?请指教。

    [回复]

    hitigonNo Gravatar Reply:

    插在模板的页面,可以是首页index.php 独立日志页面single.php,放在认为合适的地方

    [回复]


  5. WordPress 常用技巧40+则 : 从1981年2月开始的人生 Says:

    [...] 创建漂亮的 Wordpress 日期按钮(by [...]


  6. WordPress 常用技巧40+则 - 从1981年2月开始的人生 Says:

    [...] 创建漂亮的 Wordpress 日期按钮(by [...]


  7. 浊风No Gravatar Says:

    这些都是你自己翻译的吗?
    这些外语文章都是自己找的?

    [回复]

    hitigonNo Gravatar Reply:

    这个是Wpchina的翻译作业 呵呵

    [回复]


Leave a Reply