Construction du site lesZaventures

Ce site a été construit autour de WordPress.

1 – LISTE DES LOGICIELS DE BASE UTILISES

Le thème utilisé est Astra (Astra Pro – 50$).
Le plugin de galerie Photos est Envira Gallery (50$).
Le logiciel de cartographie est LeafletJs (gratuit).

2 – LISTE DES PRINCIPAUX PLUGINS

(tous gratuits – avec note de 1 à 5 étoiles )

AntiSpam Bee: antispam concurrent d’Akismet, par défaut avec WordPress (*****).
WP Force SSL: Plugin utilisé pour le passage en HTTPS ( SSL  (alternative à Really Simple SSL). Voir le chapitre PASSAGE EN HTTPS .
Wp Optimize (*****): Il s’agit essentiellement d’un outil de nettoyage de la base de données (suppression des révisions très facile). tuto : Comment paramétrer WP Optimize pour nettoyer et optimiser sa base de données . On peut aussi limiter le nombre de révisions directement dans wp-config.php: tuto.
TablePress (*****) : Excellent plugin pour créer des tableaux. Extension “Responsive Design”: TablePress – Responsive Tables.The SEO Framework : Alternative à Yoast SEO, il est bien plus simple : comparaison ave Yoast SEO et revue/tuto.

Wordfence(*****) : Plugin de sécurité, à la place de Akismet proposé par WordPress . Un peu compliqué à installer.
W3 Total Cache. En association avec Cloudflare, ce plugin accroît considérablement la rapidité des accès aux pages du site. J’y consacre un chapitre dans cet article.

3 – AUTRES PLUGINS

Recent Posts Widget With Thumbnails (****) : permet d’afficher les derniers articles (posts) avec des vignettes (thumbnail).
WPForms Lite (*****) : formulaire basique, mais efficace (formulaire : contactez-moi) .
WP Add Mime Types: Ce plugin m’a permis d’uploader des fichiers de trace gpx et kml. Voir Liste des type MIME WordPress.
All-in-One WP Migration (****) : logiciel utilisé pour la migration depuis l’environnement PC Xampp vers le serveur du site (gratuit jusqu’à 512 Mo avec l’extension All-in-One WP Migration File Extension). Il suffit d’enlever toutes les images à ce moment là…
Disable Emojis : évite 1 requête Http: l’envoi de emoji.css vers le navigateur. Voir ce lien:Comment désactiver Emojis dans WordPress.
Better Search Replace (****) : Cherche et Remplace Y COMPRIS dans la base de données.
String Locator : bien pratique pour rechercher une chaîne de caractères.
Menu Icons: j’ai utilisé ce Plugin pour remplacer le mot Acceuil par une “petite maison” dans mon menu de base (header).

4 – OUTILS

ContrastChecker: mesure de contraste pour typographie. Astuce pour tester les couleurs : à l’aide de la console de développement Chrome, sélecter l’élément , et cliquer dans la case carré à côté de la couleur: une fenêtre de choix de couleur s’affiche…
CSS minifier : compression en ligne de la partie “additional css” (97%).
BrokenLinkCheck: …comme son nom l’indique (meilleur que le plugin BrokellinkChecker, qui m’a oublié quelques liens cassés).
GTmetrix: indispensable pour mesurer la rapidité de ses pages Web.
WebPageTest: Ce site permet de visualiser facilement toutes les requêtes constitutives d’une page html.

5 – CONFIGURATION DU THEME ASTRA

5.1 – Création d’un thème enfant – Théorie
“Un thème enfant vous permet de modifier de petits aspects de l’apparence de votre site tout en préservant l’apparence et les fonctionnalités de votre thème. Pour comprendre le fonctionnement des thèmes enfants, il est d’abord important de comprendre la relation entre les thèmes parents et enfants.

Qu’est-ce qu’un thème parent ?
Un thème parent est un thème complet qui inclut tous les fichiers de modèles et ressources WordPress requis pour que le thème fonctionne. Tous les thèmes – à l’exception des thèmes enfants – sont considérés comme des thèmes parents.

Qu’est-ce qu’un thème enfant ?
Comme indiqué dans la présentation, un thème enfant hérite de l’apparence du thème parent et de toutes ses fonctions, mais peut être utilisé pour apporter des modifications à n’importe quelle partie du thème. De cette façon, les personnalisations sont séparées des fichiers du thème parent. L’utilisation d’un thème enfant vous permet de mettre à niveau le thème parent sans affecter les personnalisations que vous avez apportées à votre site”.

Source: Worldpress.org – Child Themes.


5.2 – Création du thème enfant – Pratique
1 – On recopie les fichiers function.php et style.css du thème parent (wp-content/themes/astra) vers le thème enfant (wp-content/themes/astra-child).
2 – On modifie ces fichiers qui deviennent prioritaires sur ceux du thème parent : Astra. Ainsi, à chaque nouvelle version de Astra, on n’a pas à remodifier les fichiers du thème parent.

Sources : WordPress- Créer un thème enfant.
Tutoriel du plugin Astra: Creation et installation d’un child theme avec Astra.

Dans mon cas, le thème enfant m’ a permis:
1/ De remplacer les chaînes de caractères “next”/”previous” de la navigation par les titres des articles en question (modification effectuée dans function.php).
Tuto: Post titles instead of next post and previous post .
2/ De modifier les points de breakpoint PC:Tablet/Mobile ( function.php).
Mise à jour 06/07/2021 (Astra 3.6.2): avec le nouveau Header/Footer Builder, la “bidouille” ci-dessous pour modifier les points de breakpoint n’est plus valide . Attendre la nouvelle version et enlever le bout de code dans le fichier function.php du child theme.
Voir ce post.

Breakpoints actuels : PC fixe/Tablet/Mobile (old footer/header).
Mobile breakpoint : 544px (avant et après v2.4.0).
Tablet breakpoint: 9121px (avant v2.4.0 : 768px).

Au cas où: procédures à suivre pour intégrer ces breakpoints avant le Header/Footer Builder.
https://wpastra.com/docs/set-update-breakpoints-tablet-mobile-in-astra/
How to Add Custom PHP Code? 3. In Child Theme

5.3 – Choix du layout
Description des divers layouts: Layout page blog
Au 05/07/2021, j’utilise le layout Full Width (= bord à bord dans la limite d’un container à 1920px – Layout Fluid = bord à bord total)
https://wpastra.com/docs-category/astra-pro-modules/site-layout/

Marges (padding/marging) du bloc principal (sous l’entête) en fonction des différents layouts.
https://wpastra.com/docs/container-spacing-controls/

5.4 Adaptations diverses en fonction de l’écran ( fixe/tablet/mobile).
Le site mydevice.io permet de connaitre la résolution de son écran (PC ou smartphone).
Exemple pour mon smartphone Redmi Note 8T : 390 * 900 px .

Les modifications ponctuelles sont réalisées dans le fichier additionnal.css
J’utilise les media queries css3 (@media) pour y parvenir – j’ai adopté dans la plupart des cas le point de breakpoint mobile/desktop à 768 px.

Exemple dans le fichier : additionnal.css:
/* bouton de retour en haut: mobile */
@media only screen and (max-width:767px){
ast-scroll-top{ font-size:18px; border-radius:5px;}}

/* bouton de retour en haut: desktop */
@media only screen and (min-width:768px){
ast-scroll-top{font-size:25px;border-radius:10px;}}


5.4 – Paramétrage du Menu Mobile
Afin d’avoir le menu mobile vertical, il faut le parametrer: Stack on Mobile = On

Autres paramètres du Menu Mobile (comme le centrage): cliquer sur “Off-Canvas” dans le menu u Header Builder .La fenêtre suivante est affichée:

5.6 – Chargement local des fonts Google
A partir d’ Astra 3.6 (Juillet 2021), il est possible de charger les Google Fonts localement. Avant, il fallait faire une requete à un serveur de Google . Donc, ça fait une requete de moins:
https://wpastra.com/docs/performance-is-the-key/#load-google-fonts-locally
https://wpastra.com/speed-up-wordpress/

5.7 – Debug du thème sur vrai smartphone : vidage cache Chrome sous Android
Sur son smartphone:
Paramètres — > Applications –> Gerer les Applications –> Chrome –> Stockage : Effacer les données –> Vider le cache


6 SEO – REFERENCEMENT

6.1 – Mise en place de Google Analytics

Paramètres de mon compte Google Analytics:
ID : G-ZTET4X9HYN ( contenu dans le code js).
Analytics Account —> Properties
Gilles Peltier ………………Test

Ma page Google Analytics

Tuto utilisé: https://creer-un-site.com/obtenir-statistiques-visites-site/

1 – aller sur le site de Google Analytics pour chercher le code Javascript.
2 – Inserer ce code dans le fichier header.php du dossier: /wp-content/themes/astra
Le coller précisément à l’endroit indiqué dans le tuto, soit juste après la ligne de code qui contient:
“<body <?php” ….
3 – vérifier en faisant soi-même des accès à son site que Google Analytics voit bien ces accès.

Code js:

6.2 – Paramétrage pour Facebook

Le référencement Facebook s’effectue via la balise fb:app_id qui doit être présent dans le code source de la page.
( Vérifier en faisant ” afficher le code source” sous Chrome).
ligne de code qu’on doit trouver (où xxxx est le numéro de la balise fb:app_id ) : meta property=”fb:app_id” content=”xxxxxxxx” />
la balise est à renseigner dans le champ SEO (rubrique Facebook) du site.

Parfois, la balise fb:app_id n’est pas vue par Facebook. Via l’outil ci-dessous, cliquer d’abord sur debuguer , puis , à la ligne ” Dernière Analyse”, cliquer sur “Recollecter”.
https://developers.facebook.com/tools/debug/

Outil générique de développement Facebook: https://developers.facebook.com/ , puis faire : “Mes Applications”

Test d’un post sur Facebook: crééer la publication –> à moi uniquement.Celà permet de voir la bonne prise charge de l’image.

7 – TRAITEMENT DES IMAGES

Dans mon article Photographie – Taille et résolution des images pour le Web et l’impression, je donne de nombreux renseignements sur ce sujet.

Caractéristiques des images du site
– Format: JPEG.
– Taille (= plus grand côté): 2048 px (doit être supérieur à la taille standard d’un écran actuel : 1920px).
– Poids d’un fichier image: < 350 Ko . Pour ce faire, on comprime (compression Jpeg, ou en externe comme Shortpixel).
Pour les images de la page d’acceuil su site , faire plus court ( 150Ko Max): passer un coup de GTmetrix.

Paramètres de l’export “Image Web” dans Capture One:
-Format JPEG – qualité 70%.
– profil ICC: sRVB.
– Plus long côté : 2048 px.

Capture d’écran Capture One:

Pour tester les divers paramètres, j’ai crée une galerie de référence Envira (image de Longueur 2048px – largeur 1536px – format mft):
Galerie_de_reference_Long2048_Larg1536_mft.

La galerie est appellée par cette page:https://gilloup.com/?page_id=13503

Paramètres Envira
Voir la galerie

8 – LOGICIEL DE CARTOGRAPHIE LEAFLETJS

J’utilise la version 1.7.1 de LEAFLETJS (4 Septembre 2020).
Il s’agit d’une API Javascript, possédant une interface GeoJson (norme cartographique) – voir le tuto Leaflet geoJson.
Les coordonnées GeoJSON sont les degrés décimaux. Exemple: [48.858335, 2.294349] en degrés décimaux correspond à [48°51’30.0″N 2°17’39.7″E] en notation angulaire.
Avec 4 décimales (chiffres derrière la virgule), on a une précision de 11.1 m à l’ Equateur, avec 5 décimales 1,11 m (source Wikipédia ). Petit inconvénient : il faut inverser longitude et latitude entre les Degrés Décimaux GeoJson et ceux de Google (Map et Earth).

– Pour les clusters, j’ai utilisé ce Tutorial : nouvelle-techno.fr
– Pour les L.Controls : Datavis

Quelques outils de cartographie:
– Traitement de fichiers (kml, gpx) : convertisseur de coordonnées, gpsvisualizer , Kml2gpx
– Conversion kmz vers kml : utiliser le “sauvegarder sous …” de google Earth, et préciser “.kml”
GeoJSON validateur : Attention à enlever tout ce qui est avant et après le premier et dernier symbole ‘[‘.
MapsToGpx permet de convertir une URL Google Maps en fichier gpx (incorporable sous MyMaps, par ex.).

Mesure du temps d’exécution des scripts liés à LeafletJs
Mettre “console.time(“monTimer”)” en début du script, et “console.timeEnd(“monTimer”)”, en fin de script. La durée d’exécution s’affiche dans la console de debug(voir le post stackoverflow).

Compression des données JavaScript
jscompress.com

Problème du z-index avec un sticky header
Dans le cas de l’utilisation d’un sticky header, la carte passait au-dessus du header.
En rajoutant dans le fichier “additional_css” ce bout de code, on résoud le problème:
(Map est la Div contenant la carte, et ça sur toutes les pages utilisant leafletJs).

/* Code ajouté : map est la div contenant la carte */
div#map {
position: relative;
z-index: 1;
}


Explications:
– The stacking context (issu du post: https://stackoverflow.com/questions/65729550/sticky-header-z-index-lower-than-overlay-z-index-but-still-appears-in-front).
Using z-index (introduction à The stacking context ).
On voit bien dans le dessin (reproduit ci-dessous) du post The stacking context que la Div3 avec un z-index de 3 impose à elle-même et à tous ses dépendances ( Div4,5,6) de passer sous la div1 ( z-index=5 et qui peut etre assimilée à un sticky header) et sur la div 2 ( z-index=2).

Extrait de The stacking context :

Note sur le cas LeafletJs:
on peut penser (si LeafletJs est bien fait), que tous les z_index liés à la Div Map dependent de “Map”: donc Map impose son z_index (ça correspond au div3 de l’exemple ci-dessus). Si on le met à 1, alors que ceux de Astra sont au-dessus, on résoud le problème : les z-index Astra sont 2, 3 et donc au-dessus de Map: le sticky header sera toujours au-dessus.


9 – PASSAGE EN HTTPS

Tutoriel suivi: Comment passer de http en https sur un site en WordPress avec le plugin Really Simple SSL
Résumé:
1- obtenir le certificat SSL (gratuit) via l’autorité de certification letsencrypt.
2 – activer le certificat SSL sur son nom de domaine chez l’hébergeur.
3 – vérifier le certificat SSL sur le site : Qualys – SSL Labs
4 – Activer le plugin Really Simple SSL.
5 – vérifier toutes les pages de son site sur le site : JitBit

Notes:
1/ On peut désactiver le plugin et rester en https ou désactiver le plugin et revenir en http:
Can I deactivate Really Simple SSL after activating SSL?

2/ Grâce à Better Search Replace, j’ai pu remplacé facilement la string “http://gilloup.com” par “https://gilloup.com” Y COMPRIS DANS LA BASE DE DONNÉES. Après , il est resté quand même resté 1 “http” récalcitrant. Le site whynopadlock, qui porte bien son nom m’a permis de le localiser. Il se situait au niveau du plugin du theme Astra. J’ai forcé une reconfiguration d’Astra ,via une modification fictive, et voilà.
3/ Il faut fournir à l’hébergeur la clé TSL délivrée par letsencrypt , mais aussi rediriger vers un DNS donné . Ça n’a pas marché sans l’intervention d’un technicien : le ticket a été pris en compte dès le lendemain, et le problème résolu: efficace!

10 – HÉBERGEUR LWS

J’ai choisi Lws , hébergeur français (cocorico) . En version LWS Perso (1 nom de domaine + site de 200 Go), j’ai payé 21 Euros la 1ère année, 41 Euros la seconde.. Les interfaces Web sont simples, et j’effectue l’édition et la mise à jour des fichiers php , via un Web browser qui fonctionne bien. Pour ce prix , je n’ai pas de sauvegarde automatique, mais une sauvegarde journalière (ou lors de chaque modification) est effectuée sur le serveur Lws, entre 0h00 et 2h00. J’effectue régulièrement la sauvegarde manuelle du site (dossier wp-content+base de données) via le plugin Updraftplus.
En cas de crash complet, je recharge en ftp ( Filezilla), à la racine du site la version originale WordPress à laquelle j’ai enlevé le dossier wp-content.
Le nombre de sauvegardes (Web + Database) est limité à 15 sur le serveur Lws, mais on peut effectuer une compression de chaque sauvegarde sur son site ftp. En rapatriant ce fichier, ça permet de garder sa sauvegarde plus longtemps que les 15 sauvegardes officielles.

MIGRATION
J’ai d’abord développé mon site en local sous xampp. Puis j’ai migré vers le serveur de mon hébergeur LWS.
Logiciel utilisé: All-in-One WP Migration – Tutoriel: Migrer un site WordPress avec All in one WP Migration .
– installation de l’extension gratuite (de 128MB) à 512 MB : Install Instructions for File Extension et Increase 512MB Upload Limit for All-in-One WP Migration Plugin .


11 – OPTIMISATIONS DU SITE

1/ Utilisation des CDN pour les pages statiques
Une page de mon site nécessite entre 40 et 80 requêtes http (compte-rendu GTMetrix)( 100 avec les tiles OpenTopo ou OpenStreetMap). Afin d’améliorer le chargement des pages, les fichiers Leaflet sont stockés sur des CDN:
– leafletjs de base (1 fichier Css + 1 fichier Javascript): CDN unpkg.
– leaflet-omnivore (intégration kml, gpx: 1 fichier Css): CDN mapbox.
– leaflet-fullscreen (passage en plein écran: 1 fichier Css+ 1 Js) : CDN mapbox. Voir le tuto Mapbox: View a fullscreen map
– clusters Leaflet : MarkerCluster (2 fichiers Css + 1 fichier Js): CDN unpkg.

2/ Optimisation des images
Toutes les images présentes sur mon serveur ont été optimisées avec le logiciel Shortpixel (mode Lossy: légère perte de qualité).
Voir mon article Photographie – Taille et résolution des images pour le Web et l’impression.

3/  enable browser caching : cache image navigateur
Afin de laisser dans le cache des navigateurs les images pendant un certain temps ( car les utilisateurs vont souvent sur les même sites ) , il faut modifier le fichier “.htaccess” . Voir ce tuto GtMetrix : PageSpeed: Leverage browser caching

4/ Autres optimisations
Au niveau WordPress, j’ai appliqué toutes les optimisations préconisées par ce site (sauf la 14eme : remove dashicons , car ils sont utilisés par Astra )
Voir ce tuto : 14 WordPress Performance Optimization to do Without Plugin . Il s’agit essentiellement de modifier le fichier du thème: function.php
Afin de valider ces optimisations, j’ai utilisé l’outil gtmetrix.

5/ Protection du site
Trois semaines après sa mise en ligne , mon site a été piraté. Voilà comment j’ai procédé pour le nettoyer.
1. Download de TOUT mon site sur mon PC , via ftp ( 15 mn de download – sans doute plus facile via le tar.gz possible de Lws)
2. Passage à l’anti-virus Avast du site downloadé.
3. Suppressions des fichiers infectés (hack majeur : wp-config.php), et des fichiers et dossiers nouveaux ajoutés par le Malware.
4. Installation propre de WordPress (directement via les menus de Lws , et non en ftp).
5. re-download sur PC de l’intégralité du site , repassage à Avast : 0 problème.
6. Remise en place du site, par l’intermédiaire des sauvegardes UpdraftPlus. Voir plus bas le chapitre : sauvegarde du site.
(onpeut aussi uploader les fichiers désinfectés depuis son PC vers le serveur LWs, via ftp).

6/Nettoyage de la base de données
En mode automatique : Wp Optimize : Comment paramétrer WP Optimize pour nettoyer et optimiser sa base de données

7/ Augmentation de la vitesse d’accès aux pages
Ceci est réalisé par le plugin W3 Total Cache . Un chapitre y est consacré plus loin.Il est facile de voir le résultat grâce à GTMetrix.

PROCÉDURE DE RESTAURATION DU SITE

– Si Accès Worpress possible: faire un restore UpdraftPlus depuis la console d’administration.
– Sinon, chez l’hébergeur (lws) , lancer un restore complet, avec une des sauvegardes disponibles ( menu: “Sauvegarde” et “voir Listing de vos sauvegardes disponibles” ).
– Si les fichiers WordPress eux-mêmes sont vérolés, recharge des fichiers via ftp , ou depuis Lws.


12 – NETTOYAGE DE LA BASE DE DONNEES AVEC LE PLUGIN WP-OPTIMIZE

De temps en temps je nettoie ma base de données avec Wp-Optimize. L’opération peut être automatisée ( fréquence régulière). Voici mon paramétrage:


13 – SAUVEGARDE DU CONTENU DU SITE

Celle-ci est effectuée grâce à UpdraftPlus. Je sauvegarde tout sur mon Google Drive.
Mon paramétrage : Sauvegarde totale = Database + Plugins + Thèmes + Uploads + Others
Voir ci-dessous un exemple de résultat UpdraftPlus.

 

14 – PROTECTION DU SITE

La Protection du site est axée sur l’utilisation de Cloudflare et du plugin Wordfence. On a donc 2 niveaux de protection:
– Niveau 1: Cloudflare
– Niveau 2: Wordfence

14.1- Utilisation de Cloudflare

Principe:
Cloudflare transmet toutes les en-têtes HTTP telles quelles du client au serveur du site et ajoute des en-têtes supplémentaires. Pour plus de détails : Comment Cloudflare gère les en-têtes de requêtes HTTP ? (Source Cloudflare)

Comment Fonctionne Cloudflare? (Source Cloudflare)


Pour plus de détails:
https://blog.lws-hosting.com/hebergement-mutualise/configurer-vos-serveurs-de-noms-de-domaine-pour-le-cdn-cloudflare
https://kinsta.com/fr/base-de-connaissances/installer-cloudflare/

Tuto d’Install Cloudflare (hébergeur Kinsta): https://kinsta.com/fr/base-de-connaissances/installer-cloudflare/
Il faut fourbir à Cloudflare les adresses des serveurs.

Une fois son site Web activée (ici: gilloup.com) sur le site de Cloudflare, la page DNS de Cloudflare est la suivante. La 2ème image contient le nom des serveurs Cloudflare à renseigner ultérieurement chez son hébergeur.

Note : Supprimer les types MX ( mails).

tutoriel Lws pour Cloudflare
https://aide.lws.fr/base/Noms-de-domaine/Gerer-un-nom-de-domaine/changer-dns-lws

Sauvegarde des serveurs Cloudflare sous Lws:
Menu Lws: Gestion du domaine –> Serveur DNS.
Cocher “Autres Serveurs” et rentrer les noms des serveurs Cloudflare.


Actions rapides Clouflare

Cloudflare a prévu un certain nombre d’actions rapides :

1 – Vider le cache

2 – Paramètres DNS ( visualisation et modification)


On peut dévalider temporairement Cloudflare : Dans le sous-menu DNS de Cloudflare, cliquer sur le nuage orange . Une fenêtre s’ouvre.
Recliquer sur le nuage orange, on dévalide ainsi le proxy, mais on conserve le DNS : enregistrer.

3 – Mode Under Attack
Pas encore utilisé.

4 – Mode développement
Trés pratique: quand on modifie son site, le cache est un handicap, car il empêche de voir en temps réel ses modifications. Cloudflare a mis en place un bouton : Développement à activer pendant ces phases : c’est pratique.

Mode développement
: passer à On


Menu Analytics de Cloudflare

Ce menu est très pratique et très lisible, pour le traffic.

Option “Cloudflare Always Online”

Cloudflare propose une option de mise en ligne partielle du site en cas d’indisponibilité du serveur. Option validée: à tester dans la durée. Voir: Understanding Cloudflare Always Online

14.2 – Utilisation du plugin Wordfence

Le Plugin Wordfence reçoit les requêtes HTTP modifiées par Cloudflare, et agit comme protection en dernier ressort.
Wordfence est totalement compatible Cloudflare. Il faut simplement lui dire d’utiliser l’en-tête HTTP Cloudflare «CF-Connecting-IP». Pour ce , faire comme suit:
Menu : Wordfence -> General Wordfence Options -> How does Wordfence get IPs.
Cocher la case :” Use the Cloudflare “CF-Connecting-IP” HTTP header to get a visitor IP. Only use if you’re using Cloudflare.”
Voir : Wordfence -options globales


15 – MISE EN CACHE DU SITE AVEC LE PLUGIN W3 TOTAL CACHE

J’ai utilisé cet excellent tutoriel, car il fournit un fichier de configuration, qu’il suffit d’importer dans W3TC (W3 Total Cache). De plus, les paramètres du fichier intègrent l’aspect Cloudflare.
Speed Up Your WordPress Site with W3 Total Cache + Cloudflare CDN: Step-by-Step Tutorial

Une fois le fichier chargé, il faut juste faire 2 choses :
– valider le SSL ( car non réalisé par le fichier importé)
– renseigner son nom de domaine: faire “Reauthorize” dans le menu ci-dessous. En cliquant sur Reauthorize , une fenêtre s’ouvre en demandant le mail et la clé API de Cloudflare: aller les chercher sous son compte Cloudflare. Le nom de domaine est alors renseigné automatiquement.


Attention: le logiciel WP-Optimize réalise aussi du “cache serveur”, mais il reconnait que W3TC fait le travail et dévalide alors son cache. Au cas ou, vérifier, et dévalider le cache de WP-Optimize. On ne gardera WP-Optimize que pour l’optimisation de la base de données.


16 DEBUG DU SITE

16-1 Lecture des fichiers de log de l’hébergeur

Aller voir les logs Apache du serveurs Lws; mais si un script php plante ( cas le plus fréquent) , ce n’est pas facile de savoir où il a planté.

Modifier wp_config.php pour avoir des traces

16-2 Debug avec accès à la console d’administration

  • Restauration : aller chercher une Sauvegarde UpdraftPlus , et faire un Restore
  • Problème dans un plugin: les déselecter un à un, puis les remettre.
  • Problème dans le thème: On peut aussi changer le thème, et affecter le thème par défaut.

16-3 Debug sans accès à la console d’administration

  • Restauration à partir d’une sauvegarde Lws. Aller chez l’hébergeur , lancer une restauration ( 5 minutes). Chez Lws, pour voir si elle est terminée, il faut quitter l’onglet de restauration, puis y revenir.
  • Restauration WordPress à artir de son ftp. Mettre un original WordPress sur un PC , et l’uploader sur son site.

 

16-4 Restauration de WordPress en ftp sans perdre le contenu du site

Voir dans le tuto suivant la partie Restaurer les fichiers WordPress à l’aide de SFTP qui explique parfaitement ce qu’il faut faire :
https://kinsta.com/fr/blog/restaurer-sauvegarde-wordpress/ *****

Résumé :
1 – Télécharger la dernière version de WordPress
2 – Décompresser le fichier zip
3 – Supprimer le dossier WP_content
4 – Télécharger tout à la racine du site: A l’apparition du popup FTP « Le fichier cible existe déjà », sélectionner l’option Écraser et continuez (toujours).

Comme on a supprimé le dossier WP_content, cela écrasera tous les fichiers WordPress de base sans affecter aucun de vos thèmes ou plugins (contenus dans WP_content). Une fois le téléchargement terminé, on a une copie fraîchement installée des fichiers de base de WordPress.

Rappel : l’organisation des fichiers de WordPress
https://capitainewp.io/formations/developper-theme-wordpress/organisation-fichiers-base-donnees-wordpress/

Syndrome de la page blanche ou « white screen of death (WSD) »
Dans la plupart des cas, c’est un plantage WordPress ( y compris sur l’url: site.com/wp-admin). Il faut recharger WordPress comme précédemment à la racine du site.
Un plantage de script php est souvent à l’origine.

16-5 Recharger une ancienne version de plugin

 Kinsta – Comment télécharger une ancienne version de plugin

Mode d’emploi:
1 – Sauvegarde du site et de la base de données
1 – Aller sur la page du plugin
2 – Aller sur Advanced View
3 – En bas de la page, sélecter la version à charger dans : « Please select a specific version to download. »
4 – Le Zip est alors downloadé sur le PC.
5 – en FTP, aller sur le site et changer le nom de l’ancien plugin par plugin_old
6 – Dans le Menu « Plugin » de WordPress, cliquer sur « Add New« 
7 – Dans la page qui s’ouvre , cliquer sur « upload Plugin« , sélectionner le plugin au format zip chargé au point 4.  Il s’installe
8 – il ne reste plus qu’à l’activer.
Exemple pour le plugin Gutenberg: https://wordpress.org/support/topic/version-9-8-broke-my-website/


17 – EDITEUR GUTENBERG

Gutenberg indisponible:
– dans la console d’admin: Preferences –> Writing : cocher Classic Editor par défaut.

Raccourcis Gutenberg:
-Souligner : Ctrl+U
– Retour ligne : Maj+Enter
– Editeur WP du Plugin Classic Editor:
Tab= 3 blancs (sur NotePad, Tab= 4 Blancs – menu NotePad: Paramètres->Préférences->Langages ->Tabulations: Taille:3 ).
Liste des raccourcis Gutenberg

Extrait des raccourcis Gutenberg:

18 – DIVERS


18.1 – Utilisation de Smart Slider 3 pour le slider de la page d’acceuil
J’ai utilisé le plugin gratuit Smart Slider 3.
Attention: si le slidder n’apparait pas,vider le cache CDN (Source Smart Slider) : Empty space where the slider should be

18.2 – Vidage du cache Chrome
Dans Chrome, à droite , au niveau du menu avec 3 points verticaux :
Plus d’outils Effacer les données de navigation : Cocher “Images et fichiers en Cache”
Raccourci clavier : Ctrl + Shift (Maj) + Delete (Suppr)

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top