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 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 personnaliser.

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

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.

Options for Twenty Nineteen

Auteur(s) : Webd Ltd

Version actuelle : 1.5.1

Dernière mise à jour : 2 novembre 2024

options-for-twenty-nineteen.1.5.1.zip

100%Évaluations 900+Installations WP 4.6+Nécessaire

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 pourrez :

• adap­ter l’opa­cité sur l’image à la Une – ça, c’est intéressant
• 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’archives
• 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’article
• 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 remplacer)

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 « principal » :

#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 personnalisation.

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 :

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 visiteur.

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 promotion.

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 maintenant…

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…