La Bible de Twenty Seventeen : extensions, codes, thèmes enfant et conseils

Avec Twenty Seventeen, WordPress nous a offert son thème le plus universel : blog, magazine, site d'entreprise… et mobile first pour ne rien gâcher. Du potentiel, mais peu personnalisable par défaut. Rédhibitoire ? Non, vous allez vite vous en rendre compte.

Cet article prend 21 minutes à lire et comporte 5246 mots.

Atten­tion ! Cet arti­cle ne vaut que pour la ver­sion de Word­Press Open Source (à télécharg­er et à installer chez un hébergeur) ; ceux dont le site est hébergé sur wordpress.com devront s’ac­quit­ter d’un for­fait annuel de 96 € pour pou­voir per­son­nalis­er les CSS, ou de 300 € pour pou­voir utilis­er la plu­part des exten­sions disponibles sur wordpress.org

En préambule

Twen­ty Sev­en­teen a été le thème par défaut, pour Word­Press 4.7 à 4.9, en 2017 et en 2018. Aucun autre thème n’a eu une telle durée de vie (offi­cielle). Et aucun autre thème n’a été autant plébisc­ité.

Lorsque j’ai rédigé mon pre­mier arti­cle sur ce thème (Habillez votre site avec Twen­ty Sev­en­teen et les exten­sions Bold Themes), puis le sec­ond (Per­son­nalis­er Twen­ty Sev­en­teen – astuces, bouts de code et exten­sions), je n’au­rais jamais pen­sé avoir autant de lecteurs et de com­men­taires.

Et je n’au­rais jamais pen­sé que même après l’ar­rivée de Word­Press 5 et d’un nou­veau thème par défaut (Twen­ty Nine­teen), cet arti­cle serait tou­jours dans le trio de tête de ce blog. De fait, après que mon arti­cle sur Twen­ty Nine­teen ait cara­colé en tête des pages les plus lues pen­dant quelques mois, cet arti­cle-ci est revenu en pole posi­tion avant de céder la place à mon arti­cle sur Ocean­WP mais en con­ser­vant une hon­or­able deux­ième place).

Donc, deux ans et 130 com­men­taires plus tard, je me suis posé la ques­tion : est-il préférable de remet­tre les arti­cles orig­in­aux à jour, d’en prof­iter pour mon­tr­er ce que Guten­berg apporte, ou d’en écrire un troisième qui soit la syn­thèse des deux pre­miers, et de leurs com­men­taires ?

Je ne peux pas repren­dre la masse d’in­for­ma­tions des deux pre­miers arti­cles, les com­pil­er dans un troisième et laiss­er les deux pre­miers en ligne sans que Google ne me pénalise pour du “dupli­cate con­tent” — même si ce sont mes arti­cles et qu’il n’y a pas de piratage — à moins de con­sid­ér­er que je me pirate moi-même.

Alors j’ai repris l’ensem­ble pour une refonte, en inclu­ant les bouts de codes, les astuces qui se trou­vaient dans les com­men­taires.

Au final, je vous présente, out­re les fonc­tion­nal­ités inclus­es directe­ment dans le thème, qua­tre exten­sions (dont trois dédiées à la per­son­nal­i­sa­tion elle-même), plus de quinze bouts de codes et un thème enfant qui reprend l’ensem­ble des per­son­nal­i­sa­tions présen­tées dans l’ar­ti­cle. De quoi assur­er à votre site un look unique en un rien de temps.

C’est aus­si l’oc­ca­sion de met­tre à jour cer­taines infor­ma­tions, Twen­ty Sev­en­teen ayant évolué au fil du temps (la com­pat­i­bil­ité avec Guten­berg, entre autre, est excel­lente, ce qui n’é­tait pas le cas des pre­mières ver­sions).

Et nous revoilà à par­ler de…

Twenty Seventeen, le thème par défaut de WordPress 4.7 à 4.9

Twen­ty Sev­en­teen est juste un thème par défaut, et il com­mence à dater. Oui, mais… ce n’est pas n’im­porte quel thème par défaut : il se démar­que de ses prédécesseurs et de ses suc­cesseurs en n’é­tant pas ori­en­té blog.

Évidem­ment, il con­vien­dra pour habiller un blog. Mais ce thème per­met égale­ment de créer un site d’en­tre­prise, avec sa page d’ac­cueil à sec­tions et son image (ou sa vidéo) plein écran. Et cerise sur le gâteau, il est com­pat­i­ble avec les toutes dernières ver­sions de WooCom­merce, native­ment (un “mod­ule” dans WooCom­merce assure la com­pat­i­bil­ité).

Et bien sûr, il est désor­mais com­pat­i­ble avec le nou­v­el édi­teur par défaut, Guten­berg.

En aparté, la démo pro­posée dans le dépôt WordPress(.org) n’est pas très engageante. Je vous pro­pose donc…

Quelques sites réalisés avec Twenty Seventeen

La démo du thème sur WordPress.com est bien plus aboutie, et donne déjà une meilleure idée du résul­tat.

Mais il y a aus­si de vrais sites web qui méri­tent le détour :

Le site WP15 créé par Automat­tic pour le 15ième anniver­saire de Word­Press (le 27 mai 2018) :

