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.

Attention ! Cet article ne vaut que pour la version de WordPress Open Source (à télé­char­ger et à instal­ler chez un héber­geur) ; ceux dont le site est hébergé sur wordpress.com devront s’ac­quit­ter d’un forfait annuel de 96 € pour pouvoir person­na­li­ser les CSS, ou de 300 € pour pouvoir utili­ser la plupart des exten­sions dispo­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édigé mon premier 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 pensé avoir autant de lecteurs et de commentaires.

Et je n’au­rais jamais pensé que même après l’ar­ri­vée de WordPress 5 et d’un nouveau thème par défaut (Twenty Nineteen), cet article serait toujours dans le trio de tête de ce blog. De fait, après que mon article sur Twenty Nineteen ait cara­colé en tête des pages les plus lues pendant quelques mois, cet article-ci est revenu 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 commen­taires plus tard, je me suis posé la ques­tion : est-il préfé­rable de remettre les articles origi­naux à jour, d’en profi­ter pour montrer ce que Gutenberg apporte, ou d’en écrire un troi­sième qui soit la synthèse des deux premiers, et de leurs commentaires ?

Je ne peux pas reprendre la masse d’in­for­ma­tions des deux premiers articles, les compi­ler dans un troi­sième et lais­ser les deux premiers 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 person­na­li­sa­tion elle-même), plus de quinze bouts de codes et un thème enfant qui reprend l’en­semble des person­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 aussi l’oc­ca­sion de mettre à jour certaines infor­ma­tions, Twenty Seventeen ayant évolué au fil du temps (la compa­ti­bi­lité avec Gutenberg, entre autre, est excel­lente, ce qui n’était pas le cas des premières versions).

Et nous revoilà à parler 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 commence à 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 succes­seurs en n’étant pas orienté blog.

Évidemment, il convien­dra pour habiller un blog. Mais ce thème permet égale­ment de créer un site d’en­tre­prise, avec sa page d’ac­cueil à sections et son image (ou sa vidéo) plein écran. Et cerise sur le gâteau, il est compa­tible avec les toutes dernières versions de WooCommerce, nati­ve­ment (un « module » dans WooCommerce assure la compatibilité).

Et bien sûr, il est désor­mais compa­tible avec le nouvel éditeur par défaut, Gutenberg.

En aparté, la démo propo­sée dans le dépôt WordPress(.org) n’est pas très enga­geante. Je vous propose 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 aussi 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 pouvez aussi 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 person­na­li­sa­tion (enfin, pas qu’un mini­mum en fait). En aparté, 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 guita­riste de talent – était réalisé avec ce thème. Il n’est par contre plus en ligne.

Un dernier exemple, celui d’un restau­rant propo­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 derniers sites, vous remar­que­rez la vidéo en fond de page – une idée pour dyna­mi­ser votre site.

Oui, il va falloir mettre la main à la pâte, aller fouiller dans les options de l’ou­til de person­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 design 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 comment person­na­li­ser Twenty Seventeen.

Première étape…

Créer un thème enfant

Modifier direc­te­ment un thème est toujours une (très) mauvaise idée. À moins de ne toucher qu’au style – et encore : unique­ment depuis l’ou­til de personnalisation.

Une exten­sion va vous permettre de créer un thème enfant sans trop de diffi­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éparé un thème enfant prêt à l’usage, il ne vous reste plus qu’à le télé­char­ger, à l’ins­tal­ler et à l’activer.

Vous trou­ve­rez égale­ment des thèmes enfants dans le dépôt WordPress : Dynamic Seventeen, Delect, Winter Solstice, Chandigarh et le plus abouti, Minimal 20/17 livré avec deux modèles de page supplé­men­taires (une landing page et une page sans titre) et le support 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, activez-le. Et main­te­nant, attaquons-nous à la person­na­li­sa­tion elle-même.

Nous ne verrons pas toutes les possi­bi­li­tés de person­na­li­sa­tion de ce thème, elles sont infi­nies, mais nous allons tenter d’ex­plo­rer un maxi­mum de pistes.

La première, la plus basique, c’est…

Personnaliser Twenty Seventeen via l’outil de personnalisation

Pour accé­der à l’ou­til de person­na­li­sa­tion, vous pouvez, dans l’in­ter­face d’ad­mi­nis­tra­tion, cliquer sur Apparence > Personnaliser. Ou depuis le site lui-même, cliquer 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 suppri­mer cette image, rendez-vous dans En-tête du média.

