Personnaliser Twenty Nineteen

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…

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

Twen­ty Sev­en­teen a fait un tabac, en deux ans d’existence. Deux (très) longues années où Word­Press n’a pas voulu nous offrir un nou­veau thème par défaut, atten­dant de sor­tir en ver­sion 5 pour nous pro­pos­er Twen­ty Nine­teen, à quelques semaines à peine de l’an­née… 2019.

Et en à peine trois mois, le petit dernier de la famille Twen­ty rat­trape son prédécesseur en ter­mes d’in­stal­la­tions actives : le mil­lion est dépassé, met­tant fin à deux ans de règne sans partage…

Dans La Bible de Twen­ty Sev­en­teen, je vous ai présen­té des codes, des exten­sions, de thèmes enfants pour per­son­nalis­er ce thème.

Actuelle­ment l’of­fre est bien moin­dre pour Twen­ty Nine­teen (une exten­sion, un thème enfant dans le dépôt Word­Press et six pro­posés sur wordpress.com) mais je vous ai quand même trou­vé quelques pistes pour le per­son­nalis­er.

Et je vous ai pré­paré un thème enfant, à télécharg­er en fin d’ar­ti­cle.

Tout d’abord, pour ceux qui ne veu­lent pas touch­er au code, il y a…

Les extensions

Bon, d’ac­cord, l’ex­ten­sion. Enfin, pour le moment (j’e­spère que d’autres suiv­ront). C’est Options for Twen­ty Nine­teen.

Options for Twen­ty Nine­teen

Auteur(s) : Oliv­er Cam­pi­on

Ver­sion actuelle : 1.5.1

Dernière mise à jour : 9 avril 2025

options-for-twenty-nineteen.1.5.1.zip

100%Éval­u­a­tions 900+Instal­la­tions WP 4.6+Néces­saire

Tout est dans le titre. L’au­teur, qui nous a déjà grat­i­fié d’une exten­sion dédiée à Twen­ty Sev­en­teen (Options for Twen­ty Sev­en­teen), enri­chit son exten­sion au fil du temps.

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

• adapter l’opac­ité sur l’im­age à la Une — ça, c’est intéres­sant
• autoris­er un dimen­sion­nement per­son­nal­isé du logo
• mod­i­fi­er la largeur d’af­fichage du logo
• sup­primer la couleur d’ar­rière plan du logo, et le masque arron­di tout autour
• affin­er le con­trôle de la sat­u­ra­tion et de la bril­lance de la couleur de base — tout aus­si intéres­sant, et amu­sant, pour ne rien vous cacher
• cacher les tirets du thème — per­son­nelle­ment j’aime bien ces petits tirets
• affich­er l’im­age à la Une sur les arti­cles ( c’est déjà le cas, non?)
• affich­er la descrip­tion des caté­gories et des éti­quettes dans les pages d’archives
• affich­er le con­tenu com­plet des arti­cles dans les archives — con­tre pro­duc­tif en ter­mes de SEO, mais qui sait ? Cer­tains en ont peut-être besoin…
• cacher la date de pub­li­ca­tion via les CSS — effet pure­ment visuel, Google voit tout 😉
• choisir le posi­tion­nement des métas de l’ar­ti­cle
• cacher l’au­teur de la pub­li­ca­tion, tou­jours via les CSS — la remar­que précé­dente s’ap­plique ici aus­si. Mais c’est vrai que je n’ai pas besoin de voir mon nom affiché partout, je le con­nais déjà bien, il n’y a pas de risque que je l’ou­blie (enfin, à court et moyen terme)
• activ­er le défile­ment infi­ni de Jet­pack (mais il faut activ­er Jet­pack, et à nou­veau, ce n’est pas for­cé­ment extra­or­di­naire en ter­mes de SEO, sans non plus être réd­hibitoire — et cette option est payante)
• sup­primer la men­tion “Fière­ment propul­sé par Word­Press” du pied de page (sans la rem­plac­er)

Intéres­sante donc, sans être franche­ment indis­pens­able, on peut très bien se pass­er des effets CSS de l’ex­ten­sion en les ajoutant manuelle­ment via le CSS addi­tion­nel de l’outil de per­son­nal­i­sa­tion de Word­Press.

Espérons que BoldThemes nous sor­ti­ra une exten­sion plus aboutie d’i­ci quelques mois (je n’ose pas dire semaines, pour­tant ce serait un must !)

Pour ceux qui ne veu­lent pas s’en­com­br­er d’une exten­sion, il y a pos­si­bil­ité de per­son­nalis­er le thème via…

Le CSS additionnel

Pour retrou­ver les effets CSS de l’ex­ten­sion précé­dente, il suf­fit de chercher les balis­es et leurs classe via un inspecteur de code. Ras­surez-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 orig­i­nale vient du blog Mac­ManX, dans l’ar­ti­cle Twen­ty Nine­teen Tweaks. Je le remer­cie d’ailleurs de me citer en con­tribu­teur, j’ai effec­tive­ment amélioré son bout de code, mais il en reste l’au­teur ini­tial ! Il n’hésite pas à citer chaque con­tribu­teur, et hon­nête­ment, je vais désor­mais en faire autant.

