Comment colorer les articles de blog Divi par auteur

L'un des principaux objectifs de Divi est de s'assurer que chaque élément de votre site Web est beau, et les articles de blog ne font pas exception. Cependant, il y a toujours place à l'amélioration, et le codage couleur de vos articles de blog par auteur offre aux utilisateurs un moyen de naviguer plus efficacement dans votre contenu (ainsi que d'identifier leurs auteurs préférés !).

Dans cet article, nous allons parler davantage des raisons pour lesquelles vous voudrez peut-être coder en couleur vos articles de blog Divi et comment le faire en deux étapes simples. C'est l'heure d'une nouvelle couche de peinture !

Pourquoi devriez-vous envisager de coder en couleur vos articles de blog Divi

Avant d'aller plus loin, clarifions ce que nous entendons par codage couleur de vos articles de blog Divi. Dans la section suivante, nous allons vous apprendre à attribuer à chacun de vos rédacteurs une couleur qui apparaîtra comme arrière-plan de leurs propres publications. Dans cet exemple, j'ai attribué à mes propres articles (en tant qu'auteur1) un bleu clair très attrayant :

L'effet lui-même est relativement simple, mais il offre un moyen percutant de différencier les écrivains. Les utilisateurs peuvent facilement reconnaître les nouvelles pièces de leurs auteurs préférés en un coup d'œil. Bien sûr, rendre le nom de l'auteur plus visible peut avoir le même effet, mais cela peut ne pas être aussi frappant visuellement.

Votre seule préoccupation avec ceci est votre choix de couleurs. Prenez la capture d'écran au début de cette section par exemple - notre index de blog Divi utilise un fond blanc, nous avons donc décidé de nous en tenir à des couleurs pastel claires pour les articles de nos auteurs. Voyons ce qui se passe si nous choisissons un schéma de couleurs différent :

Bien sûr, c'est un exemple extrême, mais cela nous aide à illustrer notre propos. Si vous souhaitez colorer vos publications, vous devrez examiner attentivement votre palette, en utilisant un outil adapté pour vous aider si nécessaire. L'utilisation de couleurs contrastées pour mettre en évidence la différence entre chaque article peut aider les utilisateurs à identifier rapidement les auteurs, mais cela peut également nuire au style de votre blog et rendre difficile la lecture de votre contenu.

Comment colorer les articles de blog Divi par auteur (en 2 étapes)

Maintenant que nous avons couvert la théorie, il est temps de passer à la façon de coder en couleur les articles de blog Divi. L'activation de cette fonctionnalité ne prend que deux étapes, mais il y a quelques considérations à prendre en compte avant de commencer.

Pour commencer, vous voudrez sauvegarder votre site WordPress, ce qui est toujours une bonne idée lorsque vous apportez des modifications. Deuxièmement, vous voudrez créer un thème enfant Divi, donc vos modifications resteront une fois le thème mis à jour.

Enfin, vous devrez utiliser un client FTP pour l'étape numéro un. Nous utiliserons FileZilla, mais s'il y a un autre outil que vous préférez, allez-y.

Étape 1 : Ajoutez un extrait de code au fichier functions.php de votre thème enfant

Pour ce faire, vous devrez ouvrir votre client FTP et vous connecter au serveur de votre site. De là, dirigez-vous vers le répertoire public_html / wp-content/themes/ , puis recherchez le dossier de votre thème enfant. Gardez à l'esprit que le dossier public_html ou racine peut être nommé www ou d'après le domaine de votre site, selon votre hébergeur :

Une fois que vous avez localisé le dossier de votre thème enfant, ouvrez-le et recherchez le fichier functions.php à l'intérieur. Maintenant, faites un clic droit dessus et appuyez sur l'option qui lit Afficher/Modifier :

Cela vous invitera à ouvrir le fichier avec votre éditeur de texte par défaut. Étant donné que nous avons affaire à un thème enfant, votre fichier functions.php devrait être principalement vide, mis à part la mise en file d'attente des fonctions de son parent. Nous allons ajouter un extrait qui crée automatiquement une nouvelle classe pour chacun de vos auteurs avec le préfixe author- . Par exemple, si vous avez un utilisateur WordPress nommé John, vous pouvez utiliser la classe author-john . Cela nous permettra d'ajouter du code CSS plus tard.

Ensuite, ajoutez l'extrait PHP suivant après la ligne // END ENQUEUE PARENT ACTION :

function et_set_author_class( $classes ) {$classes[] = 'author-' . strtolower( str_replace( ' ', '-', get_the_author() ) );

return $classes;}

add_filter( 'post_class', 'et_set_author_class' );

Maintenant, enregistrez vos modifications, fermez l'éditeur et le tour est joué ! Gardez à l'esprit que vous devrez utiliser des caractères minuscules pour que votre classe fonctionne, quel que soit l'auteur avec lequel vous traitez. Cela va être important pour la deuxième étape.

Étape #2 : Spécifiez une couleur pour chaque auteur à l'aide de l'option CSS personnalisée de Divi

Maintenant que notre nouvelle fonction est prête, la prochaine étape consiste à définir une couleur pour chacun de vos auteurs. Divi vous permet de le faire avec sa fonctionnalité CSS personnalisée , car tout code que vous y ajoutez affectera l'ensemble de votre thème. Pour le trouver, accédez à votre tableau de bord WordPress et accédez à l'onglet Divi > Options du thème , puis faites défiler jusqu'à la case CSS personnalisée à la fin de la page :

Vous devrez ajouter une nouvelle ligne de CSS dans ce champ pour chacun de vos auteurs. Par exemple, si vous avez un auteur avec le nom d'utilisateur author1, voici comment définir une couleur particulière pour lui :

.author-author1 {background-color: #C1F3FA !important;}

Gardez à l'esprit que vous devez ajouter le préfixe author- à votre classe, quel que soit votre nom d'utilisateur. Après avoir indiqué une couleur de fond, vous devez également vous assurer de déclarer que le code est !important . En termes simples, cela donne plus de poids au code et annule tous les conflits qui pourraient survenir - sans cela, cette fonctionnalité ne fonctionnera pas.

Reprenons un dernier exemple. Dans ce cas, nous allons attribuer des couleurs différentes à deux auteurs. Voici le code que nous avons ajouté à notre champ CSS personnalisé Divi :

.author-author1 {background-color: #C1F3FA !important;}

.author-author2 {background-color: #F9FCB8 !important;}

Maintenant, voici à quoi cela ressemble de l'avant :

En mettant de côté votre choix de couleur, vous pouvez apporter d'autres modifications à vos articles de blog Divi. Par exemple, vous pouvez modifier la longueur des extraits de votre blog ou styliser vos « cartes » de plusieurs manières. Votre objectif principal devrait être de trouver le style parfait pour votre propre blog, alors n'ayez pas peur de jouer avec Divi et de voir ce qu'il peut faire !

Conclusion

Le codage couleur de vos articles de blog par leur auteur est une fonctionnalité simple qui peut aider l'utilisateur à naviguer beaucoup plus facilement dans votre contenu (en particulier si vous disposez d'archives étendues). De plus, beaucoup de vos utilisateurs apprécieront probablement de pouvoir reconnaître les publications de leur auteur préféré par la seule couleur.

Avant de commencer à peaufiner les fichiers, n'oubliez pas de sauvegarder votre site et de configurer un thème enfant, afin que vos modifications persistent à l'avenir. Une fois cela fait, voici les deux étapes que vous devez suivre pour coder en couleur vos articles de blog Divi par auteur :

1. Modifiez le fichier functions.php de votre thème enfant.
2. Spécifiez une couleur pour chacun de vos auteurs à l'aide de l'option CSS personnalisée de Divi.

Vous avez des questions sur la façon de coder en couleur les articles de blog Divi par auteur ? Demandez dans la section commentaires ci-dessous!

Image miniature de l'article par RaZZers / shutterstock.com.