• Paru le 20 juillet 2017- mis à jour le 10 octobre 2017

Personnaliser Twenty Seventeen – astuces, bouts de code et extensions

2505 mots - 11mn

Personnaliser Twenty Seventeen – astuces, bouts de code et extensions

1024 682 Pascal CESCATO

Avec Twenty Seventeen, WordPress nous offre son thème le plus univer­sel : blog, maga­zine, site d’entreprise… et mobile first pour ne rien gâcher. Du poten­tiel, mais peu person­na­li­sable par défaut. Rédhibitoire ? Non, vous allez vite vous en rendre compte.

Attends, tu veux que j’utilise Twenty Seventeen ? Mais c’est le thème par défaut ! N’y pense même pas !

Et pour­tant si… Twenty Seventeen n’est pas n’importe quel thème par défaut : il se démarque de ses prédé­ces­seurs en n’étant plus orienté blog.

Bien sûr il convien­dra pour habiller un blog. Mais il permet égale­ment de créer un site d’entreprise, avec sa page d’accueil à sections et son image (ou sa vidéo) plein écran.

En aparté, la démo propo­sée dans le dépôt WordPress(.org) n’est pas très enga­geante. WordPress.com en propose une plus abou­tie, qui donne déjà une meilleure idée du résultat.

Oui, il va falloir mettre la main à la pâte, aller fouiller dans les options de l’outil de person­na­li­sa­tion inté­gré, ajou­ter quelques exten­sions, modi­fier les CSS… 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.

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’outil 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’article Pour modi­fier un thème WordPress, appre­nez à créer un thème enfant ! sur No Tuxedo (et ne vous arrê­tez pas à la lecture de cet article, le blog de Marlène est une vraie caverne d’Ali Baba pour blogueur).

Pour ceux qui sont pres­sés, ou qui ne sont pas encore à l’aise avec l’administration 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’installer et à l’activer.

Thème enfant pour Twenty Seventeen

Une fois le thème enfant en place, activez-le. Et main­te­nant, voyons comment…

Personnaliser Twenty Seventeen

Nous ne verrons certai­ne­ment pas toutes les possi­bi­li­tés de person­na­li­sa­tion de ce thème, mais nous allons tenter d’explorer un maximum.

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

Via l’outil de personnalisation

Outil de personnalisation - Twenty Seventeen

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

Pour accé­der à l’outil de person­na­li­sa­tion, vous pouvez, dans l’interface d’administration, cliquer sur Apparence > Personnaliser. Ou depuis le site lui-même, cliquer sur l’entré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’utiliser 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’affichera 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’accueil, cliquez sur Options du thème.

