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.

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 :

Personnaliser Twenty Nineteen
Options for Twenty Nineteen
  • 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 :

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

Si vous avez trouvé une faute d’orthographe, veuillez nous en infor­mer en sélec­tion­nant le texte en ques­tion et en appuyant sur Ctrl + Entrée .

S’abonner
Notifier de
guest
9 Commentaires
Inline Feedbacks
View all comments
Jj Cariou
Jj Cariou
27 juin 2019 17 h 27 min

Bonjour et merci de cet article très intéressant.
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 !

Philippe Robitaille
Philippe Robitaille
10 juin 2019 15 h 10 min

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

Philippe Robitaille
Philippe Robitaille
Reply to  Pascal CESCATO
10 juin 2019 17 h 42 min

Un gros merci Pascal, ça fonctionne !
Bonne jour­née, Phil

Fred
Fred
22 mars 2019 19 h 14 min

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 !

Fred
Fred
Reply to  Pascal CESCATO
24 mars 2019 15 h 16 min

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 🙂

Abonnez-vous à la
newsletter

Pour être informé à chaque fois qu'un nouvel article est publié.

Merci !

Quelque chose s'est mal passé…

Retour haut de page

Rapport de faute d’orthographe

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

Les cookies que nous utilisons sont indispensables au bon fonctionnement de ce site. Il n'y a aucun pistage publicitaire et les données statistiques recueillies sont anonymisées.
J'ai compris
Privacy Policy