WordPress : personnalise le thème Twenty Seventeen

T Twenty Seventeen n’est plus le thème par défaut de WordPress. Il conserve cependant toute sa popularité : plus d’un million de sites l’utilisent aujourd’hui.

Ce thème entièrement gratuit est idéal pour les débutants qui souhaitent un site pour promouvoir leur activité.

C’est le seul des thèmes développés par les équipes de WordPress qui soit orienté entreprise contrairement aux autres plus axés sur le blogging.

Nous allons voir ensemble comment le personnaliser dans ce tutoriel pas à pas.

Tu vas commencer par modifier l’aspect de ton site avec l’éditeur du thème puis tu pourras approfondir avec trois extensions voire quelques CSS pour les plus audacieux.

Cet article prend environ 10 minutes à lire. Si tu n’as pas le temps, tu peux l’épingler sur Pinterest pour le lire plus tard.

Si tu souhaites pousser la personnalisation dans les moindres détails, je t’encourage à te reporter sur OceanWP.
La version gratuite offre des possibilités incroyables. Il sera cependant complexe à aborder pour un débutant.

Pourquoi utiliser Twenty Seventeen ?

• Responsive : Fonctionne parfaitement sur tous les supports : ordinateur, mobile et tablette
• Mis à jour régulièrement
• Simplicité de prise en main
• Entièrement gratuit

• Fortement utilisé : nécessite un travail de différentiation
• Rapidité correcte mais pas dans les meilleurs
• Peu d’options natives de personnalisation

Présentation du thème

Je te propose de regarder l’exemple de présentation réalisé par les équipes de WordPress. Il offre une bonne idée du rendu que tu pourras obtenir.

Le résultat est efficace, aéré et très lisible.

Twenty Seventeen se caractérise par une page d’accueil rythmée en paragraphes séparés par des images qui défilent en fond (effet parallaxe). Il est possible d’ajouter une vidéo en entête de page.

Ce qui est géré par le thème

Le thème va permettre de gérer l’aspect global de ton site :

• image d’entête
• polices : taille, couleurs…
• couleur de fond, de la barre latérale, des boutons…

La partie contenu et organisation des pages sera gérée par Gutenberg l’éditeur de WordPress. Tu peux également utiliser un constructeur de page comme Elementor pour les mises en pages plus complexes.

Tu débutes par la mise en place du thème.

Installe le thème

Dans le menu de gauche : Apparence > Thème

Twenty Seventeen est un thème par défaut de WordPress. Il est normalement déjà présent dans le répertoire.

Tu survoles le visuel et cliques sur Activer.

Si ce thème n’est pas présent, tu cliques sur Ajouter un thème.

Tu le recherches

et l’installes.

Nous allons débuter par la personnalisation à l’aide de l’éditeur d’origine de Twenty Seventeen.

Personnalise le thème dans l’éditeur (logo, image de fond et menu)

Pour l’instant, ton thème ressemble à cela.

Tu vas rendre ton site unique.

Avant de te lancer, voici un petit point sur les éléments dont tu auras éventuellement besoin.

• Ton logo avec un maximum de 250 pixels en largeur et hauteur. Il est également possible de saisir en texte le nom de ton entreprise.
• Le symbole de ton site (favicon) au format carré (512 X 512 px) qui sera affiché dans les barres de recherches
• Une entête (image ou vidéo) pour la page d’accueil en 2000 X 1200 px
• De grands visuels pour illustrer ta page d’accueil en 2000 X 1200 px
• Les références couleurs de ta marque, par exemple
  • gris : #CDCED3
  • marron clair : #D1B6A1
• Les polices des titres et textes (option), par exemple
  • Titres : Sanchez
  • Texte : Open Sans

Passons aux travaux pratiques.

L’éditeur du thème

Dans le menu de gauche, Apparence > Personnaliser

Tu découvres les options de personnalisation du thème. Nous allons les voir ensemble une par une.

Identité du site

