Bienvenue en Twenty Fourteen

La grande rénovation des thèmes d’Hypothèses ayant été annoncée à l’Assemblée des carnetiers, il n’y a pas d’autre choix que de faire le deuil de ce bon vieux thème Magazine Basic qui m’accompagne depuis… oups, presque cinq ans ! Plutôt que d’attendre la dernière minute, je préfère prendre les devants, et basculer vers le nouveau thème qui semble présenter le plus d’affinités avec la logique assez fortement éditorialisée de Magazine Basic : le thème Twenty Fourteen.

Pour mémoire, une petite saisie d’écran du blog avant la grande migration. Et à présent, découverte pas à pas du thème WordPress de l’année.

Premières réactions

Twenty Fourteen apporte un sacré coup de jeune au carnet… mais impose aussi de revoir en profondeur certaines logiques bien ancrées dans le thème Magazine Basic. A commencer par le menu des catégories, si patiemment élaboré, et qui permettait une navigation thématique dans les contenus du blog. Adieu aussi la belle pyramide d’articles, illustrés par une image de taille réduite et un bref extrait. Il faudra désormais se contenter d’un très classique affichage des billets les uns sous les autres, ou apprendre à composer avec la magnifique mais exigeante mise en avant de contenus.

Au titre des légitimes mais passagers ronchonnements néophobiques, on peut noter que :

• le thème n’est pas centré¹ ;
• les styles de titres sont assez ternes, et le style « bloc de citation » (ou « quote ») si réussi dans Magazine Basic, est ici plutôt insipide – par contre, les appels de notes ne sont plus microscopiques. Twenty Fourteen préserve les yeux des internautes ;
• la largeur d’affichage du contenu des billets de 474 pixels est encore plus réduite que sous Magazine Basic ;
• tout aussi ennuyeux, la largeur de l’interface d’édition des billets en privé est elle aussi réduite à 474 pixels ;
• ce thème ne prend pas en compte l’imbrication des commentaires, (lorsqu’on répond à un commentaire posté précédemment), qui facilite pourtant leur lecture ;
• la lecture de quelques commentaires sur la version WordPress de Twenty Fourteen laisse penser que le thème n’est pas toujours très ergonomique sur les supports mobiles types tablette ou smartphone.

Voir le menu de catégories renaître de ses cendres

Au-delà de ces quelques détails, revenons à ce qui me paraissait être le principal point faible de Twenty Fourteen pour mon propre blog : la disparition de l’affichage des catégories sous la forme d’un menu horizontal sous le bandeau. En réalité, il est toujours possible d’opter pour un tel usage des catégories. Et il est même possible de faire bien mieux. Mais désormais, ce n’est plus une possibilité de mise en page sélectionnée automatiquement par le thème. Il faut configurer un menu personnalisé dans les options d’apparence.

Par défaut, dans Twenty Fourteen, seules les pages s’affichent en menu immédiatement sous le bandeau du blog. On peut remplacer cet affichage par défaut en créant un ou plusieurs menus personnalisés dans Apparences > Menus, onglet Edit Menus. Ceux-ci permettent de créer un menu composé librement de pages, de catégories, et même de liens hypertextes ! L’ensemble de la création d’un menu se fait manuellement, et l’agencement des différents éléments (ordre, définition d’une hiérarchie d’items et de sous-items) se fait par glisser-déposer.

Rien n’empêche désormais d’associer en un même menu quelques catégories à quelques pages, voir de mettre un lien hypertexte ou une page en sous-item d’une catégorie². Plus de problème non plus lié à l’affichage par défaut des catégories dans le menu par ordre alphabétique : les items de ces menus personnalisés sont agencés par le carnetier. La plasticité de ces menus est maximale.

Attention toutefois, la création du menu idéal peut vous réserver une mauvaise surprise s’il vous vient l’idée de changer le nom du menu au cours du processus. En effet, lorsqu’on modifie ce nom, tout le contenu personnalisé du menu disparaît, et il faut reprendre à zéro ! Attention également à ne pas faire disparaître la page Crédits, dont la visibilité est nécessaire pour des questions de droit.

Dans Apparence > Menus, l’onglet Manage Locations permet d’intégrer l’un des menus créés en tant que « Menu haut principal ». Il viendra prendre la place des pages, immédiatement sous le bandeau. Il est aussi possible d’intégrer un autre menu en haut de la colonne de gauche (« Menu secondaire dans la barre latérale de gauche »). Dans les deux cas, il s’agira de menus déroulant au survol de souris – il est plus que jamais possible, donc de jouer des catégories, des pages, et de leurs sous-catégories et sous-pages pour proposer des modalités alternatives de navigation dans le blog.