Vous pou­vez aus­si vis­iter le site de Leïla Huis­soud (site One Page) pour avoir une idée de ce que l’on peut obtenir, avec un thème enfant et un min­i­mum de per­son­nal­i­sa­tion (enfin, pas qu’un min­i­mum en fait). En aparté, j’ai pris le temps de décou­vrir ses chan­sons, et j’adore !

Le site de Lau­rent Boutros — on reste dans la musique avec un gui­tariste de tal­ent — était réal­isé avec ce thème. Il n’est par con­tre plus en ligne.

Un dernier exem­ple, celui d’un restau­rant pro­posant des spé­cial­ités japon­ais­es et coréennes, le Mat­su­ba à Paris (Porte de la Vil­lette), juste pour vous met­tre l’eau à la bouche.

Sur ces deux derniers sites, vous remar­querez la vidéo en fond de page — une idée pour dynamiser votre site.

Oui, il va fal­loir met­tre la main à la pâte, aller fouiller dans les options de l’outil de per­son­nal­i­sa­tion de Word­Press, ajouter quelques exten­sions, mod­i­fi­er les CSS, rajouter des fonc­tions, mod­i­fi­er des mod­èles… mais même avec le thème par défaut, votre site aura un design bien à lui et ne vous aura rien coûté si ce n’est le temps con­sacré à sa per­son­nal­i­sa­tion.

Alors lançons-nous, décou­vrons com­ment per­son­nalis­er Twen­ty Sev­en­teen.

Pre­mière étape…

Créer un thème enfant

Mod­i­fi­er directe­ment un thème est tou­jours une (très) mau­vaise idée. À moins de ne touch­er qu’au style — et encore : unique­ment depuis l’outil de per­son­nal­i­sa­tion.

Une exten­sion va vous per­me­t­tre de créer un thème enfant sans trop de dif­fi­cultés : Child Theme Con­fig­u­ra­tor. Si vous ne con­nais­sez pas cette exten­sion, je vous invite à lire l’ar­ti­cle Pour mod­i­fi­er un thème Word­Press, apprenez à créer un thème enfant ! sur No Tuxe­do.

Pour ceux qui sont pressés, ou qui ne sont pas encore à l’aise avec l’ad­min­is­tra­tion de Word­Press, j’ai pré­paré un thème enfant prêt à l’usage, il ne vous reste plus qu’à le télécharg­er, à l’in­staller et à l’ac­tiv­er.

Vous trou­verez égale­ment des thèmes enfants dans le dépôt Word­Press : Dynam­ic Sev­en­teen, Delect, Win­ter Sol­stice, Chandi­garh et le plus abouti, Min­i­mal 20/17 livré avec deux mod­èles de page sup­plé­men­taires (une land­ing page et une page sans titre) et le sup­port de deux con­struc­teurs de pages, Ele­men­tor et Visu­al Com­pos­er (à ne pas con­fon­dre avec WPBak­ery Page Builder for Word­Press dont l’an­cien nom était effec­tive­ment Visu­al Com­pos­er).

Une fois le thème enfant en place, activez-le. Et main­tenant, attaquons-nous à la per­son­nal­i­sa­tion elle-même.

Nous ne ver­rons pas toutes les pos­si­bil­ités de per­son­nal­i­sa­tion de ce thème, elles sont infinies, mais nous allons ten­ter d’ex­plor­er un max­i­mum de pistes.

La pre­mière, la plus basique, c’est…

Personnaliser Twenty Seventeen via l’outil de personnalisation

Pour accéder à l’outil de per­son­nal­i­sa­tion, vous pou­vez, dans l’in­ter­face d’ad­min­is­tra­tion, cli­quer sur Apparence > Per­son­nalis­er. Ou depuis le site lui-même, cli­quer sur l’en­trée Per­son­nalis­er dans le menu d’ad­min­is­tra­tion.

Remplacer l’image plein écran de la page d’accueil

Pour mod­i­fi­er ou sup­primer cette image, ren­dez-vous dans En-tête du média.

Twen­ty Sev­en­teen ne se lim­ite pas à pro­pos­er de chang­er ou de sup­primer l’im­age d’en-tête, il per­met aus­si d’u­tilis­er une vidéo téléchargée en local ou sur Youtube (bien mieux pour ne pas sur­charg­er votre serveur), cou­plée à une image qui s’af­fichera le temps que la vidéo se charge.

En aparté, la tra­duc­tion française est par­fois une tra­duc­tion à la louche — si En-tête du média ne vous par­le pas, ne vous inquiétez pas : je suis moi aus­si resté per­plexe devant cet inti­t­ulé — média d’en-tête serait plus appro­prié.

Paramétrer la page d’accueil

Depuis la page d’ac­cueil, cliquez sur Options du thème.

Vous remar­querez que cet onglet n’est disponible que depuis la page d’ac­cueil elle-même, prob­a­ble­ment parce qu’il per­met de gér­er le con­tenu des dif­férentes sec­tions de cette page, mais il sert aus­si à définir le mod­èle général.

Sélec­tion­nez donc le mode d’af­fichage souhaité (une ou deux colonnes), enreg­istrez vos mod­i­fi­ca­tions, créez les pages à inclure dans la page d’ac­cueil (une page par sec­tion), avant de revenir à cet onglet pour définir les pages à affich­er et leur ordre.

Créer un menu pour vos réseaux sociaux

