Comment styliser chaque article WordPress différemment

Avez-vous déjà rencontré un site qui stylise ses articles de blog différemment ? Certains sites ont des articles collants mis en évidence avec un arrière-plan personnalisé, tandis que d’autres peuvent avoir chaque article de catégorie stylisé avec un look unique. Si vous avez toujours voulu apprendre à styliser différemment chaque publication WordPress, alors vous êtes au bon endroit. Dans cet article, nous allons vous montrer comment styliser chaque article WordPress différemment.

Remarque : ce didacticiel nécessite que vous ajoutiez un CSS personnalisé dans WordPress. Vous devrez également être capable d’utiliser l’outil Inspecter. Des connaissances de base en CSS et HTML sont requises.

Styliser des articles individuels dans WordPress

WordPress ajoute des classes CSS par défaut à divers éléments de votre site Web. Un thème WordPress conforme à la norme doit avoir le code requis par WordPress pour ajouter des classes CSS pour le corps, les articles, les pages, les widgets, les menus, etc.

Une fonction WordPress de base appelée post_class() est utilisé par les thèmes pour indiquer à WordPress où ajouter ces classes CSS par défaut pour les publications.

Si vous visitez votre site Web et utilisez l’outil Inspecter dans votre navigateur, vous pourrez voir ces classes ajoutées pour chaque publication.

Voici les classes CSS ajoutées par défaut en fonction de la page affichée par l’utilisateur.

• .post-id
• .Publier
• .attachement
• .collant
• .hentry (pages de microformat hAtom)
• .category-ID
• .Nom de catégorie
• .tag-name
• .format-{nom-format}
• .type-{post-type-name}
• .has-post-thumbnail
• .post-password-required
• .post-protégé par mot de passe

Un exemple de sortie ressemblerait à ceci :

<article id="post-412" class="post-412 post type-post status-publish format-standard hentry category-news">

Vous pouvez styliser chaque article WordPress différemment en utilisant les classes CSS respectives.

Par exemple, si vous souhaitez styliser une publication individuelle, vous pouvez utiliser la classe post-id dans votre CSS personnalisé.

.post-412 { 
background-color: #FF0303;
color:#FFFFFF; 
} 

N’oubliez pas de changer l’ID de publication pour qu’il corresponde au vôtre.

Regardons un autre exemple.

Cette fois, nous styliserons tous les messages classés dans une catégorie spécifique appelée actualités.

Nous pouvons le faire en ajoutant le CSS personnalisé suivant à notre thème  »

.category-news { 
    font-size: 18px;
    font-style: italic;
} 

Ce CSS affectera tous les messages classés dans la catégorie actualités.

La fonction de classe de poste

Les développeurs de thèmes utilisent la fonction post_class pour indiquer à WordPress où ajouter les classes de publication. Habituellement, c’est dans le <article> étiqueter.

La fonction post class ne charge pas seulement les classes CSS générées par WordPress par défaut, elle vous permet également d’ajouter vos propres classes.

Selon votre thème, vous trouverez la fonction post_class dans votre fichier single.php ou dans les fichiers de modèle de contenu. Normalement, le code ressemblera à ceci :

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

Vous pouvez ajouter votre propre classe CSS personnalisée avec un attribut comme celui-ci :

<article id="post-<?php the_ID(); ?>" <?php post_class('longform-article'); ?>>

La post_class imprimera les classes CSS par défaut respectives avec votre classe CSS personnalisée.

Si vous souhaitez ajouter plusieurs classes CSS, vous pouvez les définir sous forme de tableau, puis les appeler dans la fonction post_class.

<?php 
$custom_classes = array(
		'longform-article',
		'featured-story',
		'interactive',
	);
?>
<article id="post-<?php the_ID(); ?>" <?php post_class( $custom_classes ); ?>>

Style des messages différemment en fonction des auteurs

Les classes CSS par défaut générées par la fonction the_posts n’incluent pas le nom de l’auteur en tant que classe CSS.

Si vous souhaitez personnaliser le style de chaque article en fonction de l’auteur, vous devrez d’abord ajouter le nom de l’auteur en tant que classe CSS.

Vous pouvez le faire en utilisant l’extrait suivant :

<?php $author = get_the_author_meta('user_nicename'); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class( $author ); ?>>

Ce code ajoutera le nicename de l’utilisateur en tant que classe CSS. Nicename est un nom convivial URL utilisé par WordPress. Il n’a pas d’espaces et tous les caractères sont en minuscules, ce qui le rend parfait à utiliser comme classe CSS.

Le code ci-dessus vous donnera une sortie comme celle-ci :

<article id="post-412" class="peter post-412 post type-post status-publish format-standard hentry category-news">

Vous pouvez maintenant utiliser .peter dans votre CSS personnalisé pour donner un style différent à tous les articles de cet auteur particulier.

.peter { 
background-color:#EEE;
border:1px solid #CCC; 
}

Style des messages en fonction de la popularité à l’aide du nombre de commentaires

Vous avez peut-être vu des sites avec des widgets de publications populaires qui sont parfois basés sur le nombre de commentaires. Dans cet exemple, nous allons vous montrer comment styliser les publications différemment en utilisant le nombre de commentaires.

Tout d’abord, nous devons obtenir le nombre de commentaires et lui associer une classe.

Pour obtenir le nombre de commentaires, vous devrez ajouter le code suivant dans vos fichiers de thème. Ce code va à l’intérieur de la boucle WordPress, vous pouvez donc l’ajouter juste avant la balise

<?php 
	$postid = get_the_ID();
	$total_comment_count = wp_count_comments($postid);
		$my_comment_count = $total_comment_count->approved;
	if ($my_comment_count <10) {
		$my_comment_count="new";
	} elseif ($my_comment_count >= 10 && $my_comment_count <20) {
		$my_comment_count="emerging";
	} elseif ($my_comment_count >= 20) {
		$my_comment_count="popular";
	}
?>

<article id="post-<?php the_ID(); ?>" <?php post_class( $my_comment_count ); ?>>

.new {border: 1px solid #FFFF00;}
.emerging {border: 1px dashed #FF9933;}
.popular {border: 1px dashed #CC0000;}

<?php $custom_values = get_post_meta($post->ID, 'post-class'); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class( $custom_values ); ?>>

<article id="post-412" class="trending post-412 post type-post status-publish format-standard hentry category-uncategorized">

.trending{
background-color:##ff0000;
}