Twenty Seventeen

Twenty Seventeen est le thème par défaut de WordPress en 2017. Son design orienté pour les entreprises utilise la nouvelle fonctionnalité de mise en place de vidéos en en-tête, et il dispose d’une mise en page de page d’accueil avec plusieurs sections de contenus. Le thème peut être personnalisé de façon complète en utilisant des couleurs personnalisées et en ajoutant un logo personnalisé, des liens de réseaux sociaux et des widgets.

twenty-seventeen-1058

Spécifications générales

  • Avec la mise en page en deux colonnes, la largeur de la colonne de contenu principal est de 525 pixels. Avec la mise en page en une seule colonne, sa largeur est de 740 pixels.
  • La largeur de la colonne latérale est de 326 pixels de large.
  • La taille recommandée pour les images mises en avant est de 2000 pixels de large par 1200 pixels de haut.
  • La taille recommandée pour les vidéos et les images d’entête est de 2000 pixels de large par 1200 pixels de haut.

Haut ↑

Médias d’en-tête

Twenty Seventeen supporte les images et vidéos d’en-tête. Pour modifier ces médias d’en-tête, allez dans l’Outil de personnalisation puis dans la rubrique « Média d’en-tête ».

video-headers

Pour les vidéos d’en-tête, vous pouvez téléverser vos propres vidéos au format mp4 ou utiliser un lien vers une vidéo hébergée sur YouTube. Des fichiers de petite taille sont toutefois recommandés pour vous assurer que votre site se charge rapidement.

Une image d’en-tête peut être utilisée pour afficher une photographie panoramique en haut de votre site. Cela peut également être utilisé pour proposer une alternative aux vidéos : si les champs vidéo et images sont tous les deux utilisés, l’image sera utilisée en tant que contenu provisoire le temps que la vidéo soit chargée et sera également utilisée en tant qu’alternative pour les plus petits écrans, qui peuvent avoir des difficultés à afficher une vidéo sur une connexion en mobilité.

Haut ↑

Page d’accueil

Twenty Seventeen vous permet de construire une superbe page d’accueil composée de contenus provenant de différentes pages de votre site. L’image mise en avant de chaque page est affichée en pleine largeur avec une position fixe. Twenty Seventeen dispose de quatre différentes sections auxquelles vous pouvez assigner des pages spécifiques.

Pour mettre en place tout cela, allez dans l’Outil de personnalisation puis dans la rubrique « Page d’accueil statique » et réglez votre site pour utiliser une page d’accueil statique si ce n’est pas déjà le cas.

front-page

Puis allez dans l’Outil de personnalisation puis dans la rubrique « Options du thème » et pour chaque section de la page d’accueil, sélectionnez une page que vous souhaitez afficher.

theme-options

Si vous n’avez pas encore créé la moindre page sur votre site, vous pouvez le faire depuis l’Outil de personnalsiation en cliquant sur + Ajouter une nouvelle page pour chaque section. Cela vous permettra de créer une nouvelle page depuis l’outil de personnalisation. Vous pourrez y ajouter du contenu plus tard.

Pour un meilleur rendu graphique, assurez-vous que chaque page dispose d’une image mise en avant et d’un minimum de contenus.

Vous pouvez aussi sélectionner votre page de Blog en tant que section. Dans ce cas, cela affichera vos trois derniers articles dans la section correspondante.

blog

Une fois que vous avez fini d’ajouter des pages dans ces sections, cliquez sur Enregistrer et publier.

Si vous souhaitez modifier le nombre de sections disponibles, ajoutez ce bout de code dans le fichier functions.php de votre thème enfant :

add_filter( 'twentyseventeen_front_page_sections', 'prefix_custom_front_page_sections' );
function prefix_custom_front_page_sections( $num_sections ) {
    return 6;
 }

Ce bout de code permettra de disposer de six sections au lieu de quatre.

Haut ↑

Couleurs personnalisées

Twenty Seventeen inclut trois options de couleurs : le jeu de couleurs clair (par défaut), un jeu de couleurs sombre et un jeu de couleur personnalisé qui peut être paramétré en terme de saturation de couleur à l’aide d’une glissière dédiée.

colours-screenshot

Pour explorer toutes les options de couleurs disponibles, allez dans l’Outil de personnalisation puis dans la rubrique « Couleurs ».

Haut ↑

Support des langues

