Hoy Drita de CoTTonMouTh y TecnoCHICA. Me ha pedido ayuda con el theme que esta preparando para su web, y gracias a sus dotes «seductoras» y mis ganas de esciribir ha nacido la idea de este post.
Drita, quiere poner las fechas de sus posts de igual forma que están puestos ahora aqui en aNieto2k, osea que paso a paso vamos a ver como montar un sistema de templates (rollito calendario) para WordPress.
¿Que buscamos?
Exactamente lo que buscamos es personalizar un poco más nuestro theme y darle un toque distino a nuestra web. Yo creo que incluso de esta forma la fecha se ve más clara e intuitiva. Además de darle un toque fresco e innovador al theme.
¿Como hacerlo?
Pues lamentablemente tendremos que ponernos a picar código aunque os aseguro que es muy poco.
Primero tenemos que ir a los ficheros de theme donde se muestra la fecha, generalmente el index.php y el single.php, aunque hay otros themes que usan el home.php o theloop.php (como es mi caso) esto depende del theme. Una vez ubicado el lugar donde vamos a cambiar la fecha nos ponemos manos a la obra.
WordPress usa una serie de funciones con las cuales permite mostrar la fecha de nuestras entradas. Para ello tenemos:
the_time('d');Que se encarga de mostrar la hora en el formato que pasemos por parametro. Esta función requiere estar introducida en el Loop de posts.
the_date('format', 'before', 'after', echo);Exactamente la misma función, solo que si hay varios posts en el mismo día únicamente mostrará la fecha del último post creado.
Una vez conocidas las formas de mostrar las fechas vamos manos a la obra. Seguramente el fichero index.php de nuestro theme tenga un línea con algo parecido a esto.
<p>Fecha: <?php the_time('F j, Y'); ?></p>Esto nos mostrará la fecha en formato December 2, 2004, y nosotros necesitamos mostrarla de una forma algo diferente, para ello haremos uso de las propiedades de la función date() de PHP.
Según la especificación de PHP, necesitaremos indicar con la letra M para una representación textual corta de un mes, tres letras. Y d para el día del mes, 2 dígitos con ceros iniciales o j para hacerlo sin los ceros iniciales (yo lo prefiero asi).
Reemplazamos la línea que se encargue de montar la fecha por lo siguiente.
<acronym class="published" title="<?php the_time('F jS, Y'); ?>">
<span class="pub-month"><?php the_time('M'); ?></span>
<span class="pub-date"><?php the_time('j'); ?></span>
</acronym>Utilizamos <acronym></acronym> por que la fecha que estamos formando es un acrónimo de la fecha larga que queremos representar, esto es por ser un poco semántico, por que se puede usar cualquier elemento.
Ahora nos falta añadir en nuestro style.css la definición del aspecto de las clases que hemos usado en nuestras fechas.
.published {
display:block;
text-align: center;
float:left;
span-family: Arial, Helvetica, sans-serif;
border-bottom:none;
background:url(clip-bottom.png)
right bottom no-repeat;
width:2.2em;
}
.pub-month {
display:block;
span-size: .9em;
margin:0;
padding:0;
padding-top:12px;
background:url(clip-top.png)
center top repeat-x;
}
.pub-date {
display:block;
span-size:1.4em;
margin:0;
padding:0;
}En este ejemplo utilizan dos imagenes clip-top.png y clip-bottom.png. Yo las he respetado por que me gustan como quedan, pero cada uno tiene aquí su mano para personalizarlo más aún, al igual que los atributos del CSS, ya que pueden personalizarse y adaptar sin ningún problema en tamaño de las fuentes, la ubicación del calendarío,… la imaginación es el tope.
Quizas nos quede tener que retocar las CSS de nuestro post para que encaje perfectamente en nuestro post, pero depende de cada theme y de cada persona, asi que ahi habrá que dedicarle un rato para ver donde y como colocarlo.
15 comentarios, 12 referencias
+
#