La prochaine version majeure de WordPress sera la version 5.3. Elle est prévue le 12 novembre 2019.
D’ici là, nous attirons votre attention sur le fait que WordPress 5.3 apportera un petit changement sur la structure HTML du thème natif Twenty Nineteen.
Si vous avez surchargé le CSS du thème Twenty Nineteen via l’outil de personnalisation (en anglais, Customizer) ou via un thème enfant, nous vous invitons à lire cet article et à vérifier que ce changement ne vous concerne pas, ou à faire les (petites) modifications CSS qui s’imposent si besoin. En effet, la mise à jour WordPress 5.3 pourrait alors occasionner des bugs d’affichage.
Nous commencerons par une description du problème avant d’expliquer comment vérifier si cela vous concerne et faire les modifications nécessaires le cas échéant.
Description détaillée du changement qui arrive avec WP 5.3
Dans certains modèles de pages, le thème Twenty Nineteen utilisait jusqu’à présent l’élément HTML <main> en tant que descendant direct de l’élément HTML <section>. Cela donnait alors des erreurs de balisage dans les modèles de page suivants :
- 404.php
- archive.php
- image.php
- index.php
- page.php
- search.php
- single.php
Pour information, voici les spécifications HTML (en anglais)
A hierarchically correct main element is one whose ancestor elements are limited to html, body, div, form without an accessible name, and autonomous custom elements.
Source: HTML Living Standard
Pour résumer, l’élément HTML <main> ne doit pas avoir pour parent direct un élément autre que <html>, <body>, <div>, <form> ou qu’un élément personnalisé spécifique.
Avec WordPress 5.3, le balisage actuel de Twenty Nineteen va être corrigé en utilisant un élément neutre <div> à la place de l’élément <section>.
Ancien rendu HTML :
<section id="primary" class="content-area">
<main id="main" class="site-main">
…
</main>
</section>Nouveau rendu HTML :
<div id="primary" class="content-area">
<main id="main" class="site-main">
…
</main>
</div>Comment vérifier votre thème et le corriger si nécessaire
Note importante : Si vous utilisez Twenty Nineteen directement sans avoir de thème enfant ou si vous n’utilisez pas du tout le thème Twenty Nineteen (avec ou sans thème enfant), alors ce qui suit ne vous concerne pas et vous n’avez rien à faire de spécial.
Les utilisateurs du thème Twenty Nineteen ou d’un thème enfant de Twenty Nineteen sont invités à vérifier que la feuille de styles CSS de leur thème enfant ou que le code CSS éventuellement présent dans leur outil de personnalisation (en anglais customizer) n’utilisent pas des sélecteurs de balises tels que :
section#primary(tout attaché)section.content-area(tout attaché)section .site-main(avec un espace avant le point)section #main(avec un espace avant le dièse)
Vous pouvez chercher cela dans la feuille de style générale de votre thème enfant de Twenty Nineteen ou dans votre outil de personnalisation (Apparence > Personnaliser). Si c’est le cas, nous vous préconisons de remplacer ces sélecteurs par, respectivement :
#primary.content-area.site-main#main
Pour plus d’informations, voici le ticket Trac du Cœur WordPress correspondant à ce correctif ainsi que la version originale de cet article, en anglais :
En cas de doute, n’hésitez pas à publier un commentaire sous cet article (il sera mis en attente de validation par l’un des responsables de ce site, donc patientez quelques heures…) ou à utiliser le forum d’entraide de WPFR ou encore le Slack WordPress-FR (demander une invitation gratuite ici).
Laisser un commentaire
Vous devez vous connecter pour publier un commentaire.