Personnaliser Twenty Nineteen

Cet article prend 7 minutes à lire et comporte 1648 mots.

Pourquoi ne pas tenter Twenty Nineteen pour habiller votre blog ? Il ne manque pas d'atouts pour séduire, si ce n'est un manque de personnalisation récurrent sur les thèmes par défaut. Pas grave, nous allons y remédier…

Twenty Seventeen a fait un tabac, en deux ans d’existence. Deux (très) longues années où WordPress n’a pas voulu nous offrir un nouveau thème par défaut, atten­dant de sortir en version 5 pour nous propo­ser Twenty Nineteen, à quelques semaines à peine de l’an­née… 2019.

Et en à peine trois mois, le petit dernier de la famille Twenty rattrape son prédé­ces­seur en termes d’ins­tal­la­tions actives : le million est dépassé, mettant fin à deux ans de règne sans partage…

Dans La Bible de Twenty Seventeen, je vous ai présenté des codes, des exten­sions, de thèmes enfants pour person­na­li­ser ce thème.

Actuellement l’offre est bien moindre pour Twenty Nineteen (une exten­sion, un thème enfant dans le dépôt WordPress et six propo­sés sur wordpress.com) mais je vous ai quand même trouvé quelques pistes pour le person­na­li­ser.

Et je vous ai préparé un thème enfant, à télé­char­ger en fin d’ar­ticle.

Tout d’abord, pour ceux qui ne veulent pas toucher au code, il y a…

Les extensions

Bon, d’ac­cord, l’ex­ten­sion. Enfin, pour le moment (j’es­père que d’autres suivront). C’est Options for Twenty Nineteen.

Tout est dans le titre. L’auteur, qui nous a déjà grati­fié d’une exten­sion dédiée à Twenty Seventeen (Options for Twenty Seventeen), enri­chit son exten­sion au fil du temps.

De deux ou trois options à la sortie du thème, on est passé à une quin­zaine à ce jour (fin février 2019). À vous de faire votre marché. Vous pour­rez :

Options for Twenty Nineteen
  • adap­ter l’opa­cité sur l’image à la Une – ça, c’est inté­res­sant
  • auto­ri­ser un dimen­sion­ne­ment person­na­lisé du logo
  • modi­fier la largeur d’af­fi­chage du logo
  • suppri­mer la couleur d’ar­rière plan du logo, et le masque arrondi tout autour
  • affi­ner le contrôle de la satu­ra­tion et de la brillance de la couleur de base – tout aussi inté­res­sant, et amusant, pour ne rien vous cacher
  • cacher les tirets du thème – person­nel­le­ment j’aime bien ces petits tirets
  • affi­cher l’image à la Une sur les articles ( c’est déjà le cas, non?)
  • affi­cher la descrip­tion des caté­go­ries et des étiquettes dans les pages d’ar­chives
  • affi­cher le contenu complet des articles dans les archives – contre produc­tif en termes de SEO, mais qui sait ? Certains en ont peut-être besoin…
  • cacher la date de publi­ca­tion via les CSS – effet pure­ment visuel, Google voit tout 😉
  • choi­sir le posi­tion­ne­ment des métas de l’ar­ticle
  • cacher l’au­teur de la publi­ca­tion, toujours via les CSS – la remarque précé­dente s’ap­plique ici aussi. Mais c’est vrai que je n’ai pas besoin de voir mon nom affi­ché partout, je le connais déjà bien, il n’y a pas de risque que je l’ou­blie (enfin, à court et moyen terme)
  • acti­ver le défi­le­ment infini de Jetpack (mais il faut acti­ver Jetpack, et à nouveau, ce n’est pas forcé­ment extra­or­di­naire en termes de SEO, sans non plus être rédhi­bi­toire – et cette option est payante)
  • suppri­mer la mention « Fièrement propulsé par WordPress » du pied de page (sans la rempla­cer)

