Merge branch 'develop' of https://github.com/cnumr/best-practices-wordpress

hrenaud (NovaGaïa) · hrenaud (NovaGaïa) · commit d156b8d42fe6 · 2022-11-05T09:16:31.000+01:00
diff --git a/.github/workflows/checkFrontmatter.yml b/.github/workflows/checkFrontmatter.yml
@@ -2,11 +2,13 @@ name: Frontmatter JSON Schema Validator
 # https://minompi.medium.com/how-to-test-github-actions-locally-5a6dad8da367
 # https://github.com/marketplace/actions/frontmatter-json-schema-validator
 on:
-  push:
+  # push:
+  #   branches:
+  #     - develop
+  pull_request:
+    types: [opened, reopened, synchronize]
     branches:
       - develop
-  #pull_request:
-  #types: [opened, reopened, synchronize]
 
 jobs:
   lexique-frontmatter-json-schema-validator:
diff --git a/fiches/WP_3.05-limiter-le-nombre-d_extensions.md b/fiches/WP_3.05-limiter-le-nombre-d_extensions.md
@@ -49,4 +49,4 @@ Préférer l'utilisation de Gutenberg, éditeur par défaut de WordPress, plutô
 
 - [Les plugins ralentissent WordPress : mythe ou réalité](https://www.ex2.com/tutoriels/les-plugins-ralentissent-wordpress-mythe-ou-realite/)
 - [On a testé 10 Plugins de sliders pour WordPress, voici le meilleur](https://wpmarmite.com/slider-wordpress/)
-- [What’s the Fastest WordPress Page Builder? Performance Comparison](https://gobarrelroll.com/wordpress-page-builder-performance-comparison/)
+- [What’s the Fastest WordPress Page Builder? Performance Comparison (EN)](https://gobarrelroll.com/wordpress-page-builder-performance-comparison/)
diff --git a/fiches/WP_3.09-eviter-l_utilisation-de-carrousels.md b/fiches/WP_3.09-eviter-l_utilisation-de-carrousels.md
@@ -53,10 +53,10 @@ Les animations de certains attributs CSS implique un repaint/reflow des navigate
 
 ## Sources
 
-1. Note 1 : <https://erikrunyon.com/2013/07/carousel-interaction-stats/>
+1. Note 1 : [Carousel Interaction Stats - June 2013 Update (EN)](https://erikrunyon.com/2013/07/carousel-interaction-stats/)
 
-2. Note 2 : <https://wp-rocket.me/blog/why-you-shouldnt-use-a-slider-on-wordpress-and-other-performance-bad-practices/>
+2. Note 2 : [Why You Shouldn’t Use a Slider on WordPress (And Other Performance Bad Practices) (EN) ](https://wp-rocket.me/blog/why-you-shouldnt-use-a-slider-on-wordpress-and-other-performance-bad-practices/)
 
-3. Note 3 : <https://checklists.opquast.com/fr/assurance-qualite-web/les-animations-sons-et-clignotements-peuvent-etre-mis-en-pause>
+3. Note 3 : [OPQUAST : Règle n° 121 - Les animations, sons et clignotements peuvent être mis en pause.](https://checklists.opquast.com/fr/assurance-qualite-web/les-animations-sons-et-clignotements-peuvent-etre-mis-en-pause)
 
-4. Note 4 : <https://www.numerique.gouv.fr/publications/rgaa-accessibilite/methode-rgaa/criteres/#crit-4-12>
+4. Note 4 : [RGAA : Critère 4.12 - La consultation de chaque média non temporel est-elle contrôlable par le clavier et tout dispositif de pointage ?](https://www.numerique.gouv.fr/publications/rgaa-accessibilite/methode-rgaa/criteres/#crit-4-12)
diff --git a/fiches/WP_3.10-utiliser-des-polices-de-caracteres-standards.md b/fiches/WP_3.10-utiliser-des-polices-de-caracteres-standards.md
@@ -21,7 +21,7 @@ toIndex: true
 
 Afin de donner un style personnalisé à son site, un des leviers est d'utiliser des polices de caractères spécifiques en les déclarant dans les feuilles de styles ou les styles inline (`CSS`) comme : `font-family: "Gill Sans Extrabold", Arial, sans-serif;`.
 
-Pour que la "Gill Sans Extrabold", si nous poursuivons notre exemple plus haut, s'affiche correctement pour l'utilisateur, il faut qu'elle soit installée sur le terminal (ordinateur, tablette ou mobile) de l'utilisateur ou téléchargée automatiquement lors de l'affichage du site via un import `HTML` ou `CSS`, si la police n'est pas disponible le navigateur utilisera l'Arial et sinon la police `sans-serif` par défaut de votre navigateur sera affichée (polices [fallbacks](https://www.w3schools.com/cssref/css_fonts_fallbacks.asp)).
+Pour que la "Gill Sans Extrabold", si nous poursuivons notre exemple plus haut, s'affiche correctement pour l'utilisateur, il faut qu'elle soit installée sur le terminal (ordinateur, tablette ou mobile) de l'utilisateur ou téléchargée automatiquement lors de l'affichage du site via un import `HTML` ou `CSS`, si la police n'est pas disponible le navigateur utilisera l'Arial et sinon la police `sans-serif` par défaut de votre navigateur sera affichée (polices [fallbacks (EN)](https://www.w3schools.com/cssref/css_fonts_fallbacks.asp)).
 
 Pour résumé, il est possible :
 
@@ -31,7 +31,7 @@ Pour résumé, il est possible :
 
 ## GreenIT vous conseille
 
-**La solution la plus sobre et écologique est la dernière de la liste, à savoir les polices web-safe, limitant ainsi les requêtes et les téléchargements inutiles.** Cependant, la liste des polices disponible partout est [limitée](https://www.w3schools.com/cssref/css_websafe_fonts.as). Vous trouverez quelques exemples d'utilisation sur [https://kinsta.com/fr/blog/polices-caracteres-web-safe](https://kinsta.com/fr/blog/polices-caracteres-web-safe).
+**La solution la plus sobre et écologique est la dernière de la liste, à savoir les polices web-safe, limitant ainsi les requêtes et les téléchargements inutiles.** Cependant, la liste des polices disponible partout est [limitée (EN)](https://www.w3schools.com/cssref/css_websafe_fonts.asp). Vous trouverez quelques exemples d'utilisation sur [https://kinsta.com/fr/blog/polices-caracteres-web-safe](https://kinsta.com/fr/blog/polices-caracteres-web-safe).
 
 ### Solution no-code 🌱🌱🌱
 
diff --git a/fiches/WP_3.12-utiliser-le-constructeur-de-pages-gutenberg.md b/fiches/WP_3.12-utiliser-le-constructeur-de-pages-gutenberg.md
@@ -42,4 +42,4 @@ WordPress vous permet de développer vos propres blocs Gutenberg personnalisés
 ## Source
 
 - https://fr.wordpress.org/gutenberg/
-- https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
+- [https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/ (EN)](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/)
diff --git a/fiches/WP_4.01-mettre-des-donnees-en-cache.md b/fiches/WP_4.01-mettre-des-donnees-en-cache.md
@@ -76,4 +76,4 @@ delete_transient( $transient );
 | de requêtes évitées |           70%           |
 
 ## Source
--<https://developer.wordpress.org/apis/handbook/transients/>
+- [https://developer.wordpress.org/apis/handbook/transients/ (EN)](https://developer.wordpress.org/apis/handbook/transients/)
diff --git a/fiches/WP_4.04-limiter-le-poids-des-fichiers-js.md b/fiches/WP_4.04-limiter-le-poids-des-fichiers-js.md
@@ -17,7 +17,7 @@ toIndex: true
 
 ## Sujet
 
-Selon [HTTP Archive](https://httparchive.org/reports/page-weight), d'octobre 2022, le JavaScript représente environ 22% du poids d'une page Web.
+Selon [HTTP Archive (EN)](https://httparchive.org/reports/page-weight), d'octobre 2022, le JavaScript représente environ 22% du poids d'une page Web.
 En 5 ans, son poids a augmenté de plus de 43%, limiter son poids et son utilisation est devenu un levier pour réduire l'impact environnemental des sites.
 
 ## GreenIT vous conseille
diff --git a/fiches/WP_4.06-privilegier-le-chargement-differe-des-images-lazy-loading.md b/fiches/WP_4.06-privilegier-le-chargement-differe-des-images-lazy-loading.md
@@ -35,7 +35,7 @@ Cependant, il est encore plus efficace d'utiliser la technique de lazy load de m
 <iframe src="video-player.html" title="..." loading="lazy"></iframe>
 ```
 
-Nota: si vous utilisez la fonction WP [get_the_post_thumbnail](https://developer.wordpress.org/reference/functions/get_the_post_thumbnail/), la balise image obtenue contiendra l'attribut `loading="lazy"` par défaut (<https://caniuse.com/?search=loading>).
+Nota: si vous utilisez la fonction WP [get_the_post_thumbnail (EN)](https://developer.wordpress.org/reference/functions/get_the_post_thumbnail/), la balise image obtenue contiendra l'attribut `loading="lazy"` par défaut ([https://caniuse.com/?search=loading(EN)](https://caniuse.com/?search=loading)).
 
 Le lazy loading natif a l'avantage d'améliorer les performances globales de votre site, car il ne repose pas sur du code JavaScript en ligne ou des scripts externes.
 
diff --git a/fiches/WP_5.01-compresser-les-medias.md b/fiches/WP_5.01-compresser-les-medias.md
@@ -18,7 +18,7 @@ toIndex: true
 
 ## Sujet
 
-Selon [HTTP Archive](https://httparchive.org/reports/page-weight), en octobre 2022, les images représentent en moyenne 43% du poids total d'une page Web.
+Selon [HTTP Archive (EN)](https://httparchive.org/reports/page-weight), en octobre 2022, les images représentent en moyenne 43% du poids total d'une page Web.
 Les images constituent donc l'un des leviers les plus importants pour réduire le poids des pages, afficher des images sans traitement préalable aura des conséquences désastreuses sur les performances de votre site.
 
 WordPress propose nativement des fonctionnalités permettant d'afficher le format le plus adapté à l'utilisateur final du site mais certains thèmes ne les intègrent pas. Si ce n'est pas le cas, ou en cas de doute, utilisez les images les plus adaptées (redimensionnement et/ou qualité) à leur affichage avant de les téléverser.
@@ -28,7 +28,7 @@ En complément de ces optimisations, il faudra veiller à utiliser le format [d'
 ## GreenIT vous conseille
 
 - Le logiciel ImageOptim, JPEGMini, OptiPNG
-- Les sites [squoosh.app](https://squoosh.app), [TinyPNG](https://tinypng.com/)
+- Les sites [squoosh.app (EN)](https://squoosh.app), [TinyPNG (EN)](https://tinypng.com/)
 - Les extensions Imagify, EWWW Image Optimizer, Smush
 
 ### Solution no code 🌱🌱
diff --git a/fiches/WP_5.02-utiliser-le-format-adequat-d_image.md b/fiches/WP_5.02-utiliser-le-format-adequat-d_image.md
@@ -79,7 +79,7 @@ C'est un format de compression d'images [[matricielle|matricielles]] crée comme
 
 C'est un très vieux format de compression d'images [[matricielle|matricielles]] datant de la fin des années 80. Il autorise la transparence et permet d'afficher une séquence d'images similaire à des vidéos (GIF animé). **Le GIF est un format lourd, préférez l'utilisation de PNG, WebP, MP4, WebM ou autres codecs vidéos adaptés au web.**
 
-> 💡 Vous connaissez surement le site https://giphy.com/ ! Les animations, dont le style graphique correspond à celui d'un GIF, sont en `.webp` et `.mp4`. Sur [Twitter](https://twitter.com/), les "GIFs" sont en `.mp4`.
+> 💡 Vous connaissez surement le site [Giphy (EN)](https://giphy.com/) ! Les animations, dont le style graphique correspond à celui d'un GIF, sont en `.webp` et `.mp4`. Sur [Twitter](https://twitter.com/), les "GIFs" sont en `.mp4`.
 
 ## GreenIT vous conseille
 
@@ -126,7 +126,7 @@ Nous l'avons retravaillé comme il suit :
 
 </p>
 <p align="center">
-<a href="https://uxdesign.cc/jpg-vs-png-vs-gif-vs-svg-aefeca89f61" target="_blank">Fig.1 - JPG vs PNG vs GIF vs SVG</a>
+<a href="https://uxdesign.cc/jpg-vs-png-vs-gif-vs-svg-aefeca89f61" target="_blank">Fig.1 - JPG vs PNG vs GIF vs SVG (EN)</a>
 </p>
 
 ### Photographie
@@ -153,4 +153,4 @@ _Source de l'exemple : https://www.pexels.com/fr-fr/photo/nature-troncs-foret-ar
 
 ## Sources :
 
-- https://make.wordpress.org/core/2022/03/28/enabling-webp-by-default/
+- [Enabling WebP by default (EN)](https://make.wordpress.org/core/2022/03/28/enabling-webp-by-default/)
diff --git a/fiches/WP_6.01-mesurer-l_impact-environnemental.md b/fiches/WP_6.01-mesurer-l_impact-environnemental.md
@@ -35,17 +35,17 @@ Posez-vous des limites par page et pour chaque [[parcours-utilisateur]].
 
 _Actuellement, il n'existe pas d'outil spécifique à WordPress._
 
-[Performance Budget](https://www.performancebudget.io) : Site permettant le budget possible allouable aux différents éléments qui composent un site comme le JavaScript, le CSS, etc.
+[Performance Budget (EN)](https://www.performancebudget.io) : Site permettant le budget possible allouable aux différents éléments qui composent un site comme le JavaScript, le CSS, etc.
 
-Extension GreenIT Analysis : Disponible sur [Chrome](https://chrome.google.com/webstore/detail/greenit-analysis/mofbfhffeklkbebfclfaiifefjflcpad?hl=fr) et [Firefox](https://addons.mozilla.org/fr/firefox/addon/greenit-analysis/?utm_source=addons.mozilla.org&utm_medium=referral&utm_content=search), l'extension regroupe les fonctionnalités de [EcoIndex.fr](http://www.ecoindex.fr/) (empreinte et performance environnementale) et de [ecometer.org](http://ecometer.org/) (évaluation de bonnes pratiques).
+Extension GreenIT Analysis : Disponible sur [Chrome](https://chrome.google.com/webstore/detail/greenit-analysis/mofbfhffeklkbebfclfaiifefjflcpad?hl=fr) et [Firefox](https://addons.mozilla.org/fr/firefox/addon/greenit-analysis/?utm_source=addons.mozilla.org&utm_medium=referral&utm_content=search), l'extension regroupe les fonctionnalités de [EcoIndex.fr](http://www.ecoindex.fr/) (empreinte et performance environnementale) et de [ecometer.org (EN)](http://ecometer.org/) (évaluation de bonnes pratiques).
 
 1. Installer cette extension sur vos navigateurs de test, ils sont accessibles via les outils d'inspecteur de code.
 2. Vider votre cache navigateur (afin de simuler une première visite) et cliquer sur "Lancer l'analyse".
    L'extension va attribuer une note de A à G à votre page. De A jusqu'a C le résultat est honorable, de D à G votre site est perfectible. Tirer les conclusions de la note obtenue : le poids des images et leurs nécessités, est-ce que votre page à une vidéo, chargez-vous beaucoup de typographies ou de bibliothèques externes, avez-vous beaucoup d'extensions, avez-vous des animations, etc.
 
 > ❗L'extension vous permet également d'enregistrer l'empreinte d'un [[parcours utilisateur]] complet. Pour ce faire cliquer sur "Sauver l'analyse" et effectuer le parcours de votre utilisateur (de la page catalogue jusqu'à la page validée votre commande par exemple).
 
-[Kastor](https://kastor.green/) : Site permettant d'évaluer son site selon le [GR491](https://gr491.isit-europe.org/).
+[Kastor (EN et FR)](https://kastor.green/) : Site permettant d'évaluer son site selon le [GR491](https://gr491.isit-europe.org/).
 
 **Alléger le poids et la complexité de ses pages est avant tout une question d'équilibre et de choix.**
 
diff --git a/fiches/WP_7.03-securiser-l_acces-l_administration.md b/fiches/WP_7.03-securiser-l_acces-l_administration.md
@@ -69,4 +69,4 @@ En effet, plusieurs extensions, éprouvées et sûres, vous permettent de réali
 
 ## Sources
 
-1. Note 1 : <https://www.wordfence.com/blog/2021/01/the-wordfence-2020-wordpress-threat-report/>(EN), Résumé <https://www.blogdumoderateur.com/wordpress-attaques-menaces-securite/> (FR)
+1. Note 1 : [The Wordfence 2020 WordPress Threat Report (EN)](https://www.wordfence.com/blog/2021/01/the-wordfence-2020-wordpress-threat-report/), [Résumé (FR)](https://www.blogdumoderateur.com/wordpress-attaques-menaces-securite/)
diff --git a/fiches/WP_8.01-entretenir-son-site-regulierement.md b/fiches/WP_8.01-entretenir-son-site-regulierement.md
@@ -48,7 +48,7 @@ Il faut prévoir dès l'installation, un plan de maintenance de votre site compr
 
 - **Supprimer les thèmes et extensions non utilisés ou désactivés**. La désactivation n'est pas la suppression/désinstallation.
 
-- **Supprimer régulièrement les pages inutiles ou tout contenu obsolète** comme par exemple un post sur un fait d’actualité qui a plus de 1 an ou une page décrivant un service que vous ne proposez plus. Au risque de générer des pages 404 (page introuvable), la frustration des utilisateurs et d'entacher votre référencement, il vous faudra aussi penser à supprimer, les liens de renvoi vers le contenu supprimé présent dans d'autres pages. Pour vous aider dans la détection de liens cassés, vous pouvez utiliser [Google Search Console](https://search.google.com/search-console), [Bing](https://www.bing.com/webmasters/help/URL-Inspection-55a30305) ou des services tel que [W3C](https://validator.w3.org/checklink) ou des extensions pour votre navigateur ou cette fonctionnalité est peut-être déjà présente dans une extension déjà installée. Si vous installez une extension spécifique, sachez que ce type d'extension peut faire tourner votre CPU et ralentir votre site inutilement. Sachant que vous n'en avez pas besoin à tout instant, nous vous recommandons de l'installer et désinstaller au besoin.
+- **Supprimer régulièrement les pages inutiles ou tout contenu obsolète** comme par exemple un post sur un fait d’actualité qui a plus de 1 an ou une page décrivant un service que vous ne proposez plus. Au risque de générer des pages 404 (page introuvable), la frustration des utilisateurs et d'entacher votre référencement, il vous faudra aussi penser à supprimer, les liens de renvoi vers le contenu supprimé présent dans d'autres pages. Pour vous aider dans la détection de liens cassés, vous pouvez utiliser [Google Search Console](https://search.google.com/search-console), [Bing (EN)](https://www.bing.com/webmasters/help/URL-Inspection-55a30305) ou des services tel que [W3C (EN)](https://validator.w3.org/checklink) ou des extensions pour votre navigateur ou cette fonctionnalité est peut-être déjà présente dans une extension déjà installée. Si vous installez une extension spécifique, sachez que ce type d'extension peut faire tourner votre CPU et ralentir votre site inutilement. Sachant que vous n'en avez pas besoin à tout instant, nous vous recommandons de l'installer et désinstaller au besoin.
 
 - **Supprimer toutes fonctionnalités sous-employées ou non nécessaires**. 70 % des fonctionnalités demandées par les utilisateurs ne sont pas essentielles et 45 % ne sont jamais utilisées, d’après plusieurs études (Cast Software et Standish Group, notamment). (voire Eliminer les fonctionnalités non essentielles)
 
