Personnaliser Twenty Seventeen – astuces, bouts de code et extensions

14

Avec Twenty Seventeen, WordPress nous offre 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.


Astuces et extensions pour Twenty Seventeen
Astuces et extensions pour Twenty Seventeen

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

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

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

Oui, il va falloir mettre la main à la pâte, aller fouiller dans les options de l’outil de personnalisation intégré, ajouter quelques extensions, modifier 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 consacré à sa personnalisation.

Première étape…

Créer un thème enfant

Modifier directement un thème est toujours une (très) mauvaise idée. À moins de ne toucher qu’au style – et encore : uniquement depuis l’outil de personnalisation.

Une extension va vous permettre de créer un thème enfant sans trop de difficultés : Child Theme Configurator. Si vous ne connaissez pas cette extension, je vous invite à lire l’article Pour modifier un thème WordPress, apprenez à 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 pressé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écharger, à l’installer et à l’activer.

Thème enfant pour Twenty Seventeen

Une fois le thème enfant en place, activez-le. Et maintenant, voyons comment…

Personnaliser Twenty Seventeen

Nous ne verrons certainement pas toutes les possibilités de personnalisation 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 personnalisation – Twenty Seventeen

Pour accéder à l’outil de personnalisation, 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 modifier ou supprimer cette image, rendez-vous dans En-tête du média.

Twenty Seventeen ne se limite pas à proposer de changer ou de supprimer l’image d’en-tête, il permet aussi d’utiliser une vidéo téléchargée en local ou sur Youtube (bien mieux pour ne pas surcharger votre serveur), couplée à une image qui s’affichera le temps que la vidéo se charge.

En aparté, la traduction française est parfois une traduction à 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 intitulé – 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 remarquerez que cet onglet n’est disponible que depuis la page d’accueil elle-même, probablement parce qu’il permet de gérer le contenu des différentes sections de cette page, mais il sert aussi à définir le modèle général.

Sélectionnez donc le mode d’affichage souhaité (une ou deux colonnes, enregistrez vos modifications, créez les pages à inclure dans la page d’accueil (une page par section), avant de revenir à cet onglet pour définir les pages à afficher et leur ordre.

Créer un menu pour vos réseaux sociaux

Eh oui, afficher 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 personnalisé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 apparaîtra dans le pied de page – simple et efficace.

Via les propriétés CSS

Même s’il est possible de modifier l’affichage en utilisant l’outil de personnalisation (onglet CSS additionnel) il est préférable d’intégrer vos modifications à la feuille de style du thème enfant (le fichier style.css  de votre thème enfant) pour optimiser le temps de chargement de vos pages.

Définir une image de fond fixe

Commencez par ajouter l’image à votre bibliothè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 fonction de l’image de fond insérée, pensez à modifier la couleur du thème : si votre image est plutôt dans des tons foncés, choisissez 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 discuter des avantages et des inconvénients d’un menu fixe sur un terminal 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 changer 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 terminaux mobiles, il est là aussi nécessaire 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 principal). Si vous souhaitez modifier 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 dimensions par défaut sont de 350x80px. Vous allez jouer avec max-height  et max-width  pour en augmenter 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 envisager toutes les combinaisons 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 maximale par défaut est de 740 pixels pour les pages et les articles de blog sans barre latérale. Vous souhaitez 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 fonctions qui suivent sont directement 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 proposé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, pourquoi pas ? Mais si vous voulez insérer vos propres crédits, il va falloir ajouter une fonction, et modifier le fichier template-parts/footer/site-info.php .

Commencez par copier ce fichier dans votre thème enfant en respectant bien la structure des répertoires.

Éditez le, supprimez tout et insérez le code suivant :

Puis, dans le fichier functions.php , ajoutez 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 afficher un formulaire de contact et diverses informations.

Si vous aussi vous tenez à vos barres latérales, il va falloir modifier le fichier  page.php . Commencez par le copier dans votre thème enfant. Éditez le et ajoutez le code suivant entre </div><!-- #primary -->  et </div><!-- .wrap --> :

