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.

Plan de l’ar­ticle Fermer

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

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

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.

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

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

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

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 :

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

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

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

Le bouton [icon name=« edit »] 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 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.

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

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

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

La Bible de Twenty Seventeen : extensions, codes, thèmes enfant et conseils
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 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; }

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.

Accueil du site Twenty Seventeen 101
Accueil du site Twenty Seventeen 101

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

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

  1. Modification de la page « blog »
    Bonjour Pascal.
    Je souhaite modi­fier la page « blog » sur l’ac­cueil. En effet, pour que mes articles se chargent plus rapi­de­ment, je les ai scin­dés en plusieurs parties. Donc pour un même thème « Islande » j’ai fait 4 articles. Mais sur la page Blog de l’ac­cueil il y a, bien sur, 4 fois le même titre. J’ai fait une nouvelle page mais elle ne s’af­fiche vrai­ment pas bien en tant que page blog dans « person­na­li­ser » (https://sigurd.fr/insta) Seule, cette page s’af­fiche bien, para­mé­trée dans la page d’accueil, c’est tout en désordre, ça ressemble à rien.
    Auriez-vous des conseils à me propo­ser, merci.
    Guy

    PS : Votre site était inac­ces­sible et main­te­nant il est bloqué par Google car mauvaise « répu­ta­tion » Que se passe-t-il.

  2. Vous pouvez tenter l’ajout de !important :
    .entry-header > h2.entry-title { font-color: #fc5400 !important; } pour forcer la règle.

  3. Merci mais ça ne fonc­tionne pas. J’ai mis ça
    .entry-header > h2.entry-title { font-color : #fc5400 ; }
    Qu’est-ce qui ne fonc­tionne pas dans ce code ? Merci pour votre patience

  4. Merci pour votre réponse ! J’ai par exemple cette balise Accueil / Home
    Comment dois-je confi­gu­rer le code, car ce que j’ai essayé pour le moment ne fonc­tionne pas…Merci

  5. Tous les éléments ne sont pas modi­fiables via les options. Mais vous pouvez utili­ser l’on­glet CSS person­na­li­sées de l’ou­til de person­na­li­sa­tion de WordPress. Pour un titre d’ar­ticle par exemple vous pouvez utili­ser h1.entry-title {}.

    Vous trou­ve­rez les balises pour chaque élément en utili­sant les outils web de Chrome ou de Firefox par exemple.

  6. Bonjour,
    merci pour cet article, grâce à vous j’ai pu avan­cer ! Par contre j’ai­me­rais connaitre quel code css addi­tion­nel je dois mettre pour chan­ger la couleur des titres des pages. J’ai télé­char­ger Options mais quand je mets le code couleur person­na­lisé dans la rubrique Page Title Color ça ne fonc­tionne pas. Pouvez-vous me donner le code css que je le fasse manuel­le­ment ? De la même façon je n’ar­rive pas à chan­ger la couleur Name, Email, Comment or message dans la page Contact. Merci beaucoup

  7. Bonjour Pascal, un grand merci pour votre retour. Comment faire pour réac­ti­ver la vidéo sur mobile. Est-ce possible ? Il s’agit d’une vidéo très légère en poids.
    Encore merci et bonne journée

  8. Bonjour, que le module soit préins­tallé ne change rien, vous pouvez bien sûr instal­ler un thème enfant, en fait n’im­porte quel thème.
    Concernant la vidéo d’en-tête, elle est par défaut désac­ti­vée sur mobile pour des ques­tions de bande passante.

  9. Bonjour, tout d’abord merci pour votre article. Etant novice sur word­press j’ai plusieurs questions.
    1/ J’ai installé le module pré-installé word­press via OVH, est-il possible d’ins­tal­ler un thème enfant malgré tout ? Si oui comment faire ?
    2/ J’ai mis une vidéo à la place de l’image en en tête. Sur desk­top aucun problème, en revanche pas de vidéo sur mobile malgré le fait que sur la preview mobile (sur desk­top) cela semble fonctionner.

    Merci pour votre aide et bonne journée

  10. Le son est désac­tivé par défaut, a priori… pour éviter d’aga­cer l’in­ter­naute… ceci-dit, sans voir la page, je ne peux pas vrai­ment répondre à la question.

  11. merci ! Le problème et que les sons sont bloqués sur des vidéos ajou­tées sur des pages.… étrange cela quand même non ?

  12. Le son est désac­tivé par défaut, parce que les vidéos sonores sont… agaçantes, et que la vidéo en arrière-plan est un support essen­tiel­le­ment visuel. La solu­tion la plus simple si vous souhai­tez tout de même acti­ver le son est de passer par une exten­sion comme Header Enhancement.

  13. Bonjour, grâce à votre blog, je découvre que ce thème est fort bien fait. néan­moins, je rencontre un problème. lorsque je mets une vidéo venant de youtube en fond e première page ou dans la page initiale, je n’ai pas de son. Est-ce normal ? J’ai véri­fié avec FF et Chrome. et bien entendu ma vidéo à du son !

    Pourriez-vous m’ai­der ? merci

  14. Bonjour Guy, il y a plusieurs méthodes : effec­ti­ve­ment vous pouvez créer un fichier header.php dans le thème enfant. Et il faut bien sûr reprendre l’in­té­gra­lité du code du thème parent.
    Ou alors, vous pouvez inclure ce bout de code via Code Snippets :

    add_action('wp_head', 'votre_fonction');
    function votre_fonction(){
      // votre code vient ici
    };
  15. Bonjour Pascal,
    J’ai un bout de code à rajou­ter dans le header.php pour avoir un fil d’Ariane avec SEO Press. Je voudrais le rajou­ter dans le header.php du thème enfant (je pense que c’est là qu’il faut le placer pour éviter qu’il ne dispa­raisse après une MAJ) mais il n’y a pas de header.php dans le thème enfant 🙁
    J’ai lu qu’il suffi­sait de copier celui du thème parent dans le thème enfant. est-ce la bonne méthode. Laisse-t-on tout le code ?
    Et sinon, quel est le code mini­mum dans un header.php de thème enfant.
    Merci pour vos commen­taires éclai­rés, cordialement.
    Guy

  16. L’option « search/archive page layout » est appa­rue dans les options du thème avec l’ac­ti­va­tion de l’ex­ten­sion Options for Twentyseven. Et merci pour la fôt 😉

  17. background-image: url(https://sigurd.fr/wp-content/uploads/2019/10/world-fond-2-1.jpg) !important;

    Voilà, ça fonc­tionne, j’ai trouvé la bonne façon de l’écrire. Il me reste à peau­fi­ner la photo.

    Merci beau­coup Pascal, toujours au top !!!

  18. Ce serait plutôt :

    background-image: url('https://sigurd.fr/wp-content/uploads/2019/10/world-fond-2-1.jpg');

    avec des quotes simples ' ou doubles " mais pas des guille­mets à la fran­çaise « ».

  19. est-ce mieux ainsi :

    background-image: url("/https://sigurd.fr/wp-content/uploads/2019/10/world-fond-2-1.jpg/");

    C’est vrai que je ne sais pas vrai­ment comment écrire si le  » ou / ou * sont nécessaires.

    Non je n’ai pas surchargé .site-content (pour le moment !)

  20. Bonjour Guy. Déjà il y a une petite erreur dans le code CSS, il manque la notion d’url :

    background-image: url("/*exemple : https://mondomaine.com/wp-content/uploads/2017/07/bg-img.jpg*/");

    Ensuite, avez-vous surchargé votre CSS pour .site-content ou un sélec­teur parent ? Tentez de rajou­ter !important (juste avant le point-virgule) ce mot clé permet­tant parfois d’im­po­ser une modi­fi­ca­tion autre­ment impos­sible. Et dites-moi si le résul­tat est probant…

  21. Bonjour Pascal,

    Je ne me lasse pas de lire cet excellent article dont j’ai mis à profit mon site pour quelques améliorations.
    Aujourd’hui je souhai­te­rai mettre une image en fond l’écran.

    J’ai modi­fié le style.css du thème enfant (bien sur !!!) avec le bout de code suivant trouvé dans votre article :

    .site-content {
    background-image: https://sigurd.fr/wp-content/uploads/2019/10/world-fond-2-1.jpg;
    background-repeat: no-repeat;
    background-attachment: fixed;
    }

    Mais c’est sans effet, sur la page d’ac­cueil mais aussi sur les pages d’ar­ticles. Pas d’image en fond.
    Aurais-je loupé une étape .…

    Cordialement,

    Guy

  22. En visi­tant votre site, j’ai l’im­pres­sion que le problème est résolu. Quelle mani­pu­la­tion avez-vous effec­tuée, elle peut éven­tuel­le­ment servir à un autre blogueur…

  23. Bonjour, et merci pour cette réponse. Hélas, cette manip reste sans effet. Toutes les pages sont bien en une colonne, sauf cette damnée page d’ar­ticles (celle qui regroupe auto­ma­ti­que­ment toutes les dernières publi­ca­tions), qui sépare le titre (par défauts « derniers articles », que j’ai changé en « le blog ») qui reste à gauche tandis que les articles vont sage­ment se ranger dans la colonne de droite. Ma perplexi­tude est grande 🙂
    Bonne journée

  24. Bonjour Pascal, et merci pour votre appré­cia­tion. Pour mettre les pages et articles en pleine largeur, il suffit de se rendre, depuis la page d’ac­cueil du site, dans l’ou­til de person­na­li­sa­tion de WordPress. Vous avez un onglet ‘Options du thème’ vous y sélec­tion­nez ‘Une colonne’. Si vous avez des widgets dans la zone laté­rale, vous les suppri­mez. Et voilà, le tour est joué.

  25. Bonjour,
    Merci pour cet article.
    J’ai appli­qué votre procé­dure pour modi­fier le nombre de zones de widgets dans les pied de page. Cela fonc­tionne parfai­te­ment. J’ai main­te­nant 4 zones dispo­nibles à partir du tableau de bord. Mais cela ne rend pas du tout l’ef­fet voulu. Je m’at­ten­dais à avoir 4 zones en 4 colonnes. Or les zones 3 et nouvel­le­ment crées ne font que complé­ter la colonne 1. Ce qui revient à n’avoir que 2 colonnes. Avez vous un complé­ment ? Merci par avance

  26. Bonjour,
    Je débute mais j’avance assez vite. Pour autant je bloque sur une chose.
    D’un côté j’ai une page d’ac­cueil fixe qui utilise l’ef­fet paral­laxe, de l’autre je voudrais avoir une page d’ac­tua­lité où appa­raissent les derniers articles publiés. Je l’ai créée mais n’ap­pa­raissent que les titres de ces articles, ce n’est pas ce que je veux. Je voudrais voir les 4 derniers articles entiers direc­te­ment et ajou­ter sur une colonne laté­rale le widget archives. Pouvez vous m’aider.
    Soyez indul­gent, c’est un site en construc­tion, il y a des vides , des articles test bidons, des bouts d’es­sai, etc. : https://wp.railsdautrefois.fr/
    C’est en fait la future version du site exis­tant de mon asso­cia­tion : http://www.chrf.fr
    Merci par avance.

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

  28. Bon, j’ai rescruté le code carac­tère par caractère.
    Je ne vois pas où l’er­reur a pu se glisser.
    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 ; ?>
  29. 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.

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

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

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

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

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

  35. 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 tsw.ovh/wp-admin/post.php?post=9923&action=edit l’ID de l’image est 9923.

  36. 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’identifiant.
    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 !

  37. Merci beau­coup pour ce retour, je vais tenter cette solution.
    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 contraignant ! 

    Cordialement,

    Soizic

  38. Bonsoir Soizic,
    Le plus simple est de mettre une règle CSS (via l’ou­til de personnalisation) :

    * {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 😐

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

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

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

  42. 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é explicite)
    Pourriez vous m’ap­por­ter vos lumières.
    Merci de votre réponse, cordialement,
    Guy

  43. Bonjour Pascal,
    Cette nouvelle version de l’ar­ticle est fantas­tique. Elle couvre parfai­te­ment les aspects de personnalisation.
    A bien­tôt, Jean

Les commentaires sont fermés.

Retour en haut
Les cookies que nous utilisons sont indispensables au bon fonctionnement de ce site. Il n'y a aucun pistage publicitaire et les données statistiques recueillies sont anonymisées.
J'ai compris