You are here:  Home » PHP » 使用CSS Sprites来美化你的WordPress发布日期

有没有想过如何超级风格你的博客的发布日期?我将在大约18分钟内向您展示如何使用CSS精灵进行此操作。

编者注:本文面向主题设计师。建议使用CSS和WordPress的先前知识。

你需要什么:

  • 一个图形程序(我使用Adobe Photoshop CS4)
  • 一个简单的文本编辑器

你是什么将在本教程中完成:

  • 您的博客帖子上的日期将使用CSS Sprites超级样式

让我们开始…

步骤#1

启动您的图形程序。你可以下载PSD或PNG模板来帮助我们的Sprite中所有日期的布局。

Step#2

基本上你想用几个月,几天和几年创建一个网格。正如您所看到的,我的网格在一列中有几个月,然后是两列中的天数,最后是一列中的垂直年份。在“网格”上获取日期后,您可以保存文件。提示:确保文本从上到下和从左到右等间隔。这使得当每个日期具有相同的空格时,数学运算更容易。

步骤#3 %%% %%关于编码…不要担心它真的很容易,特别是如果你使用我的PNG或已经使用过PSD文件(它包括保持你的“网格”漂亮和整洁的指南,然后你可以直接在这个步骤中将CSS代码剪切并粘贴到主题的样式表中而无需任何数学。)

CSS如下:

 / *日期精灵* /

  。发布日期 {%%%%%
  position:relative;
  宽度:66px;
position:relative;
  宽度:66px;
身高:60px;
  向左飘浮;%%%%%
  }
  。月日年 {%%%%%
  position:absolute;
  text-indent:-1000em;
  background-image:url(images / date_img.png);
  background-repeat:不重复;
  }
  .month {top:10px;左:0;宽度:33px;身高:30px;}
  .day {top:30px;左:0;宽度:33px;身高:30px;}
  .year {bottom:0;右:13px;宽度:20px;身高:60px;}
.m-01 {background-position:0 0px;}
  .m-02 {background-position:0 -30px;}

  .m-03 {background-position:0 -62px;}
  .m-04 {background-position:0 -94px;}
  .m-05 {background-position:0 -125px;}
  .m-06 {background-position:0 -155px;}
  .m-07 {background-position:0 -185px;}
  .m-08 {background-position:0 -217px;}
  .m-09 {background-position:0 -248px;}
  .m-10 {background-position:0 -279px;}
  .m-11 {background-position:0 -310px;}
  .m-12 {background-position:0 -341px;}
.d-01 {background-position:-51px 0;}
  .d-02 {background-position:-51px -27px;}

  .d-03 {background-position:-51px -57px;}
  .d-04 {background-position:-51px -91px;}
  .d-05 {background-position:-51px -122px;}
  .d-06 {background-position:-51px -151px;}
  .d-07 {background-position:-51px -185px;}
  .d-08 {background-position:-51px -214px;}
  .d-09 {background-position:-51px -249px;}
  .d-10 {background-position:-51px -275px;}
  .d-09 {background-position:-51px -249px;}
  .d-10 {background-position:-51px -275px;}
.d-11 {background-position:-51px -309px;}
  .d-12 {background-position:-51px -338px;}
  .d-13 {background-position:-51px -373px;}
  .d-14 {background-position:-51px -404px;}
  .d-15 {background-position:-51px -436px;}
  .d-16 {background-position:-51px -462px;}
  .d-17 {background-position:-100px -0px;}
  .d-18 {background-position:-100px -27px;}
  .d-19 {background-position:-100px -57px;}
  .d-20 {background-position:-100px -91px;}
  .d-21 {background-position:-100px -122px;}
  .d-22 {background-position:-100px -151px;}
  .d-23 {background-position:-100px -185px;}
  .d-24 {background-position:-100px -214px;}
  .d-25 {background-position:-100px -249px;}
  .d-26 {background-position:-100px -275px;}
  .d-27 {background-position:-100px -309px;}
  .d-28 {background-position:-100px -338px;}
  .d-29 {background-position:-100px -373px;}
  .d-30 {background-position:-100px -404px;}
  .d-31 {background-position:-100px -436;}

.y-2009 {background-position:-150px 0;}
  .y-2010 {background-position:-150px -60px;}
  .y-2011 {background-position:-150px -120px;}
  .y-2012 {background-position:-150px -180;}
  .y-2013 {background-position:-150px -240px;}
  .y-2014 {background-position:-150px -300px;}

说明:

。postdate – 设置整个日期的宽度和高度。在这种情况下,我们将使日期适合66px×60px。

。month,.day,。year – 设置组成我们的各个元素的宽度和高度整个日期精灵。我们的月份和天数是33px宽,30px高。这些年是33px宽,60px高。当你把这些元素组合在一起时,它们会形成一个66px宽,60px高的盒子。它还附加了我们在步骤#1中制作的图形,因此我们可以为Sprite中的每个元素定位它。

。m-01到.m-12 – 你猜对了!这些是我们的月份。 CSS的这一部分定位我们的图形以显示月份。如您所见,我将图像设置为根据图像上显示的位置在X Y轴上移动。找出每个月,每天或每年的左上角(0,0)位于较大图像上的最简单方法是打开Photoshop并选择选框工具。从左上角和右上角选择,直到您月,日或年的左上角,并注意指针使用信息面板的统计信息的位置。

。d-01到.d- 31 – 用于与.m-01 – .m-12完全相同的东西,除了它们用于天而不是月份。

。y-2009到.y-2014% %%%% – 与上述相同,我们多年来一直使用它们。 Step#4

Step#4

在WordPress中打开循环。 WordPress中的循环是显示您的博客帖子的页面。这通常是index.php页面。日期也显示在其他页面上,但本教程仅替换主循环中的日期。如果你完成本教程的这一部分,你就足够聪明,可以在其他文件中寻找和替换主题中日期的其他实例,例如single.php,page.php,archives.php等。

搜索循环中此行的内容:

lt;?php the_time(“F jS,Y”)?>

替换为以下行:

< div class =“踵“>
  < div class =“month m-<?php the_time(’m’)?>”><?php the_time(’M’)?>< / div>
  < div class =“day d-<?php the_time(’d’)?>”><?php the_time(’d’)?>< / div>
  < div class =“year y-<?php the_time(’Y’)?>”><?php the_time(’Y’)?>< / div>
< / div>

Step#5

上传您的图片,CSS和主题循环(index.php)。在您的博客上点击刷新(确保您在显示帖子的页面上)和Voila!你只是使用CSS sprites超级设置日期。

Todd Santoro Todd Santoro是他公司的主要和高级设计师 ToddSantoro.com Designs 。 Todd已经在网上工作了11年,并且在UI和平面设计方面表现出色。他喜欢关注细节并开发WordPress框架。你可以关注他 Twitter

评论被关闭。