Twenty Seventeen ne se limite pas à propo­ser de chan­ger ou de suppri­mer l’image d’en-tête, il permet aussi d’uti­li­ser une vidéo télé­char­gée en local ou sur Youtube (bien mieux pour ne pas surchar­ger votre serveur), couplée à une image qui s’af­fi­chera le temps que la vidéo se charge.

En aparté, la traduc­tion fran­çaise est parfois une traduc­tion à la louche – si En-tête du média ne vous parle pas, ne vous inquié­tez pas : je suis moi aussi resté perplexe devant cet inti­tulé – média d’en-tête serait plus approprié.

Paramétrer la page d’accueil

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

Vous remar­que­rez que cet onglet n’est dispo­nible que depuis la page d’ac­cueil elle-même, proba­ble­ment parce qu’il permet de gérer le contenu des diffé­rentes sections de cette page, mais il sert aussi à défi­nir le modèle géné­ral.

Sélectionnez donc le mode d’af­fi­chage souhaité (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 section), 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é aussi facile : cliquez sur Menus, puis sur Footer Menu.

Vérifiez que Menu des liens sociaux soit bien coché (il l’est par défaut), cliquez sur Ajouter des éléments puis sur l’on­glet Liens person­na­li­sés avant de saisir (ou de coller) 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 person­na­li­sa­tion possible pour le thème, dans sa confi­gu­ra­tion par défaut.

Mais comme je vous l’ai dit, il est heureu­se­ment possible d’al­ler plus loin. Vous pouvez, dans un premier temps…

Personnaliser Twenty Seventeen via des extensions dédiées

On compte trois exten­sions dédiées à la person­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 plusieurs mois, et n’est pas dite compa­tible avec WordPress en version 5. Il se peut qu’il y ait des incom­pa­ti­bi­li­tés entre cette exten­sion et la version actuelle de WordPress. Vous l’uti­li­sez « à vos risques et périls ».

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

Pas de para­mé­trage, mais de nouvelles options pour un thème plus abouti via l’outil de person­na­li­sa­tion de WordPress.

Customize Twenty Seventeen

Auteur(s) : BoldThemes

Version actuelle : 1.0.5

Dernière mise à jour : 10 mars 2022

customize-twenty-seventeen.zip

84%Évaluations 3 000+Installations WP 4.5+Nécessaire

La dernière entrée du menu, BoldThemes Settings, permet de confi­gu­rer la police de carac­tère en utili­sant les Google Fonts pour le docu­ment, les titres et les menus, mais aussi de person­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 aussi leur appa­ri­tion (boxed, fulls­creen et wide).

Voilà déjà de quoi person­na­li­ser le thème, mais pour créer une page d’accueil ou une landing 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’agit de…

Bold Page Builder

Bold Page Builder

Auteur(s) : BoldThemes

Version actuelle : 5.2.5

Dernière mise à jour : 11 décembre 2024

bold-page-builder.5.2.5.zip

72%Évaluations 50 000+Installations WP 5.0+Nécessaire

Ce construc­teur de page gratuit fonc­tionne comme la plupart de ses homo­logues, avec un éditeur de blocs drag and drop bien conçu et effi­cace. Ce n’est pas du WYSIWYG avec édition et visua­li­sa­tion en direct (l’icone [icon name=« eye »] en haut à gauche de chaque section permet quand même de prévi­sua­li­ser la section dans une popup), mais son utili­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 instal­lée et acti­vée, l’extension est prête à l’emploi – même si vous pouvez 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 bouton (sous le titre et le perma­lien) permet de passer 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 bouton bleu central [icon name=« plus-circle »] crée les sections. La section est l’élément de premier niveau dans la page, elle est compo­sée a minima d’une rangée (row en anglais), elle même compor­tant une ou plusieurs colonnes. Le contenu est lui posi­tionné à l’intérieur des colonnes.

Lorsque vous survo­lez un élément (section, rangée, colonne ou contenu), un menu s’affiche pour effec­tuer les opéra­tions possibles.

Le bouton [icon name=« plus-circle »] de ce menu contex­tuel permet d’ajouter une rangée  aux sections, de modi­fier le modèle de rangée ou d’ajouter un élément aux colonnes.

Le bouton [icon name=« edit »] ouvre une fenêtre popup pour person­na­li­ser l’élément :