La mise en avant de contenus, vrai plus de Twenty Fourteen

Après l’excellente surprise des menus personnalisés, passons à la nouveauté la plus spectaculaire du thème Twenty Fourteen. L’affichage d’extraits de billets en pyramide que permettait Magazine Basic n’est plus, mais cette nouvelle forme d’éditorialisation des contenus ne manque pas d’intérêt. Désormais, après avoir créé un billet, deux possibilités s’offre au carnetier : le laisser se ranger sagement dans la zone centrale du carnet, par ordre antéchronologique ; ou l’orienter vers la zone des contenus mis en avant, plus ou moins imposante, et située sous le bandeau d’en-tête du blog. Attention, ces possibilités sont mutuellement exclusives : si le billet est mis en avant, il n’apparaîtra plus dans la colonne centrale.

Pour qu’un billet soit mis en avant, il suffit de lui associer un mot-clé précis – par défaut, il s’agit de « featured ». Ce mot-clé peut être redéfini dans Apparence > Customize > Contenus mis en avant, option « Nom du mot-clé ».

Dans Apparence > Customize > Contenus mis en avant, deux options d’affichage sont également disponibles pour cette zone. La première, « Grille », affiche les billets mis en avant les uns à côté des autres, avec pour chacun une illustration de 346 pixels de large. A partir du quatrième billet en avant, une nouvelle ligne se crée. Attention donc à privilégier, idéalement, trois ou six billets mis en avant³, sans quoi la zone de mise en avant risque de ressembler à un débarras. Il n’est pas possible de mettre en avant plus de six billets. Si, comme moi, vous privilégiez la mise en avant de trois billets, à chaque nouveau contenu que vous souhaiterez mettre en avant, il vous faudra retourner dans un ancien billet pour lui retirer le mot-clé qui lui confère ce statut.

La seconde option, « Diaporama », affichera un billet mis en avant et un seul, le plus récent, illustré par une image de 1038 pixels. Pour accéder aux billets mis en avant plus ancien, il faut les faire défiler manuellement. Autrement dit, avec cette option, les billets mis en avant mais moins récents que le dernier sont très peu visibles, sauf pour les internautes les plus curieux. Ici aussi, le nombre de billets mis en avant est limité à six.

Comme le suggèrent implicitement ces deux paragraphes, l’éditorialisation via mise en avant de billets suppose une gestion soigneuse de l’iconographie : il faut non seulement que les billets mis en avant disposent d’une illustration, mais encore que cette illustration ait la taille adéquate, sans quoi ce seront surtout des trames grisées et une ambiance brouillonne que votre carnet mettra en avant. Le choix des images devient donc plus que jamais crucial avec Twenty Fourteen. Voici quelques remarques à ce sujet.

Illustrer les billets : sainte quête ou casse-tête ?

Pour qu’un billet mis en avant bénéficie d’une illustration, il faut utiliser la fonction « Image à la une » dans la page d’édition des articles. C’était déjà une fonction utile dans Magazine Basic, lorsque l’on voulait que l’image choisie pour illustrer l’extrait, en page d’accueil du blog, ne soit pas la première image utilisée dans le billet. Mais dans Twenty Fourteen, c’est devenu une fonction essentielle.

Mais attention, outre les questions de droits, il faudra désormais composer avec des problèmes de taille. Si une image est trop petite ou mal proportionnée par rapport aux utilisations qu’en fait le thème, le résultat risque d’être décevant. La mise en avant de contenus en grille exige, idéalement, des images de 346 sur 192 pixels. Pour la mise en avant de contenus en diaporama, ce sera par contre du 1038*192.  Et last but not least, l’illustration définie comme « Image à la une » est aussi utilisée à l’affichage du billet et vient se loger au-dessus et autour de son titre. Ici, l’idéal est encore une autre taille : 672*372⁴, sachant que les 50 pixels du bas ne seront pas visibles puisque le titre du billet s’encastre dans l’image. L’effet final est plutôt réussi… si l’image s’y prête !

Autant dire que l’utilisation minimale d’un logiciel d’édition d’image va devenir rapidement incontournable, a fortiori si on veut utiliser une image a la composition un peu originale, ou incluant du texte. Quant au choix entre des contenus mis en avant sous forme de grille ou de diaporama, mieux vaut ne pas le réviser chaque semaine – ou s’habituer à réajuster tout aussi souvent les images à la une pour chaque billet mis en avant.

