Article en plusieurs parties : 1 2 3 4 5
Sandbox transmute les marqueurs conditionnels en classes CSS
L’idée de Scott et Andy est de générer des intitulés de classes en fonction du contexte dans lequel un billet peut apparaitre. Pour celà, le fichier functions.php présent à la racine du thème Sandbox est mis à contribution pour produire des classes :
-
Dans la balise body : sandbox_body_class()
Les classes disponibles dans le body sont aussi nombreuses que variées. On trouve par exemple les classes générées à partir des marqueurs conditionnels comme .archive {…} d’après is_archive(), ou la classe .page {…} d’après is_page(). La spécificité des classes va jusqu’au numéro du billet .postid-69 {…} au cas où vous voudriez donner une style spécial à quelques billets particuliers en dehors de leur appartenance à une rubrique… D’autres classes dépendent du calendrier : il devient possible de styler tous les billets paraissant une année, un mois, un jour ou une heure précise.Echantillons de classes dynamiques pour le body
De gauche à droite : la classe wordpress suivie des classes concernant l’année, le mois, le jour et l’heure d’affichage de la page. home indique que nous sommes sur la page d’accueil, et loggedin que je suis un utilisateur enregistré :<body class="wordpress y2007 m05 d31 h18 home loggedin">
Voici maintenant la même balise body après que j’ai cliqué sur la catégorie Action citoyenne. A la place de home, on trouve la classe category suivi de l’intitulé de la catégorie en question.<body class="wordpress y2007 m05 d31 h18 archive category category-action-citoyenne loggedin">
Pour finir, voici les archives par date. Remarquez la classe h19 qui vient d’apparaitre à 19h00 !<body class="wordpress y2007 m05 d31 h19 archive date loggedin">
Je vous l’accorde, il faut beaucoup d’imagination pour trouver un style différent pour toutes ces classes disponibles. Quand je vous disais qu’il y en avait une palanquée… ;) -
Dans la balise div qui contient le billet : sandbox_post_class()
A côté des classes permettant de styler l’ensemble des billets comme .hentry {…} ou .post {…}, il existe des classes pour les billets protégés par un mot de passe ou ceux d’un auteur en particulier .author-br1o {…}. Il y a des classes plus inattendues comme .p[n] {…} qui permet d’atteindre un billet en fonction de son numéro d’ordre dans la page (remplacez [n] par le numéro du billet que vous visez). On y retrouve, comme pour le body, des classes en fonction du calendrier.Un exemple concernant les classes associées aux billets
Outre hentry évoquée plus haut, la classe p1 nous signale qu’il s’agit du premier billet de la page. Elle est suivie par post (qui joue le même rôle que hentry) et de publish (pour l’état du billet). Les autres classes devraient vous être familières. Notez que la classe h09 concerne l’heure de publication du billet et non pas celle de son affichage.<div id="post-1" class="hentry p1 post publish author-admin category-uncategorized y2007 m05 d16 h09">
-
Dans les commentaires : sandbox_comment_class()
En ce qui concerne les zones de commentaires (incluant les Trackbacks et les Pingbacks), cette fonction ajoute des classes comme .alt {…} pour appliquer des CSS pour les commentaires impairs, ou .comment-author-john {…} pour les utilisateurs enregistrés. Sachant qu’il est possible de demander une inscription au visiteur pour qu’il puisse laisser un commentaire, il peut s’avérer utile de prévoir un style par utilisateur.Dernier échantillon avec les commentaires
Les classes affectées aux commentaires sont appliquées à chaque éléments de liste, chaque fois qu’un commentaire est publié. A l’exception peut-être de byuser qui s’adresse à n’importe quel utilisateur enregistré et de bypostauthor lorsque l’auteur du commentaire est aussi l’auteur du billet, vous devriez pouvoir vous débrouiller tout seul ;)<li id="comment-550" class="comment c1 byuser comment-author-admin bypostauthor c-y2007 c-m05 c-d31 c-h20">
Cette floppée de classes permet des fantaisies qui ne seraient possibles autrement qu’à l’aide de contorsions douloureuses. Finalement, c’est à nous d’inventer les sites qui vont avec ! Mais avoir des classes à gogo est une chose. Ecrire un code HTML de qualité en est une autre.
Allez, soyez CHIC »
Article en plusieurs parties : Page précédentePage suivante
PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car Il n'y pas d'amour, il n'y a que des preuves d'amour
(Jean Cocteau) ;) Merci d'avance.
Merci pour cet excellent article, qui est très clair, contrairement à ce que tu semblais croire.
1) J’en ai appris pas mal sur les microformats,
2) Je cherchais justement un thème pour WP, finalement je réaliserais le mien..
Par ailleurs, ca fait un petit moment que je t’ai ajouté dans mon agrégateur RSS, j’en profite pour te remercier pour la qualité de tes articles.
Article de qualité en effet, félicitations. Très instructif et agréable à lire.
Merci à tous les deux… Les sujets sont tellement vastes que j’avais peur de m’enliser moi-même :p
Excellent Billet, je suis tombé dessus alors que je cherchais de la doc sur sandbox dans Google! moi aussi j’installe votre fil rss dans mon agregateur! @+
Merci de nous faire part de vos informations WordPress.
merci pour les informations très intéressantes
Article de qualité, de l’information dettagliate.grazie
la créativité sur le Web est vraiment important, eprchè le web propose tout mais la qualité est effectué par l’attention au détail
sont de plus en plus convaincus que la créativité est le seul mode d’émerger, notamment dans la perspective de miles de l’Internet où tout est très plat
un article très intéressant, félicitations et bon travai
très beau, félicitations!
congratulations for the blog, which I would give just a little more color! I love the creativity, I think an essential step, the only way to emerge