Tu charges ton logo et complètes le nom du site (nom de ta marque ou de ton blog) et un slogan (ton activité par exemple).

Tu remplis le texte alternatif pour Google. Ce sera ici : logo et nom de ton site.

Si ton logo n’est pas au format carré, tu devras éventuellement le recadrer.

Le résultat :

Si tu souhaites un logo plus gros et sans texte,

tu décoches Afficher le titre et le slogan du site.

Même si tu ne souhaites pas qu’ils apparaissent, c’est important de conserver le nom de ton site et le slogan. Ils sont utiles pour la compréhension des moteurs de recherche.

Tu sélectionnes l’icône du site (ou favicon).

Il s’agit du minuscule visuel qui illustre les onglets des navigateurs.

Tu publieras systématiquement à chaque étape pour que tes modifications soient prises en compte.

Couleur

C’est clairement le point faible de l’éditeur.

Tu disposes de trois options :

Clair (Light) : fond blanc et textes en noir et blanc

Noir (Dark) : fond foncé et polices blanches

Personnalisé (Custom) : une couleur personnalisée à l’aide d’un curseur pour le thème clair.

Le fait de ne pas pouvoir intégrer la référence précise d’une couleur est un défaut à mon sens. Tu pourras le réaliser avec des outils complémentaires que tu découvriras ensuite.

Tu vas essayer de te rapprocher au mieux de la couleur souhaitée.

Je te recommande d’utiliser ta couleur d’accompagnement. Elle sera appliquée à différents éléments du site : icônes, certains titres, boutons.

Média de l’en-tête

Ce visuel illustra ta page d’accueil en grand format

et tes autres pages en version réduite.

Tu peux intégrer une vidéo courte et légère en en-tête

ou un visuel.

Si tu as choisis une vidéo pour ta page d’accueil, tu ajoutes un visuel similaire qui sera présent sur les autres pages.

Menus

Deux sous-menus sont présents : les options pour gérer tes menus et les boutons des réseaux sociaux.

Menu supérieur

Tu disposes de 4 pages dans le site de présentation : Accueil, À propos de, Blog et Contact.

Tu peux les déplacer pour modifier l’ordre,

créer des sous menus en déplaçant sur un autre intitulé,

les supprimer en déployant

ou en ajouter.

Tu intègres facilement une page ou un article en le sélectionnant.

Tu modifies le nom que tu souhaites voir apparaître dans le menu.

Twenty Seventeen donne l’option d’imbriquer plusieurs pages à l’intérieur de la page d’accueil. Nous verrons ce point un peu plus tard.

Tu peux diriger vers un site externe à l’aide des liens personnalisés.

Menu des liens sociaux

4 réseaux sociaux sont déjà présents ainsi que l’e-mail.

Tu peux retirer un réseau en dépliant,

indiquer l’adresse de ton compte sur chacun de tes réseaux sociaux,

compléter ton e-mail après le mailto:,

ajouter de nouveaux réseaux.

WordPress intègre automatiquement l’icône des principaux réseaux sociaux.

Widgets

Les widgets représentent les blocs de la barre latérale et du pied de page. La barre latérale est présente uniquement sur les articles.

Tu ouvres tous les emplacements et ajoutes, supprimes et déplaces les blocs.

Je te recommande les widgets suivants :

• Rechercher pour faciliter la navigation
• Articles récents pour améliorer la découvertes d’autres contenus
• Image pour intégrer une bannière de promotion de tes services et produits

Le titre des widgets ajoute une ligne de texte au-dessus de celui-ci.

Ajoute tes mentions légales

Les mentions légales (et les CGV si tu réalises des ventes en ligne) sont obligatoires et doivent être accessibles sur l’intégralité des pages de ton site.

Le plus simple est d’ajouter un lien dans ton pied de page, par exemple en bas de ton pied de page 1.

Tu crées une page spécifique avec tes mentions légales.