Intéressante donc, sans être fran­che­ment indis­pen­sable, on peut très bien se passer des effets CSS de l’ex­ten­sion en les ajou­tant manuel­le­ment via le CSS addi­tion­nel de l’ou­til de person­na­li­sa­tion de WordPress.

Espérons que BoldThemes nous sortira une exten­sion plus abou­tie d’ici quelques mois (je n’ose pas dire semaines, pour­tant ce serait un must !)

Pour ceux qui ne veulent pas s’en­com­brer d’une exten­sion, il y a possi­bi­lité de person­na­li­ser le thème via…

Le CSS additionnel

Pour retrou­ver les effets CSS de l’ex­ten­sion précé­dente, il suffit de cher­cher les balises et leurs classe via un inspec­teur de code. Rassurez-vous, je l’ai fait pour vous ! Ce qui donne…

Pour avoir les pages et articles en pleine largeur

/* tout le site */
.entry .entry-content > *,
.entry .entry-summary > * {
    max-width: none;
}
/* uniquement les articles */
body.single-post .entry .entry-content > *,
.entry .entry-summary > * {
    max-width: none;
}
/* uniquement les pages */
body.single-post .entry .entry-content > *,
.entry .entry-summary > * {
    max-width: none;
}
/* pour que les commentaires aussi soient en pleine largeur */
.comments-area {
  max-width: none;
}

/* pour des images en pleine largeur */
.entry .entry-content .wp-block-image .aligncenter {
  max-width: 100%;
  width: 100%;
}

/* si tout est en pleine largeur - inutile d'inclure les lignes précédentes */
.entry .entry-content > *,
.entry .entry-summary > *,
.comments-area {
    max-width: none;
}

Pour ajouter un séparateur entre les éléments du menu

L’idée origi­nale vient du blog MacManX, dans l’ar­ticle Twenty Nineteen Tweaks. Je le remer­cie d’ailleurs de me citer en contri­bu­teur, j’ai effec­ti­ve­ment amélioré son bout de code, mais il en reste l’au­teur initial ! Il n’hé­site pas à citer chaque contri­bu­teur, et honnê­te­ment, je vais désor­mais en faire autant.

Mais reve­nons à nos moutons… En partant du prin­cipe que vous avez nommé votre menu d’en-tête « prin­ci­pal » :

#menu-principal li:not(:last-child):after {
	content: "|"; /* ou tout autre séparateur */
	padding-right: 5px;
	color: currentcolor;
}

Si vous avez donné un autre nom au menu dédié à cet empla­ce­ment, c’est ce nom qu’il faudra donner à l’id : vous rempla­ce­rez #menu-principal par #menu[le nom que vous avez donné à votre menu].

pour masquer le titre et la date

.twentynineteen-customizer .entry .entry-meta > .byline,
.twentynineteen-customizer .entry .entry-footer > .byline,
.entry .entry-meta > .byline,
.entry .entry-footer > .byline,
.site-header.featured-image .site-featured-image .entry-header .entry-meta > .byline {
  display: none
}
.twentynineteen-customizer .entry .entry-meta > .posted-on,
.twentynineteen-customizer .entry .entry-footer > .posted-on,
.entry .entry-meta > .posted-on,
.entry .entry-footer > .posted-on,
.site-header.featured-image .site-featured-image .entry-header .entry-meta > .posted-on {
  display: none
}

Pour réduire la hauteur de l’image d’en-tête

.site-header.featured-image {
   min-height: 70vh; /* une valeur comprise entre 1 et 100 (%) */
 }

Pour supprimer la marge sous l’image à la Une

.site-header.featured-image { margin-bottom: 0 }

Vous pouvez égale­ment défi­nir préci­sé­ment la hauteur de cette marge en saisis­sant la hauteur de votre choix, en px, em ou rem.

Pour supprimer les mentions du pied de page

.site-info > .imprint { display: none }
/* pour rajouter votre propre info AVANT */
.site-info::before { content: 'Votre info ' }
/* pour rajouter votre propre info APRÈS */
.site-info::after { content: ' Votre info' }

