Ce que vous allez créer

Dans le tutoriel précédent, je vous ai montré comment styliser les messages de votre page de blog principale en fonction de leur catégorie, en créant un code de couleur par catégorie..

Un grand nombre de sites qui utilisent cette technique vont également plus loin en ajoutant un style distinct à chaque section de leur site, de manière à correspondre au style de la page principale du blog ou de la page d'accueil. Vous pouvez simplement utiliser un jeu de couleurs simple ou ajouter un style complètement différent à chaque section, avec éventuellement un logo ou une marque différente pour différentes parties de votre organisation, ou même une présentation différente..

Un exemple est le site Web du London Times, qui utilise une couleur différente pour chaque section de son site. La page d'accueil utilise ces couleurs dans une bannière au-dessus de chaque message, comme le montre la capture d'écran:

Et lorsque vous naviguez plus loin dans le site, chaque section a sa propre couleur:

Dans ce didacticiel, nous allons utiliser le style ajouté à la page d'accueil du didacticiel précédent et ajouter un style similaire à chaque archive de catégorie. Nous allons modifier la couleur des titres de publication et le titre de l'archive elle-même..

Ce dont vous aurez besoin

Pour suivre ce tutoriel, vous aurez besoin de:

• une installation de développement de WordPress
• un éditeur de code

Si vous avez déjà un thème sur lequel vous souhaitez utiliser cette technique, vous travaillerez sur la feuille de style de votre thème. Je vais créer un thème enfant du thème Twenty Fifteen et éditer la feuille de style dans mon thème enfant.

Votre site sera probablement déjà rempli de messages; afin que mon site a quelques messages, je vais télécharger les données de test de thème WordPress.

Si vous avez déjà suivi le didacticiel précédent et que vous avez également ajouté un style basé sur les catégories à votre page de blog principale, vous pouvez utiliser le thème de ce didacticiel comme point de départ. C'est ce que je vais faire. Sinon, vous pouvez travailler avec votre thème existant ou créer un thème enfant frais de Twenty Fifteen..

Créer le thème

Si vous travaillez avec votre propre thème ou celui du tutoriel précédent, vous pouvez ignorer cette section, mais voici ce que vous devez faire pour créer un thème enfant de Twenty Fifteen..

Dans votre site wp-content / themes dossier, créez un nouveau dossier et nommez-le. J'appelle le mien tutsplus-style-posts-by-category.

Dans ce dossier, créez un fichier CSS vide appelé style.css et ajoutez ce qui suit:

/ * Nom du thème: Tuts + Style Messages par catégorie URI du thème: http://code.tutsplus.com/tutorials/style-posts-by-category-on-your-main-blog-page--cms-23684 Description: Thème pour soutenir tuts + tutoriel sur le style des messages par catégorie. Thème de l'enfant pour le thème des vingt-quinze. Auteur: Rachel McCollin Auteur URI: http://rachelmccollin.co.uk/ Modèle: vingt-cinq ans Version: 1.0 * / @import url ("… /twentyfifteen/style.css");

Cela indique à WordPress tout ce qu'il faut savoir pour créer un thème enfant et importe la feuille de style de Twenty Fifteen. Vous voudrez probablement ajouter votre propre nom et détails au lieu du mien, mais cela vous donne une idée.

Maintenant, activez votre thème.

Importer les données

Si votre site contient déjà des publications, vous pouvez ignorer cette section, mais voici comment importer les données de test d'unités de thème dans votre site..

1. Allez à la page de test des unités thématiques et téléchargez le xml fichier qui est lié à.
2. Sur votre site, allez à Outils> Importer. Clique sur le WordPress lien.
3. Clique sur le Choisir le fichier et sélectionnez le fichier que vous venez de télécharger. Clique le Télécharger le fichier et importer bouton.
4. Suivez les instructions et attendez que WordPress importe les données..

Identifier les styles pour cibler

WordPress contient quelques balises de modèle qui affichent les classes de vos pages et les publient lorsqu'elles sont affichées dans le navigateur. Ceux-ci sont:

• body_class (), que vous ajoutez à la corps tag dans un thème header.php file: ajoute des classes au corps élément en fonction du type de page visualisée.
• post_class (), qui fonctionne de manière similaire mais est utilisé avec des messages dans la boucle.

Si vous travaillez avec votre propre thème et que vous n'avez pas encore ajouté ces balises de modèle, vous devrez le faire. Ce tutoriel sur l’utilisation des classes et des identifiants générés par WordPress vous montre comment.

Si vous travaillez avec un enfant du thème Twenty Fifteen, ces balises auront déjà été ajoutées au thème Twenty Fifteen lui-même. Vous n'avez donc rien à faire..