Dans cet article de Service Public, tu retrouveras toutes les mentions légales à indiquer en fonction des différentes catégories d’entreprises.

Tu sélectionnes HTML personnalisé et tu colles le code suivant en personnalisant l’url de ta page.

<p><a href="https://www.tonsite.fr/tapage/">Mentions légales</a></p>

Tu vas pouvoir t’attaquer à une page stratégique de ton site.

Met en forme ta page d’accueil

La page d’accueil est gérée par 2 sous-menus.

Réglages de la page d’accueil

Ils restent inchangés pour un site d’entreprise. Tu bascules vers Les derniers articles pour un blog qui présente les dernières parutions en home.

Options du thème

Tu peux modifier l’affichage de ton texte

de 2 colonnes

à 1 colonne

Je te conseille de conserver l’option en 2 colonnes car les lignes de textes en plein écran sont difficiles à lire.

Les sections de la page d’accueil

Tu indiques les pages présentes sur la page d’accueil. L’image principale de chaque page s’intercalera automatiquement entre les sections avec l’effet parallaxe.

Tu peux ajouter jusqu’à 3 pages.

Pour pousser plus loin la personnalisation, tu utilises trois extensions qui facilitent grandement la tâche.

Modifie les polices et la position du logo avec Customize Twenty Seventeen

Tu vas dans le répertoire d’extensions de WordPress.

Tu cherches Customize Twenty Seventeen,

la charges,

et l’actives.

Tu disposes désormais de nouvelles options dans le menu personnalisation > BoldThemes Settings.

Tu utilises les polices Google Fonts de ton choix pour :

• le texte
• le titre de la page
• les titres intermédiaires
• le menu

Tu choisis si tu souhaites centrer ou aligner à droite ton logo et ton menu.

Les réglages seront plus fin sur ce point avec l’extension suivante.

Personnalise les couleurs, polices et pied de page avec Options for Twenty Seventeen

Tu installes l’extension Options for Twenty Seventeen.

Elle ajoute 5 nouveaux menus de personnalisation.

Header Options (titre du site)

Ce menu ne sera intéressant que si tu as conservé du texte pour ton logo.

Les options suivantes sont disponibles pour le titre du site et la description :

• alignement (gauche, centré et droite)
• la capitalisation (aucune, majuscule pour chaque mot, entièrement en majuscules et minuscules)
• enlever l’espacement supplémentaire entre les lettres
• taille du titre
• accentuer la graisse
• couleur

Tu peux modifier facilement l’apparence de ton site.

Nav Options (menu)

Les options pour la police du menu :

• la capitalisation
• taille
• graisse

Les couleurs du menu :

• les éléments
• la page actuellement consultée d’une autre couleur
• le texte au survol de la souris
• le fond au survol
• le fond de la zone de menu
• le fond des sous-menus

Content options (polices des titres)

Les articles et les pages disposent de réglages identiques des titres mais indépendants.

• alignement
• capitalisation
• taille
• graisse
• couleur
• marge en dessous (seulement pour les pages)

Les liens :

• couleur du lien
• couleur au survol

Footer options (pied de page)

Les couleurs du pied de page :

• fond
• titres
• texte
• liens
• liens au survol

Tu règles, si tu le souhaites, les tailles des différents textes de ton site.

Ajuste les tailles des polices avec Advanced Twenty Seventeen

Les mises à jour de cette extension commencent à dater. Je recommande de réaliser les personnalisations avancées des polices en CSS.

Tu ajoutes l’extension Advanced Twenty Seventeen du répertoire de WordPress.

5 nouveaux sous-menus sont disponibles.

Certains réglages sont redondants avec les autres extensions. Je te présente uniquement ceux qui apportent une nouveauté.

Typographie des textes

Advanced Global > Typography

Les réglages des tailles de textes sont avancés mais les couleurs se déterminent au curseur. C’est pourquoi tu as utilisé la précédente extension sur ce point précis.

Les réglages :