Pour les sections par exemple, vous choi­sis­sez le modèle (boxed / wide), l’espacement entre les sections (top et bottom spacing), l’alignement verti­cal au sein de la section, l’image de fond avec ou sans paral­laxe (onglet Design) ou la vidéo en arrière plan (onglet Video).

Le dernier onglet (Custom) permet d’attribuer une id à la section (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 pouvez avoir des problèmes d’affichage ou de comportement.

Les modules

Vous avez 17 modules à votre dispo­si­tion pour créer une page person­na­li­sée : vidéo, image, slider, gale­rie d’images, icone, bouton, texte, accor­déon, onglets, liste d’articles… tous personnalisables.

Chaque élément est éditable via une popup simi­laire à celle de la capture d’écran person­na­li­ser une section.

Copier / Coller un élément

Vous avez remar­qué les icones clone, copy et copy + dans le menu au survol. Le premier insère un élément iden­tique à celui que vous survo­lez, les deux autres boutons permettent de copier un élément (copy) ou plusieurs (copy +) dans la page active, mais aussi 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 desti­na­tion – une alter­na­tive au système de modèles (templates en anglais) d’autres construc­teurs de page.

Et le résul­tat ? Bold Themes a pensé à 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 landing page
• Construction, thème complet qui peut servir 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 instruc­tions pour les utili­ser sont dispo­nibles dans l’onglet Bold Page Builder / Installation (How to import demo content).

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

Advanced Twenty Seventeen

Advanced Twenty Seventeen

Auteur(s) : saturnplugins

Version actuelle : 1.3.1

Dernière mise à jour : 28 novembre 2017

advanced-twenty-seventeen.1.3.1.zip

86%Évaluations 3 000+Installations WP 4.7+Nécessaire

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

Une dernière exten­sion permet de person­na­li­ser Twenty Seventeen, il s’agit de…

Options for Twenty Seventeen

Options for Twenty Seventeen

Auteur(s) : Webd Ltd

Version actuelle : 2.5.4

Dernière mise à jour : 2 novembre 2024

options-for-twenty-seventeen.2.5.4.zip

98%Évaluations 10 000+Installations WP 4.6+Nécessaire

Cette dernière exten­sion permet d’im­pac­ter 14 points dans sa version gratuite, et 12 de plus dans sa version payante (19,99£).

Les options sont dispo­nibles via l’ou­til de person­na­li­sa­tion, et elles complètent les réglages dispo­nibles dans les autres extensions. 

En aparté, le site de l’édi­teur de cette dernière exten­sion est habillé par Twenty Seventeen, et il s’est certai­ne­ment servi de son exten­sion pour le person­na­li­ser. Le résul­tat est tout simple­ment bluffant :

Si vous voulez aller plus loin, après l’ou­til de person­na­li­sa­tion et les exten­sions, il va falloir mettre les mains dans le cambouis. L’étape suivante, c’est…

Personnaliser Twenty Seventeen via le code

Grâce aux feuilles de style

Même s’il est possible de modi­fier l’af­fi­chage en utili­sant l’ou­til de person­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’image à votre biblio­thèque de médias : dans l’in­ter­face d’ad­mi­nis­tra­tion de WordPress, cliquez sur Médias > Ajouter. Importez une image, puis cliquez sur Modifier.

Sélectionnez l’url du média en haut à gauche pour le copier dans la proprié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’image de fond insé­rée, pensez à modi­fier la couleur du thème : si votre image est plutôt dans des tons foncé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 version mobile. Nous n’al­lons pas discu­ter des avan­tages et des incon­vé­nients d’un menu fixe sur un termi­nal mobile, il y en a qui le veulent ainsi – 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, collé en haut de page :

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

Changer les autres caractéristiques du menu

Il est aussi possible de pous­ser plus loin la person­na­li­sa­tion du menu, en modi­fiant la taille des carac­tères, la couleur du texte, du fond, et même en affi­chant une image de fond. Il suffit de rajou­ter 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 chan­ger si ce n’est quelques proprié­tés CSS… Vu que la barre laté­rale ne s’af­fiche ni à droite, ni à gauche, mais en dessous pour les termi­naux mobiles, il est là aussi 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 contenu prin­ci­pal). Si vous souhai­tez modi­fier cette valeur, il vous suffit 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 diffé­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 pouvez, 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 augmen­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 largeur des contenu et barre laté­rale sont par défaut de 58 et 36 %. Le pied de page est inversé avec 36% pour la premiè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 pouvez envi­sa­ger toutes les combi­nai­sons possibles, 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 largeur 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 souhai­tez allouer plus d’espace à votre contenu ? Renseignez les proprié­tés width et max-width avec la valeur de votre choix, en em, en pixels ou en pour­cen­tage, ajus­tez les largeurs de colonnes, ajus­tez les marges inté­rieures avec la proprié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 sections propo­sées par défaut ne vous suffisent 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 falloir utili­ser les champs person­na­li­sés pour le fond de page. 

