使用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”）？＆gt;
替换为以下行：
＆lt; div class =“踵“＆GT;
＆lt; div class =“month m-＆lt;？php the_time（’m’）？＆gt;”＆gt;＆lt;？php the_time（’M’）？＆gt;＆lt; / div＆gt;
＆lt; div class =“day d-＆lt;？php the_time（’d’）？＆gt;”＆gt;＆lt;？php the_time（’d’）？＆gt;＆lt; / div＆gt;
＆lt; div class =“year y-＆lt;？php the_time（’Y’）？＆gt;”＆gt;＆lt;？php the_time（’Y’）？＆gt;＆lt; / div＆gt;
＆lt; / div＆gt;
Step＃5
上传您的图片，CSS和主题循环（index.php）。在您的博客上点击刷新（确保您在显示帖子的页面上）和Voila！你只是使用CSS sprites超级设置日期。
Todd Santoro是他公司的主要和高级设计师 ToddSantoro.com Designs 。 Todd已经在网上工作了11年，并且在UI和平面设计方面表现出色。他喜欢关注细节并开发WordPress框架。你可以关注他 Twitter 。
有没有想过如何超级风格你的博客的发布日期？我将在大约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”）？＆gt;
替换为以下行：
＆lt; div class =“踵“＆GT;
＆lt; div class =“month m-＆lt;？php the_time（’m’）？＆gt;”＆gt;＆lt;？php the_time（’M’）？＆gt;＆lt; / div＆gt;
＆lt; div class =“day d-＆lt;？php the_time（’d’）？＆gt;”＆gt;＆lt;？php the_time（’d’）？＆gt;＆lt; / div＆gt;
＆lt; div class =“year y-＆lt;？php the_time（’Y’）？＆gt;”＆gt;＆lt;？php the_time（’Y’）？＆gt;＆lt; / div＆gt;
＆lt; / div＆gt;
Step＃5
上传您的图片，CSS和主题循环（index.php）。在您的博客上点击刷新（确保您在显示帖子的页面上）和Voila！你只是使用CSS sprites超级设置日期。
Todd Santoro是他公司的主要和高级设计师 ToddSantoro.com Designs 。 Todd已经在网上工作了11年，并且在UI和平面设计方面表现出色。他喜欢关注细节并开发WordPress框架。你可以关注他 Twitter 。
