web-dev-qa-db-fra.com

Stylings personnalisés pour les pages de catégorie

Existe-t-il un moyen d’afficher les styles d’une page différemment pour certaines catégories lors de la visualisation d’une page appartenant uniquement à cette catégorie?

categories
1
GSto

@EAMann a une excellente réponse si vous voulez différentes dispositions pour différentes catégories. OTOH Si vous souhaitez uniquement modifier le code CSS pour avoir, par exemple, une couleur de fond différente pour chaque catégorie , vous constaterez que la plupart des thèmes incluront le slug de catégorie en tant que CSS. class sur l’élément <body> et/ou éventuellement d’autres éléments HTML générés par le thème. (Et même si votre thème ne le permet pas, vous pouvez toujours ajouter cette fonctionnalité vous-même.)

Par exemple, le thème TwentyTen fait exactement cela; pour l'URL suivante:

http://example.com/category/category-1/

Voici à quoi ressemble l'élément <body>:

<body class="archive category category-category-1">

Sachant ce qui précède, vous pouvez ajouter les styles suivants au fichier style.css de votre thème pour créer des arrière-plans de couleurs différentes pour chaque page (je suis très simpliste ici bien sûr; votre code CSS réel serait certainement plus sophistiqué):

/* style.css */
body.category-category-1 {
  background-color: red;
}
body.category-category-2 {
  background-color: green;
}
body.category-category-3 {
  background-color: blue;
}

Tout ce que vous avez vraiment besoin de faire pour savoir si votre thème le fait ou non est de voir la source sur les pages de catégories qui vous intéressent et rechercher votre slug de catégorie.

Utiliser un thème pour enfants

Bien sûr, vous ne voulez probablement pas modifier le style.css de votre thème; vous voudrez probablement créer un thème . Voici quelques réponses où je parle de thèmes pour enfants:

Notez que tous les thèmes ne prennent pas en charge les thèmes enfants, Thesis étant un exemple notable. Dans le cas de ces thèmes, vous devrez approfondir vos recherches sur la manière dont ils sont étendus.

4
MikeSchinkel

Si vous le souhaitez, vous pouvez avoir un modèle différent pour chaque catégorie avec son propre ensemble de définitions de style. Vous pouvez ensuite attribuer un style différent à la page pour certaines catégories, mais uniquement lorsque vous affichez une page appartenant uniquement à cette catégorie.

Utilisez-les simplement dans votre thème:

  1. catégorie-slug.php
  2. category-ID.php
1
EAMann

Ce qu'Eric a dit Mais si vous souhaitez uniquement modifier le style, et non le balisage, il existe un moyen plus simple. Tant que votre thème inclut l'appel body_class () dans la balise body d'ouverture, WP ajoutera toutes sortes de points d'ancrage CSS utiles à votre page. Le balisage par défaut ajoutera les classes suivantes à l'élément body d'une archive de catégorie:

  • archiver
  • catégorie
  • catégorie-limace

que vous pouvez coiffer à votre guise. Un grand nombre de cadres de thèmes ajouteront des points d'ancrage encore plus utiles à votre classe body, bien que je ne puisse pas voir certains cas d'utilisation réels.

0
goldenapples