Style Messages par Catégorie sur votre page blog

Ce que vous allez créer

Les grands sites d'informations utilisent parfois un style pour différencier les sections de leur site. Cela prend souvent la forme de couleurs différentes pour chaque section.

Un bon 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:

Ce style peut rendre votre page d’accueil plus attrayante et aider les visiteurs à trouver du contenu dans des catégories qu’ils lisent régulièrement. Dans ce tutoriel, je vais vous montrer comment cibler les styles fournis par WordPress pour ce faire, en stylisant les articles de votre page de blog principale par catégorie..

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 pour 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.

Créer le thème

Si vous travaillez avec votre propre thème, vous pouvez sauter cette section, mais où est 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 la page d'accueil de votre site dans un navigateur et utilisez des outils de développement pour inspecter le code HTML de sortie, vous constaterez que ces balises ont ajouté un ensemble de classes à votre page..

Voici ce que je reçois lorsque je consulte la page d'accueil de mon site:

La balise body est sortie en tant que:

le maison et Blog les classes me disent que ceci est la page d'accueil du site et que c'est la page principale du blog. Je peux utiliser ces classes pour cibler CSS sur ma page d'accueil.

Quelque chose de semblable arrive aux messages:

L'article que j'ai sélectionné est identifié comme: 

Cela fait beaucoup de cours! Celles-ci nous renseignent sur la publication: son identifiant, son type, son statut, son format, sa catégorie et ses tags. Vous pouvez utiliser tous ces éléments pour cibler votre style. Ce que nous allons utiliser ici est la catégorie-balisage classe.

Styliser les poteaux

Maintenant que j'ai identifié les classes que je dois cibler, il est temps d'ajouter du style. Je vais le garder subtilement et ne changer que la couleur du titre du titre de chaque article, qui est à l'intérieur d'un lien dans un

étiquette.

Ouvrez la feuille de style de votre thème et ajoutez ceci:

.blog .category-markup .entry-title a: lien, .blog .category-markup .entry-title a: visité couleur: # 6cd2c8;  .blog .category-markup .entry-title a: survol, .blog .category-markup .entry-title a: active color: # 120e5b; 

J'ai utilisé une nuance de cyan pour la lien et a visité états, et une marine pour la flotter et actif états: vous pouvez les changer en couleurs qui correspondent à votre design.

Enregistrez maintenant votre feuille de style et actualisez la page de votre blog. Vous verrez que les publications de la catégorie que vous avez ciblée ont désormais un titre de couleur différente:

Ajoutez maintenant quelques couleurs supplémentaires pour les autres catégories de votre blog:

.blog .category-template-2 .entry-title a: lien, .blog .category-template-2 .entry-title a: visité color: # e5572f;  .blog .category-template-2 .entry-title a: survolez, .blog .category-template-2 .entry-title a: active color: # 120e5b;  .blog .category-media-2 .entry-title a: lien, .blog .category-media-2 .entry-title a: visité color: # 933bbe;  .blog .category-media-2 .entry-title a: survolez, .blog .category-media-2 .entry-title a: active color: # 120e5b; 

Encore une fois, ajustez les couleurs en fonction de votre image de marque. Vous aurez maintenant une gamme de couleurs pour vos titres d'articles.

Si vous le souhaitez, vous pouvez ajouter des bordures à la place ou en même temps, ainsi que modifier la couleur des titres:

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

Maintenant, mes articles ont une bordure subtile ainsi que le changement de couleur pour le titre de l'article:

Cela guide les visiteurs vers différentes catégories de mon site sans être trop criard..

Résumé

Parce que WordPress nous donne la body_class () et post_class () balises de modèle, il est possible de cibler une page spécifique sur votre site, puis de cibler les publications dans chaque catégorie et de les styler différemment.

Dans ce tutoriel, vous avez appris à identifier les classes à cibler et à ajouter un style à chaque catégorie, afin de donner aux visiteurs des indices visuels sur la structure de votre site..

Dans le prochain tutoriel, je vais vous montrer comment développer cela et l'utiliser pour styler différemment les différentes sections de votre site..