Sommaire
Vous cherchez un moyen de créer une classe de type pair/impair dans WordPress ? Les classes paires et impaires vous permettent de donner un style différent à tous les autres messages WordPress. Cela vous permettra de faire ressortir chaque message des autres dans une vue en liste. L’alternance des classes donnera également à votre site web un aspect plus professionnel aux yeux des visiteurs.
WordPress permet aux développeurs de créer facilement différentes classes de poste pour leur donner plus de personnalisation options. Une fois qu’une classe est créée, vous devrez utiliser des feuilles de style CSS personnalisées pour donner un style à la nouvelle classe créée. Aujourd’hui, je vais vous montrer comment créer une classe Odd/Even dans WordPress.
Pourquoi utiliser une ancienne classe dans WordPress
Le type de classe Odd/Even n’est pas nouveau et peut être trouvé sur un grand nombre de sites web. Il s’agit d’un style simple, mais qui peut prendre la forme d’une simple liste de messages et lui donner un aspect plus élégant. De nombreux thèmes utilisent déjà par défaut un style de classe Odd/Even pour la section des commentaires.
Non seulement le style est beau, mais il peut aussi aider les visiteurs à différencier un article d’un autre. Soyons honnêtes, lorsque vous êtes sur un ordinateur toute la journée, il est assez courant que des images similaires commencent à se ressembler. C’est particulièrement vrai lorsque vous regardez une liste de messages. Le fait d’avoir une couleur différente sur chaque autre message peut grandement aider les visiteurs.
Comment créer une classe paire/impair dans WordPress
Aujourd’hui, je vais vous montrer comment créer une classe Odd/Even dans WordPress. Pour créer une classe dans WordPress, il vous suffit d’ajouter quelques lignes de code dans votre fichier functions.php. Cependant, cela ne fera qu’ajouter la classe post. Vous devrez toujours la styliser à l’aide de CSS personnalisés, mais c’est facile à faire.
Comme vous allez ajouter du code dans WordPress, il est bon de créer une sauvegarde de votre site web. Ainsi, si quelque chose tourne mal, vous pourrez l’utiliser pour revenir à votre site avant que l’erreur ne soit commise.
Création de la classe des articles impairs et pairs
Commençons par vous connecter au cPanel et cliquez sur l’option Gestionnaire de fichiers. Le gestionnaire de fichiers vous permettra d’accéder à tous les fichiers liés à votre site web.
Vous devez localiser le fichier functions.php de votre thème. Cliquez sur le répertoire public_html, puis sur le dossier wp-content. À l’intérieur de ce dossier, vous trouverez tout le contenu lié à votre site web. Cliquez sur le dossier themes et entrez dans le dossier du thème que vous utilisez actuellement. Enfin, faites un clic droit sur le fichier functions.php et sélectionnez l’option Edit.
Une fenêtre pop-up apparaîtra. Cette fenêtre vous avertira de créer une sauvegarde de vos fichiers avant de les modifier. Cela vous permettra de revenir à l’état de fonctionnement de votre site web si quelque chose ne va pas. Cliquez sur le bouton “Modifier”. Un nouvel onglet s’ouvrira, contenant tout le code du fichier.
Copiez et collez les lignes de code suivantes dans le fichier functions.php :
fonction oddeven_post_class ( $classes ) {
global $current_class ;
$classes[] = $current_class ;
$current_class = ($current_class == ‘impair’) ? ‘pair’ : ‘impair’ ;
return $classes;
add_filter (“post_class”, “oddeven_post_class” ) ;
global $current_class ;
$current_class = ‘impair’ ;
Une fois que vous avez inséré le code dans le fichier functions.php, cliquez sur le bouton “Save Changes” pour terminer.
Le style de la classe postale
Le style de n’importe quel document WordPress nécessite un code CSS personnalisé. C’est très facile à faire, mais si vous n’avez pas d’expérience avec le CSS, vous aurez moins d’options à votre disposition.
Dans le panneau d’administration de gauche, cliquez sur Apparence et sélectionnez l’option Personnaliser.
Cliquez sur l’option CSS supplémentaire.
Ici, vous pouvez ajouter votre propre code CSS personnalisé. Je vais vous montrer le plus simple des styles CSS que vous pouvez faire, mais les développeurs plus expérimentés peuvent faire beaucoup plus. Si vous avez besoin d’aide pour choisir une couleur en utilisant les codes de couleur HTML, consultez le site htmlcolorcodes.com. Cela peut vous aider à choisir les couleurs que vous voulez utiliser.
Chaque fois que vous créez un style dans WordPress, il est important de garder à l’esprit la palette de couleurs de votre site web. Le but de la classe Odd/Even est de se démarquer, mais vous pouvez certainement vous démarquer un peu trop avec les mauvaises couleurs.
Copiez et collez le code suivant dans la zone de personnalisation :
.pair {
contexte:#FFF ;
.impair {
contexte:#000 ;
Ce ne sont que des exemples de couleurs, veillez à remplacer les codes de couleur HTML par la couleur souhaitée. Vous verrez les changements instantanément.
Félicitations, vous avez réussi à créer et à styliser un cours sur les articles pairs et impairs dans WordPress. Vous pouvez modifier le CSS personnalisé à tout moment. N’oubliez pas de respecter la palette de couleurs de votre site web.
Faites ressortir votre contenu
Une fois que vous avez un site web pleinement fonctionnel, l’étape suivante consiste à aider votre contenu à s’y démarquer. Il existe de nombreuses façons de le faire et la classe Odd/Even est un excellent moyen d’aider à afficher du contenu. Un autre moyen est d’avoir des titres intéressants et des vignettes étonnantes.
Le fait d’avoir de superbes vignettes n’aide pas seulement le contenu de votre site web, il peut aussi contribuer à rendre votre contenu plus partageable sur les plateformes de médias sociaux. Les sites de médias sociaux sont très concurrentiels et des images intéressantes peuvent vous aider à vous démarquer sur ces plates-formes très fréquentées.
Comment trouvez-vous la classe Impair/Pair dans WordPress ? Entre quelles couleurs avez-vous choisi d’alterner ?