• famille de police
• variante
• taille de police
• hauteur de ligne
• espacement entre les lettres
• capitalisation du texte

Polices du titre du site

Tu poursuis le travail sur les polices dans Avanced Header > Site branding.

Les options pour le titre du site et la description :

• famille de police
• variante
• taille de police
• espace des lettres
• capitalisation

Tu disposes des mêmes options pour le menu avec le texte standard et survolé : Advanced Header > Menu et pour les textes, titres et liens des widgets du pied de page.

Je n’ai pas trouvé d’extensions qui permettent facilement de personnaliser tous les éléments du site. De nombreuses personnalisations sont accessibles à l’aide du code CSS qui défini l’aspect général du site.

Tu rentres dans le cœur du thème ici.

Affine l’apparence de ton thème avec les CSS

Tu réalises une sauvegarde du site. Il n’y a aucun risque si tu suis les instructions mais il faut toujours assurer ses arrières.

Tu ne vas pas intégrer ton code directement dans ton thème mais dans une extension. Tu pourras toujours désactiver l’extension et retrouver ton site comme à l’origine.

Tu installes SiteOrigin CSS.

Tu ajoutes les fonctionnalités que tu souhaites dans Apparence > CSS personnalisé.

Tu ajoutes ton code ici et enregistres. Tu laisses une ligne vide entre chaque ajout.

2 points utiles à savoir :

• Les lignes comprises entre /* */ sont du commentaire. Elles ne sont pas utilisées dans le code mais permettent de retrouver ses petits.
• !important en fin de ligne sert à indiquer que s’il existe des instructions similaires, celles-ci prendront le pas.

Enlève la mention WordPress de ton pied de page

Tu supprimes la mention Fièrement propulsé par WordPress du pied de page de ton site.

/* suppression de Fièrement propulsé par WordPress */
.site-info {
display: none;
}

Tu indiques la couleur que tu souhaites en indiquant ta référence à la place du gris #eeeeee.

Modifie la couleur du pied de page

/* couleur de la barre latérale */
.widget-area {
background: #eeeeee;
}

Change la couleur de la barre latérale

/* couleur du pied de page */
.site-footer {
background: #eeeeee;
}

Personnalise la couleur des boutons

Tu as également la couleur du texte à changer ici : #f1e928 (à la suite de color) en plus du fond.

 /* personnalisation des boutons */
.colors-custom input[type="submit"] {
color: #f1e928!important;
background: #eeeeee!important;
}

Pour aller plus loin, tu trouveras les explications complètes pour une utilisation avancée de SiteOrigin CSS.

Conclusion

Ton site n’est pas figé. Il va grandir et évoluer avec ton entreprise.

Le plus simple est de réaliser, dans un premier temps, un site à tes couleurs qui détaille ton activité.

[tweetshare tweet= »Le tutoriel détaillé pour personnaliser le thème Twenty Seventeen de WordPress. » username= »pourpasunrond »]

Quand tu auras finalisé tes textes et écris trois articles de blog, tu peaufineras ton design. Le test sur mobile requière souvent des adaptations.

Twenty Seventeen laisse une belle part aux visuels. Ils seront un élément moteur de l’attractivité de ton site. Découvre 4 sites pour trouver des photos et vidéos gratuites.

Quand tu auras finalisé l’aspect graphique, je te recommande d’installer un thème enfant si tu utilises des CSS. Cela ne prend que quelques minutes.

Les articles qui peuvent t’intéresser

• Trouve la barre des cookies adaptée à ton site
• Réalise des visuels personnalisés en 3 minutes avec un générateur de mockups
• Assure la sécurité de ton site
• Structure le contenu de ton site
• Le contenu de ta page d’accueil

Je partage mes apprentissages et mes expériences depuis 2017 avec + de 100 tutoriels et ressources.

Tu devrais trouver ton bonheur pour créer ta marque, construire ton site puis le faire grandir et développer ton entreprise sur pour pas un rond.

Jean