WordPress : Modification de la mise en page en fonction du nombre de messages dans un widget

Bon alors je vais essayer d’expliquer ça du mieux que je peux. J’ai créé un widget qui extrait une image sélectionnée de la publication sur la page d’accueil en fonction de la catégorie. En ce moment, il attire 4 messages. J’aimerais avoir la possibilité d’ajouter 2, 3, 4 ou 6 messages. Je voudrais également modifier la mise en page en fonction du nombre de messages entrants. Est-il possible de n’afficher que 2, 3, 4 ou 6 messages et comment puis-je modifier la mise en page en fonction du nombre de messages entrants. Je pensais que cela ferait référence à une classe de conteneur dans le css pour chaque nombre de publications ou quelque chose dans ce sens. Tous les liens, tutoriels ou conseils seraient grandement appréciés! Merci, – Michel

Solution n°1 trouvée

CSS pur

Cela fournit une méthode CSS3 pour obtenir ce que vous voulez, avec un repli en place pour CSS2. Fondamentalement, vous avez un wrapper pour cibler vos éléments de publication, qui seront les seuls enfants directement dans ce wrapper (ou, au moins les seuls enfants d’un type de « tag » particulier, ici un div). Donc, quelque chose comme ce qui suit, seul le nombre d’enfants peut être 2, 3, 4 ou 6 (comme vous l’avez demandé).

HTML simple (il n’est pas nécessaire qu’il s’agisse d’ divéléments ; il suffit d’illustrer)

<div class="postWrapper">
  <div>This is a post</div>
  <div>This is the second post</div>
</div>

Définir le CSS2 par défaut

Pour IE7/8, ce sera l’ affichage par défaut, quel que soit le nombre de messages affichés dans ces deux navigateurs, en utilisant ce sélecteur :

.postWrapper > div { ... }

Définir le CSS3 fantaisie

Ceci est fait en fonction du nombre de messages et sera affiché dans tous les navigateurs CSS3. Il utilise cette série de sélecteurs, dans cet ordre : (nous utilisons ici la cascade à notre avantage) :

.postWrapper > div:nth-last-of-type(2),
.postWrapper > div:nth-last-of-type(2) ~ div {
   ... your two display css ...
}

.postWrapper > div:nth-last-of-type(3),
.postWrapper > div:nth-last-of-type(3) ~ div {
   ... your three display css ...
}

.postWrapper > div:nth-last-of-type(4),
.postWrapper > div:nth-last-of-type(4) ~ div {
   ... your four display css ...
}

.postWrapper > div:nth-last-of-type(6),
.postWrapper > div:nth-last-of-type(6) ~ div {
   ... your six display css ...
}

Ce que cela fait, c’est utiliser le :nth-last-of-type()sélecteur pour « compter à rebours » à travers le nombre de div enfant du wrapper, appliquer un style à celui -ci div, puis utiliser le combinateur frère général ~pour styliser tous les autres div .postWrapperqui suivent (théoriquement) en premier div. Il le fait pour les deux premiers en utilisant le :nth-last-of-type(2), mais si le wrapper en contient trois, le prochain ensemble de sélecteurs qui utilise :nth-last-of-type(3)remplace le (2)sélecteur précédent, et ainsi de suite. De cette façon, grâce à une série de css prioritaires dans la cascade, nous modifions nos paramètres pour le nombre d’éléments de publication.

Vous pouvez voir un échantillon de cette technique à des fins d’illustration dans ce violon .

REMARQUE : Étant donné que nous utilisons la cascade pour remplacer, il est impératif que vous vous assuriez de gérer tout css précédemment défini . Dans mon exemple de violon, notez comment j’ai mis un marginsur un groupe de quatre, mais ensuite je l’ai retiré sur un groupe de six. Si je n’avais rien mentionné margindans le groupe six (c’est-à-dire, pas de dépassement), alors les éléments 3-6 (mais pas 1-2) du groupe de six auraient eu une marge encore appliquée en fonction des paramètres précédents pour le groupe de quatre .