Pluxopolis

Comment afficher la date d'un article au format J mois AAAA

---

Rédigé par jack le 23 avril 2014 2 commentairese

La fonction artDate() de la classe plxShow permet d'afficher la date de publication d'un article. Exemple:

$plxShow->artDate('#num_day #month #num_year(4)');

La variable #num_day permet d'afficher le jour de publication au format JJ. Il n'est pas possible de masquer le 0 significatif à gauche lorsque le jour de publication est inférieur à 10.
Impossible donc d'avoir 6 avril 2014 au lieu de 06 avril 2014.

Voici donc une astuce à base de css pour contourner ce problème. Tout d'abord commençons par revoir le code permettant d'afficher la date de publication des articles.
Utilisez cette syntaxe:

<time datetime="<?php $plxShow->artDate('#num_year(4)-#num_month-#num_day'); ?>">
	<?php $plxShow->artDate('#num_day #month #num_year(4)'); ?>
</time>

L'astuce ici est d'entourer la date affichée par une balise <span>, pour laquelle on y ajoute un attribut data-content.
L'attribut data-content est renseigné avec la date de publication de l'article au format JJMMAAAA.

L'idée maintenant est, grâce au css, d'aller tester le contenu de data-content.
Si le premier caractère est un zéro, on va masquer le premier caractère de la balise <span>.

Pour cela, éditez le fichier css de votre thème et rajoutez les lignes suivantes:

time span[data-content^="0"]:first-letter  {
	color: transparent;
	font-size: 0;
}
time span { 
	display: inline-block; 
}

Voilà, maintenant les 0 ne seront plus affichés. Rien de plus à utiliser.

Explications

J'ai utilisé ici 2 notions css: le selecteur d'attribut de la forme E[foo~="bar"] et :first-letter

E[foo^="bar"] signifie tout élément E dont la valeur de l'attribut "foo" commence exactement par la chaîne "bar".

Dans notre cas:

span[data-content^="0"] signifie tout élément de la balise span dont la valeur de l'attribut "data-content" commence par "0" (0 est la valeur significative du jour de publication de l'article que l'on souhaite ne pas afficher)

:first-letter permet d'accèder à la première lettre formatée d'un élément, ici la date affichée entre <span> et </span>.

Pour masquer le 0 il ne reste plus qu'à changer la couleur et réduire la taille du caractère pour qu'il ne soit plus visible.

	color: transparent;
	font-size: 0;

NB: :first-letter ne peut être utiliser qu'avec un conteneur de type block. En d'autres termes :first-letter ne fonctionne pas avec une balise span qui est de type inline. C'est pour cela qu'il est nécessaire d'utiliser les lignes suivantes

time span { 
	display: inline-block; 
}

Pour plus d'information sur les balises css utilisées, voilà de la lecture sur les sélecteurs d'attribut.

DClassé dans : PluXml ,Mots clés : Astuce, Css, Dates, Thème

A propos de l'auteur, jack:

Webmestre de PluXopolis de 2018 à Avril 2023.

2 commentaires

rFil RSS des commentaires de cet article