/* solution radicale pour ne plus afficher de pied de page*/
#colophon .site-info { display: none }

/* si vous avez activé le défilement infini, rajoutez la ligne suivante */
#infinite-footer .blog-credits { display: none }

Ceci-dit, ces solu­tions sont unique­ment visuelles. Donc le contenu est toujours là, vous le char­gez, et plus impor­tant, il est pris en compte par Google.

Si vous voulez le suppri­mer, il faudra passer par un thème enfant. Je vous en fourni un, prêt à l’usage, pour ne plus avoir ces infor­ma­tions dans la page.

En modifiant le thème

Avant de modi­fier le thème, créez et acti­vez un thème enfant, ou télé­char­gez, puis télé­ver­sez et acti­vez celui que je vous offre.

En utili­sant ce thème enfant, vous n’au­rez pas à effec­tuer la moindre modi­fi­ca­tion pour obte­nir les ajus­te­ments décrits dans cet articles, ils sont tous acces­sibles depuis l’ou­til de person­na­li­sa­tion.

Un conseil : télé­char­gez égale­ment le thème parent, Twenty Nineteen, dans le dépôt WordPress, vous pour­rez vous baser sur la dernière version en date de chaque fichier. Prenez les fichiers dans cette archive et copiez-les à chaque fois dans le thème enfant en respec­tant bien la struc­ture des réper­toires.

Changez les crédits du pied de page

Copiez le fichier footer.php du thème parent (Twenty Nineteen) dans votre thème enfant, et trou­vez les lignes suivantes :

Contenu (partiel) du fichier footer.php
Contenu (partiel) du fichier footer.php

Les lignes à modi­fier sont en jaune. Supprimez les lignes 25 à 29 (voir capture d’écran ci-dessus) ou les rempla­cer par :

<span class="imprint">© <?php echo date('Y'); ?> - Tous droits réservés.</span>

Voilà, c’est fait, c’est propre. Ce sont vos infos, et que votre site soit (fière­ment) propulsé par WordPress n’a pas grande impor­tance pour votre visi­teur.

En utilisant le thème enfant i2019

Pourquoi i2019 ? Tout simple­ment parce que c’est une version « amélio­rée » de Twenty Nineteen, i(mpro­ved)2019. J’ai rassem­blé quelques unes des amélio­ra­tions que je vous ai propo­sées dans cet article, vous pouvez via l’ou­til de person­na­li­sa­tion de WordPress les acti­ver ou pas.

Et j’ai rajouté quelques fonc­tion­na­li­tés, comme :

  • la possi­bi­lité d’af­fi­cher sur les articles le nombre de mots et le temps de lecture
  • l’ac­ti­va­tion du défi­le­ment infini (Jetpack doit être installé et activé, et le défi­le­ment infini auto­risé via Jetpack > Réglages > Rédaction > Charger les articles suivants grâce à un bouton)
  • un bouton de retour en haut de la page
  • Le réglage des couleurs du texte et de l’ar­rière plan

Le thème est mis à jour auto­ma­ti­que­ment, depuis l’ad­mi­nis­tra­tion de votre site (Tableau de bord > Mises à jour) depuis la version 1.0.4 qui vous propose l’ins­tal­la­tion de l’ex­ten­sion Github Updater.

Ça m’a presque donné envie de créer un nouveau blog ? Si, si, j’ai osé ! Pour le moment, un site tout simple, avec une section blog, habillé avec i2019 bien sûr, avec une page d’ac­cueil (qui permet de télé­char­ger le thème), une page d’ar­chive, une page de contact et deux articles… pour commen­cer. J’y adjoin­drais volon­tiers un forum, une version plus complète encore du thème (une sorte de version Pro) un support premium (payant) éven­tuel­le­ment, et pour­quoi pas, des bonus. Mais pour tout ça, il va me falloir encore un peu de temps. Pour le moment, c’est amélio­ra­tions et promo­tion.

