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

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

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.

Plan de l’ar­ticle Afficher

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ébis­cité.

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 commen­taires.

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.

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 commen­taires ?

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 je reprends l’en­semble pour une refonte, en incluant les bouts de codes, les astuces qui se trou­vaient dans les commen­taires.

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 son succes­seur en n’étant pas orienté blog.

Bien sûr 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 compa­ti­bi­lité).

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ésul­tat.

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) :

15ième anniversaire de WordPress
15ième anni­ver­saire de WordPress

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 !

Site web de Leïla Huissoud
Site web de Leïla Huissoud

Ou rendez-vous sur le site de Laurent Boutros – on reste dans la musique avec un guita­riste de talent – pour voir ce que donne Twenty Seventeen avec le thème enfant que je vous propose plus loin dans cet article (et beau­coup d’huile de coude, cela va sans dire) :

Site web de Laurent Boutros
Site web de Laurent Boutros

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 :

Site web du restaurant Matsuba
Site web du restau­rant Matsuba

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 person­na­li­sa­tion.

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 person­na­li­sa­tion.

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’ac­ti­ver.

Vous trou­ve­rez égale­ment des thèmes enfants dans le dépôt WordPress : Dynamic SeventeenDelectWinter SolsticeChandigarh 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

Outil de personnalisation - Twenty Seventeen
Outil de person­na­li­sa­tion – Twenty Seventeen

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’ad­mi­nis­tra­tion.

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 appro­prié.

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.

Menu des liens sociaux - Twenty Seventeen
Menu des liens sociaux – Twenty Seventeen

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

À 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

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

Customize Twenty Seventeen

Customize Twenty Seventeen theme – add Google Fonts, use new templates and get other options to easily custo­mize your site.

BoldThemes

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

Bold Page Builder

Free Page Builder and Visual Composer – Build stun­ning respon­sive post and page layouts with easy to use drag and drop buil­der – no coding requi­red.

BoldThemes

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 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éoc­cu­per.

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 docu­ment).

Un bouton (sous le titre et le perma­lien) permet de passer de l’éditeur par défaut au construc­teur de page :

Bold Page Builder
Bold Page Builder

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 enre­gis­tre­ment).

Les sections, rangées et colonnes

Le bouton bleu central 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.

section par défaut
section par défaut

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 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.

modèles pour une rangée
modèles pour une rangée

Le bouton ouvre une fenêtre popup pour person­na­li­ser l’élément :

personnaliser une section
person­na­li­ser une section

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 compor­te­ment.

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 person­na­li­sables.

ajouter un élément dans les colonnes
ajou­ter un élément dans les colonnes

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 clonecopy 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 à dispo­si­tion…

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, photo­graphe…)

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

Advanced Twenty Seventeen

Customize style of the Twenty Seventeen theme comple­tely

saturn­plu­gins

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

Options for Twenty Seventeen

Adds various options to modify the default WordPress theme Twenty Seventeen.

webd.uk

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£).

Options for Twenty Seventeen
Options for Twenty Seventeen

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 exten­sions.

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 bluf­fant :

webd.uk avec Twenty Seventeen

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.

Ajouter un média
Ajouter un média

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

URL du média
URL du média

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 person­na­li­sa­tion.

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 person­na­li­sé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; }

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 enre­gis­trer.

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, deux exten­sions permettent de retrou­ver cette fonc­tion­na­lité.

Si vous souhai­tez un champ person­na­lisé présent dans chaque page (ou dans chaque article), instal­lez et acti­vez Gutenberg Custom Fields.

Gutenberg Custom Fields

Gutenberg Custom Fields

Gutenberg Custom Fields vous permet de contrô­ler le contenu de l’écran de modi­fi­ca­tion de Gutenberg en créant des modèles pré-remplis.

Riad Benguella

Si par contre vous souhai­tez retrou­ver les champs person­na­li­sés tels que dans l’édi­teur clas­sique, instal­lez et acti­vez Custom Fields for Gutenberg.

Custom Fields for Gutenberg

Custom Fields for Gutenberg

Restores the Custom Field meta box for the Gutenberg Block Editor.

Jeff Starr

