Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat/103 38 sécuriser le site #106

Closed
wants to merge 31 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
31 commits
Select commit Hold shift + click to select a range
a4d7cf0
delete date Frontmatter
florinesueur Oct 5, 2022
5e837e6
add front-office
florinesueur Oct 5, 2022
073135f
add file cache
florinesueur Oct 5, 2022
e43dd54
Rename cache to cache.md
florinesueur Oct 5, 2022
c2de0d1
Rename front-office to front-office.md
florinesueur Oct 5, 2022
7c61892
Create api.md
florinesueur Oct 5, 2022
a2e2c32
Create requete.md
florinesueur Oct 5, 2022
37d077f
Create seo.md
florinesueur Oct 5, 2022
6aef946
Update 33. Mettre des données en cache.md
florinesueur Oct 5, 2022
7e48c52
Update 33. Mettre des données en cache.md
florinesueur Oct 5, 2022
07408bf
Update lexique/front-office.md
florinesueur Oct 6, 2022
82e9f7f
feat(Utiliser une version d'image ayant taille cohérente avec son uti…
Oct 6, 2022
96bf497
Un seul lifecycle
hrenaud Oct 6, 2022
9a274c5
Update best-practices-WordPress/fiches/22. Utiliser une version d'ima…
hrenaud Oct 6, 2022
f3659a8
Update 22. Utiliser une version d'image ayant taille cohérente avec s…
hrenaud Oct 6, 2022
b96cc4c
Update 15. Limiter le nombre de révisions.md
florinesueur Oct 6, 2022
df9cf97
feat(22. Utiliser une version d'image ayant taille cohérente avec son…
Oct 6, 2022
786e81f
Merge branch 'feat/87-22-la-taille-des-images' of https://github.com/…
Oct 6, 2022
77f7636
Merge pull request #88 from cnumr/feat/87-22-la-taille-des-images
hrenaud Oct 6, 2022
e46db4f
Merge pull request #78 from cnumr/feat/33
dNicolle Oct 13, 2022
53e1caa
Merge pull request #96 from cnumr/feat/15-limiter-le-nombre-de-révisions
florinesueur Oct 13, 2022
d6d42e1
Update and rename 14. Augmenter l'intervale de temps entre deux sauve…
florinesueur Oct 14, 2022
515eab0
Update 14. Augmenter l'intervalle de temps entre deux enregistrements…
florinesueur Oct 14, 2022
20cf80c
Create local.md
florinesueur Oct 14, 2022
5503e52
Create ftp
florinesueur Oct 14, 2022
3ce4dd6
Rename ftp to ftp.md
florinesueur Oct 14, 2022
6721880
Update 14. Augmenter l'intervalle de temps entre deux enregistrements…
florinesueur Oct 14, 2022
67a5fc1
Update ftp.md
florinesueur Oct 14, 2022
c58197b
Update best-practices-WordPress/fiches/14. Augmenter l'intervalle de …
florinesueur Oct 14, 2022
7e759f9
Update best-practices-WordPress/fiches/14. Augmenter l'intervalle de …
florinesueur Oct 14, 2022
094f391
Merge pull request #100 from cnumr/feat/90-14-augmenter-lintervale-de…
dNicolle Oct 15, 2022
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view

This file was deleted.

Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
---
title: 14. Augmenter l'intervalle de temps entre deux enregistrements automatiques
people: Dominique N.
scope: Stockage
state_validation: To Validate
responsible:
- Code(use·ur) → Développeu·se·r
- No-code → Madame et Monsieur tout le monde
lifecycle: Intégration & Développement
priority_implementation: Faible 👍
environmental_impact: Faible 🌱
saved_resources:
- Stockage
- Réseau
- Requêtes
path: /fiches/14-augmenter-l-intervalle-de-temps-entre-deux-enregistrements-automatiques
toIndex: true
---

## Sujet

WordPress enregistre automatiquement les modifications de brouillons, d'articles et de pages au fur et à mesure des modifications à un intervalle régulier de 2 minutes par défaut.

## GreenIT vous conseille
Nous vous proposons deux alternatives pour réduire le nombre d'appels serveur et réduire l'impact sur le stockage.
Cette bonne pratique est à appliquer en complément de la fiche [15. Limiter le nombre de révisions](./15.%20Limiter%20le%20nombre%20de%20r%C3%A9visions.md)

### Solution no-code 🌱
Nous vous conseillons de travailler vos textes via un traitement de texte en [[local]]. Une fois que votre texte est prêt pour la publication, vous pouvez le copier/coller, en utilisant `Ctrl + Shift + v` pour supprimer l'import de styles indésirables issus du traitement de texte et ainsi utiliser les styles de votre propre site.

### Solution code pas-à-pas 🌱
Vous pouvez aussi augmenter cet intervalle de sauvegarde pour limiter le nombre de révisions générées.
Placer cette ligne dans le fichier de configuration `wp-config.php`, via un [[ftp|serveur FTP]] :
```
// Ici l'intervalle entre deux sauvegardes est de X secondes
define('AUTOSAVE_INTERVAL', X);
```
#### Exemple
```
// Ici l'intervalle entre deux sauvegardes est de 360 secondes
define('AUTOSAVE_INTERVAL', 360);
```

## Principe de validation

| Le nombre | est inférieur ou égal à |
| ------------- | :---------------------: |
| d'enregistrements automatiques avec un intervalle de moins de 5 min | 0 |
Original file line number Diff line number Diff line change
Expand Up @@ -5,31 +5,36 @@ scope: Stockage
state_validation: To Validate
responsible:
- Code(use·ur) → Développeu·se·r
lifecycle:
- 2 - Conception / Design
- 3 - Développement
lifecycle: Intégration & Développement
priority_implementation: Faible 👍
environmental_impact: Faible 🌱
saved_resources:
- Stockage
path: /fiches/15-limiter-le-nombre-de-revisions
toIndex: true
---

## Sujet

WordPress enregistre des révisions pour chaque mise à jour des contenus. Vous pouvez les limiter aux 10 dernières modifications afin de limiter le poids de la base de données.

Cette bonne pratique est à appliquer en complément de la fiche #[14. Augmenter l'intervale de temps entre deux sauvegardes automatiques](./14.%20Augmenter%20l'intervale%20de%20temps%20entre%20deux%20sauvegardes%20automatiques.md)
Cette bonne pratique est à appliquer en complément de la fiche [14. Augmenter l'intervale de temps entre deux sauvegardes automatiques](./14.%20Augmenter%20l'intervale%20de%20temps%20entre%20deux%20sauvegardes%20automatiques.md)

## Exemple
## GreenIT vous conseille

Placez cette ligne dans votre fichier de configuration :
Placez cette ligne dans votre fichier de configuration `wp-config.php` où X étant le nombre de la limite :

`define('WP_POST_REVISIONS', X);`

## Exemple :

Pour enregistrer seulement les 10 dernières révisions :

`define('WP_POST_REVISIONS', 10);`


## Principe de validation

| Le nombre de révisions | est inférieur ou égal à |
| Le nombre | est inférieur ou égal à |
| ------------- | :---------------------: |
| par contenu | 10 |
| de révisions par contenu | 10 |
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
title: 22. La taille des images
title: 22. Utiliser une version d'image ayant taille cohérente avec son utilisation
people: Renaud H.
scope: Images
state_validation: DONE
Expand All @@ -8,50 +8,48 @@ responsible:
- Designeu(se·r)
- Low-code → Freelance et développeur Front-End d'agences
- No-code → Madame et Monsieur tout le monde
lifecycle:
- 2 - Conception / Design
- 3 - Développement
lifecycle: Intégration & Développement
priority_implementation: Fort 👍👍👍
environmental_impact: Fort 🌱🌱🌱
saved_resources:
- Processeur
- Mémoire vive
- Stockage
- Réseau
path: /fiches/22-la-taille-des-images
path: /fiches/22-utiliser-une-version-image-ayant-taille-coherente-avec-son-utilisation
toIndex: true
---

## Sujet

Les images sont un des éléments les plus lourds des sites web. Une mauvaise compression ou **un mauvais dimensionnement de vos images auront un impact négatif sur vos performances d'affichage (et donc écologique) et sur la notation Google de votre site**.
Les images sont un des éléments les plus lourds des sites web. Une mauvaise compression ou **un mauvais dimensionnement de vos images auront un impact écologique négatif, ainsi que sur vos performances d'affichage et la notation Google de votre site en sera aussi pénalisée**.

Lors de l'ajout d'une image dans l'interface d'une page, il faut se poser plusieurs questions, abordées sur d'autres fiche de ce guide :
Lors de l'ajout d'une image dans l'interface d'une page, il faut se poser plusieurs questions, abordées sur d'autres fiches de ce guide :

- Le type d'image (JPG, PNG, SVG, etc. voir [28. Type d'images à utiliser suivant le contexte d'utilisation](/best-practices-WordPress/fiches/28.%20Type%20d'images%20%C3%A0%20utiliser%20suivant%20le%20contexte%20d'utilisation.md) )
- La compression possible ou le nombre de couleurs embarquées
- La transparence ou non
- Et ici, la taille de l'image.

Lors de l'upload, WordPress crée d'office des version vignettes de vos médias.
Lors de l'upload, WordPress crée d'office des versions [[vignette|vignettes]] de vos médias.

Les vignettes sont des versions de dimensions réduites de votre média initiale et certaines avec des proportions différentes (carrée).
Les vignettes sont des versions de dimensions réduites de votre média initial et certaines avec des proportions différentes (carrée).

Les thèmes, si c'est configuré dans le code, font aussi des vignettes répondant à leur interface (une pour un affichage en grille en mobile pour les Portfolios, une autre pour la version tablette, etc.).
Les [[theme|thèmes]], si c'est configuré dans le code, génèrent aussi des vignettes répondant aux besoins de leur interface (une pour un affichage en grille, en mobile pour les Portfolios, une autre pour la version tablette, etc.).

Lors de la création d'un site, il est important de configurer la génération des vignettes pour optimiser et accélérer l'affichage.

Sachant que votre site va finalement n'utiliser que des versions de tailles réduites de vos images, il est aussi bon pour la planète de se poser la question lors de l'upload de votre média si une version en 2600px est nécessaire alors que votre site n'affiche que des images de 800px maximum. En effet, ces medias "gigantesques" resteront néanmoins stockés sur le serveur, devront transiter sur les réseaux lors de l'upload et seront conservés dans les sauvegardes de votre site.
Sachant que votre site va finalement n'utiliser que des versions de tailles réduites de vos images, il est aussi bon pour la planète de se poser la question lors de l'upload de votre média si une version en 2600 px est nécessaire alors que votre site n'affiche que des images de 800 px maximum. En effet, ces médias "gigantesques" resteront néanmoins stockés sur le serveur, devront transiter sur les réseaux lors de l'upload et seront conservés dans les sauvegardes de votre site.

## GreenIT vous conseille

### Solution no-code 🌱

Voici un plugin pour créer des vignettes (`post-thumbnails`) et regénéner les images pour qu'elles soient disponnible dans WordPress : https://wordpress.org/plugins/regenerate-thumbnails-advanced/
Voici un plug-in pour créer des vignettes (`post-thumbnails`) et régénérer les images pour qu'elles soient disponibles dans WordPress : https://wordpress.org/plugins/regenerate-thumbnails-advanced/

### Solution code 🌱🌱🌱

Lorsque vous créer un thème ou lorsque vous utiliser un builder de site, ajoutez à votre site cet exemple de code pour pouvoir générer et utiliser la bonne taille de vignettes suivant son contexte d'utilisation :
Lorsque vous créez un thème ou lorsque vous utilisez un builder de site, ajoutez à votre site cet exemple de code pour pouvoir générer et utiliser la bonne taille de vignettes suivant son contexte d'utilisation :

```php
/**
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,26 +5,41 @@ scope: Cache
state_validation: Doing
responsible:
- Code(use·ur) → Développeu·se·r
lifecycle:
- 3 - Développement
lifecycle: Intégration & Développement
priority_implementation: Moyen 👍👍
environmental_impact: Moyen 🌱🌱
saved_resources:
- Requêtes
path: /fiches/33-mettre-des-donnees-en-cache
toIndex: true
---

## Sujet

WordPress propose une fonction très intéressante qu'il est bon d'avoir en tête lorsqu'on développe une fonctionnalité spécifique qui nécessite d'afficher des données en front.
WordPress propose une fonction très intéressante qu'il est bon d'avoir en tête lorsqu'on développe une fonctionnalité spécifique qui nécessite d'afficher des données en [[front-office|front]] : ==Les Transients ou données transitoires== !

> !! **Les Transients ou données transitoires**
Un transient est une [[api|API]] qui permet de mettre des données en [[cache]].
Cette fonctionnalité permettra de mettre en cache les données qui sont réutilisées afin de limiter le nombre de [[requete|requêtes]] permettant une optimisation de la rapidité de chargement du site qui sera aussi bénéfique pour son [[seo|SEO]].

L'API WordPress Transient s'utilise de la même manière que l'API Options. Elle ajoute cependant la notion de durée de vie.
Concrétement au chargement d'une page, Wordpress vérifie si un transient existe.
- Si ce n'est pas le cas, il va chercher la donnée puis l'afficher.
- Si c'est le cas, il va directement afficher la donnée.

**Tout n'est pas à mettre en cache !**
Pour un maximum de gain, préférez utiliser cette méthode :
- pour des contenus complexes à générer
- pour un même contenu présent sur plusieurs pages
- ou pour un contenu qui ne changera plus (transient sans délai d'expiration)

## GreenIT vous conseille

Cette fonctionnalité vous permettra de mettre en cache les données qui sont réutilisées afin de limiter le nombre de requêtes.
### Solution no-code 🌱

L'utilisation de l'[[api|API]] décrite ci-dessous reste une solution technique qui nécéssite de mettre les mains dans le code. Cependant, des extensions de système de cache peuvent plus ou moins finement gérer les données transitoires (voir la documentation de l'extension) sinon, des extensions complémentaires existent.

### Solution code 🌱🌱

L'API WordPress Transient s'utilise de la même manière que l'API Options. Elle ajoute cependant la notion de durée de vie. À noter qu'une donnée transitoire expirée reste en base de données et peut résulter d'une désinstallation d'extension ou de changement de thème.

Si la liste des derniers articles est affichée sur plusieurs pages, nous pouvons par exemple enregistrer cette liste (et son code html) dans un Transient. Ainsi, lors de l'affichage de ce bloque, vous n'aurez qu'une requête à faire pour ce bloc, au lieu d'une boucle qui récupère les X derniers articles.

Expand Down
7 changes: 7 additions & 0 deletions lexique/api.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
title: API
path: /lexique/api
toIndex: true
---

Interface informatique agissant avec ou sur un service tier, signifiant Application programming interface ou « interface de programmation d'application »
2 changes: 0 additions & 2 deletions lexique/back-office.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
---
title: Back-office
created at: Wed S 30 2021 14:14:20 GMT+0000 (Coordinated Universal Time)
updated at: Thu Dec 23 2021 11:04:10 GMT+0000 (Coordinated Universal Time)
path: /lexique/back-office
toIndex: true
---
Expand Down
7 changes: 7 additions & 0 deletions lexique/cache.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
title: Cache
path: /lexique/cache
toIndex: true
---

Moyen de sauvegarder et de rappeler rapidement les données fréquemment utilisées
7 changes: 7 additions & 0 deletions lexique/front-office.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
title: Front-office ou simplement Front
path: /lexique/front-office
toIndex: true
---

Partie d'un site internet visible par les internautes
7 changes: 7 additions & 0 deletions lexique/ftp.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
title: Ftp
path: /lexique/ftp
toIndex: true
---

Un serveur FTP (File Transfer Protocol) est un logiciel utilisé dans le transfert de fichiers entre deux entités comme entre un ordinateur et un serveur hébergant un site. Un accès FTP explorer en ligne est souvent fourni par l'hébergeur sinon, le logiciel le plus connu est FileZilla.
7 changes: 7 additions & 0 deletions lexique/local.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
title: Local
path: /lexique/local
toIndex: true
---

Travailler en local signifie travailler sur et avec des logiciels installés et des fichiers enregistrés sur notre propre ordinateur/tablette/mobile.
7 changes: 7 additions & 0 deletions lexique/requete.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
title: Requête
path: /lexique/requete
toIndex: true
---

Interoggation d'une base de données ou d'autres systèmes d'information
7 changes: 7 additions & 0 deletions lexique/seo.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
title: SEO
path: /lexique/seo
toIndex: true
---

Search Engine Optimization, optimisation du référencement naturel
9 changes: 9 additions & 0 deletions lexique/theme.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
---
title: Thème
path: /lexique/theme
toIndex: true
---

Un thème WordPress est un ensemble de fichiers permettant de produire l’interface graphique de votre site, avec un aspect et une charte graphique unifiée.

Un thème modifie la façon dont votre site s’affiche, sans modifier le reste du CMS et de ses fonctionnalités.
13 changes: 13 additions & 0 deletions lexique/vignette.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
---
title: Vignette
path: /lexique/vignette
toIndex: true
---

Ce sont des versions réduites (appelée mignatures ou vignettes et en anglais, tumbnails) de l'image originales ajoutée à la gallerie de médias.

Par défaut, WordPress crée une série de trois tailles d’image :

- Miniature
- Moyenne
- Grande