En aparté, j’ai utilisé Elementor pour créer la page d’ac­cueil de ce site. Autant dire que l’in­té­gra­tion est réus­sie, et que vous avez donc le choix entre Gutenberg et Elementor pour créer vos pages.

Les captures d’écran ci-dessous vous donnent un aperçu des capa­ci­tés de ce thème enfant : il n’y a rien d’ex­tra­or­di­naire, juste l’es­sen­tiel. Si je trouve d’autres person­na­li­sa­tions inté­res­santes pour Twenty Nineteen, je les intè­gre­rai, évidem­ment. Et si vous en avez à propo­ser… les commen­taires sont aussi là pour ça, n’hé­si­tez pas !

Et pour finir ce tour d’ho­ri­zon des person­na­li­sa­tions de Twenty Nineteen, je découvre qu’il y a main­te­nant…

Des thèmes enfants pour les entreprises sur wordpress.com

Vous trou­ve­rez égale­ment six thèmes enfants pour les entre­prises sur wordpress.com qui illus­trent bien la capa­cité de person­na­li­sa­tion de Twenty Nineteen : Calm Business, Elegant Business, Friendly Business, Modern Business, Professional Business, et Sophisticated Business.

Et vous, avez-vous essayé Twenty Nineteen ? L’avez-vous adopté ? Et êtes-vous intéressé.e par un mini site sur i2019 ?

Sources : How to Make Twenty Nineteen’s Content Full-Width, Twenty Nineteen tweak, Disable Featured Images in Twenty Nineteen Theme without CSS, Options for Twenty Seventeen, et quelques autres que j’ai perdues en cours de route…

