Ajoutez un petit peu de couleurs à vos articles

Si le thème de votre site n’est pas marqué par une couleur dominante, comme c’est le cas pour mon blog, vous pouvez ajouter une petite touche de couleur à chaque article en suivant cette astuce. L’idée est de partir de l’image à la une pour déterminer une teinte dominante et utiliser cette teinte dans le thème. Pour ma part, je l’utilise sur les liens au survol et sur les boutons de partage et les métadonnées en bas de chaque article.

Voici ce que cela donne avec trois exemples différents :

haut.jpg

Vous pourriez le faire manuellement avec un custom field et une méthode ou une autre pour déterminer la teinte en question. Il y a plus simple toutefois : l’extension Color Posts permet précisement de faire tout le travail pour vous. Notez que vous devrez au préalable avoir sur votre blog l’extension Jetpack pour l’utiliser. Cette extension n’a aucune interface et par défaut, elle modifie la couleur de l’arrière-plan des articles et de l’en-tête sur les articles AMP si vous utilisez l’extension officielle.

Pour modifier ce qui est coloré par l’extension, il faut ajouter quelques lignes de PHP, par exemple dans le fichier functions.php de votre thème. Voici ce que j’utilise pour mon blog, vous devrez naturellement adapter le code en fonction de vos besoins :

function jeherve_use_custom_colors( $colors_css, $color, $contrast ) {
$post_id = get_the_ID();
$tonesque = get_post_meta( $post_id, '_post_colors', true );
extract( $tonesque );

$colors_css = "article .post-content a:hover, .post-meta ul a:hover, .post-meta ul strong {color: #{$color};}
.partage ul li, .partage h4 {background-color: #{$color};}";

return $colors_css;
}

add_filter( 'colorposts_css_output', 'jeherve_use_custom_colors', 10, 3 );

Vous pouvez retrouver ces modifications dans leur contexte à cette adresse.

L’extension ajoute aussi un champ que vous pourrez modifier lors de l’édition d’un article. Si la couleur dominante pour un article ne vous convient pas, vous pouvez en choisir une autre.

Publicités

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion /  Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion /  Changer )

Connexion à %s