notice

致江湖上的朋友:
　　欢迎您访问╃苍狼山庄╃，请使用侧边栏的搜索功能查找日志，希望能在这里找到您所需要的东西，使您在平淡之中充满喜悦。

Clang 出品，必属精品！ 我的地盘我做主！ 活着，真累！
本站域名：Http://ClangCN.Com/(点击加入收藏夹)
欢迎您再来，谢谢！！！
Clang 于2006年01月09日

02-10

21

如何为WordPress标题添加小日历效果？

2010年2月21日 | 分类: 程序代码 | 标签:

第一步、用photoshop等图形处理工具制作一个小日历效果的图标，一般为45*50，这个根据自己主题而定，上传到主题下的图片文件夹。

第二步、用EditPlus打开你所启用的主题的index.php文件。（ps:每次写文章，都要提到这一步，因为这步涉及到wordpress的编码问题，不得马虎。）找到标题这一行：

查看代码 PHP
1

<h2><a class="title" href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2>

在这一行前插入以下代码：

查看代码 PHP
1
2
3
4

<div class="contentdate">
	<h3><?php the_time('m'); ?> - <?php the_time('y'); ?></h3> 
	<h4><?php the_time('d'); ?></h4>
</div>

这两行的含义请参考：wordpress中如何调用时间及时间格式汇总

第三步、接下了就是通过强大的css来控制这个能够让你的页面焕发盎然生机的WordPress标题小日历效果了。打开主题style.css，在其中加入一下代码：

查看代码 CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

/*标题日历图标*/
 .contentdate {
    background: #FFFFFF url(img/date.gif);
    background-repeat: no-repeat;
    float: left;
    width: 40px;
    height: 45px;
    margin-right: 3px;
    padding: 0px;
}	
 .contentdate h3 {
    color: #FFFFFF;
    font-size: 11px;
    font-weight: normal;
    padding-top: 2px;
    text-align: center;
    margin: 0px;
    text-transform: uppercase;
}	
 .contentdate h4 {
    color: #999999;
    font-size: 18px;
    font-weight: bold;
    padding-top: 5px;
    margin: 0px;
    text-align: center;
}

搞定收工！

-------------------------End-------------------------

发表评论
本文的评论功能被关闭了.