Twenty Seventeen inclut des styles de polices optimaux pour de nombreuses langues, grâce aux contributions de la communauté. Le thème utilise des styles de polices système par défaut, et effectue des ajustements à la typographie pour les alphabets suivants :

  • Arabe
  • Chinois
  • Cyrillique
  • Devanagari
  • Grec
  • Gujarati
  • Hébreu
  • Japonais
  • Coréen
  • Thaï

Pour améliorer la lisibilité, Twenty Seventeen supprime également les styles liés aux espacements entre les lettres pour tous les alphabets non-latins.

Haut ↑

Mises en page avec une ou deux colonnes

Concernant les pages, Twenty Seventeen vous permet de choisir entre des mises en page de une ou deux colonnes. Cela peut être modifié avec l’Outil de personnalisation puis dans la rubrique « Options du thème ». Le thème utilise par défaut une mise en page en deux colonnes, qui affiche le titre de la page dans une colonne et le contenu de la page dans l’autre.

Note : cette fonctionnalité n’est disponible qu’après avoir mis en place une page d’accueil statique.

two-column-option

Si la mise en page en une seule colonne est sélectionnée, le titre de la page et le contenu s’afficheront sur une seule colonne large, centrée sur la page.

two-column
one-column

Haut ↑

Widgets

Twenty Seventeen inclut une zone de widget en pied de page, ce qui permet aux widgets d’être ajoutés en dessous du contenu du site.

La page de blog, les pages d’archives, de recherche et d’article seul incluent également une zone de widget en colonne latérale. Pour chacune de ces pages, le contenu est affiché en une colonne centrée lorsqu’il n’y a pas de colonne latérale. Avec la colonne latérale, le contenu est affiché dans une colonne et les widgets sont affichés dans l’autre.

Haut ↑

Citations en ligne

Les citations en ligne peuvent être utilisées pour rediriger l’attention de vos lecteurs sur un message particulier ou ajouter un intérêt visuel à vos articles et pages. Avec Twenty Seventeen, vous pouvez combiner une citation en ligne avec une classe alignleft ou alignright sur l’élément blockquote pour la mettre en valeur visuellement. Des instructions pour faire cela peuvent être trouvées ici. Voici un exemple :

<blockquote class="alignleft">This is my fabulous left-aligned pullquote.</blockquote>

Lorsqu’une mise en page en deux colonnes est utilisée (que ce soit via l’outil de personnalisation ou en ajoutant un widget de colonne latérale aux articles), les citations en ligne alignées sur le même côté s’afficheront en dehors de la zone de contenu et en dessous de la deuxième colonne. Note : cela ne fonctionne que lorsque la citation en ligne apparaît dans le contenu en dessous, où la seconde colonne se termine.

pullquotes

Haut ↑

Formats d’articles

Twenty Seventeen supporte les formats d’article suivants :

  • En passant
  • Audio
  • Galerie
  • Image
  • Lien
  • Citation
  • Vidéo

Haut ↑

Icônes de réseaux sociaux

Twenty Seventeen inclut un emplacement de menu nommé « Menu réseaux sociaux », qui permet d’ajouter des liens vers vos pages sur les réseaux sociaux afin de les afficher en tant que logos dans le pied de page. Si vous n’êtes pas habitué·e à cette fonctionnalité, veuillez consulter la documentation du thème Twenty Fifteen.

Les services suivants sont supportés par le menu de réseaux sociaux de Twenty Seventeen :

  • Behance
  • Codepen
  • DeviantArt
  • Digg
  • Dribbble
  • Dropbox
  • Facebook
  • Flickr
  • Foursquare
  • GitHub
  • Google+
  • Instagram
  • LinkedIn
  • Meanpath
  • Medium
  • Pinterest
  • Pocket
  • Reddit
  • Skype
  • SlideShare
  • Snapchat
  • SoundCloud
  • Spotify
  • StumbleUpon
  • Tumblr
  • Twitch
  • Twitter
  • Vimeo
  • Vine
  • VK
  • WordPress
  • Yelp
  • YouTube

Haut ↑

Support et ressources

Obtenez l’aide de la communauté (en anglais) sur le forum officiel WordPress.org : https://wordpress.org/support/theme/twentyseventeen.

Obtenez l’aide de la communauté (en français) sur le forum de l’association WPFR : https://wpfr.net/support/.

Traduit par Jb Audras
Relu par Jenny Dupuy & Marie Comet
Dernière mise à jour le 22 janvier 2020