9 réflexions sur “Personnaliser Twenty Nineteen”

  1. Bonjour et merci de cet article très inté­res­sant.
    Je suis faible­ment expé­ri­menté (un peu tout de même)… et je teste Twentynineteen avant de l’ap­pli­quer et de mettre en ligne… j’ex­pé­ri­mente sur un site test que j’ai créé. J’utilise votre thème enfant, très pratique, encore merci.
    Je bute sur un problème avec Twentynineteen : lorsque je mets une image dans le header (« image mise en avant ») j’ai plusieurs problèmes :
    – je ne peux pas modi­fier la taille de la zone réser­vée à l’image (si je mets une image plus petite, elle est agran­die pour occu­per tout le header)
    – mon logo dispa­raît (l’image du header passe devant)
    – j’ai mis un widget dans le header, si je mets une image dans le header, le widget dispa­raît (l’image passe devant).

    Avez-vous une idée pour ces problèmes ? (je pense que les points 2 et 3 sont du même ordre)
    Merci d’avance !

    1. Bonsoir Jj – concer­nant les points 2 et 3, il s’agit effec­ti­ve­ment d’un seul et même problème : il vous suffit de rajou­ter une id CSS à l’élé­ment (logo, module) et de lui appli­quer un z-index impor­tant, z-index: 99999 par exemple. Pour le point 1, je ne comprends pas vrai­ment ce que vous souhai­tez obte­nir comme résul­tat…

  2. Philippe Robitaille

    J’ai un site word­press avec ce thème, mais j’ai un problème au niveau du mobile. Commençant par Ipad, mon menu n’apparaît pas au complet, et le thème génère un icon bleu avec trois points dedans, comme si il coupait mon menu… Quoi faire ?
    Merci – Phil

    1. Bonjour Philippe, effec­ti­ve­ment Twenty Nineteen « coupe » les menus longs. Il semble que la solu­tion soit d’ajou­ter ce bout de code dans le fichier functions.php d’un thème enfant ou via Code Snippets :

      function dequeue_priority_menu() {
         wp_dequeue_script( 'twentynineteen-priority-menu' );
      }
      add_action( 'wp_enqueue_scripts', 'dequeue_priority_menu', 100 );
  3. Salut,
    D’abord, merci pour cette contrib, n’ayant pas le temps de refaire mon thème full BS au goût du jour, j’me suis dit qu’es­sayer ce thème avec Gutenberg me permet­trait en mème temps de mieux appré­hen­der cet éditeur.
    Ce qui me chif­fonne le plus, c’est que dépouillé tel qui l’est, il ne passe même pas la vali­da­tion HTML haut la main, c’est tout de même surpre­nant a l’heure ou tout le monde cherche de l’op­ti­mi­sa­tion SEO.
    Alors oui, j’ai lu ci et la que tout cela n’est qu’une masca­rade qui va évoluer dans le bon sens, mais j’ai peine a croire que la créa­tion de thème va être aussi aisée qu’a­vec WP 4.x, suffit de voir les sources de TwentyNineteen pour en être presque convaincu. Je n’ai pas essayé de voir comment on pouvait adap­ter la sortie HTML d’un bloc sous Gutenberg, mais ça s’an­nonce « thats Folk ».
    Enfin bref, c’est regret­table que WP ne soit pas resté sur la simpli­cité d’antan, vala !

    1. Bonjour Fred, la vali­da­tion HTML n’a rien à voir avec la SEO. On ne peut pas, malheu­reu­se­ment, ou à moins de déve­lop­per une usine à gaz, être compa­tible avec tous les navi­ga­teurs même modernes et passer haut la main la vali­da­tion du W3C. Je suis rentré dans le code de Twenty Nineteen, pour les besoins de mon thème enfant… c’est bien codé, c’est propre et compré­hen­sible au premier regard.

      C’est dépouillé certes, mais c’est exten­sible et c’est le but recher­ché. Dépouillé ne veut pas dire mal codé, ni codé au rabais en termes de fonc­tion­na­li­tés. C’est un choix, de même que l’orien­ta­tion « géné­ra­liste » de Twenty Seventeen en était un. Et entre nous, je n’ai jamais réussi à habiller un de mes sites avec Twenty Seventeen, alors que j’en vien­drais presque à passer jusqu’à ce blog sous Twenty Nineteen.

      Pour la sortie d’un bloc Gutenberg en HTML, vous n’avez rien à faire de parti­cu­lier si vous n’êtes qu’u­ti­li­sa­teur. C’est un coup de main à prendre, utilisez-le au quoti­dien, éven­tuel­le­ment sur une instal­la­tion locale de WordPress, vous verrez vite les avan­tages par rapport à l’an­cien éditeur. L’équipe WordPress nous a forcé la main, c’est vrai et ce n’est pas fran­che­ment fair-play, mais bon…

      Les déve­lop­peurs devront, pour leur part, avoir une bonne connais­sance de React, de PHP, du HTML… en fait de toutes les ressources néces­saires au bloc depuis son inté­gra­tion dans Gutenberg jusqu’à sa sortie. Mais il y a déjà un frame­work faci­li­tant énor­mé­ment ce travail.

      Là où j’ai du mal à vous suivre, c’est quand vous parlez de masca­rade, je ne vois pas bien à propos de quoi : de Gutenberg, de Twenty Nineteen, de WordPress 5 ?

      1. Salut et bon WE, plutôt, fin de WE !
        Le truc, c’est que je vendais du WP égale­ment, et que malgré les diffi­cul­tés finan­cières qui m’obligent à fermer la porte de mon EURL, je garde mes clients les plus fidèles. Je me dois donc de rester en veille tech­nique, même si le dev, en grande partie, reste et restera derrière moi, du moins profes­sion­nel­le­ment, car je reste pas moins passionné 🙂 !

        L’optimisation de la séman­tique d’une page web fait partie de l’op­ti­mi­sa­tion SEO, même si elle n’ap­porte pas grand chose, elle en fait partie au même titre que les URLs propres. Une balise dans une me choque a la même hauteur de « cate­gory » dans une URL. La dessus, je peux comprendre que la grande majo­rité des utili­sa­teurs s’en fiche néan­moins, quand on cherche a grap­piller quelques places dans les résul­tats, ce n’est pas négli­geable. Pour un thème visuel­le­ment aussi simple, cela me déçois.

        Le mot « masca­rade » est proba­ble­ment mal choisi, je voulais dire par là, que j’ai lu plusieurs fois que Gutenberg et ce thème avait été sorti un peu a la hâte et que beau­coup d’entre nous attendent une stabi­li­sa­tion du projet pour pouvoir bosser dessus de manière sereine et perenne. En gros, appré­hen­der tout ce système pour qu’il en changent les fonda­men­taux initiaux pour WP 5.2 ou 3, c’est du temps de perdu pour l’en­semble de la commu­nauté. J’ai même lu que le respon­sable « acces­si­bi­lité » avait jeté l’éponge pour les raisons évoquées.

        Ceci dit, je n’ai pas eu le temps d’al­ler dans le cambouis encore, et j’espère que vous avez raison, peut être que de bonnes surprises m’at­tendent et me feront chan­ger d’avis et de stra­té­gie d’ap­proche ! Pour le moment, quand je vois le nombre de dossiers et de fichiers pour sortir un thème aussi simpliste ne me motive guère a faire mon thème comme je le fais pour moi et mes client depuis… Longtemps en fait 🙂

        1. Pour répondre à tes propos concer­nant Gutenberg, le projet a main­te­nant de la bouteille, il n’est pas arrivé comme un cheveu sur la soupe à la sortie de WordPress 5. Il était testable depuis plus d’un an, avec un déve­lop­pe­ment très actif, des amélio­ra­tions et des correc­tions fréquentes. Et si on a tant tardé à avoir WordPress 5 dans les bacs, c’est juste­ment que le projet Gutenberg n’était pas mâture.

          Mais accep­ter le chan­ge­ment n’est pas le point fort du fran­çais, ni de l’uti­li­sa­teur de WordPress a priori…

          Quant à Twenty Nineteen, il est visuel­le­ment dépouillé, de là à dire qu’il a été déve­loppé à la hâte, il y a un pas (de géant) que je ne fran­chi­rais pas. Et son aspect mini­ma­liste concerne l’ap­pa­rence, pas ce qu’il a sous le capot : le fait qu’une Porsche survi­ta­mi­née, prépa­rée par un atelier spécia­lisé, ne soit pas équi­pée de lève-vitres moto­ri­sés n’est pas signe d’une prépa­ra­tion manquée ou faite à la va-vite, c’est un choix assumé qui a demandé un travail supplé­men­taire dont le proprié­taire ne se plain­dra certai­ne­ment pas. Mais lui, à la diffé­rence des utili­sa­teurs de WordPress, a déboursé une petite fortune et sait ce qu’il veut et pour­quoi il le veut.

          En aparté, as-tu vu le thème enfant que je propose pour Twenty Nineteen ? Personnellement, à mettre les mains dans le code, j’ai trouvé le thème inté­res­sant, et somme toute assez simple à person­na­li­ser. Je fina­lise actuel­le­ment l’ajout des polices Google et l’uti­li­sa­tion de couleurs person­na­li­sées (en incluant la person­na­li­sa­tion des varia­tions implé­men­tée dans le thème), tout est à sa place et ne demande pas une recherche déses­pé­rante dans un fouillis de code.

          Pour finir, je serais très surpris que WordPress / Automattic change son fusil d’épaule et opère un virage à 180° à la sortie de la version 5.2 ou 5.3, il ne s’agi­rait plus d’une version mineure mais d’une majeure justi­fiant même le saut d’un chiffre : v7, voire vX avec un chan­ge­ment dans le mode de numé­ro­ta­tion. Je me méfie de ce que je lis, tant que ce n’est pas une infor­ma­tion déli­vrée par une source sûre (en l’oc­cur­rence le prin­ci­pal inté­ressé ou son équipe).

Laisser un commentaire

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

Abonnez-vous à la
newsletter

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

Merci !

Quelque chose c'est mal passé…

Retour haut de page

Rapport de faute d’orthographe

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