1. WP-admin.cn首页
  2. WordPress技巧

使用CSS Sprites来美化你的WordPress发布日期

WordPress技巧 21

有没有想过如何超级风格你的博客的发布日期？我将在大约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 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 Todd Santoro是他公司的主要和高级设计师 ToddSantoro.com Designs 。 Todd已经在网上工作了11年，并且在UI和平面设计方面表现出色。他喜欢关注细节并开发WordPress框架。你可以关注他 Twitter 。

标签：, ,

上一篇：

下一篇：

相关推荐

发表回复

房先生
我们将24小时内回复。
2024-09-30 06:08:31
您好，有任何疑问请与我们联系！
您的工单我们已经收到，我们将会尽快跟您联系！
[加我微信]
chaoneo
注：点击复制微信号并打开微信APP，添加好友后进行聊天。
[电话联系]
13585372227
[电子邮件]
chaoneo@163.com
取消

选择聊天工具：