Si, comme moi, vous êtes séduits par l’usage de l’image à la une en illustration titre de chaque billet, les besoins d’images adéquates vont se multiplier, et le travail de définition d’une « Image à la une » adéquate pour les anciens billets risque d’être important. Flickr et sa recherche avancée permettant de restreindre les résultats aux images en creative commons vont devenir un passage obligé… Pour varier, on peut aussi penser aux ressources iconographiques de MediHal ou Internet Archive.

Les billets à l’épreuve des informations superflues

L’un des gros atouts de Magazine Basic, c’était de pouvoir voir en même temps les derniers billets publiés, via un extrait et une illustration produits le plus souvent de manière automatique. L’automatisme en moins, la fonction « Contenus mis en avant » permet toujours d’attraper d’un coup d’œil plusieurs billets bien illustrés. Mais pour les billets qui ne sont pas mis en avant mais affichés dans la colonne centrale du blog, c’est l’affichage en texte intégral qui prévaut par défaut. Pour obtenir un affichage des billets sous forme d’extrait, je n’ai pas trouvé de moyen plus simple que d’éditer chacun d’entre eux et d’utiliser la balise « More ».

Une fois cette opération effectuée, un nouveau problème apparaît : les catégories s’affichent au dessus du titre des billets dès la page d’accueil du blog, et sous l’image des billets mis en avant. Quant aux mots-clés, ils s’affichent eux aussi dès la page d’accueil à la suite des billets. Enfin, les notes de bas de page dont l’appel de note figure dans l’extrait délimité avec la balise « More » s’affichent elles aussi dès la page d’accueil. Il est désormais tentant de ne pas multiplier inutilement le nombre de catégories et de mot-clés associés à un billet, sous peine de voir l’extrait de l’article noyé dans une foule de métadonnées. Mieux vaut aussi limiter les appels de notes trop tôt dans un billet.

Pour renforcer la visibilité des derniers billets publiés, je réhabilite le widget « Articles récents » (Apparence > Widgets), dont l’esthétique est plutôt réussie dans ce thème, et qui, dans la large colonne de droite, offre une belle mise en valeur à leur titre.

Personnaliser Twenty Fourteen : guide du débutant

Twenty Fourteen est un thème complexe et très malléable – peut-être trop. Il est tentant d’ajouter illustrations aléatoires, contenus multimédias et widgets jusqu’à saturation. Depuis le menu de gauche de l’espace privé, on peut le personnaliser depuis plusieurs onglets :

• Apparence > Thèmes : permet de sélectionner le thème Twenty Fourteen (ou l’un des trois autres nouveaux thèmes destinés à remplacer les anciens sur Hypothèses)

• Apparence > Customize : toutes les options de cet onglet sont des doublons (éventuellement moins complets) des autres onglets de gestion du menu Apparence. La seule option spécifique à ce menu, dont l’intérêt est toutefois de taille, permet la gestion des contenus mis en avant. L’option « Agencement » permet de définir les contenus mis en avant sous forme de grille (jusqu’à six petites vignettes, trois par lignes. Attention, elles deviennent vite envahissantes…) ou de diaporama (seul le dernier contenu mis en avant s’affichera, mais sur toute la largeur de la zone de mise en avant). Le diaporama ne semble défiler que manuellement. L’option « Nom du mot-clé » permet de substituer un mot-clé moins obscur que « featured », le terme par défaut permettant de définir un billet comme contenu à mettre en avant. Le fait de cocher l’option « Ne pas afficher le mot-clé sur la page d’accueil » permet de ne pas voir apparaître le mot-clé « featured » parmi les mots-clés énumérés en fin de billet. Un détail utile.

• Apparence > Widgets : deux nouveautés ici par rapport au thème Magazine Basic. Tout d’abord, la colonne de droite, optionnelle, a une largeur fixe de 306 pixels. Ensuite, une nouvelle zone en pied de page fait son apparition. A noter, lors d’un changement de thème, une partie des widgets créés et personnalisés auparavant peut disparaître. Ces widgets ne sont pas perdus pour autant. Ils peuvent être retrouvés dans la zone « Widgets désactivés », située sous la zone « Widgets disponibles ». Inutile de redéfinir tous vos flux RSS et de recréer tous vos widgets texte personnalisés. Il suffira de les récupérer dans les « Widgets désactivés » et de les redistribuer par glisser-déposer dans les barres latérales et le pied de page. Par contre, la nouvelle apparence de ce thème peut être l’occasion de repenser l’utilité des widgets auxquels on s’est habitué…

