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.

Twenty Seventeen a fait un tabac, en deux ans d’existence. Deux (très) longues années où WordPress n’a pas vou­lu nous offrir un nou­veau thème par défaut, atten­dant de sor­tir en ver­sion 5 pour nous pro­po­ser Twenty Nineteen, à quelques semaines à peine de l’an­née… 2019.

Et en à peine trois mois, le petit der­nier de la famille Twenty rat­trape son pré­dé­ces­seur en termes d’ins­tal­la­tions actives : le mil­lion est dépas­sé, met­tant fin à deux ans de règne sans partage…

Dans La Bible de Twenty Seventeen, je vous ai pré­sen­té des codes, des exten­sions, de thèmes enfants pour per­son­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 pro­po­sés sur wordpress.com) mais je vous ai quand même trou­vé quelques pistes pour le personnaliser.

Et je vous ai pré­pa­ré un thème enfant, à télé­char­ger en fin d’article.

Tout d’a­bord, pour ceux qui ne veulent pas tou­cher 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 sui­vront). C’est Options for Twenty Nineteen.

Options for Twenty Nineteen

Auteur(s) : Webd Ltd

Version actuelle : 1.5

Dernière mise à jour : 4 juillet 2024

options-for-twenty-nineteen.1.5.zip

100%Évaluations 1 000+Installations WP 4.6+Nécessaire

Tout est dans le titre. L’auteur, qui nous a déjà gra­ti­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 sor­tie du thème, on est pas­sé à une quin­zaine à ce jour (fin février 2019). À vous de faire votre mar­ché. Vous pourrez :

• adap­ter l’o­pa­ci­té sur l’i­mage à la Une — ça, c’est intéressant
• auto­ri­ser un dimen­sion­ne­ment per­son­na­li­sé du logo
• modi­fier la lar­geur d’af­fi­chage du logo
• sup­pri­mer la cou­leur d’ar­rière plan du logo, et le masque arron­di tout autour
• affi­ner le contrôle de la satu­ra­tion et de la brillance de la cou­leur de base — tout aus­si inté­res­sant, et amu­sant, pour ne rien vous cacher
• cacher les tirets du thème — per­son­nel­le­ment j’aime bien ces petits tirets
• affi­cher l’i­mage à la Une sur les articles ( c’est déjà le cas, non?)
• affi­cher la des­crip­tion des caté­go­ries et des éti­quettes dans les pages d’archives
• affi­cher le conte­nu com­plet des articles dans les archives — contre pro­duc­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’article
• cacher l’au­teur de la publi­ca­tion, tou­jours via les CSS — la remarque pré­cé­dente s’ap­plique ici aus­si. Mais c’est vrai que je n’ai pas besoin de voir mon nom affi­ché par­tout, 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 infi­ni de Jetpack (mais il faut acti­ver Jetpack, et à nou­veau, ce n’est pas for­cé­ment extra­or­di­naire en termes de SEO, sans non plus être rédhi­bi­toire — et cette option est payante)
• sup­pri­mer la men­tion « Fièrement pro­pul­sé par WordPress » du pied de page (sans la remplacer)

Intéressante donc, sans être fran­che­ment indis­pen­sable, on peut très bien se pas­ser 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 per­son­na­li­sa­tion de WordPress.

Espérons que BoldThemes nous sor­ti­ra une exten­sion plus abou­tie d’i­ci 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 pos­si­bi­li­té de per­son­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 suf­fit de cher­cher les balises et leurs classe via un ins­pec­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 ori­gi­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é­lio­ré son bout de code, mais il en reste l’au­teur ini­tial ! Il n’hé­site pas à citer chaque contri­bu­teur, et hon­nê­te­ment, je vais désor­mais en faire autant.

Mais reve­nons à nos mou­tons… En par­tant du prin­cipe que vous avez nom­mé votre menu d’en-tête « principal » :

#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 empla­ce­ment, c’est ce nom qu’il fau­dra don­ner à l’id : vous rem­pla­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 pou­vez éga­le­ment défi­nir pré­ci­sé­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 uni­que­ment visuelles. Donc le conte­nu est tou­jours là, vous le char­gez, et plus impor­tant, il est pris en compte par Google.

Si vous vou­lez le sup­pri­mer, il fau­dra pas­ser par un thème enfant. Je vous en four­ni un, prêt à l’u­sage, 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 uti­li­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 personnalisation.

Un conseil : télé­char­gez éga­le­ment le thème parent, Twenty Nineteen, dans le dépôt WordPress, vous pour­rez vous baser sur la der­nière ver­sion en date de chaque fichier. Prenez les fichiers dans cette archive et copiez-les à chaque fois dans le thème enfant en res­pec­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 :

Les lignes à modi­fier sont en jaune. Supprimez les lignes 25 à 29 (voir cap­ture d’é­cran ci-des­sus) ou les rem­pla­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) pro­pul­sé par WordPress n’a pas grande impor­tance pour votre visiteur.

En utilisant le thème enfant i2019

Pourquoi i2019 ? Tout sim­ple­ment parce que c’est une ver­sion « amé­lio­rée » de Twenty Nineteen, i(mpro­ved)2019. J’ai ras­sem­blé quelques unes des amé­lio­ra­tions que je vous ai pro­po­sées dans cet article, vous pou­vez via l’ou­til de per­son­na­li­sa­tion de WordPress les acti­ver ou pas.

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

• la pos­si­bi­li­té 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 infi­ni (Jetpack doit être ins­tal­lé et acti­vé, et le défi­le­ment infi­ni auto­ri­sé via Jetpack > Réglages > Rédaction > Charger les articles sui­vants grâce à un bou­ton)
• un bou­ton de retour en haut de la page
• Le réglage des cou­leurs 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 ver­sion 1.0.4 qui vous pro­pose l’ins­tal­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 simple, avec une sec­tion blog, habillé avec i2019 bien sûr, avec une page d’ac­cueil (qui per­met de télé­char­ger le thème), une page d’ar­chive, une page de contact et deux articles… pour com­men­cer. J’y adjoin­drais 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­mium (payant) éven­tuel­le­ment, et pour­quoi 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 promotion.

En apar­té, j’ai uti­li­sé 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 cap­tures d’é­cran ci-des­sous 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 per­son­na­li­sa­tions inté­res­santes pour Twenty Nineteen, je les intè­gre­rai, évi­dem­ment. Et si vous en avez à pro­po­ser… les com­men­taires sont aus­si là pour ça, n’hé­si­tez pas !

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

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

Vous trou­ve­rez éga­le­ment six thèmes enfants pour les entre­prises sur wordpress.com qui illus­trent bien la capa­ci­té de per­son­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 adop­té ? 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 per­dues en cours de route…