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 23 minutes à lire et comporte 5614 mots.

Attention ! Cet article ne vaut que pour la ver­sion de WordPress Open Source (à télé­char­ger et à ins­tal­ler chez un héber­geur) ; ceux dont le site est héber­gé sur wordpress.com devront s’ac­quit­ter d’un for­fait annuel de 96 € pour pou­voir per­son­na­li­ser les CSS, ou de 300 € pour pou­voir uti­li­ser la plu­part des exten­sions dis­po­nibles sur wordpress.org

En préambule

Twenty Seventeen a été le thème par défaut, pour WordPress 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ébiscité.

Lorsque j’ai rédi­gé mon pre­mier article sur ce thème (Habillez votre site avec Twenty Seventeen et les exten­sions Bold Themes), puis le second (Personnaliser Twenty Seventeen – astuces, bouts de code et exten­sions), je n’au­rais jamais pen­sé avoir autant de lec­teurs et de commentaires.

Et je n’au­rais jamais pen­sé que même après l’ar­ri­vée de WordPress 5 et d’un nou­veau thème par défaut (Twenty Nineteen), cet article serait tou­jours dans le trio de tête de ce blog. De fait, après que mon article sur Twenty Nineteen ait cara­co­lé en tête des pages les plus lues pen­dant quelques mois, cet article-ci est reve­nu en pole posi­tion avant de céder la place à mon article sur OceanWP mais en conser­vant une hono­rable deuxiè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 remettre les articles ori­gi­naux à jour, d’en pro­fi­ter pour mon­trer ce que Gutenberg apporte, ou d’en écrire un troi­sième qui soit la syn­thèse des deux pre­miers, et de leurs commentaires ?

Je ne peux pas reprendre la masse d’in­for­ma­tions des deux pre­miers articles, les com­pi­ler dans un troi­sième et lais­ser les deux pre­miers en ligne sans que Google ne me péna­lise pour du « dupli­cate content » — même si ce sont mes articles et qu’il n’y a pas de pira­tage — à moins de consi­dé­rer que je me pirate moi-même.

Alors j’ai repris l’en­semble pour une refonte, en incluant les bouts de codes, les astuces qui se trou­vaient dans les commentaires.

Au final, je vous pré­sente, outre les fonc­tion­na­li­tés incluses direc­te­ment dans le thème, quatre exten­sions (dont trois dédiées à la per­son­na­li­sa­tion elle-même), plus de quinze bouts de codes et un thème enfant qui reprend l’en­semble des per­son­na­li­sa­tions pré­sen­tées dans l’ar­ticle. De quoi assu­rer à votre site un look unique en un rien de temps.

C’est aus­si l’oc­ca­sion de mettre à jour cer­taines infor­ma­tions, Twenty Seventeen ayant évo­lué au fil du temps (la com­pa­ti­bi­li­té avec Gutenberg, entre autre, est excel­lente, ce qui n’é­tait pas le cas des pre­mières versions).

Et nous revoi­là à par­ler de…

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

Twenty Seventeen 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émarque de ses pré­dé­ces­seurs et de ses suc­ces­seurs en n’é­tant pas orien­té blog.

Évidemment, il convien­dra pour habiller un blog. Mais ce thème per­met éga­le­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­pa­tible avec les toutes der­nières ver­sions de WooCommerce, nati­ve­ment (un « module » dans WooCommerce assure la compatibilité).

Et bien sûr, il est désor­mais com­pa­tible avec le nou­vel édi­teur par défaut, Gutenberg.

En apar­té, la démo pro­po­sée dans le dépôt WordPress(.org) n’est pas très enga­geante. 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 abou­tie, et donne déjà une meilleure idée du résultat.

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

Le site WP15 créé par Automattic pour le 15ième anni­ver­saire de WordPress (le 27 mai 2018) :

Vous pou­vez aus­si visi­ter le site de Leïla Huissoud (site One Page) pour avoir une idée de ce que l’on peut obte­nir, avec un thème enfant et un mini­mum de per­son­na­li­sa­tion (enfin, pas qu’un mini­mum en fait). En apar­té, j’ai pris le temps de décou­vrir ses chan­sons, et j’adore ! 

Le site de Laurent Boutros — on reste dans la musique avec un gui­ta­riste de talent — était réa­li­sé avec ce thème. Il n’est par contre plus en ligne.

Un der­nier exemple, celui d’un res­tau­rant pro­po­sant des spé­cia­li­tés japo­naises et coréennes, le Matsuba à Paris (Porte de la Villette), juste pour vous mettre l’eau à la bouche.

Sur ces deux der­niers sites, vous remar­que­rez la vidéo en fond de page — une idée pour dyna­mi­ser votre site.

Oui, il va fal­loir mettre la main à la pâte, aller fouiller dans les options de l’ou­til de per­son­na­li­sa­tion de WordPress, ajou­ter quelques exten­sions, modi­fier les CSS, rajou­ter des fonc­tions, modi­fier des modèles… mais même avec le thème par défaut, votre site aura un desi­gn bien à lui et ne vous aura rien coû­té si ce n’est le temps consa­cré à sa personnalisation.

Alors lan­çons-nous, décou­vrons com­ment per­son­na­li­ser Twenty Seventeen.

Première étape…

Créer un thème enfant

Modifier direc­te­ment un thème est tou­jours une (très) mau­vaise idée. À moins de ne tou­cher qu’au style — et encore : uni­que­ment depuis l’ou­til de personnalisation.

Une exten­sion va vous per­mettre de créer un thème enfant sans trop de dif­fi­cul­tés : Child Theme Configurator. Si vous ne connais­sez pas cette exten­sion, je vous invite à lire l’ar­ticle Pour modi­fier un thème WordPress, appre­nez à créer un thème enfant ! sur No Tuxedo.

Pour ceux qui sont pres­sés, ou qui ne sont pas encore à l’aise avec l’ad­mi­nis­tra­tion de WordPress, j’ai pré­pa­ré un thème enfant prêt à l’u­sage, il ne vous reste plus qu’à le télé­char­ger, à l’ins­tal­ler et à l’activer.

Vous trou­ve­rez éga­le­ment des thèmes enfants dans le dépôt WordPress : Dynamic Seventeen, Delect, Winter Solstice, Chandigarh et le plus abou­ti, Minimal 20/17 livré avec deux modèles de page sup­plé­men­taires (une lan­ding page et une page sans titre) et le sup­port de deux construc­teurs de pages, Elementor et Visual Composer (à ne pas confondre avec WPBakery Page Builder for WordPress dont l’an­cien nom était effec­ti­ve­ment Visual Composer).

Une fois le thème enfant en place, acti­vez-le. Et main­te­nant, atta­quons-nous à la per­son­na­li­sa­tion elle-même.

Nous ne ver­rons pas toutes les pos­si­bi­li­tés de per­son­na­li­sa­tion de ce thème, elles sont infi­nies, mais nous allons ten­ter d’ex­plo­rer un maxi­mum de pistes.

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

Personnaliser Twenty Seventeen via l’outil de personnalisation

Pour accé­der à l’ou­til de per­son­na­li­sa­tion, vous pou­vez, dans l’in­ter­face d’ad­mi­nis­tra­tion, cli­quer sur Apparence > Personnaliser. Ou depuis le site lui-même, cli­quer sur l’en­trée Personnaliser dans le menu d’administration.

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

Pour modi­fier ou sup­pri­mer cette image, ren­dez-vous dans En-tête du média.

Twenty Seventeen ne se limite pas à pro­po­ser de chan­ger ou de sup­pri­mer l’i­mage d’en-tête, il per­met aus­si d’u­ti­li­ser une vidéo télé­char­gée en local ou sur Youtube (bien mieux pour ne pas sur­char­ger votre ser­veur), cou­plée à une image qui s’af­fi­che­ra le temps que la vidéo se charge.

En apar­té, la tra­duc­tion fran­çaise est par­fois une tra­duc­tion à la louche — si En-tête du média ne vous parle pas, ne vous inquié­tez pas : je suis moi aus­si res­té per­plexe devant cet inti­tu­lé — média d’en-tête serait plus approprié.

Paramétrer la page d’accueil

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

Vous remar­que­rez que cet onglet n’est dis­po­nible que depuis la page d’ac­cueil elle-même, pro­ba­ble­ment parce qu’il per­met de gérer le conte­nu des dif­fé­rentes sec­tions de cette page, mais il sert aus­si à défi­nir le modèle géné­ral.

Sélectionnez donc le mode d’af­fi­chage sou­hai­té (une ou deux colonnes), enre­gis­trez vos modi­fi­ca­tions, créez les pages à inclure dans la page d’ac­cueil (une page par sec­tion), avant de reve­nir à cet onglet pour défi­nir les pages à affi­cher et leur ordre.

Créer un menu pour vos réseaux sociaux

Eh oui, affi­cher les liens vers vos pages Twitter, Facebook, LinkedIn, Instagram… n’a jamais été aus­si facile : cli­quez sur Menus, puis sur Footer Menu.

Vérifiez que Menu des liens sociaux soit bien coché (il l’est par défaut), cli­quez sur Ajouter des élé­ments puis sur l’on­glet Liens per­son­na­li­sés avant de sai­sir (ou de col­ler) chaque lien et de le nommer.

L’icone de chaque réseau social appa­raî­tra dans le pied de page — simple et efficace.

À ce stade, nous avons fait le tour de la per­son­na­li­sa­tion pos­sible pour le thème, dans sa confi­gu­ra­tion par défaut.

Mais comme je vous l’ai dit, il est heu­reu­se­ment pos­sible d’al­ler 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­na­li­sa­tion de ce thème dans le dépôt WordPress.

Customize Twenty Seventeen

Attention ! Cette exten­sion n’a pas été mise à jour depuis plu­sieurs mois, et n’est pas dite com­pa­tible avec WordPress en ver­sion 5. Il se peut qu’il y ait des incom­pa­ti­bi­li­tés entre cette exten­sion et la ver­sion actuelle de WordPress. Vous l’u­ti­li­sez « à vos risques et périls ».

Si vous n’avez jamais ins­tal­lé d’extension, c’est le moment de lire l’article Installer, acti­ver, mettre à jour et sup­pri­mer une exten­sion WordPress.

Pas de para­mé­trage, mais de nou­velles options pour un thème plus abou­ti via l’outil de per­son­na­li­sa­tion de WordPress.