Eh oui, affich­er les liens vers vos pages Twit­ter, Face­book, LinkedIn, Insta­gram… n’a jamais été aus­si facile : cliquez sur Menus, puis sur Foot­er Menu.

Véri­fiez que Menu des liens soci­aux soit bien coché (il l’est par défaut), cliquez sur Ajouter des élé­ments puis sur l’on­glet Liens per­son­nal­isés avant de saisir (ou de coller) chaque lien et de le nom­mer.

L’i­cone de chaque réseau social appa­raî­tra dans le pied de page — sim­ple et effi­cace.

À ce stade, nous avons fait le tour de la per­son­nal­i­sa­tion pos­si­ble pour le thème, dans sa con­fig­u­ra­tion par défaut.

Mais comme je vous l’ai dit, il est heureuse­ment pos­si­ble d’aller plus loin. Vous pou­vez, dans un pre­mier temps…

Personnaliser Twenty Seventeen via des extensions dédiées

On compte trois exten­sions dédiées à la per­son­nal­i­sa­tion de ce thème dans le dépôt Word­Press.

Customize Twenty Seventeen

Atten­tion ! Cette exten­sion n’a pas été mise à jour depuis plusieurs mois, et n’est pas dite com­pat­i­ble avec Word­Press en ver­sion 5. Il se peut qu’il y ait des incom­pat­i­bil­ités entre cette exten­sion et la ver­sion actuelle de Word­Press. Vous l’u­tilisez “à vos risques et périls”.

Si vous n’avez jamais instal­lé d’extension, c’est le moment de lire l’article Installer, activ­er, met­tre à jour et sup­primer une exten­sion Word­Press.

Pas de paramé­trage, mais de nou­velles options pour un thème plus abouti via l’outil de per­son­nal­i­sa­tion de Word­Press.

Cus­tomize Twen­ty Sev­en­teen

Auteur(s) : boldthemes

Ver­sion actuelle : 1.0.5

Dernière mise à jour : 10 mars 2022

customize-twenty-seventeen.zip

84%Éval­u­a­tions 3 000+Instal­la­tions WP 4.5+Néces­saire

La dernière entrée du menu, BoldThemes Set­tings, per­met de con­fig­ur­er la police de car­ac­tère en util­isant les Google Fonts pour le doc­u­ment, les titres et les menus, mais aus­si de per­son­nalis­er le mod­èle de page : affich­er (ou pas) le titre des pages, l’image plein écran de la page d’accueil ou encore la posi­tion du menu.

Trois mod­èles de pages font aus­si leur appari­tion (boxed, fullscreen et wide).

Voilà déjà de quoi per­son­nalis­er le thème, mais pour créer une page d’accueil ou une land­ing page digne de ce nom, c’est encore un peu light ? Mais il y a une deux­ième exten­sion Bold Themes qui va vous faciliter la tâche, il s’ag­it de…

Bold Page Builder

Bold Page Builder

Auteur(s) : boldthemes

Ver­sion actuelle : 5.3.1

Dernière mise à jour : 24 avril 2025

bold-page-builder.5.3.1.zip

72%Éval­u­a­tions 50 000+Instal­la­tions WP 5.0+Néces­saire

Ce con­struc­teur de page gra­tu­it fonc­tionne comme la plu­part de ses homo­logues, avec un édi­teur de blocs drag and drop bien conçu et effi­cace. Ce n’est pas du WYSIWYG avec édi­tion et visu­al­i­sa­tion en direct (l’icone en haut à gauche de chaque sec­tion per­met quand même de prévi­su­alis­er la sec­tion dans une pop­up), mais son util­i­sa­tion n’en est pas moins intu­itive et agréable.

Bold Page Builder n’est pas dédié à Twen­ty Sev­en­teen, il fonc­tionne en fait avec n’im­porte quel thème ou presque. Dont celui qui nous intéresse aujour­d’hui.

Après l’avoir instal­lée et activée, l’extension est prête à l’emploi – même si vous pou­vez effectuer quelques réglages, nul besoin de s’en préoc­cu­per.

Vous pour­rez l’utiliser pour les arti­cles, les pages et tous les Cus­tom Post Types.

Cerise sur le gâteau, ce con­struc­teur de page peut cohab­iter avec Ele­men­tor (mais vous aurez à choisir avec lequel vous créez chaque page, on ne peut pas mix­er les deux au sein d’un même doc­u­ment).

Un bou­ton (sous le titre et le permalien) per­met de pass­er de l’éditeur par défaut au con­struc­teur de page :

Le menu en bas de la fenêtre d’édition donne accès à des actions génériques (annuler / refaire, prévi­su­al­i­sa­tion et enreg­istrement).

Les sections, rangées et colonnes

Le bou­ton bleu cen­tral crée les sec­tions. La sec­tion est l’élément de pre­mier niveau dans la page, elle est com­posée a min­i­ma d’une rangée (row en anglais), elle même com­por­tant une ou plusieurs colonnes. Le con­tenu est lui posi­tion­né à l’intérieur des colonnes.

Lorsque vous sur­v­olez un élé­ment (sec­tion, rangée, colonne ou con­tenu), un menu s’affiche pour effectuer les opéra­tions pos­si­bles.

Le bou­ton de ce menu con­textuel per­met d’ajouter une rangée  aux sec­tions, de mod­i­fi­er le mod­èle de rangée ou d’ajouter un élé­ment aux colonnes.