Pour l’édi­teur clas­sique, les champs person­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 falloir cliquer sur Options de l’écran (en haut à droite dans le navi­ga­teur) puis cocher Champs person­na­li­sés.

Pour Gutenberg, la possi­bi­lité de créer des champs person­na­li­sés a tout simple­ment disparu. Mais ne vous inquié­tez pas, Cette dispa­ri­tion n’est pas irréversible.

Vous trou­ve­rez, en haut de l’édi­teur, sur la droite, trois points verti­caux. Cliquez, descen­dez jusqu’à Options, puis cochez Champs person­na­li­sés. Il vous faudra cliquer sur Enregistrer et rechar­ger pour pouvoir vous servir des champs personnalisés.

Créez un champ person­na­lisé, et nommez-le, bgimg par exemple.

Entrez l’url de l’image (ou faites un copier / coller 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 propulsé par WordPress ? D’accord, pour un crédit par défaut, pour­quoi pas ? Mais si vous voulez insé­rer vos propres crédits, il va falloir 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 respec­tant bien la struc­ture des réper­toires.

Éditez le, suppri­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 pouvez aussi 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 toucher 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 propose deux zones de widgets pour le pied de page. Si vous souhai­tez en rajou­ter, rien de plus simple (enfin, en suivant les instruc­tions qui suivent ?)

Première étape, il va falloir « 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 toujours dans le thème enfant. Reprenez le fichier du thème parent, et rempla­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 voila deux zones supplé­men­taires de dispo­nibles ! Si vous n’en voulez qu’une de plus, suppri­mez le deuxième bloc register_sidebar( … ) ; si vous en voulez 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 formu­laire de contact et diverses infor­ma­tions par exemple.

Si vous vous tenez à vos barres laté­rales (si vous en avez l’utilité surtout), il va falloir modi­fier le fichier page.php. Commencez par le copier dans votre thème enfant. Éditez le et ajou­tez le code suivant 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 widgets, s’af­fi­chera 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 fichier page.php initial, renommez-le en  page-with-sidebard.php, éditez-le, effec­tuez les modi­fi­ca­tions ci-dessus et rempla­cez * The template for displaying all pages par * Template Name: With Sidebar.

Si vous voulez affi­cher une barre laté­rale diffé­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 suffit de suppri­mer tous les widgets 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éfini, c’est le même pour toutes les pages de votre site. Si vous souhai­tez affi­cher un média diffé­rent à chaque page, il va falloir procé­der par étapes.

En tout premier lieu, ajou­tez un champ person­na­lisé dans la page, que vous nommez Banniere par exemple. Pour tout savoir sur l’uti­li­sa­tion des champs person­na­li­sés, consul­tez le para­graphe Personnalisez l’image 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 survo­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 person­na­lisé Banniere avec cette valeur.

Copiez ensuite le fichier template-parts/header/header-image.php dans le thème enfant en respec­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 person­na­li­sa­tions possibles, mais comme la seule vraie limite, c’est votre imagi­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 parfois, il n’y a pas besoin de plus.

Je vous dis tout à propos 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 fonde­rie, Twenty Seventeen n’est jamais qu’un thème par défaut, bien moins confi­gu­rable qu’un thème « premium » vendu 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 compensent. Et dites-vous bien que ce n’est qu’un aperçu des person­na­li­sa­tions possibles pour ce thème.

Alors, on se sert de Twenty Seventeen, ou on cherche un autre thème ? Si vous voulez tester 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, laissez-vous tenter 😉

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

Sources

Pour rédi­ger cet article, j’ai effec­tué quelques recherches sur inter­net. J’ai puisé 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 wpeka, et How To Master Twenty Seventeen (Or Any WordPress Theme in 2017) sur Design Bombs. Et un peu partout ailleurs.