使用CSS Sprites美化您的WordPress發布日期


有沒有想過如何為博客的發布日期設置樣式? 我將向您展示如何在約18分鐘的時間內使用CSS Sprites完成此操作。

社論說明:此文章面向主題設計師。 建議先了解CSS和WordPress。

您將需要什麼:

  • 圖形程序(我使用Adobe Photoshop CS4)
  • 一個簡單的文本編輯器

您將在本教程中完成什麼:

  • 您博客文章中的日期將使用CSS Sprites進行超級樣式化

讓我們開始吧…

第1步

啟動您的圖形程序。 您可以下載PSD或PNG模板,以幫助安排Sprite中所有日期的佈局。

第2步

基本上,您想使用月,日和年來創建網格。 如您所見,我的網格在一月中有月份,然後在兩列中有幾天,最後在一列中垂直有年。 在“網格”上獲取日期後,即可保存文件。 提示:請確保您的文本上下左右均等距。 當每個日期具有相同的空白時,這使數學計算變得容易。

第三步

編寫代碼…別擔心,這真的很容易,尤其是當您使用我的PNG或使用PSD文件時(它包括使“網格”保持整潔美觀的準則,此外,您還可以在其中剪切並粘貼CSS代碼)這一步無需任何數學就可以直接進入主題的樣式表。)

CSS如下:

/ *日期精靈* /
。發布日期 {
職位:相對
寬度:66像素;
高度:60px;
向左飄浮;
}
。月日年 {
位置:絕對;
文字縮進:-1000em;
背景圖片:url(images / date_img.png);
背景重複:不重複;
}
.month {頂部:10像素; 左:0; 寬度:33px; 高度:30像素;}
.day {頂部:30px; 左:0; 寬度:33px; 高度:30像素;}
.year {bottom:0; 右:13px; 寬度:20px; 高度:60像素;}

.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 {背景位置:0 -155px;}
.m-07 {背景位置:0 -185px;}
.m-08 {背景位置:0 -217px;}
.m-09 {背景位置:0 -248px;}
.m-10 {背景位置:0 -279px;}
.m-11 {背景位置:0 -310px;}
.m-12 {background-position:0 -341px;}

.d-01 {背景位置:-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 {背景位置:-51px -185px;}
.d-08 {background-position:-51px -214px;}
.d-09 {背景位置:-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 {背景位置:-100px -275px;}
.d-27 {背景位置:-100px -309px;}
.d-28 {背景位置:-100px -338px;}
.d-29 {background-position:-100px -373px;}
.d-30 {background-position:-100px -404px;}
.d-31 {background-position:-100px -436;}

.y-2009 {背景位置:-150px 0;}
.y-2010 {背景位置:-150px -60px;}
.y-2011 {背景位置:-150px -120px;}
.y-2012 {背景位置:-150px -180;}
.y-2013 {背景位置:-150px -240px;}
.y-2014 {背景位置:-150px -300px;}

說明:

。發布日期 –設置整個日期的寬度和高度。 在這種情況下,我們將使日期適合在66px x 60px的框中。

。月日年 –設置組成我們整個日期Sprite的各個元素的寬度和高度。 我們的月份和日期寬33像素,高30像素。 年寬33像素,高60像素。 當您將這些元素放在一起時,它們會形成一個寬66像素,高60像素的框。 它還附加了我們在步驟1中製作的圖形,因此我們可以將其放置在Sprite中的每個單獨元素上。

.m-01至.m-12 – 你猜到了! 這是我們的幾個月。 CSS的這一部分將圖形放置在顯示月份的位置。 如您所見,我根據圖像在圖像上的位置將圖像設置為在XY軸上移動。 找出較大的圖像上每個月,日或年的左上角(0,0)的最簡單方法是打開Photoshop並選擇“選取框”工具。 從左上方,右上方,月份,日期或年份的左上角上方進行選擇,並註意指針在哪裡使用信息面板的統計信息。

.d-01至.d-31 –與.m-01 – .m-12完全相同,只是用於日期而不是月份。

.y-2009至.y-2014 –與上述相同,只是我們使用了多年。

步驟4

在WordPress中打開循環。 WordPress中的循環是顯示您博客文章的頁面。 這通常是index.php頁面。 日期也會顯示在其他頁面上,但是本教程僅替換主循環中的日期。 如果您已進入本教程的這一部分,您將足夠聰明地在其他文件(例如single.php,page.php,archives.php等)中查找並替換主題中日期的其他實例。

在循環中沿著這條線搜索內容:

替換為這些行: