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

Lire la suite « Ajoutez un petit peu de couleurs à vos articles »

WordPress exploite la police de votre système

WordPress 4.6 est disponible cette semaine et même si cette mise à jour n’apporte rien de majeur, elle change quand même l’aspect de l’administration. Les éléments sont toujours à la même place, il n’y a pas de nouvelles rubriques et tout sera là où vous aurez l’habitude, mais vous noterez peut-être une différence malgré tout. Avec cette version, la police utilisée dans l’administration n’est plus Open Sans comme avant, mais la police par défaut de votre système.

Voici à quoi cela ressemble sur un Mac :

avant-apres-admin.jpg
Accueil de l’administration sur Mac, avant et après la mise à jour (cliquez pour mieux voir la différence).
avant-apres-liste.jpg
Liste d’articles avant et après la mise à jour (pareil).
Lire la suite « WordPress exploite la police de votre système »

Créer des boutons de partage statiques

Difficile aujourd’hui d’imaginer publier des articles sans proposer à ses lecteurs de les partager. La grande majorité des blogs affichent ainsi des boutons de partage vers les réseaux sociaux, et ceux qui utilisent WordPress ne sont pas en reste. Sur tous les blogs hébergés sur la plateforme WordPress.com, c’est simple : il y a des boutons de partage par défaut et même si on peut les désactiver, on les retrouve en général sur la majorité des blogs. Si vous hébergez votre blog vous-même, vous pouvez activer ces boutons de partage en utilisant le module Jetpack.

Les boutons de partage proposés par défaut sur WordPress.com
Les boutons de partage proposés par défaut sur WordPress.com

Le répertoire des extensions WordPress compte par ailleurs des dizaines et des dizaines de modules qui permettent d’ajouter des boutons de partage au pied (ou en tête) de chaque article. L’avantage de cette solution, c’est qu’elle fonctionne sans travail de votre part : en général, il suffit d’activer l’extension, éventuellement de régler une ou deux options et c’est tout. Autre solution qui reste très simple : récupérer les boutons officiels proposés par chaque réseau, et l’intégrer directement à son thème.

La majorité de ces boutons de partage ont deux inconvénients : ils ajoutent une charge supplémentaire pas forcément indispensable sur le chargement des pages et ils ajoutent en général des cookies. Lire la suite « Créer des boutons de partage statiques »

Créneler le texte pour un meilleur rendu

Étant de nature à écrire beaucoup et sans doute même trop, je cherche toujours à améliorer la mise en forme du texte sur mon blog. À défaut de me forcer à écrire moins, je peux au moins faciliter la lecture des textes. Et dans ce domaine, la référence reste pour moi Medium qui propose des mises en page très agréables.

Et j’ai (re)découvert un peu par hasard une option en CSS qui améliore à mon avis le rendu du texte : le crénelage, ou antialiasing en anglais. Les explications techniques sont un peu trop complexes, mais disons simplement qu’il s’agit d’adapter les polices pour avoir un rendu meilleur sur nos écrans composés d’une grille de pixels carrés. Les polices étant souvent rondes, il y a plusieurs options pour afficher chaque caractère et le crénelage peut offrir un rendu de meilleure qualité.

Avec la police choisie sur mon blog (Georgia), le rendu est très différent et le texte, comme on peut le voir sur l’illustration, est plus fin avec le crénelage (gauche) que sans l’option activée (droite). J’ai un peu hésité à activer le crénelage par peur que ce soit moins lisible, mais j’ai trouvé une solution pour éviter un côté trop clair : foncer légèrement la police. Le texte n’est pas en noir, mais en gris foncé et j’ai simplement opté pour une couleur un petit peu moins grise.

Crénelage à activé à gauche, inactif à droite
Crénelage à activé à gauche, inactif à droite (clic pour la taille originale)

Je suis plutôt satisfait du résultat, même si on est encore loin de mon objectif, mais c’est un pas dans la bonne direction.

Si vous voulez activer cette option sur votre blog, voici les trois lignes à ajouter aux blocs de textes concernés en CSS. La première active la fonction sur Safari (iOS et OS X), la deuxième sur Firefox (OS X) et la troisième sur la majorité des navigateurs sous Windows et Linux.

p {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing:grayscale;
    text-rendering: optimizeLegibility;
}

Le retour des liens soulignés ?

Les pionniers du web ont choisi de souligner les liens hypertextes qui permettent de relier deux pages. C’est une convention pour repérer très simplement quels sont les mots qui sont aussi des liens, mais si cette présentation est pratique, elle a longtemps été assez grossièrement appliquée. Pendant longtemps, les navigateurs se sont contentés d’appliquer un trait sous le texte un peu grossièrement, sans tenir compte de la présentation, coupant les lettres et souvent en ajoutant une gène visuelle. À tel point que beaucoup de sites les ont finalement retirés, jusqu’à Google lui-même.

Comme beaucoup de sites, j’avais également choisi de retirer tous les traits sous les liens de mon blog personnel. Pour signaler la présence d’un lien, je changeais la couleur en noircissant légèrement le texte. L’idée était bonne, mais le résultat n’était pas vraiment à la hauteur : les liens étaient difficiles à détecter correctement, et j’imagine que la majorité des lecteurs ne les voyait jamais. Dans l’idéal, j’aurais voulu mettre en place la solution de Medium (longuement détaillée à cette adresse : si le sujet vous intéresse, je vous en recommande la lecture), mais elle est très complexe et mes connaissances en CSS sont trop limitées.

Fort heureusement, les navigateurs évoluent. Et les dernières versions de Safari, le navigateur d’Apple, gèrent désormais plutôt bien les liens soulignés, comme l’a judicieusement fait remarquer Anthony. En particulier, les traits ne coupent plus bêtement les lettres qui passent sous la ligne, ils s’interrompent proprement autour de la lettre.

liens-soulignes-safari

Du coup, j’ai réactivé les liens soulignés sur le blog. Ce n’est pas parfait, c’est moins bien que la solution de Medium — j’aimerais des traits légèrement affinés —, mais c’est beaucoup plus simple à mettre en place et avec Safari, le rendu est plutôt sympa. Pour les autres navigateurs, on peut espérer qu’ils s’y mettent aussi un jour, et en attendant, les liens sont beaucoup plus visibles ainsi qu’en variant la couleur comme je le faisais auparavant.

Côté code, c’est assez simple, il suffit d’une ligne en CSS sur la balise a (celle des liens) et c’est fait. Le plus souvent, les thèmes utilisaient text-decoration: none; pour masquer les traits sous les liens et on peut ainsi la remplacer par text-decoration: underline; pour obtenir le bon résultat.

Sur mon blog, je modifie aussi la couleur par défaut des liens (bleu, si vous ne précisez rien) en reprenant celle de l’élément parent, en l’occurrence le texte des articles. À vous de voir si vous voulez doubler le lien avec une couleur différente. Pour ma part, j’ai opté uniquement pour une couleur différente quand le curseur de la souris passe au-dessus du lien, ici du noir pour l’exemple.

a{
    text-decoration: underline;
    color:inherit;
}
a:hover{
    color:black;
}

Je ne sais pas si je garderai ces liens soulignés ou si je changerai à l’avenir, mais j’aime bien l’idée de rendre les liens plus visibles. Du moins ceux à l’intérieur des articles, pour tous les liens autour, par exemple pour les listes de tags, je préfère une présentation plus propre, sans aucun trait. Mais peut-être ai-je tort et que les liens devraient toujours être soulignés.

Jetpack : modifier l’aspect des articles similaires

La dernière version de Jetpack, le module conçu par les propriétaires de WordPress.com, ajoute la fonction d’articles associés à n’importe quel blog WordPress hébergé. Même si je suis rarement fan de ce genre de fonctions, j’ai décidé de lui laisser une chance. Après tout, s’il y a bien un acteur qui peut trouver des articles similaires à un autre, c’est bien celui qui a créé le CMS. Cette fonction a en outre l’avantage de ne pas reposer sur votre serveur pour effectuer le lourd et difficile calcul de relations que tous les autres modules rendent nécessaire. Les images quant à elles sont chargées depuis les serveurs de WordPress.com, si bien que la charge sur votre hébergeur devrait rester minime.

Jetpack ne propose pas beaucoup d'options pour son module d'articles liés : tout au plus peut-on choisir d'afficher ou non "Connexe" et les images.
Jetpack ne propose pas beaucoup d’options pour son module d’articles liés : tout au plus peut-on choisir d’afficher ou non « Connexe » et les images.

Comme quasiment toutes les autres fonctions Jetpack, celle-ci s’active d’un clic dans l’administration du blog, mais vous n’avez pas beaucoup d’options pour modifier son apparence. Vous pouvez choisir de masquer ou non un en-tête et vous pouvez afficher, ou non, des images associées à chaque article. On ne peut pas influencer les résultats, modifier leur nombre ou encore changer leur emplacement sans passer par un peu de code.

Les réglages de Jetpack sont très légers par défaut.
Les réglages de Jetpack sont très légers par défaut.

Souhaitant une interface beaucoup plus sobre, avec uniquement les images — le lecteur peut connaître le nom de l’article en question en passant la souris sur une image —, j’ai simplement utilisé mon thème pour masquer les éléments que je ne désirais pas et retoucher les images pour les coller. Voici, à titre d’information, le code utilisé sur mon blog :

.entry-content .jp-relatedposts,
.entry-content .jp-relatedposts .jp-relatedposts-post,
.entry-content .jp-relatedposts .jp-relatedposts-items-visual,
.entry-content .jp-relatedposts .jp-relatedposts-post img{margin: 0;padding: 0;}
.entry-content .jp-relatedposts .jp-relatedposts-post{width: 33.33%;}
.entry-content .jp-relatedposts .jp-relatedposts-post-title,
.entry-content .jp-relatedposts .jp-relatedposts-post-context{display: none;}

Et voici ce que cela donne, remis dans le contexte. Pour information, les quatre articles « Dans la même catégorie » ne sont qu’une sélection au hasard dans la catégorie de l’article en cours. J’aime bien le côté aléatoire de la sélection, mais il est vrai qu’elle n’a pas vraiment de sens pour le lecteur.

Avec un peu de CSS, on peut facilement modifier l'aspect des articles liés proposés par Jetpack.
Avec un peu de CSS, on peut facilement modifier l’aspect des articles liés proposés par Jetpack.

Même si les options affichées pour ce module sont très simples, on a un contrôle plus fin qu’il n’en a l’air sur les résultats affichés. En ajoutant du code au fichier functions.php comme expliqué à cette adresse, on peut assez facilement modifier le nombre de résultats, mais aussi retirer des résultats certains articles, ou à l’inverse afficher systématiquement un article associé dans certains cas. On peut aussi choisir la position des résultats, mais malheureusement le choix est limité à deux options : en tête ou en fin d’article. Peut-être qu’il y a un moyen de placer les images plus précisément, ce qui me permettrait de retirer mes articles aléatoires, mais je n’ai pas trouvé comment faire.