Cet article prend 6 minutes à lire et comporte 1307 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 la nouvelle année.

Et en à peine deux mois, le petit dernier de la famille Twenty rattrape son prédé­ces­seur en termes d’installations actives : déjà 800 000, contre plus d’un million pour le précé­dent, mais en 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, 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’article.

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

Les extensions

Bon, d’accord, l’extension. Enfin, pour le moment (j’espère que d’autres suivront). C’est Options for Twenty Nineteen.

Options for Twenty Nineteen

Options for Twenty Nineteen

Adds various options to modify the default WordPress theme Twenty Nineteen.

webd.uk

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 dizaine à ce jour (février 2019). À vous de faire votre marché. Vous pour­rez :

Options for Twenty Nineteen
  • adap­ter l’opacité sur l’image à la Une – ça, c’est inté­res­sant
  • Affiner 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
  • Afficher l’image à la Une sur les articles ( c’est déjà le cas, non?)
  • Afficher la descrip­tion des caté­go­ries et des étiquettes dans les pages d’archive
  • Afficher 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 😉
  • Cacher l’auteur de la publi­ca­tion, toujours via les CSS – la remarque précé­dente s’applique 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’oublie (enfin, à court et moyen terme)
  • Activer 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)
  • Supprimer 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’extension en les ajou­tant manuel­le­ment via le CSS addi­tion­nel de l’outil 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’encombrer 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’extension 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;
}

/* si tout est en pleine largeur */
.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’article 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’auteur 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.

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’outil de person­na­li­sa­tion de WordPress les acti­ver ou pas.

i2019
i2019

Si vous vous abon­nez à la lettre d’information ci‐dessous, vous serez informé des modi­fi­ca­tions appor­tées au thème (et c’est tout).

Ça m’a presque donné envie de créer un nouveau blog 🙄 Si, si ! Un mini blog dédié à ce thème enfant, avec un forum, une version plus complète encore du thème (une sorte de version Pro) et pour­quoi pas, des bonus.

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’extraordinaire, juste l’essentiel. Si je trouve d’autres person­na­li­sa­tions pour Twenty Nineteen, je les intè­gre­rai, éven­tuel­le­ment.

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…

Si vous avez trouvé une faute d’orthographe, veuillez sélec­tion­ner le texte en ques­tion et appuyer sur Ctrl + Entrée.

Laisser un commentaire

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