Vous remar­que­rez que cet onglet n’est dispo­nible que depuis la page d’accueil 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’affichage souhaité (une ou deux colonnes, enre­gis­trez vos modi­fi­ca­tions, créez les pages à inclure dans la page d’accueil (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’onglet 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.

Via les propriétés CSS

Même s’il est possible de modi­fier l’affichage en utili­sant l’outil de person­na­li­sa­tion (onglet CSS addi­tion­nel) il est préfé­rable d’inté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’interface d’administration 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 .

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’onglet Couleurs de l’outil 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’accueil, si vous avez une image d’en-tête), il n’en est pas de même lors de l’affichage en version mobile. Nous n’allons 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 veulent – et j’en suis.

Désactiver le positionnement fixe du menu

Et pour ceux qui à l’inverse ne veulent pas du tout d’un menu fixe, collé en haut de page :

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

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’insérer ce code dans votre feuille de style :

Le total n’est pas de 100%, la diffé­rence règle l’écartement entre les deux colonnes pour le confort de lecture.

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

Redimensionner le logo

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

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

Vous pouvez envi­sa­ger toutes les combi­nai­sons possibles, en créant des mosaïques avec ces quatre zones, par exemple :

Modifier la largeur des pages et des articles (sans barre latérale)

La largeur maxi­male par défaut est de 740 pixels pour les pages et les articles de blog sans barre laté­rale. Vous souhai­tez allouer plus d’espace à votre contenu ? Renseignez la propriété max-width  avec la valeur de votre choix, en em, en pixels ou en pourcentage.

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 :

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 :

Puis, dans le fichier functions.php , ajou­tez ces lignes de code :

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 .

Ajouter une barre latérale aux pages

Par défaut, Twenty Seventeen réserve les barres laté­rales aux articles. Sur ce blog, je m’en sers sur certaines pages (Création / Refonte de site web et Formation WordPress) pour affi­cher un formu­laire de contact et diverses informations.

Si vous aussi vous tenez à vos barres laté­rales, 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 --> :

Puis, dans le fichier functions.php , ajou­tez ces lignes :

La barre laté­rale, si vous lui avez assi­gné des widgets, s’affichera 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’extension Custom Sidebars – Dynamic Widget Area Manager est toute indiquée.

Via des extensions dédiées

L’article Habillez votre site avec Twenty Seventeen et les exten­sions Bold Themes traite de la person­na­li­sa­tion avec les exten­sions Bold Themes.

Il existe une autre exten­sion pour person­na­li­ser Twenty Seventeen : 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 ou Visual Composer.

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 😉

Thème enfant pour Twenty Seventeen

Et n’hésitez pas à donner votre avis sur ce thème dans les commentaires !


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.

 

26 commentaires
  • Vincent 8 septembre 2017 à 17 h 01 min

    Merci beau­coup pour votre réac­ti­vité Pascal, je teste tout cela et vous tiens au courant le cas échéant, mais je ne vais pas non plus vous harceler 😉
    Bonne fin de journée,
    Vincent

    • Pascal CESCATO 8 septembre 2017 à 17 h 04 min

      Vincent, c’est avec plai­sir que je réponds. Et ce compor­te­ment avec le thème Twenty Seventeen m’intrigue… tenez-moi au courant, s’il vous plaît.

    • Pascal CESCATO 8 septembre 2017 à 18 h 56 min

      Avez-vous mis l’image qui doit appa­raître en « Image mise en avant », avec une taille de 2000x1200px ? Il ne faut surtout pas insé­rer l’image dans l’article…

      • Vincent 8 septembre 2017 à 19 h 07 min

        Mon souhait est d’intégrer des pages avec des photos de grandes tailles pouvant être « cliquées » pour mener ensuite à une gale­rie, l’image de mise en avant dispose de limite dans ce contexte : pas de clic possible et par ailleurs, une seule image possible. Du coup je n’utilise pas cette opportunité.
        En tout état de cause, vous suggé­rez de ne pas utili­ser des images de cette taille dans une page : trop lourdes ?
        Incompatible avec les devices mobiles ? Pourquoi ne surtout pas faire ceci ?
        Bien cordialement,
        Vincent

        • Pascal CESCATO 8 septembre 2017 à 19 h 16 min

          Vous pouvez rajou­ter des images : plus petites (900x600px par exemple) alors, et centrez-les avec un lien sur le média. Je n’ai pas testé, mais ça devrait fonctionner.

  • Vincent 8 septembre 2017 à 16 h 37 min

    Qu’entendez vous par là, un compres­seur d’image sous forme d’un plug-in inté­gré à WP en exten­sion par exemple ? Non, vrai­ment je ne vois pas, je ne dispose d’aucune exten­sion active pour le moment.
    Je me demande si la syntaxe du code est la bonne sinon ? Cela s’insère bien sans autre forme de procès, à la fin du functions.php du thème enfant ou principal ?

    • Pascal CESCATO 8 septembre 2017 à 16 h 44 min

      Sous forme d’extension, effectivement.

      Concernant la fonc­tion en elle-même, je la rajou­te­rais plutôt dans un snip­pet plutôt que dans functions.php (cf. Centralisez vos bouts de code avec « Code Snippets »).

      Éventuellement essayez la fonc­tion suivante, écrite de manière plus classique :

      Enfin si vous tenez à la placer dans le fichier de fonc­tions du thème, c’est dans le thème actif qu’il faut la placer, donc dans le thème enfant. Placée dans le thème parent, elle fonc­tion­ne­rait aussi, jusqu’à ce qu’elle soit écra­sée lors d’une mise à jour.

  • Vincent 8 septembre 2017 à 15 h 35 min

    Bonjour Pascal,
    J’aurais une autre ques­tion pour vous si possible. (Au niveau tutoiement/vouvoiement je ne suis pas tip top, je suis confus)
    Je cherche à empê­cher WordPress de compres­ser mes images et j’ai trouvé ce bout de code :

    Il est dit qu’il faut l’insérer dans le fichier functions.php
    Ce que j’ai effec­tué dans le (bas du) fichier en ques­tion situé dans mon child-thème.
    Mes images dans les pages sont ok en prévi juste après créa­tion, sauf que lorsque j’intègre la page dans le site, les photos sont de nouveau compres­sées (un peu le même problème que précé­dem­ment pour les largeurs de pages…) Du coup j’ai placé ce bout de code un peu partout (…), functions.php du thème origi­nal, du réper­toire wp-includes égale­ment, dans l’éditeur CSS inté­gré, mais rien à faire. Je suis complè­te­ment largué.
    Auriez-vous un conseil à me donner à ce sujet s’il vous plaît ?
    Merci par avance,
    Vincent

    • Pascal CESCATO 8 septembre 2017 à 16 h 04 min

      Bonjour Vincent, vous n’auriez pas un « compres­seur d’image » par hasard ? Parce qu’en prin­cipe, ce qu’on demande à WordPress, il le fait bien gentiment…

  • Vincent 7 septembre 2017 à 20 h 45 min

    Bonsoir Pascal,
    Je fais suite à mon message juste au dessus, voilà j’ai trouvé ceci qui fonc­tionne à priori pour « élar­gir » mes pages sous twenty seventeen.

    Voilà, si cela peut aider un rookie dans mon genre c’est cool, ton point de vue sur le code sera inté­res­sant le cas échéant.
    Merci encore pour tes diffé­rents partages et bonne soirée,
    Vincent

  • Vincent 7 septembre 2017 à 17 h 01 min

    Bonjour Pascal,
    Merci pour toutes ces infos, c’est chouette vrai­ment. Je suis photo­graphe et je tente de faire quelque chose avec twenty seven­teen, à la mesure de ma méconnaissance.
    Je souhaite dispo­ser de page plus « larges ».
    Lorsque j’applique (dans personnalisation/CSS addi­tion­nel) le code de votre section « Modifier la largeur des pages et des articles (sans barre laté­rale) », il se passe le truc suivant :
    A la créa­tion d’une page c’est nickel, mes photos notam­ment exploitent la nouvelle largeur de page.
    Si j’intègre cette page dans options du thème, bam je perds les carac­té­ris­tiques de largeur de page et le tout se rétré­cie à nouveau 🙁
    Bon je ne sais pas si je suis compré­hen­sible, mais si vous avez un regard là-dessus, cela me m’aiderait sévèrement 🙂
    Bien cordialement,
    Vincent

  • Arduino 30 juillet 2017 à 21 h 34 min

    Bonsoir,
    J’ai trouvé ce que je veux faire sur le conte­nant mais je n’arrive pas a le mettre en place et comment le mettre en place voici les liens :
    https://codepen.io/ariona/pen/geFIK ou https://codepen.io/Kseso/pen/JBrcD
    Si vous avez encore un peu de temps a me consacrer.
    Bonne soirée – Ludovic

    • Pascal CESCATO 30 juillet 2017 à 21 h 40 min

      Bonsoir Ludovic,
      Désolé, il va vous falloir faire par vous-même… je fais effec­ti­ve­ment de l’intégration de scripts de temps à autre, mais outre le fait que ce n’est pas un domaine dans lequel j’excelle, c’est un service que je facture. Votre demande dépasse le cadre de l’article, je ne peux décem­ment faire payer mes clients et vous offrir mes services 😉 en espé­rant que vous comprenez.
      Bonne soirée à vous aussi et bonne intégration.

  • Arduino 27 juillet 2017 à 13 h 54 min

    J’ai fini par trou­ver je suis tombé sur cela :

    Mais est-il possible de défi­nir une taille de page (le conte­nant) avec une valeur mini car quand on écrit pas grand chose ça fait un peu bête.

    Cordialement – Ludovic

  • Arduino 27 juillet 2017 à 6 h 20 min

    Bonjour,

    Merci encore pour le temps passé, cela fonc­tionne pas comme je veux ça change l’image du fond mais je voudrais si cela est possible modi­fier que le fond ou j’écris car quand j’utilise le script, cela met l’image en haut a gauche mais non au milieu ou j’écris, je sais pas si je suis clair dans mon expli­ca­tion, par exemple je veux garder mon fond vert et mettre au milieu un fond noir un peu comme ma page contact garder le vert et la ou il y a la carte un fond noir ou autre avec du texte, je veux modi­fier le fond ou j’écris un peu comme là : https://wpformation.com/migrer-wordpress-com-wordpress-org/ .

    Merci par avance si cela est possible. Cordialement,

    Ludo

    • Pascal CESCATO 27 juillet 2017 à 8 h 45 min

      Il n’y a pas de solu­tion miracle, mais vous pouvez jouer sur les blocs (le conte­neur géné­ral et celui qui contient le texte) :

      Si vous optez pour cette solu­tion, il ne faut pas utili­ser le code pour l’image d’arrière plan, car elle prend la main sur la couleur. Mais en raison de la struc­ture des pages du thème, le résul­tat n’est pas spécia­le­ment très esthétique…

      • Arduino 27 juillet 2017 à 11 h 35 min

        Rebonjour

        Vous allez dire celui-la il est super chiant, mais cela change tous les blocs pas que celui de la page, même l’arrière du menu etc…
        De plus pour­quoi ma page accueil est coller au menu alors que les autres pages non (je préfère non coller).

        Je vous remer­cie pour le temps passé et le partage de connaissance.

        Une ques­tion encore le site ( http://doudouetpinou.fr/wp/ ) c’est un site que je fait pour mon épouse et ma belle sœur pour la créa­tion de leur projet, pour­riez vous me dire ce qui ne va pas au niveau de celui-la les images se sont des tests.

        Encore mille merci pour tous.

        Ludovic

        • Pascal CESCATO 27 juillet 2017 à 11 h 53 min

          Je ne dirais pas « chiant », je dirais que vous tâton­nez… Pour décol­ler le bloc du menu, il suffit d’ajouter une marge au bloc :

          Pour que je puisse vous dire ce qui ne va pas (éven­tuel­le­ment) sur votre site, il faudrait que vous avan­ciez un peu plus dans votre projet, et que vous mettiez du contenu.
          Voilà, bonne jour­née Ludovic.

          • Arduino 27 juillet 2017 à 12 h 30 min

            Donc pour modi­fier le fond que de la page où l’on écris cela n’est pas possible ?
            Encore une fois merci.
            Bonne jour­née et bonne continuation.

            Ludovic

          • Pascal CESCATO 27 juillet 2017 à 12 h 33 min

            Non, je ne vois pas de solu­tion… Merci à vous et bonne continuation.

  • Arduino 26 juillet 2017 à 13 h 46 min

    Bonjour

    J’ai réussi a faire ce que je voulais je suis en phase de test, le fond du site j’ai réussi grâce a votre article.
    Je vous solli­cite encore, je souhaite modi­fier le fond de mes pages afin de faire la diffé­rence entre le fond des pages et le fond du site.

    Merci encore pour vous, merci de votre aide. Voici mon site : http://doudouetpinou.fr/wp/

    Bonne conti­nua­tion

    Ludo

    • Pascal CESCATO 26 juillet 2017 à 15 h 16 min

      Bonjour Ludo, merci pour votre retour, ça fait toujours plaisir.
      Pour mettre une image d’arrière plan spéci­fique à chaque page, il faut pous­ser plus loin la person­na­li­sa­tion. Il va falloir utili­ser les champs person­na­li­sés pour le fond de page. S’ils n’apparaissent pas à l’écran, cliquez sur Options de l’écran en haut à droite. Nommez votre champ bgimg par exemple, et 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 :

      Voilà ! En espé­rant que ce bout de code fasse l’affaire…

  • Arduino 24 juillet 2017 à 18 h 34 min

    Bonsoir, je suis novice, juste­ment j’utilise ce thème, est-il possible de modi­fier la couleur de fond du menu ou de mettre une image en arrière plan du menu de même pour le fond du thème il y a clair ou foncer mais est il possible de de mettre une image en fond ?

    Merci par avance de votre aide.

    • Pascal CESCATO 24 juillet 2017 à 19 h 05 min

      Bonsoir, oui il est possible de chan­ger l’image de fond, cet article juste­ment donne la marche à suivre (para­graphe « Définir une image de fond fixe »). Si vous ne voulez pas que le fond soit fixe, il suffit de suppri­mer la ligne background-attachment: fixed;.

      Pour chan­ger la couleur de fond (et la couleur du texte) du menu, ajou­ter une image de fond au menu, voici le code :

      Bonne soirée et bonne chance avec votre site !

Laisser une réponse

La modération des commentaires est activée. Votre commentaire peut prendre un certain temps avant d'apparaître.

    Partager…