Twenty Sixteen, du blogging moderne

Avec Twenty Sixteen, les équipes de WordPress ont dévoilé un thème graphique dont le style moderne et les fonctionnalités correspondent aux tendances du moment sur le web. Ce thème est désormais disponible sur Hypothèses.

Construit sur une colonne de texte et une colonne facultative latérale pour les widgets, le thème graphique Twenty Sixteen permet une personnalisation fine des couleurs, en proposant quatre jeux de couleurs coordonnées, ou un choix libre des couleurs associées à l’arrière-plan, au fond de page, aux liens, au texte principal et au texte secondaire du carnet.

Outre la colonne facultative de droite, deux zones de widgets sont prévues dans le pied de page pour personnaliser l’affichage du carnet.

Image d’en-tête et logo

Twenty Sixteen permet l’ajout d’une image d’en-tête (dimensions recommandées : 1200 × 280 pixels) et d’un logo (dimensions recommandées : 240 × 240 pixels). Le logo se place au dessus du titre et sous-titre (slogan ou description) du carnet, tandis que l’image d’en-tête se place en dessous, avant la colonne de billets et l’éventuelle colonne de widgets à droite. Le titre et sous-titre du carnet peuvent être masqués.

Emplacements du logo et de l'image d'en-tête du carnet sous Twenty Sixteen

Emplacements du logo et de l’image d’en-tête du carnet sous Twenty Sixteen

Le thème graphique propose par ailleurs plusieurs particularités graphiques au niveau de la mise en page des billets.

Une introduction aux billets

Le champ « Extrait personnalisé » dans l’interface d’édition d’un carnet est utilisé par ce thème comme introduction à un billet. Le texte de ce champ est alors mis en exergue au dessus du texte du billet.

Introduction au billet créée en remplissant le champ "Extrait personnalisé" dans l'interface d'édition du billet

Introduction au billet créée en remplissant le champ « Extrait personnalisé » dans l’interface d’édition du billet

Des citations visuellement mises en avant

Tout en conservant une mise en page simple et claire pour le lecteur, le thème graphique Twenty Sixteen propose de mettre en avant les blocs de citation afin qu’ils ressortent visuellement au milieu du texte.

Pour aller plus loin dans la personnalisation des blocs de citation, le thème permet de placer ces blocs de citation à droite ou a gauche du texte, en décalage avec la largeur de la colonne de texte principale. Une petite manipulation du code html du texte est alors nécessaire. Pour afficher le code html d’un billet dans son interface d’édition, cliquez sur l’onglet « Texte », qui se trouve à côté de « Visuel » au dessus du champ principal d’écriture.

Différentes manières d'afficher des citations dans un billet avec le thème graphique Twenty Sixteen

Différentes manières d’afficher des citations dans un billet avec le thème graphique Twenty Sixteen

Pour décaler une citation sur la gauche du texte, modifiez la balise <blockquote> au début de la citation dans le code html en <blockquote class="alignleft">. Pour la décaler sur la droite du texte, modifiez la balise <blockquote> en <blockquote class="alignright">.

Valorisation des images

Briser la monotonie de la colonne de texte est aussi rendu possible par l’insertion d’images de grande taille : si la taille d’origine de l’image est supérieure ou égale à 840 pixels de large, et que l’image est insérée avec comme taille choisie « Taille originale », alors elle s’affichera de manière plus large que la colonne de texte. Les tailles « Grande », « Moyenne » et « Miniature », contraignent l’image à ne pas dépasser la largeur de cette colonne.

Différents affichages des images insérées dans les billets

Différents affichages des images insérées dans les billets

Un menu pour les réseaux sociaux

Le thème graphique Twenty Sixteen prévoit deux emplacements de menus. L’un, principal, se place horizontalement sur la droite du titre et sous-titre du carnet (ou un peu au dessus, au niveau de l’éventuel logo), au dessus de l’éventuelle image d’en-tête. Un second menu est disponible, dédié aux réseaux sociaux : placé dans le pied de page, sur la droite, il ne peut afficher que des icônes de réseaux sociaux.

Le menu "Réseaux sociaux" en pied de page avec le thème graphique Twenty Sixteen

Le menu « Réseaux sociaux » en pied de page avec le thème graphique Twenty Sixteen

Pour obtenir un tel affichage, il vous faudra créer un menu uniquement constitué de liens personnalisés, ces liens devant pointer vers des profils de réseaux sociaux ou un e-mail (écrire alors « mailto: »+l’adresse e-mail souhaitée). Ce menu doit ensuite être associé à l’emplacement « Menu des liens de réseaux sociaux ».

Pour en savoir plus sur ce thème et ses fonctionnalités, voir la présentation de Twenty Sixteen sur le Codex WordPress (en anglais).

Image à la Une : Photo par Jeremy Galliani sous licence Unsplash

Citer ce billet : “Twenty Sixteen, du blogging moderne”, par Marion Wesely. Publié sur La Maison des carnets le 9 janvier 2018. Lien : http://maisondescarnets.hypotheses.org/3295.

Marion Wesely

Chargée de l’accompagnement des communautés et de la valorisation des contenus d’Hypothèses / Community manager & communication officer for the Hypotheses platform (OpenEdition)

Vous aimerez aussi...