Usa sprites CSS para embellecer las fechas de publicación de WordPress

 

¿Alguna vez te has preguntado cómo hacer que la fecha de publicación de tu blog sea increíble? Te mostraré cómo hacer esto con sprites CSS en aproximadamente 18 minutos.

Nota del editor: esta publicación está dirigida a diseñadores de temas. Se recomiendan conocimientos previos de CSS y WordPress.

¿Qué necesitarás?

  • Un programa de gráficos (yo uso Adobe Photoshop CS4)
  • Un editor de texto simple

Lo que logrará en este tutorial:

  • Los datos en las publicaciones de tu blog están súper diseñados usando sprites CSS

Vamos a empezar…

Paso 1

Inicie su programa de gráficos. Puede descargar una plantilla PSD o PNG para facilitar el diseño de todos los datos en nuestro sprite.

paso 2

Básicamente, desea crear una cuadrícula de meses, días y años. Como puede ver, mi cuadrícula tiene los meses en una columna, luego los días en dos columnas y finalmente los años en una columna verticalmente. Una vez que tenga sus datos en la «cuadrícula», puede guardar el archivo. Sugerencia: asegúrese de que el texto esté espaciado uniformemente de arriba a abajo y de izquierda a derecha. Esto facilita el cálculo cuando todas las fechas tienen el mismo espacio en blanco.

paso 3

Vamos a codificar … no te preocupes, es muy fácil, especialmente si usaste mi PNG o usaste el archivo PSD (tiene pautas para mantener tu «cuadrícula» ordenada, y luego puedes cortar el código CSS y pegue este paso directamente en la hoja de estilo de sus temas sin matemáticas).

El CSS es el siguiente:

/ * Fecha Sprite * /
.por fecha {
Posición: relativa;
Ancho: 66px;
Alto: 60px;
flotador izquierdo;
}}
.Mes día año {
Posición: absoluta;
Sangría: -1000em;
Imagen de fondo: URL (images / date_img.png);
Repetición de fondo: sin repetición;
}}
Mes {top: 10px; izquierda: 0; Ancho: 33px; Alto: 30px;}
.day {top: 30px; izquierda: 0; Ancho: 33px; Alto: 30px;}
. Año {abajo: 0; derecha: 13px; Ancho: 20px; Alto: 60px;}

.m-01 {posición de fondo: 0 0px;}
.m-02 {posición de fondo: 0 -30px;}
.m-03 {posición de fondo: 0 -62px;}
.m-04 {posición de fondo: 0 -94px;}
.m-05 {posición de fondo: 0 -125px;}
.m-06 {posición de fondo: 0 -155px;}
.m-07 {posición de fondo: 0 -185px;}
.m-08 {posición de fondo: 0 -217px;}
.m-09 {posición de fondo: 0 -248px;}
.m-10 {posición de fondo: 0 -279px;}
.m-11 {posición de fondo: 0 -310px;}
.m-12 {posición de fondo: 0 -341px;}

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

.y-2009 {posición de fondo: -150px 0;}
.y-2010 {posición de fondo: -150px -60px;}
.y-2011 {posición de fondo: -150px -120px;}
.y-2012 {posición de fondo: -150px -180;}
.y-2013 {posición de fondo: -150px -240px;}
.y-2014 {posición de fondo: -150px -300px;}

Explicación:

.por fecha – Especifica el ancho y alto de toda la fecha. En este caso, encajamos nuestra fecha en una caja de 66 x 60 píxeles.

.Mes día año – Especifica el ancho y alto de los elementos individuales que componen nuestro sprite para toda la fecha. Nuestros meses y días tienen 33 píxeles de ancho y 30 píxeles de alto. Los años tienen 33 píxeles de ancho y 60 píxeles de alto. Cuando junta estos elementos, se crea un cuadro de 66 píxeles de ancho y 60 píxeles de alto. También agrega el gráfico que creamos en el paso 1 para que podamos colocarlo para cada elemento individual en el sprite.

.m-01 a .m-12 – ¡Lo adivinaste! Estos son nuestros meses. Esta parte del CSS posiciona nuestro gráfico para mostrar los meses. Como puede ver, configuré la imagen para que se mueva en un eje XY dependiendo de dónde aparezca en la imagen. La forma más fácil de averiguar dónde está la esquina superior izquierda (0,0) de cada mes, día o año en la imagen más grande es abrir Photoshop y seleccionar la herramienta Marco rectangular. Seleccione la parte superior izquierda, inferior y superior derecha hasta justo encima de la esquina superior izquierda de su mes, día o año y observe dónde su puntero usa las estadísticas de la ventana de información.

.d-01 a .d-31 – Usados ​​exactamente igual que .m-01 – .m-12, excepto que se usan para los días en lugar de los meses.

.y-2009 a .y-2014 – Como arriba, solo los usamos durante años.

Etapa 4

Abre el ciclo en WordPress. El bucle en WordPress son las páginas en las que se mostrarán las publicaciones de su blog. Esta suele ser la página index.php. Los datos también se muestran en otras páginas, pero este tutorial solo reemplaza los datos en el ciclo principal. Para cuando llegue a esta sección del tutorial, será lo suficientemente inteligente como para buscar y reemplazar las otras instancias de fechas en su tema en otros archivos como single.php, page.php, archives.php, etc. .

En su ciclo, busque algo en estas líneas:

<? php the_time (‘F jS, Y’)?>

Reemplazar con estas líneas:

<? php the_time (‘d’)?> </ div>

<? php the_time (‘Y’)?> </ div>
</ div>

Paso 5

Sube tu imagen, CSS y el bucle de tus temas (index.php). Haga clic en Actualizar en su blog (asegúrese de estar en la página que muestra las publicaciones) y ¡listo! Acaba de diseñar sus datos con estilo con sprites CSS.

Embellece tus datos de WordPress con sprites CSS