Puis, dans le fichier functions.php , ajoutez ces lignes :

La barre latérale, si vous lui avez assigné des widgets, s’affichera désormais dans vos pages.

Pour ceux qui voudraient des pages avec barre latérale et d’autres sans, renommez le fichier page.php  copié et modifié dans votre thème enfant, éditez-le à nouveau et remplacez * The template for displaying all pages  par * Template Name: With Sidebar .

Si vous voulez afficher 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 extensions Bold Themes traite de la personnalisation avec les extensions Bold Themes.

Il existe une autre extension pour personnaliser Twenty Seventeen : Advanced Twenty Seventeen. Elle pousse la personnalisation plus loin que Customize Twenty Seventeen de BoldThemes, mais n’est pas couplée à un constructeur de page.

Conclusion

Brut de fonderie, Twenty Seventeen n’est jamais qu’un thème par défaut, bien moins configurable qu’un thème « premium » vendu en général entre 60 et 100 €. Peu configurable mais avec un potentiel intéressant.

Les astuces, les bouts de code, les extensions présentés dans cet article compensent. Et dites-vous bien que ce n’est qu’un aperçu des personnalisations 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 fonctions 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 Twenty Seventeen dans les commentaires !


Sources

Pour rédiger cet article, j’ai effectué quelques recherches sur internet. 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 wpmudevHow 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 sélectionner le texte en question et appuyer sur Ctrl + Entrée.

Partager…
Tweet about this on TwitterShare on FacebookShare on Google+Share on LinkedInPin on Pinterest

14 commentaires

  1. Bonsoir, je suis novice, justement j’utilise ce thème, est-il possible de modifier 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.

    • Bonsoir, oui il est possible de changer l’image de fond, cet article justement donne la marche à suivre (paragraphe « Définir une image de fond fixe »). Si vous ne voulez pas que le fond soit fixe, il suffit de supprimer la ligne background-attachment: fixed;.

      Pour changer la couleur de fond (et la couleur du texte) du menu, ajouter une image de fond au menu, voici le code :

      Bonne soirée et bonne chance avec votre site !

  2. 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 sollicite encore, je souhaite modifier 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 continuation

    Ludo

    • Bonjour Ludo, merci pour votre retour, ça fait toujours plaisir.
      Pour mettre une image d’arrière plan spécifique à chaque page, il faut pousser plus loin la personnalisation. Il va falloir utiliser les champs personnalisé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 bibliothèque des médias). Dans le fichier functions.php, ajoutez les lignes suivantes :

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

  3. Bonjour,

    Merci encore pour le temps passé, cela fonctionne pas comme je veux ça change l’image du fond mais je voudrais si cela est possible modifier 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 explication, 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 modifier 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

    • Il n’y a pas de solution miracle, mais vous pouvez jouer sur les blocs (le conteneur général et celui qui contient le texte) :

      Si vous optez pour cette solution, il ne faut pas utiliser le code pour l’image d’arrière plan, car elle prend la main sur la couleur. Mais en raison de la structure des pages du thème, le résultat n’est pas spécialement très esthétique…

      • 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 pourquoi ma page accueil est coller au menu alors que les autres pages non (je préfère non coller).

        Je vous remercie pour le temps passé et le partage de connaissance.

        Une question 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éation de leur projet, pourriez 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

        • Je ne dirais pas « chiant », je dirais que vous tâtonnez… Pour décoller le bloc du menu, il suffit d’ajouter une marge au bloc :

          Pour que je puisse vous dire ce qui ne va pas (éventuellement) sur votre site, il faudrait que vous avanciez un peu plus dans votre projet, et que vous mettiez du contenu.
          Voilà, bonne journée Ludovic.

  4. J’ai fini par trouver je suis tombé sur cela :

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

    Cordialement – Ludovic

    • Bonsoir Ludovic,
      Désolé, il va vous falloir faire par vous-même… je fais effectivement 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écemment faire payer mes clients et vous offrir mes services 😉 en espérant que vous comprenez.
      Bonne soirée à vous aussi et bonne intégration.

Commenter

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