Mais revenons à nos mou­tons… En par­tant du principe que vous avez nom­mé 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 don­né un autre nom au menu dédié à cet emplace­ment, c’est ce nom qu’il fau­dra don­ner à l’id : vous rem­plac­erez #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 pou­vez égale­ment définir pré­cisé­ment la hau­teur de cette marge en sai­sis­sant la hau­teur 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 con­tenu est tou­jours là, vous le chargez, et plus impor­tant, il est pris en compte par Google.

Si vous voulez le sup­primer, il fau­dra pass­er 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 mod­i­fi­er le thème, créez et activez un thème enfant, ou téléchargez, puis télé­versez et activez celui que je vous offre.

En util­isant ce thème enfant, vous n’au­rez pas à effectuer la moin­dre mod­i­fi­ca­tion pour obtenir les ajuste­ments décrits dans cet arti­cles, ils sont tous acces­si­bles depuis l’outil de per­son­nal­i­sa­tion.

Un con­seil : téléchargez égale­ment le thème par­ent, Twen­ty Nine­teen, dans le dépôt Word­Press, vous pour­rez vous baser sur la dernière ver­sion en date de chaque fichi­er. 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 fichi­er footer.php du thème par­ent (Twen­ty Nine­teen) dans votre thème enfant, et trou­vez les lignes suiv­antes :

Les lignes à mod­i­fi­er sont en jaune. Sup­primez les lignes 25 à 29 (voir cap­ture d’écran ci-dessus) ou les rem­plac­er par :

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

Voilà, c’est fait, c’est pro­pre. Ce sont vos infos, et que votre site soit (fière­ment) propul­sé par Word­Press n’a pas grande impor­tance pour votre vis­i­teur.

En utilisant le thème enfant i2019

Pourquoi i2019 ? Tout sim­ple­ment parce que c’est une ver­sion “améliorée” de Twen­ty Nine­teen, i(mproved)2019. J’ai rassem­blé quelques unes des amélio­ra­tions que je vous ai pro­posées dans cet arti­cle, vous pou­vez via l’outil de per­son­nal­i­sa­tion de Word­Press les activ­er ou pas.

Et j’ai rajouté quelques fonc­tion­nal­ités, comme :

• la pos­si­bil­ité d’af­fich­er sur les arti­cles le nom­bre de mots et le temps de lec­ture
• l’ac­ti­va­tion du défile­ment infi­ni (Jet­pack doit être instal­lé et activé, et le défile­ment infi­ni autorisé via Jet­pack > Réglages > Rédac­tion > Charg­er les arti­cles suiv­ants grâce à un bou­ton)
• un bou­ton 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 automa­tique­ment, depuis l’ad­min­is­tra­tion de votre site (Tableau de bord > Mis­es à jour) depuis la ver­sion 1.0.4 qui vous pro­pose l’in­stal­la­tion de l’ex­ten­sion Github Updater.

Ça m’a presque don­né envie de créer un nou­veau blog ? Si, si, j’ai osé ! Pour le moment, un site tout sim­ple, avec une sec­tion blog, habil­lé avec i2019 bien sûr, avec une page d’ac­cueil (qui per­met de télécharg­er le thème), une page d’archive, une page de con­tact et deux arti­cles… pour com­mencer. J’y adjoindrais volon­tiers un forum, une ver­sion plus com­plète encore du thème (une sorte de ver­sion Pro) un sup­port pre­mi­um (payant) éventuelle­ment, et pourquoi pas, des bonus. Mais pour tout ça, il va me fal­loir encore un peu de temps. Pour le moment, c’est amélio­ra­tions et pro­mo­tion.

En aparté, j’ai util­isé Ele­men­tor pour créer la page d’ac­cueil de ce site. Autant dire que l’in­té­gra­tion est réussie, et que vous avez donc le choix entre Guten­berg et Ele­men­tor pour créer vos pages.

Les cap­tures d’écran ci-dessous vous don­nent un aperçu des capac­ités de ce thème enfant : il n’y a rien d’ex­tra­or­di­naire, juste l’essen­tiel. Si je trou­ve d’autres per­son­nal­i­sa­tions intéres­santes pour Twen­ty Nine­teen, je les intè­gr­erai, évidem­ment. Et si vous en avez à pro­pos­er… les com­men­taires sont aus­si là pour ça, n’hésitez pas !

Et pour finir ce tour d’hori­zon des per­son­nal­i­sa­tions de Twen­ty Nine­teen, je décou­vre qu’il y a main­tenant…

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

Vous trou­verez égale­ment six thèmes enfants pour les entre­pris­es sur wordpress.com qui illus­trent bien la capac­ité de per­son­nal­i­sa­tion de Twen­ty Nine­teen : Calm Busi­ness, Ele­gant Busi­ness, Friend­ly Busi­ness, Mod­ern Busi­ness, Pro­fes­sion­al Busi­ness, et Sophis­ti­cat­ed Busi­ness.

Et vous, avez-vous essayé Twen­ty Nine­teen ? L’avez-vous adop­té ? Et êtes-vous intéressé.e par un mini site sur i2019 ?

Sources : How to Make Twen­ty Nineteen’s Con­tent Full-Width, Twen­ty Nine­teen tweak, Dis­able Fea­tured Images in Twen­ty Nine­teen Theme with­out CSS, Options for Twen­ty Sev­en­teen, et quelques autres que j’ai per­dues en cours de route…