• Apparence > Menus : permet de créer des menus personnalisés, associant librement des pages, des liens et des catégories. Très malléable mais un peu longue si vous avez multiplié pages, catégories, sous-pages et sous-catégories. Commencez toujours par définir le nom de votre (ou de vos) menu(s) avant de le(s) composer comme bon vous semble (cf. supra, « Voir le menu de catégories renaître de ses cendres »). Dans « Manage Locations », vous pourrez définir l’un ou l’autre de vos menus personnalisés comme « Menu haut principal » ou « Menu secondaire dans la barre latérale gauche ».

• Apparence > En-têtes : permet de définir l’en-tête de votre carnet. En apparence, peu de nouveautés par rapport au même menu dans Magazine Basic. En réalité, vous pouvez créer plusieurs en-têtes et disposez désormais d’une option très intéressante, « Au hasard », qui affichera l’un de ces en-têtes de façon aléatoire à chaque chargement de votre blog. A noter, le bandeau n’est désormais plus de 1024*180 pixels, mais de 1260 pixels de largeur. Si vous vous contentez de copier votre vieux bandeau Magazine Basic, vous risquez de le voir s’afficher flou ou pixelisé. Il est par contre possible de réduire la hauteur du bandeau sous les 240 pixels prévus sans conséquence néfaste – ce qui permet un gain de place appréciable vue la volumineuse zone éditorialisée. Vous disposez toujours des options « Header Text », qui vous permettent d’afficher le titre et le slogan de votre carnet – ou non, et le cas échéant de modifier leur couleur.

• Apparence > Arrière-plan : il est désormais possible d’associer une image ou une trame d’arrière-plan à votre blog. Celle-ci apparaîtra surtout à la droite de votre carnet, sur les écrans larges. Attention à la surcharge si vous optez pour une couleur vive ou une image !

• Pages : lors de la création d’une page, il est désormais possible de l’associer à un modèle dans la zone « Attributs de la page ». L’option « Modèle par défaut » permet d’afficher la page de la même façon qu’un billet, dans la zone centrale du blog. L’option « Page plein écran » permet d’afficher la page en faisant disparaître la colonne de droite et la zone de contenus mis en avant. C’est une option intéressante pour alléger ponctuellement le blog lorsqu’un internaute l’explore. L’option « Page des contributeurs » substitue la liste des carnetiers avec le nombre de billets qu’ils ont publié sur le blog à la place du contenu de la page, quel qu’il soit.

• Articles : lors de la création d’un nouveau billet, la définition d’une « Image à la une » est désormais essentielle, notamment si le billet est destiné à être un « contenu mis en avant ».

• Réglages > Lecture : je vous conseille de ramener le nombre de billets que le carnet affiche (« Les pages du site doivent afficher au plus ») à 5, car même avec l’affichage par extrait via la balise « More », les pages dans Twenty Fourteen deviennent vite interminables (et relèguent d’autant plus loin votre éventuel menu en pied de page).

Crédit photographique de l’image à la une : « The Art of WordPress », (cc-by) mkhmarketing.wordpress.com

1. Mais une petite modification du CSS suffirait à corriger ce défaut… Message discret envoyé à l’équipe Hypo 😉 [↩]
2. Dans mon cas, je vais ainsi probablement créer une sous-page fixe dans les catégories consacrées à l’articulation des contenus du blog à mon livre Une histoire du rap en France pour rendre disponible la postface inédite à l’édition de poche. On peut aussi imaginer des carnets Hypothèses renvoyant directement l’un à l’autre par lien hypertexte, par exemple s’ils privilégient des langues différentes pour un même thème ou une même équipe d’animation. [↩]
3. Je trouve personnellement qu’avec six billets mis en avant, la zone devient trop envahissante, dans un thème déjà potentiellement bien chargé : OpenBarre de trois lignes + bandeau + menu des pages ou menu personnalisé + deux séries de billets mis en avant… l’accès aux billets de blog proprement dits commence à être laborieux ! [↩]
4. Le rapport largeur/hauteur est ici très proche de celui utilisé pour les contenus mis en avant dans une grille, ce qui donne un avantage de plus à cette option d’affichage par rapport à celle en diaporama. [↩]

---

---