Le bou­ton ouvre une fenêtre pop­up pour per­son­nalis­er l’élément :

Pour les sec­tions par exem­ple, vous choi­sis­sez le mod­èle (boxed / wide), l’espacement entre les sec­tions (top et bot­tom spac­ing), l’alignement ver­ti­cal au sein de la sec­tion, l’image de fond avec ou sans par­al­laxe (onglet Design) ou la vidéo en arrière plan (onglet Video).

Le dernier onglet (Cus­tom) per­met d’attribuer une id à la sec­tion (ou à tout élé­ment que vous ajoutez via le con­struc­teur de page), de définir le style via des class­es ou via l’attribut HTML style.

Atten­tion ! L’id doit être unique sur la page ! Dans le cas con­traire, vous pou­vez avoir des prob­lèmes d’affichage ou de com­porte­ment.

Les modules

Vous avez 17 mod­ules à votre dis­po­si­tion pour créer une page per­son­nal­isée : vidéo, image, slid­er, galerie d’images, icone, bou­ton, texte, accordéon, onglets, liste d’articles… tous per­son­nal­is­ables.

Chaque élé­ment est éditable via une pop­up sim­i­laire à celle de la cap­ture d’écran per­son­nalis­er une sec­tion.

Copier / Coller un élément

Vous avez remar­qué les icones clone, copy et copy + dans le menu au sur­vol. Le pre­mier insère un élé­ment iden­tique à celui que vous sur­v­olez, les deux autres bou­tons per­me­t­tent de copi­er un élé­ment (copy) ou plusieurs (copy +) dans la page active, mais aus­si dans n’importe quelle autre page où l’éditeur Bold Page Builder est activé.

Vous copiez dans la page d’origine, vous collez dans la page de des­ti­na­tion – une alter­na­tive au sys­tème de mod­èles (tem­plates en anglais) d’autres con­struc­teurs de page.

Et le résul­tat ? Bold Themes a pen­sé à tout et met à dis­po­si­tion…

Des démos fonctionnelles

Bold Themes four­nit trois exem­ples de sites créés avec cette con­fig­u­ra­tion (le thème Twen­ty Sev­en­teen et les deux exten­sions). Le résul­tat par­le de lui-même :

• Wed­ding, thème « One Page » pour l’événementiel (mariages ou fêtes)
• Acco­mo­da­tion, autre thème « One Page » pour une land­ing page
• Con­struc­tion, thème com­plet qui peut servir de mod­èle pour un cab­i­net d’architectes, un déco­ra­teur d’intérieur ou un créatif (design­er, pho­tographe…)

Les trois démos et les instruc­tions pour les utilis­er sont disponibles dans l’onglet Bold Page Builder / Instal­la­tion (How to import demo con­tent).

Il existe d’autres exten­sions pour per­son­nalis­er Twen­ty Sev­en­teen, dont…

Advanced Twenty Seventeen

Advanced Twen­ty Sev­en­teen

Auteur(s) : Sat­urn­Plu­g­ins

Ver­sion actuelle : 1.3.1

Dernière mise à jour : 28 novem­bre 2017

advanced-twenty-seventeen.1.3.1.zip

86%Éval­u­a­tions 3 000+Instal­la­tions WP 4.7+Néces­saire

Elle pousse la per­son­nal­i­sa­tion plus loin que Cus­tomize Twen­ty Sev­en­teen de BoldThemes, mais n’est pas cou­plée à un con­struc­teur de page. Il existe d’autres con­struc­teurs de pages qui pour­ront faire votre bon­heur, tels que Ele­men­tor, Beaver Builder ou WPBak­ery Page Builder.

Une dernière exten­sion per­met de per­son­nalis­er Twen­ty Sev­en­teen, il s’ag­it de…

Options for Twenty Seventeen

Options for Twen­ty Sev­en­teen

Auteur(s) : Oliv­er Cam­pi­on

Ver­sion actuelle : 2.5.4

Dernière mise à jour : 9 avril 2025

options-for-twenty-seventeen.2.5.4.zip

98%Éval­u­a­tions 10 000+Instal­la­tions WP 4.6+Néces­saire

Cette dernière exten­sion per­met d’im­pacter 14 points dans sa ver­sion gra­tu­ite, et 12 de plus dans sa ver­sion payante (19,99£).

Les options sont disponibles via l’outil de per­son­nal­i­sa­tion, et elles com­plè­tent les réglages disponibles dans les autres exten­sions.

En aparté, le site de l’édi­teur de cette dernière exten­sion est habil­lé par Twen­ty Sev­en­teen, et il s’est cer­taine­ment servi de son exten­sion pour le per­son­nalis­er. Le résul­tat est tout sim­ple­ment bluffant :

Si vous voulez aller plus loin, après l’outil de per­son­nal­i­sa­tion et les exten­sions, il va fal­loir met­tre les mains dans le cam­bouis. L’é­tape suiv­ante, c’est…

Personnaliser Twenty Seventeen via le code

Grâce aux feuilles de style

Même s’il est pos­si­ble de mod­i­fi­er l’af­fichage en util­isant l’outil de per­son­nal­i­sa­tion (onglet CSS addi­tion­nel) il est préférable d’in­té­gr­er vos mod­i­fi­ca­tions à la feuille de style du thème enfant (le fichi­er style.css  de votre thème enfant) pour opti­miser le temps de charge­ment de vos pages.

Définir une image de fond fixe

Com­mencez par ajouter l’im­age à votre bib­lio­thèque de médias : dans l’in­ter­face d’ad­min­is­tra­tion de Word­Press, cliquez sur Médias > Ajouter. Importez une image, puis cliquez sur Mod­i­fi­er.

Sélec­tion­nez l’url du média en haut à gauche pour le copi­er dans la pro­priété CSS.

Enfin, insérez ces quelques lignes dans le fichi­er style.css .

.site-content {
  background-image: url("/*exemple : https://mondomaine.com/wp-content/uploads/2017/07/bg-img.jpg*/");   
  background-repeat: no-repeat;   
  background-attachment: fixed; 
}

En fonc­tion de l’im­age de fond insérée, pensez à mod­i­fi­er la couleur du thème : si votre image est plutôt dans des tons fon­cés, choi­sis­sez Fon­cé dans l’on­glet Couleurs de l’outil de per­son­nal­i­sa­tion.

Avoir un menu haut fixe, même dans la version mobile

Si le menu haut de Twen­ty Sev­en­teen est fixe par défaut (sauf dans la page d’ac­cueil, si vous avez une image d’en-tête), il n’en est pas de même lors de l’af­fichage en ver­sion mobile. Nous n’al­lons pas dis­cuter des avan­tages et des incon­vénients d’un menu fixe sur un ter­mi­nal mobile, il y en a qui le veu­lent ain­si — et j’en suis.

@media screen and (max-width: 767px) {
  .navigation-top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99999;
  }
  /* Si vous affichez le menu d'administration sur le site */
  .admin-bar .navigation-top {
    padding-top: 45px;
  }
}

Désactiver le positionnement fixe du menu

Et pour ceux qui à l’in­verse ne veu­lent pas du tout d’un menu fixe, col­lé en haut de page :

.site-navigation-fixed.navigation-top { position: relative; }

Changer les autres caractéristiques du menu

Il est aus­si pos­si­ble de pouss­er plus loin la per­son­nal­i­sa­tion du menu, en mod­i­fi­ant la taille des car­ac­tères, la couleur du texte, du fond, et même en affichant une image de fond. Il suf­fit de rajouter les bouts de code ci-dessous dans les CSS :

/* modifier la taille des caractères */
ul#top-menu.menu li {
  font-size: 20px; /* valeurs en rem, em ou px */
}

/* changer la couleur de fond du menu */
.navigation-top,
.main-navigation ul {
  background: black !important; /* ou #000000 */
}

/* changer la couleur du texte du menu */
.navigation-top a,
.menu-toggle {
  color: white !important; /* ou #ffffff */
}

/* image de fond pour le menu */
.navigation-top {
  background-image: url("http://mondomaine.com/wp-content/uploads/2017/07/monimage.jpg") !important;
}
.main-navigation ul {
  background: transparent !important;
}

Placer la barre latérale à gauche

Sans rien chang­er si ce n’est quelques pro­priétés CSS… Vu que la barre latérale ne s’af­fiche ni à droite, ni à gauche, mais en dessous pour les ter­minaux mobiles, il est là aus­si néces­saire de faire appel aux media queries .

@media screen and (min-width: 768px) {
  .has-sidebar #secondary {
    float: left;
  }
  .has-sidebar #primary {
    float: right;
  }
  .has-sidebar:not(.error404) #primary {
    float: right;
  }
}

Modifier la largeur de la barre latérale

La largeur de la barre latérale est par défaut de 36% (et 58% pour le con­tenu prin­ci­pal). Si vous souhaitez mod­i­fi­er cette valeur, il vous suf­fit d’in­sér­er ce code dans votre feuille de style :

@media screen and (min-width: 48em) {   
  .has-sidebar:not(.error404) #primary {
    width: 65%;
  }   
  .has-sidebar #secondary {     
    width: 31%;   
  } 
}

Le total n’est pas de 100%, la dif­férence règle l’é­carte­ment entre les deux colonnes pour le con­fort de lec­ture.

Élargir la colonne « contenu » de la page d’accueil

Vous pou­vez, en inclu­ant ceci dans les CSS per­son­nal­isées :

.page-one-column .panel-content .wrap {
    max-width: 1000px;
}

Centrer le logo, le titre et l’accroche du site

#masthead .wrap {   text-align: center; }

Redimensionner le logo

Les dimen­sions par défaut sont de 350x80px. Vous allez jouer avec max-height et max-width pour en aug­menter ou en réduire la taille.

@media screen and (min-width: 48em) {
  .custom-logo-link img {
    max-width: 700px;
    max-height: 160px;
  }
}

Égaliser la largeur des zones de widget du pied de page

Nous avons vu que la largeur des con­tenu et barre latérale sont par défaut de 58 et 36 %. Le pied de page est inver­sé avec 36% pour la pre­mière colonne et 58% pour la deux­ième.

/* largeur identique */
@media screen and (min-width: 48em) {
  .site-footer .widget-column.footer-widget-1, 
  .site-footer .widget-column.footer-widget-2, 
  .social-navigation, .site-info {
    width: 47%;
  }
}

Vous pou­vez envis­ager toutes les com­bi­naisons pos­si­bles, en créant des mosaïques avec ces qua­tre zones, par exem­ple :

@media screen and (min-width: 48em) {
  .site-footer .widget-column.footer-widget-1 {
    width: 31%;
  }
  .site-footer .widget-column.footer-widget-2 {
    width: 65%;
  }
  .social-navigation {
    width: 65%;
  }
  .site-info {
    width: 31%;
  }
}

Modifier la largeur des pages et des articles

La largeur max­i­male par défaut est de 740 pix­els pour les pages et les arti­cles de blog sans barre latérale et de 1000 pix­els pour les arti­cles avec une barre latérale. Vous souhaitez allouer plus d’espace à votre con­tenu ? Ren­seignez les pro­priétéswidth et max-width avec la valeur de votre choix, en em, en pix­els ou en pour­cent­age, ajustez les largeurs de colonnes, ajustez les marges intérieures avec la pro­priété padding.

@media screen and (min-width: 48em) {   
  .wrap {     
    max-width: 1280px;     
    padding-left: 3em;     
    padding-right: 3em;   
  }  
  /* pour les pages et articles avec barre latérale */   
  #primary {     
    width: 70% !important;   
  }   
  .has-sidebar #secondary {     
    width: 26% !important;   
  }  
  /* pour les pages et articles sans barre latérale */   
  .single-post:not(.has-sidebar) #primary,    
  .page.page-one-column:not(.twentyseventeen-front-page) #primary,
  .archive.page-one-column:not(.has-sidebar) .page-header,
  .archive.page-one-column:not(.has-sidebar) #primary {     
    width: 100% !important;     
    max-width: 1280px;   
  } 
}

Via le fichier de fonctions du thème

Les fonc­tions qui suiv­ent sont directe­ment liées au thème, c’est donc dans le fichi­er functions.php de votre thème enfant que vous aller les enreg­istr­er.

Ajouter des sections à la page d’accueil

Les 4 sec­tions pro­posées par défaut ne vous suff­isent pas ? Ajoutez le bout de code ci-dessous :

function tsct_front_page_sections() {
    return 5; // la valeur souhaitée
}
add_filter( 'twentyseventeen_front_page_sections', 'tsct_front_page_sections' );

Personnaliser l’image de fond de chaque page

Pour met­tre une image d’arrière plan spé­ci­fique à chaque page, il va fal­loir utilis­er les champs per­son­nal­isés pour le fond de page.

Pour l’édi­teur clas­sique, les champs per­son­nal­isés sont en-dessous de la fenêtre d’édition, mais ils ne sont pas affichés par défaut, il va te fal­loir cli­quer sur Options de l’écran (en haut à droite dans le nav­i­ga­teur) puis cocher Champs per­son­nal­isés.

Pour Guten­berg, la pos­si­bil­ité de créer des champs per­son­nal­isés a tout sim­ple­ment dis­paru. Mais ne vous inquiétez pas, Cette dis­pari­tion n’est pas irréversible.

Vous trou­verez, en haut de l’édi­teur, sur la droite, trois points ver­ti­caux. Cliquez, descen­dez jusqu’à Options, puis cochez Champs per­son­nal­isés. Il vous fau­dra cli­quer sur Enreg­istr­er et recharg­er pour pou­voir vous servir des champs per­son­nal­isés.

Créez un champ per­son­nal­isé, et nom­mez-le, bgimg par exem­ple.

Entrez l’url de l’image (ou faites un copi­er / coller depuis la bib­lio­thèque des médias). Dans le fichi­er functions.php, ajoutez les lignes suiv­antes :

function tsct_addPageBackground() {
  if ( is_page() ): 
    $custom_fields = get_post_custom();
    $my_custom_field = $custom_fields['bgimg'];
    if ( !empty( $my_custom_field  ) ):
      $bgImage = '.site-content {background-image: url('.$custom_fields['bgimg'][0].') !important;}';
      wp_add_inline_style( 'twentyseventeen-style', $bgImage );
    endif;
  endif;
}
add_action( 'wp_enqueue_scripts', 'tsct_addPageBackground', 11 );

Via le fichier de fonctions et les modèles de pages

Changer les crédits dans le pied de page

Fière­ment propul­sé par Word­Press ? D’accord, pour un crédit par défaut, pourquoi pas ? Mais si vous voulez insér­er vos pro­pres crédits, il va fal­loir ajouter une fonc­tion, et mod­i­fi­er le fichi­er template-parts/footer/site-info.php.

Com­mencez par copi­er ce fichi­er dans votre thème enfant en respec­tant bien la struc­ture des réper­toires.

Éditez le, sup­primez tout et insérez le code suiv­ant :

<?php
/**  
  * Displays footer site info 
  * @package WordPress  
  * @subpackage Twenty_Seventeen  
  * @since 1.0 
  * @version 1.0 
 */ ?>
<div class="site-info">
    <?php do_action('action_site_info');?>
</div> <!-- .site-info -->

Puis, dans le fichi­er functions.php, ajoutez ces lignes de code :

add_action('action_site_info', 'tsct_siteInfo');

function tsct_siteInfo() {
  $theme = wp_get_theme();
  $usr = get_userdata( 1 ); // id de l'administrateur du site
  echo '2017 - ' . get_bloginfo ( 'name' ) . ' ' . 
       '(Fièrement propulsé par <a href="' . esc_url( __( 'https://wordpress.org/', 'twentyseventeen' ) ) . '" target="_blank" rel="noopener">WordPress</a>)' .
       '<br />Design <a href="' . esc_html( $theme->get( 'AuthorURI' ) ) . '"  target="_blank" rel="noopener">' . esc_html( $theme->get( 'Author' ) ) . '</a> - Contenu  ' . $usr->user_nicename . ' ' .
       '(<a href="mailto:'. $usr->user_email .'" target="_top">Contact</a>)';
}

Alter­na­tive : vous pou­vez aus­si coder « en dur » les infos du site dans le fichi­er template-parts/footer/site-info.php. Dans ce cas, vous n’avez pas besoin de touch­er au fichi­er functions.php.

<?php
/**
 * Displays footer site info
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 * @version 1.0
 */
 
?>
<div class="site-info">
  © 2017 - <a href="http://mondomaine.com">Mon domaine</a>
</div><!-- .site-info -->

Ajouter des zones de widgets au pied de page

Par défaut, Twen­ty Sev­en­teen pro­pose deux zones de wid­gets pour le pied de page. Si vous souhaitez en rajouter, rien de plus sim­ple (enfin, en suiv­ant les instruc­tions qui suiv­ent ?)

Pre­mière étape, il va fal­loir “déclar­er” ces zones dans le fichi­er functions.php du thème enfant :

function tsct_morewidgets_init() {

  register_sidebar( array(
    'name'          => __( 'Footer 3', 'twentyseventeen' ),
    'id'            => 'sidebar-4',
    'description'   => __( 'Add widgets here to appear in your footer.', 'twentyseventeen' ),
    'before_widget' => '<section id="%1$s" class="widget %2$s">',
    'after_widget'  => '</section>',
    'before_title'  => '<h2 class="widget-title">',
    'after_title'   => '</h2>',
  ) );

  register_sidebar( array(
    'name'          => __( 'Footer 4', 'twentyseventeen' ),
    'id'            => 'sidebar-5',
    'description'   => __( 'Add widgets here to appear in your footer.', 'twentyseventeen' ),
    'before_widget' => '<section id="%1$s" class="widget %2$s">',
    'after_widget'  => '</section>',
    'before_title'  => '<h2 class="widget-title">',
    'after_title'   => '</h2>',
  ) );
}
add_action( 'widgets_init', 'tsct_morewidgets_init' );

Ensuite ajoutez un fichi­er template-parts/footer/footer-widgets.php tou­jours dans le thème enfant. Reprenez le fichi­er du thème par­ent, et rem­placez le bloc entre les balis­es <aside […]> et </aside><!-- .widget-area --> par celui‐ci :

<?php
if ( is_active_sidebar( 'sidebar-2' ) ) { ?>
  <div class="widget-column footer-widget-1">
    <?php dynamic_sidebar( 'sidebar-2' ); ?>
  </div>
<?php }
if ( is_active_sidebar( 'sidebar-3' ) ) { ?>
  <div class="widget-column footer-widget-2">
    <?php dynamic_sidebar( 'sidebar-3' ); ?>
  </div>
<?php }
if ( is_active_sidebar( 'sidebar-4' ) ) { ?>
  <div class="widget-column footer-widget-3">
    <?php dynamic_sidebar( 'sidebar-4' ); ?>
  </div>
<?php }
if ( is_active_sidebar( 'sidebar-5' ) ) { ?>
  <div class="widget-column footer-widget-4">
    <?php dynamic_sidebar( 'sidebar-5' ); ?>
  </div>
<?php } ?>

Rajoutez pour finir ces lignes à votre fichi­er style.css :

@media screen and (min-width: 48em) {
  .site-footer .widget-column.footer-widget-2, 
  .site-footer .widget-column.footer-widget-3, 
  .site-footer .widget-column.footer-widget-4, 
  .site-footer .widget-column.footer-widget-5 {
      width: 22%;
  } 
  .site-footer .widget-column.footer-widget-5 {
      float: right;
  }
}

Et voila deux zones sup­plé­men­taires de disponibles ! Si vous n’en voulez qu’une de plus, sup­primez le deux­ième bloc register_sidebar( … ) ; si vous en voulez trois, ajoutez un bloc. Adaptez ensuite le code du mod­èle et les CSS en fonc­tion de votre besoin

Par défaut, Twen­ty Sev­en­teen réserve les bar­res latérales aux arti­cles. Elles peu­vent pour­tant être utiles sur les pages, pour affich­er un for­mu­laire de con­tact et divers­es infor­ma­tions par exem­ple.

Si vous vous tenez à vos bar­res latérales (si vous en avez l’utilité surtout), il va fal­loir mod­i­fi­er le fichi­er page.php. Com­mencez par le copi­er dans votre thème enfant. Éditez le et ajoutez le code suiv­ant entre </div><!-- #primary --> et </div><!-- .wrap --> :

<?php get_sidebar(); ?>

Puis, dans le fichi­er functions.php, ajoutez ces lignes :

function tsct_body_classes_child( $classes ){
if ( is_active_sidebar( 'sidebar-1' ) &&  is_page() ) {
        $classes[] = 'has-sidebar';
    }
    return $classes;
}
add_filter( 'body_class', 'tsct_body_classes_child' );

La barre latérale, si vous lui avez assigné des wid­gets, s’af­fichera désor­mais dans vos pages.

Pour ceux qui voudraient des pages avec barre latérale et d’autres sans, copiez dans votre thème enfant le fichi­er page.php ini­tial, renommez-le en  page-with-sidebard.php, éditez-le, effectuez les mod­i­fi­ca­tions ci-dessus et rem­placez * The template for displaying all pages par * Template Name: With Sidebar.

Si vous voulez affich­er une barre latérale dif­férente sur chaque page, l’ex­ten­sion Cus­tom Side­bars – Dynam­ic Wid­get Area Man­ag­er est toute indiquée.

Pour ceux qui ne veu­lent pas de barre latérale, ni dans les pages, ni dans les arti­cles, c’est très sim­ple : il suf­fit de sup­primer tous les wid­gets de la Colonne latérale du blog (dans Apparence > Wid­gets). Vos arti­cles s’af­ficheront en pleine largeur.

Changer le média d’en-tête à chaque page

Une fois le média d’en-tête défi­ni, c’est le même pour toutes les pages de votre site. Si vous souhaitez affich­er un média dif­férent à chaque page, il va fal­loir procéder par étapes.

En tout pre­mier lieu, ajoutez un champ per­son­nal­isé dans la page, que vous nom­mez Ban­niere par exem­ple. Pour tout savoir sur l’u­til­i­sa­tion des champs per­son­nal­isés, con­sul­tez le para­graphe Per­son­nalisez l’im­age de fond de chaque page.

Ren­dez-vous dans l’onglet Médias du menu d’administration, récupérez l’identifiant numérique de l’image en sur­volant l’image (par exem­ple, pour l’image du site web de Lau­rent Boutros, j’ai https://blog.tsw.ovh/wp-admin/post.php?post=5684&action=edit qui s’affiche en bas, dans mon nav­i­ga­teur, l’identifiant est donc 5684). Ren­seignez le champ per­son­nal­isé Ban­niere avec cette valeur.

Copiez ensuite le fichi­er template-parts/header/header-image.php dans le thème enfant en respec­tant bien la hiérar­chie des sous-dossiers. Vous trou­verez cette ligne (le fichi­er n’est pas très long) :

<?php the_custom_header_markup(); ?>

Rem­placez-la par les suiv­antes :

<?php $image_id = get_post_meta( get_the_ID(), 'Banniere', true );
if ( ! empty ( $image_id ) ):
  $image_datas = wp_get_attachment_image_src( image_id, 'full' );
  echo '<div id="wp-custom-header" class="wp-custom-header"><img src="' . image_datas [ 'url' ] . '" width="' . image_datas [ 'width' ] . '" height="' . image_datas [ 'height' ] . '" ' . wp_get_attachment_image_srcset($image_id, 'full') . ' /></div>';
else: 
  the_custom_header_markup();
endif; ?>

Et c’est fait !

Voila de quoi vous occu­per un moment. Bien sûr il y a d’autres per­son­nal­i­sa­tions pos­si­bles, mais comme la seule vraie lim­ite, c’est votre imag­i­na­tion… nous allons nous arrêter là.

Un exemple concret avec Twenty Seventeen et les astuces de cet article

J’ai créé un site exem­ple, dédié au thème, en anglais : Twen­ty Sev­en­teen 101. Min­i­mal­iste, mais par­fois, il n’y a pas besoin de plus.

Je vous dis tout à pro­pos de cette expéri­ence dans l’ar­ti­cle Créez un site web avec Word­Press et Twen­ty Sev­en­teen en moins d’une heure.

Conclusion

Brut de fonderie, Twen­ty Sev­en­teen n’est jamais qu’un thème par défaut, bien moins con­fig­urable qu’un thème “pre­mi­um” ven­du en général entre 60 et 100 €. Peu con­fig­urable, mais avec un poten­tiel intéres­sant.

Les astuces, les bouts de code, les exten­sions présen­tés dans cet arti­cle com­pensent. Et dites-vous bien que ce n’est qu’un aperçu des per­son­nal­i­sa­tions pos­si­bles pour ce thème.

Alors, on se sert de Twen­ty Sev­en­teen, ou on cherche un autre thème ? Si vous voulez tester les astuces vues dans cet arti­cle, j’ai créé un thème enfant avec les CSS, les fonc­tions et les fichiers page-withsidebar.php et template-parts/footer/site-info.php. C’est à vous, lais­sez-vous ten­ter 😉

Et n’hésitez pas à don­ner votre avis sur ce thème(ou à pos­er des ques­tions) dans les com­men­taires !

Sources

Pour rédi­ger cet arti­cle, j’ai effec­tué quelques recherch­es sur inter­net. J’ai puisé dans les arti­cles How to Cus­tomize the Free Twen­ty Sev­en­teen Word­Press Theme et 5 Excel­lent Ways to Hack the Twen­ty Sev­en­teen Word­Press Theme du blog wpmudev, How To Cus­tomize Twen­ty Sev­en­teen Word­Press Theme Using Child Theme du blog wpe­ka, et How To Mas­ter Twen­ty Sev­en­teen (Or Any Word­Press Theme in 2017) sur Design Bombs. Et un peu partout ailleurs.