La der­nière entrée du menu, BoldThemes Settings, per­met de confi­gu­rer la police de carac­tère en uti­li­sant les Google Fonts pour le docu­ment, les titres et les menus, mais aus­si de per­son­na­li­ser le modèle de page : affi­cher (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 appa­ri­tion (boxed, fulls­creen et wide).

Voilà déjà de quoi per­son­na­li­ser le thème, mais pour créer une page d’accueil ou une lan­ding page digne de ce nom, c’est encore un peu light ? Mais il y a une deuxième exten­sion Bold Themes qui va vous faci­li­ter la tâche, il s’a­git de…

Bold Page Builder

Ce construc­teur de page gra­tuit 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 visua­li­sa­tion en direct (l’icone en haut à gauche de chaque sec­tion per­met quand même de pré­vi­sua­li­ser la sec­tion dans une popup), mais son uti­li­sa­tion n’en est pas moins intui­tive et agréable.

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

Après l’avoir ins­tal­lée et acti­vée, l’extension est prête à l’emploi – même si vous pou­vez effec­tuer quelques réglages, nul besoin de s’en préoccuper.

Vous pour­rez l’utiliser pour les articles, les pages et tous les Custom Post Types.

Cerise sur le gâteau, ce construc­teur de page peut coha­bi­ter avec Elementor (mais vous aurez à choi­sir avec lequel vous créez chaque page, on ne peut pas mixer les deux au sein d’un même document).

Un bou­ton (sous le titre et le per­ma­lien) per­met de pas­ser de l’éditeur par défaut au construc­teur de page :

Le menu en bas de la fenêtre d’édition donne accès à des actions géné­riques (annu­ler / refaire, pré­vi­sua­li­sa­tion et enregistrement).

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­po­sée a mini­ma d’une ran­gée (row en anglais), elle même com­por­tant une ou plu­sieurs colonnes. Le conte­nu est lui posi­tion­né à l’intérieur des colonnes.

Lorsque vous sur­vo­lez un élé­ment (sec­tion, ran­gée, colonne ou conte­nu), un menu s’affiche pour effec­tuer les opé­ra­tions possibles.

Le bou­ton de ce menu contex­tuel per­met d’ajouter une ran­gée  aux sec­tions, de modi­fier le modèle de ran­gée ou d’ajouter un élé­ment aux colonnes.

Le bou­ton ouvre une fenêtre popup pour per­son­na­li­ser l’élément :

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

Le der­nier onglet (Custom) per­met d’attribuer une id à la sec­tion (ou à tout élé­ment que vous ajou­tez via le construc­teur de page), de défi­nir le style via des classes ou via l’attribut HTML style.

Attention ! L’id doit être unique sur la page ! Dans le cas contraire, vous pou­vez avoir des pro­blèmes d’affichage ou de comportement.

Les modules

Vous avez 17 modules à votre dis­po­si­tion pour créer une page per­son­na­li­sée : vidéo, image, sli­der, gale­rie d’images, icone, bou­ton, texte, accor­déon, onglets, liste d’articles… tous personnalisables.

Chaque élé­ment est édi­table via une popup simi­laire à celle de la cap­ture d’écran per­son­na­li­ser 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­vo­lez, les deux autres bou­tons per­mettent de copier un élé­ment (copy) ou plu­sieurs (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 col­lez 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 construc­teurs de page.

Et le résul­tat ? Bold Themes a pen­sé à tout et met à disposition…

Des démos fonctionnelles

Bold Themes four­nit trois exemples de sites créés avec cette confi­gu­ra­tion (le thème Twenty Seventeen et les deux exten­sions). Le résul­tat parle de lui-même :

• Wedding, thème « One Page » pour l’événementiel (mariages ou fêtes)
• Accomodation, autre thème « One Page » pour une lan­ding page
• Construction,
  thème com­plet qui peut ser­vir de modèle pour un cabi­net d’architectes,
  un déco­ra­teur d’intérieur ou un créa­tif (desi­gner, photographe…)

Les trois démos et les ins­truc­tions pour les uti­li­ser sont dis­po­nibles dans l’onglet Bold Page Builder / Installation (How to import demo content).

Il existe d’autres exten­sions pour per­son­na­li­ser Twenty Seventeen, dont…

Advanced Twenty Seventeen

Elle pousse la per­son­na­li­sa­tion plus loin que Customize Twenty Seventeen de BoldThemes, mais n’est pas cou­plée à un construc­teur de page. Il existe d’autres construc­teurs de pages qui pour­ront faire votre bon­heur, tels que Elementor, Beaver Builder ou WPBakery Page Builder.

Une der­nière exten­sion per­met de per­son­na­li­ser Twenty Seventeen, il s’a­git de…

Options for Twenty Seventeen

Cette der­nière exten­sion per­met d’im­pac­ter 14 points dans sa ver­sion gra­tuite, et 12 de plus dans sa ver­sion payante (19,99£).

Les options sont dis­po­nibles via l’ou­til de per­son­na­li­sa­tion, et elles com­plètent les réglages dis­po­nibles dans les autres extensions. 

En apar­té, le site de l’é­di­teur de cette der­nière exten­sion est habillé par Twenty Seventeen, et il s’est cer­tai­ne­ment ser­vi de son exten­sion pour le per­son­na­li­ser. Le résul­tat est tout sim­ple­ment bluffant :

Si vous vou­lez aller plus loin, après l’ou­til de per­son­na­li­sa­tion et les exten­sions, il va fal­loir mettre les mains dans le cam­bouis. L’étape sui­vante, c’est…

Personnaliser Twenty Seventeen via le code

Grâce aux feuilles de style

Même s’il est pos­sible de modi­fier l’af­fi­chage en uti­li­sant l’ou­til de per­son­na­li­sa­tion (onglet CSS addi­tion­nel) il est pré­fé­rable d’in­té­grer vos modi­fi­ca­tions à la feuille de style du thème enfant (le fichier style.css  de votre thème enfant) pour opti­mi­ser le temps de char­ge­ment de vos pages.

Définir une image de fond fixe

Commencez par ajou­ter l’i­mage à votre biblio­thèque de médias : dans l’in­ter­face d’ad­mi­nis­tra­tion de WordPress, cli­quez sur Médias > Ajouter. Importez une image, puis cli­quez sur Modifier.

Sélectionnez l’url du média en haut à gauche pour le copier dans la pro­prié­té CSS.

Enfin, insé­rez ces quelques lignes dans le fichier 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’i­mage de fond insé­rée, pen­sez à modi­fier la cou­leur du thème : si votre image est plu­tôt dans des tons fon­cés, choi­sis­sez Foncé dans l’on­glet Couleurs de l’ou­til de personnalisation.

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

Si le menu haut de Twenty Seventeen 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­fi­chage en ver­sion mobile. Nous n’al­lons pas dis­cu­ter des avan­tages et des incon­vé­nients d’un menu fixe sur un ter­mi­nal mobile, il y en a qui le veulent 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 veulent 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­sible de pous­ser plus loin la per­son­na­li­sa­tion du menu, en modi­fiant la taille des carac­tères, la cou­leur du texte, du fond, et même en affi­chant une image de fond. Il suf­fit de rajou­ter les bouts de code ci-des­sous 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 chan­ger 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 des­sous pour les ter­mi­naux mobiles, il est là aus­si néces­saire de faire appel aux media que­ries .

@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 lar­geur de la barre laté­rale est par défaut de 36% (et 58% pour le conte­nu prin­ci­pal). Si vous sou­hai­tez modi­fier cette valeur, il vous suf­fit d’in­sé­rer 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’é­car­te­ment entre les deux colonnes pour le confort de lecture.

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

Vous pou­vez, en incluant ceci dans les CSS personnalisé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­men­ter 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 lar­geur des conte­nu 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 deuxiè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 envi­sa­ger toutes les com­bi­nai­sons pos­sibles, en créant des mosaïques avec ces quatre zones, par exemple :

@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 lar­geur maxi­male par défaut est de 740 pixels pour les pages et les articles de blog sans barre laté­rale et de 1000 pixels pour les articles avec une barre laté­rale. Vous sou­hai­tez allouer plus d’espace à votre conte­nu ? Renseignez les pro­prié­tés width et max-width avec la valeur de votre choix, en em, en pixels ou en pour­cen­tage, ajus­tez les lar­geurs de colonnes, ajus­tez 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 suivent sont direc­te­ment liées au thème, c’est donc dans le fichier functions.php de votre thème enfant que vous aller les enregistrer. 

Ajouter des sections à la page d’accueil

Les 4 sec­tions pro­po­sées par défaut ne vous suf­fisent 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 mettre une image d’arrière plan spé­ci­fique à chaque page, il va fal­loir uti­li­ser les champs per­son­na­li­sés pour le fond de page. 

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

Pour Gutenberg, la pos­si­bi­li­té de créer des champs per­son­na­li­sés a tout sim­ple­ment dis­pa­ru. Mais ne vous inquié­tez pas, Cette dis­pa­ri­tion n’est pas irréversible.

Vous trou­ve­rez, en haut de l’é­di­teur, sur la droite, trois points ver­ti­caux. Cliquez, des­cen­dez jus­qu’à Options, puis cochez Champs per­son­na­li­sés. Il vous fau­dra cli­quer sur Enregistrer et rechar­ger pour pou­voir vous ser­vir des champs personnalisés.

Créez un champ per­son­na­li­sé, et nom­mez-le, bgimg par exemple.

Entrez l’url de l’image (ou faites un copier / col­ler depuis la biblio­thèque des médias). Dans le fichier functions.php, ajou­tez les lignes suivantes : 

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èrement pro­pul­sé par WordPress ? D’accord, pour un cré­dit par défaut, pour­quoi pas ? Mais si vous vou­lez insé­rer vos propres cré­dits, il va fal­loir ajou­ter une fonc­tion, et modi­fier le fichier template-parts/footer/site-info.php.

Commencez par copier ce fichier dans votre thème enfant en res­pec­tant bien la struc­ture des réper­toires.

Éditez le, sup­pri­mez tout et insé­rez le code suivant :

<?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 fichier functions.php, ajou­tez 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>)';
}

Alternative : vous pou­vez aus­si coder « en dur » les infos du site dans le fichier template-parts/footer/site-info.php. Dans ce cas, vous n’avez pas besoin de tou­cher au fichier 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, Twenty Seventeen pro­pose deux zones de wid­gets pour le pied de page. Si vous sou­hai­tez en rajou­ter, rien de plus simple (enfin, en sui­vant les ins­truc­tions qui suivent ?)

Première étape, il va fal­loir « décla­rer » ces zones dans le fichier 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 ajou­tez un fichier template-parts/footer/footer-widgets.php tou­jours dans le thème enfant. Reprenez le fichier du thème parent, et rem­pla­cez le bloc entre les balises <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 fichier 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 voi­la deux zones sup­plé­men­taires de dis­po­nibles ! Si vous n’en vou­lez qu’une de plus, sup­pri­mez le deuxième bloc register_sidebar( … ) ; si vous en vou­lez trois, ajou­tez un bloc. Adaptez ensuite le code du modèle et les CSS en fonc­tion de votre besoin

Par défaut, Twenty Seventeen réserve les barres laté­rales aux articles. Elles peuvent pour­tant être utiles sur les pages, pour affi­cher un for­mu­laire de contact et diverses infor­ma­tions par exemple.

Si vous vous tenez à vos barres laté­rales (si vous en avez l’utilité sur­tout), il va fal­loir modi­fier le fichier page.php. Commencez par le copier dans votre thème enfant. Éditez le et ajou­tez le code sui­vant entre </div><!-- #primary --> et </div><!-- .wrap --> :

<?php get_sidebar(); ?>

Puis, dans le fichier functions.php, ajou­tez 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 assi­gné des wid­gets, s’af­fi­che­ra désor­mais dans vos pages.

Pour ceux qui vou­draient des pages avec barre laté­rale et d’autres sans, copiez dans votre thème enfant le fichier page.php ini­tial, renommez-le en  page-with-sidebard.php, éditez-le, effec­tuez les modi­fi­ca­tions ci-dessus et rem­pla­cez * The template for displaying all pages par * Template Name: With Sidebar.

Si vous vou­lez affi­cher une barre laté­rale dif­fé­rente sur chaque page, l’ex­ten­sion Custom Sidebars – Dynamic Widget Area Manager est toute indiquée.

Pour ceux qui ne veulent pas de barre laté­rale, ni dans les pages, ni dans les articles, c’est très simple : il suf­fit de sup­pri­mer tous les wid­gets de la Colonne laté­rale du blog (dans Apparence > Widgets). Vos articles s’af­fi­che­ront 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 sou­hai­tez affi­cher un média dif­fé­rent à chaque page, il va fal­loir pro­cé­der par étapes.

En tout pre­mier lieu, ajou­tez un champ per­son­na­li­sé dans la page, que vous nom­mez Banniere par exemple. Pour tout savoir sur l’u­ti­li­sa­tion des champs per­son­na­li­sés, consul­tez le para­graphe Personnalisez l’i­mage de fond de chaque page.

Rendez-vous dans l’onglet Médias du menu d’administration, récu­pé­rez l’identifiant numé­rique de l’image en sur­vo­lant l’image (par exemple, pour l’image du site web de Laurent Boutros, j’ai https://blog.tsw.ovh/wp-admin/post.php?post= 5684 &action=edit qui s’affiche en bas, dans mon navi­ga­teur, l’identifiant est donc 5684). Renseignez le champ per­son­na­li­sé Banniere avec cette valeur.

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

<?php the_custom_header_markup(); ?>

Remplacez-la par les suivantes : 

<?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­na­li­sa­tions pos­sibles, mais comme la seule vraie limite, c’est votre ima­gi­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 exemple, dédié au thème, en anglais : Twenty Seventeen 101. Minimaliste, mais par­fois, il n’y a pas besoin de plus.

Je vous dis tout à pro­pos de cette expé­rience dans l’ar­ticle Créez un site web avec WordPress et Twenty Seventeen en moins d’une heure.

Conclusion

Brut de fon­de­rie, Twenty Seventeen n’est jamais qu’un thème par défaut, bien moins confi­gu­rable qu’un thème « pre­mium » ven­du en géné­ral entre 60 et 100 €. Peu confi­gu­rable, mais avec un poten­tiel inté­res­sant.

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

Alors, on se sert de Twenty Seventeen, ou on cherche un autre thème ? Si vous vou­lez tes­ter les astuces vues dans cet article, 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 tenter 😉

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

Sources

Pour rédi­ger cet article, j’ai effec­tué quelques recherches sur inter­net. J’ai pui­sé dans les articles How to Customize the Free Twenty Seventeen WordPress Theme et 5 Excellent Ways to Hack the Twenty Seventeen WordPress Theme du blog wpmu­dev, How To Customize Twenty Seventeen WordPress Theme Using Child Theme du blog wpe­ka, et How To Master Twenty Seventeen (Or Any WordPress Theme in 2017) sur Design Bombs. Et un peu par­tout ailleurs.