Si vous ouvrez l'une des pages de catégorie de votre site dans un navigateur et utilisez les outils de développement pour inspecter le code HTML de sortie, vous verrez que le body_class () balise de modèle a ajouté un groupe de classes à votre page.

Ici le corps tag a des classes qui nous disent de quel type de page il s’agit:

Ces classes nous indiquent que nous sommes entre autres sur une page d'archive de catégorie pour la catégorie de balisage. La classe que nous allons cibler est la catégorie-balisage classe.

Styling Post Postes dans la liste des archives

Nous allons commencer par ajouter une couleur aux titres de publication en fonction de leur catégorie. Dans la feuille de style de votre thème, ajoutez ceci:

/ * affiche les titres dans les pages d'archives * / .archive.category-markup .entry-title a: lien, .blog .category-markup .entry-title a: visité color: # 6cd2c8;  .archive.category-markup .entry-title a: survolez, .blog .category-markup .entry-title a: active color: # 120e5b;  .archive.category-template-2 .entry-title a: lien, .archive.category-template-2 .entry-title a: visité color: # e5572f;  .archive.category-template-2 .entry-title a: survolez, .archive.category-template-2 .entry-title a: active color: # 120e5b;  .archive.category-media-2 .entry-title a: lien, .archive.category-media-2 .entry-title a: visité color: # 933bbe;  .archive.category-media-2 .entry-title a: survolez, .archive.category-media-2 .entry-title a: active color: # 120e5b; 

Vous voudrez peut-être changer les couleurs pour qu'elles fonctionnent avec votre conception.

Enregistrez maintenant votre feuille de style et ouvrez une page de catégorie dans votre navigateur. La page Ma catégorie de balisage contient maintenant des titres de publication en couleur:

Et mon archive Media contient des titres d'articles d'une couleur différente:

Notez que dans les captures d'écran, il y a un article qui apparaît dans les deux archives, car il se trouve dans de nombreuses catégories. C'est pourquoi il est important de cibler la classe pour la catégorie dans la balise body de votre page d'archive et de ne pas cibler uniquement les classes de catégorie pour les publications dans la boucle..

Ajoutons maintenant une bordure. Ajoutez ceci à votre feuille de style:

.archive.category-markup .entry-title padding-top: 0.5em; border-top: 2px # 6cd2c8 solide;  .archive.category-template-2 .entry-title padding-top: 0.5em; border-top: 2px # e5572f solide;  .archive.category-media-2 .entry-title padding-top: 0.5em; border-top: 2px # 933bbe solide; 

Cela ajoute un peu de marge au-dessus des titres de publication ainsi qu'une bordure de la même couleur que le texte. Voici à quoi cela ressemble sur ma page d’archive de modèles:

Styliser le titre de l'archive

Outre le style des listes de publication individuelles, je souhaite ajouter ma couleur au titre de l'archive elle-même..

Je vais d'abord identifier les éléments et les classes à cibler à l'aide d'outils de développement:

Le titre de l'archive est affiché comme suit:

 
Catégorie: Template
 
 
Articles avec des tests liés aux modèles
 
 

Nous devrons donc cibler le en-tête de page et titre de la page cours, ainsi que les cours sur le corps tag pour l'archive.

Dans votre feuille de style, ajoutez ce qui suit:

.archive.category-markup .page-header .page-title color: # 6cd2c8;  .archive.category-template-2 .page-en-tête .page-title color: # e5572f;  .archive.category-media-2 .page-en-tête .page-title color: # 933bbe; 

Cela ajoute la couleur au titre de l'archive:

Modifions maintenant la couleur de la bordure pour qu'elle corresponde. Ajoutez ceci à votre feuille de style:

.archive.category-markup .page-header border-left: 7px solid # 6cd2c8;  .archive.category-template-2 .page-header border-left: 7px solid # e5572f;  .archive.category-media-2 .page-header border-left: 7px solid # 933bbe; 

Cela change la couleur de la bordure pour correspondre à:

Résumé

Utiliser les classes générées par WordPress pour cibler et classer les pages d’archives de catégories implique d’identifier les classes de sortie, puis d’écrire CSS pour les cibler..

Dans ce tutoriel, vous avez appris comment créer des sections de votre site codées par couleur, par catégorie..

Vous pouvez aller plus loin, par exemple en:

• utiliser les couleurs de votre section pour d'autres éléments de la page, tels que le titre du site et le menu de navigation
• ajout d'arrière-plans dans les couleurs de section, par exemple sur le pied de page
• en utilisant différentes images d'arrière-plan pour chaque section à des endroits clés
• changer la mise en page pour différentes sections du site
  

Il existe de nombreuses possibilités et si vous utilisez cette technique au maximum, vous pouvez créer différentes sections de votre site qui se ressemblent complètement, donnant ainsi l'impression d'avoir des sites complètement séparés..