Vous avez choisi quelle exten­sion instal­ler et acti­ver ? 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 indi­qué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 se 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.pascalcescato.gdn/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à.

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­devHow 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.

Si vous avez trouvé une faute d’orthographe, veuillez nous en infor­mer en sélec­tion­nant le texte en ques­tion et en appuyant sur Ctrl + Entrée .

23 réflexions sur “La Bible de Twenty Seventeen : extensions, codes, thèmes enfant et conseils”

  1. Bonjour,

    Merci pour votre article que je trouve très inté­res­sant. J’ai essayé « Changer le média d’en-tête à chaque page ». Je pense avoir bien suivi les consignes de votre article.

    Mais j’ai un souci. Mon image d’en-tête ne s’af­fiche pas. A la place, il y a un rectangle gris avec un favi­con fichier déchiré (un rectangle déchiré) en haut à gauche.
    Le site bran­ding s’af­fiche bien par contre. Avez-vous une idée d’où provient le problème ? J’ai cher­ché un bon moment mais je ne trouve pas. J’ai véri­fié le code voir si je n’ai pas modi­fié quelque chose sans le vouloir mais non.

    Cordialement. PYH

    1. bonjour Pierre-Yves, et merci pour votre appré­cia­tion. Le fichier déchiré indique un fichier manquant. Malheureusement je ne vois pas d’où peut venir le problème, d’au­tant que vous êtes a priori revenu à un en-tête unique pour l’en­semble des pages.

          1. Bon, j’ai rescruté le code carac­tère par carac­tère.
            Je ne vois pas où l’er­reur a pu se glis­ser.
            Peut-être l’ai-je mal posi­tionné dans le fichier ?

            <?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  »;
            else :
            the_custom_header_markup();
            endif ; ?>
          2. Déjà, la ligne 4 ne corres­pond pas au contenu qui devrait être inséré. Peut-être un bug lié à l’in­ser­tion du commen­taire.
            Ensuite, il faut que le champ person­na­lisé soit bien nommé Banniere, pas bannière ou Bannière ou banniere
            Pour finir il faut que l’image ait été insé­rée via le gestion­naire de médias, pas unique­ment télé­char­gée par FTP.

  2. Bonjour, Merci pour toutes ces infor­ma­tions. J’ai une ques­tion complé­men­taire. La modi­fi­ca­tion de la taille du logo semble fonc­tion­ner correc­te­ment sauf pour le logo affi­ché sur l’en­tête d’ac­cueil dont la taille ne varie pas malgré la modi­fi­ca­tion. une idée ? Merci d’avance.

        1. Après véri­fi­ca­tion, c’est a priori un effet d’op­tique : les mesures effec­tuées me donnent 284x140 px pour les pages inté­rieures et 288x141 pour la page d’ac­cueil – autant dire que c’est subjec­tif, et poten­tiel­le­ment dû à la préci­sion de ma mesure. En trans­pa­rence sous Photoshop, les deux logos (captures d’écrans) se super­posent.

  3. Bonjour et merci beau­coup pour cet article très complet qui m’a bien aidé !
    La seule chose que je ne parviens pas à faire c’est le chan­ge­ment des images sur chaque en-tête de page.
    Quand je survole l’image dans ma biblio de médias, je n’ai rien qui s’af­fiche et donc ne sait pas comment repé­rer l’iden­ti­fiant.
    De plus, ensuite, je ne sais pas où mettre cet iden­ti­fiant. J’ai bien installé les exten­sions comme évoqué pour faire réap­pa­raître les champs person­na­li­sés mais ensuite on me demande de choi­sir entre fields, lock ou post-type puis de mettre une valeur ? Est ce là que je dois mettre l’iden­ti­fiant de mon image ? Dois-je choi­sir fields, lock ou post-type ?
    Par avance merci beau­coup pour votre aide !

    1. bonsoir, c’est fields qu’il faut choi­sir. La valeur à mettre est l’ID de votre image. Vous la trou­ve­rez en allant dans la biblio­thèque de médias, et en cliquant sur l’image. Il y a un iden­ti­fiant unique dans l’url, post, qui est l’ID de l’image. Par exemple dans l’url https://pascalcescato.gdn/wp-admin/post.php?post=9923&action=edit l’ID de l’image est 9923.

  4. Bonjour Pascal,

    J’ai beau cher­cher et regar­der les tutos et vidéos, impos­sible de chan­ger la couleur de fond des pages.… comment dois je faire ?
    Je suis archi débu­tante sur WordPress… j’es­saie de faire mon bonhomme de chemin mais concer­nant les couleurs, je ne retrouve pas les options présen­tées dans les vidéos et ce malgré le fait que j’ai acheté les advan­ced options…

    Merci pour ton aide,
    Soizic

    1. Bonsoir Soizic,
      Le plus simple est de mettre une règle CSS (via l’ou­til de person­na­li­sa­tion) :

      * {background-color:#fa4591 !important}

      Remplacez #fa4591 par une couleur valide (nom, hexa­dé­ci­mal, rgb ou rgba). Vous aurez ainsi une couleur de fond pour l’en­semble du site. La solu­tion n’est pas élégante, c’est du forcing, mais je n’ai pas mieux en stock 😐

      1. Merci beau­coup pour ce retour, je vais tenter cette solu­tion.
        En effet, je ne sais pas pour­quoi je n’ai accès à aucune person­na­li­sa­tion de couleur, ni de fond ni de texte… C’est un peu contrai­gnant !

        Cordialement,

        Soizic

      2. Bonjour Pascal,

        Et concer­nant la couleur de la police ?
        Quand je regarde les tutos, ils ont des fonc­tion­na­li­tés très simples de chan­ge­ment de couleur de police dans les outils de person­na­li­sa­tion que pour une raison incon­nue, je n’ai pas.. est ce normal ?
        Je vois la fonc­tion mais quand je clique dessus, je n’ai pas accès à la palette de couleurs pour faire les modifs…

        En ce qui concerne le back­ground color, ça fonc­tionne mais ça modi­fie toute le back­ground de toute la page, header et footer compris… :/

        Merci d’avance,

        Cdt
        Soizic

        1. Complément d’info : quand je modi­fie la « body color », il modi­fie la couleur du contour de page au lieu du corps de texte…
          c’est un bug ? ou je comprends pas..

  5. Bonjour Pascal,

    J’ai remplacé mes images sur la page d’ac­cueil de mon site et je n’ai plus le défi­le­ment du texte comme aupa­ra­vant (comme sur ce site https://www.matsuba.fr/) Quand je scrolle avec la molette l’ef­fet est présent pour la première image mais pas pour les suivantes.
    Mon site https://sigurd.fr Le texte et les images montent d’un derrière l’autre au lieu d’avoir l’im­pres­sion que l’image est fixe et que c’est le texte qui défile. (j’es­père avoir été expli­cite)
    Pourriez vous m’ap­por­ter vos lumières.
    Merci de votre réponse, cordia­le­ment,
    Guy

    1. Bonjour Guy, ces images sont les images mises en avant de pages du site. Il faut donc créer une page par image à affi­cher pour qu’elle ‘défile’. Et indi­quer ces pages via l’ou­til de person­na­li­sa­tion, en se posi­tion­nant sur la page d’ac­cueil, dans l’on­glet Options du thème. Si vous avez procédé ainsi, c’est proba­ble­ment une exten­sion qui entre en conflit avec le thème… il va falloir les désac­ti­ver une à une, pour voir laquelle pose problème.

      1. Bonjour Pascal,
        Bien vu comme toujours !!!
        C’était une exten­sion (WP Content Copy Protection & No Right Click) contre la copie de mes images que j’avais rajou­tée la semaine dernière … dommage ! 🙁
        J’ai trouvé celle-ci Secure Copy Content Protection qui fonc­tionne bien (enfin pour le moment !)

        Merci de cette réponse et de votre réac­ti­vité, toujours au top Pascal !

        Guy

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Abonnez-vous à la
newsletter

Pour être informé à chaque fois que je publie un nouvel article.

Merci !

Quelque chose c'est mal passé…

Retour haut de page

Rapport de faute d’orthographe

Le texte suivant sera envoyé à nos rédacteurs :