par Anne-Laure DELPECH | 27 Nov 2017 | Art numérique, Processing
J’essaie ici d’afficher un visuel écrit en processing (fichier .pde) tel quel sur mon site WordPress. J’utilise l’extension ProcessingJS for WordPress. Et ça fonctionne très bien, même s’il y a des limitations.
Installer et activer l’extension
Installer et activer l’extension ProcessingJS for WordPress par Rolf van Gelder.
Sous le nom de l’extension, dans la page des extensions, il y a un lien vers une page « instructions ». C’est là que j’ai copié puis collé les shortcodes à utiliser. Mais c’est la même chose que sur la page de présentation de l’extension.
Essai n°1 : taper le code directement dans le contenu WordPress
Je copie et colle ce qui est proposé par l’auteur de l’extension :
[pjs4wp]
void setup()
{
size(200, 200);
text(« Hello world! », 50, 50);
}
[/pjs4wp]
Et voilà le résultat, moche mais simple !
Essai n°2 : lire un fichier processing (.pde)
J’ai un fichier d’essai sollewitt4.pde. Je le renomme sollewitt4.js sans rien changer d’autre que le type de fichier (pde devient js).
Dans la bibliothèque de média, je charge ce fichier puis je note son url (https://knowledge.parcours-performance.com/wp-content/uploads/2017/11/sollewitt4.js).
Ensuite je saisis le shortcode suivant :
[pjs4wp url="/wp-content/uploads/2017/11/sollewitt4.js" bordercolor="#000"][/pjs4wp].
Voici le résultat :
On voit que l’écran ne s’adapte pas à la page (pas responsive) – L’écran fait 1200 px par 800 px comme défini dans le sketch.
Avec un éditeur de texte type notepad++, je modifie donc la taille de l’écran défini dans setup, pour le ramener à 600px par 400 px, je charge le nouveau fichier dans les médias, sollewitt4-600-400.js et j’utilise le shortcode [pjs4wp url="/wp-content/uploads/2017/11/sollewitt4-600-400.js" bordercolor="#000"][/pjs4wp]
Et voilà !
Les limites de l’extension
L’écran de visualisation du sketch Processing ne paraît pas responsive, en tous cas pas lorsqu’il est défini en « dur », en disant explicitement size(1200, 800);
Si j’essaie en remplaçant la taille de l’écran par fullScreen();
Ca ne fonctionne pas du tout…
Donc pour l’instant les limites de cette extension sont :
- impossible d’utiliser une fenêtre responsive ;
- pas de possibilité d’avoir des fichiers associés au script.
Mais je suis déjà très contente d’obtenir ce résultat.
Je ferai d’autres essais ultérieurement.
par Anne-Laure DELPECH | 26 Nov 2017 | Art numérique, Processing
J’ai entendu parler plusieurs fois de Processing, sans trop savoir à quoi ça pouvait me servir ni comment l’utiliser. Et puis je me suis inscrite au cours « Art Numérique » des Beaux Arts de Quimper (site de l’école ou site de partage du cours). Et je m’y met.
Dans ce premier article sur Processing, dans la série Découverte de Processing, je vais simplement mettre des liens qui m’ont paru intéressants vers d’autres sites qui parlent de Processing.
Que peut-on faire avec Processing ?
Une réalisation d’une ancienne élève du cours Art numérique : ici sur le site du cours.
Le site Beautiful Programming qui présente de très beaux exemples d’art génératif et interactif. J’aime tout particulièrement le « Infinite Arboretum » qui dessine automatiquement un arbre et le modifie selon ce que l’on fait avec la souris ou le clavier :
Un exemple d’arbre généré automatiquement. En cliquant, vous allez sur le site de l’auteur.
Un site regroupe de nombreux exemples avec le code : OpenProcessing
Algorithm Ink de Aza Raskin montre une réalisation intéressante et son code (en cliquant sur le bouton edit)
Processing drawings présente des projets visuels et leur code.
Generative Art Links contient des liens vers des projets visuels mais aussi des logiciels utilisables pour de l’art numérique.
La page « processing : Ressources Processing et tutoriels en ligne » contient de nombreux liens vers des sites intéressants.
Le site GuruBlog contient une galerie de sketch Processing.
Le site de Jm Commenge contient des exemples intéressants.
Ce site présente un projet associant Processing et Twitter pour animer du plancton.
Sur CodePen.io on peut voir de nombreuses réalisations utilisant Processing.js et taggée « processing »., ou contenant « p5 » Par exemple cette réalisation de Kultur Design, une animation de polygones SVG :
See the Pen SVG Polygon Animation by Kultur Design (@kulturdesign) on CodePen.
Sur CodePen, Lionel Radisson a réuni une collection liée à Nature of Code (le livre je pense).
J’ai entamé une collection de travaux sur CodePen en lien avec p5.js, visible ici.
Références sur le code Processing
Processing.org est le site de référence pour Processing, et aussi pour p5.js une bibliothèque JavaScript qui lit le code Processing sur un site ou une application web.
The Nature of Code permet d’acheter un livre très intéressant sur Processing et aussi de le lire en ligne.
Contributed Tools, Projects, Demos · processing/p5.js est le Wiki pour p5.js, .
Education · processing/p5.js est un Wiki consacré à l’enseignement de p5.js pour Processing.
Des cours sur Processing sont disponibles sur le site de Electronic Media Studio. Le menu « Lectures » contient plusieurs cours et dans la barre latérale, on trouve de nombreux exemples d’exercices.
Le site Arts Numériques contient de nombreux tutoriels sur Processing.
Processing Quick Start nous parle de Processing.js, une autre bibliothèque JavaScript pour Processing.
Le site du livre Design Génératif : un livre excellent, mais cher. J’ai pu l’emprunter à la bibliothèque de l’école des Beaux Arts de Quimper. On peut télécharger tous les exemples de codes sur le site. Beaucoup sont très très intéressants.
Pour démarrer dans l’utilisation de svg créés avec Inkscape et utilisés dans Processing : how to use svg for rigged 2D-animations in processing.
Un lycée a mis en ligne quelques exemples et exercices lié à des oeuvres d’art.
Un cours en ligne, en anglais, très bien fait pour apprendre rapidement les rudiments de Processing : Le cours CS1335 de Karen Doore
Placer un sketch Processing dans un site WordPress
Embedding p5.js processing sketches in WordPress posts sur le site weegreenblobbie.com
Embedding p5.js · processing/p5.js sur GitHub explique comment on peut visualiser du code Processing / p5.js sur un navigateur avec iframe dans une page html ou des sites de partage et visualisation de code tels que CodePen ou JSFiddle.
Creative Computation » Embedding a Processing Sketch expose diverses solutions pour placer un sketch Processing dans une page html.
Enfin, deux extensions WordPress paraissent intéressantes pour intégrer du Processing à un site :
Processing.js for WordPress et ProcessingJS for WordPress. Elles sont toutes deux gratuites et ont été mises à jour récemment.
Javascript ou Processing ?
Les bibliothèques javascript citées plus haut (P5.js ou processing.js) permettent de créer des scripts visualisables en ligne. C’est quand même très pratique….
Si on veut apprendre P5.js, un excellent tutoriel en français a été réalisé par B2renger.
Processing et Arduino ou Raspberry Pi
Ce tutoriel, en anglais sur Instructables, explique comment utiliser un Raspberry Pi pour des sketchs Processing. Adafruit a également fait un tutoriel sur l’utilisation du Pi avec Processing 3.
L’article « Récupérer une valeur analogique Arduino avec Processing » me parait être une bonne base pour démarrer. On peut remplacer les photo-résistances par d’autres capteurs analogiques.
Il y a aussi un manuel Floss spécifique à Arduino et un Chapitre Arduino du Manuel Floss sur Processing.
Pour le Raspberry Pi, on peut lire Introduction to Processing sur le site Raspberry Pi Projects, ou Processing on the Raspberry Pi & PiTFT sur le site Adafruit Learning System.
Et pour un ensemble Arduino Uno, Raspberry Pi utilisant Processing : Raspberry Pi + Processing + CT UNO (Part 2) , un tutorial de Cytron.
On peut contrôler l’arduino en C++ et simplement le faire communiquer avec Processing ou le contrôler en Processing. Voir les explications de Arduino Playground ou Learn Sparkfun.
Le site Arts Numériques contient également des tutoriels sur Arduino.
Art et Arduino
Mes projets
Me familiariser avec Processing :
Et je veux également voir comment intégrer ces travaux dans des pages web. J’essaierai donc CodePen, JSFiddle et les deux extensions WordPress ci-dessus.
Ca m’intéresserait aussi de savoir faire les images suivantes, il me semble que Processing est bien adapté pour :
Vous verrez la suite dans les prochains articles de cette série Découverte de Processing !
par Anne-Laure DELPECH | 21 Oct 2017 | arduino
Je veux depuis longtemps détecter le niveau de lumière dans mon garage pour déclencher automatiquement l’éclairage quand quelqu’un passe et qu’il fait trop sombre. Je me suis enfin décidée à réaliser un prototype. Je l’ai fait en deux temps : en simulation, en réel sur breadboard. Dans ce premier article de la série Arduino : détection de lumière et de mouvement, j’explique les étapes de simulation puis de montage en prototype. D’autres articles expliqueront comment communiquer les données à un serveur, et comment actionner une lampe à partir de ce montage.
Ce que je veux obtenir
Je veux un système qui, lorsqu’il détecte une présence exécute les actions suivantes :
- afficher « motion detected » sur l’écran LCD ;
- afficher la luminosité mesurée sur l’écran LCD ;
- émettre un son pour indiquer qu’une présence a été détectée ;
- allumer une LED rouge pour indiquer qu’une présence a été détectée.
Lorsqu’aucune présence n’est détectée, le montage ne fait rien d’autre que d’afficher « Waiting for motion ».
Un montage simulé sur ordinateur !
J’ai longtemps utilisé https://circuits.io/ pour simuler des montages avec Arduino. Mais maintenant il est intégré à Tinkercad (fonction circuits).
Processus d’expérimentation par simulation
J’ai procédé par itérations successives :
- placer un arduino et un détecteur de mouvement
- ajouter un écran LCD ;
- Ajouter une LED rouge ;
- Ajouter une cellule photoélectrique ;
- Ajouter un haut-parleur ;
- Faire défiler le texte d’attente pour économiser l’écran.
A chaque étape, je valide le code avec la fonction « start simulation » inclue dans Tinkercad.
Toutes ces étapes sont finalisées sur Tinkercad, dans le circuit « Arduino with PIR and light sensor, LCD display and speaker«
Le code
Le code complet est téléchargeable :
Dans le code, on notera simplement que :
- le détecteur de lumière répond par une valeur analogique de 0 à 1023 ;
- le détecteur de présence est soit HIGH, soit LOW.
- L’écran LCD est compatible avec le driver Hitachi HD44780 (comme la plupart des écrans avec 16 broches) et utilise la bibliothèque LiquidCrystal.h .
- On utilise lcd.print(photocellReading); et surtout pas lcd.write(photocellReading); pour afficher la valeur de résistance photoélectrique. La deuxième commande aurait affiché le caractère ASCII correspondant à la valeur de photorésistance (par exemple « a » si la photorésistance avait une valeur de 97).
Les composants
J’avais certains composants et j’ai commandé les autres. Je n’indique la source des composants que pour ceux que j’ai commandé récemment (octobre 2017).
La liste des composants
| Nom |
Quté |
Source / commentaire |
Prix |
| Arduino Uno R3 |
1 |
|
|
| Photorésistance |
1 |
Sur Amazon.fr ici |
5.90 € les 10 |
| Capteur de mouvement (PIR Sensor) |
1 |
Sur Amazon.fr ici |
7.99 € les 3 |
| écran LCD 16 x 2 |
1 |
Sur Amazon.fr ici. Attention, les broches ne sont pas fournies avec, il faut en souder. |
5.99 € les 2 |
| Résistance 1 kΩ |
1 |
marron / noir / noir / marron, pour l’écran LCD |
|
| Potentiomètre |
1 |
Remplacé plus tard par une résistance 1.5kΩ |
|
| Résistance 10 kΩ |
1 |
marron / rouge / noir / noir pour la photorésistance |
|
| LED rouge |
1 |
|
|
| Résistance 220 Ω |
1 |
rouge/rouge/marron, pour la LED rouge |
|
| Haut-parleur |
1 |
Je l’avais démonté d’un appareil usagé. |
|
Tous mes composants (ou presque) sont prêts :
Arduino, mouvement et luminosité : Les composants (manque led rouge)
Sur la photo, il manque la led rouge et le haut-parleur. On notera aussi que je me suis trompée pour la résistance de 10KΩ, qui ne faisait que 1kΩ en fait. J’ai corrigé dans le montage.
Choix de la résistance associée à la cellule photoélectrique
J’ai lu attentivement ce tutoriel d’Adafruit. Il explique en anglais comment choisir la valeur de la résistance « pull-down » selon l’environnement lumineux que l’on a. On choisira une valeur faible (1 KΩ) si on veut différencier des niveaux importants de lumière. On préférera une résistance de 10 KΩ si on veut différencier des ambiances sombres, ce qui est mon cas.
Choix de l’alimentation
L’Arduino peut être alimenté en USB en 5V mais il est préférable de l’alimenter en 7-12V par l’intermédiaire de la prise jack. Pour le prototype, j’ai utilisé une alimentation 12V (DC, attention à ne pas choisir une alimentation en courant alternatif) et 500 mA.
Passage à la phase prototype
Il nous faut monter en réel ce schéma (sur Tinkercad ici) :
Le schéma complet du montage Arduino + détecteur de mouvement + détecteur de luminosité + écran LCD + LED rouge + haut-parleur
Préparer le montage
Le schéma est assez complexe à réaliser. J’ai donc préparé trois éléments pour être certaine de ne pas me tromper et j’ai réalisé les cablages dans l’ordre de ces trois documents :
Elément 1 : câblage de l’arduino
| De |
A |
Couleur |
| 5V |
breadboard |
rouge |
| GND |
breadboard |
noir |
| A0 |
Photorésistance |
mauve |
| 2 |
RS LED |
marron |
| 3 |
E LED |
gris |
| 4 |
DB4 LED |
bleu clair |
| 5 |
DB5 LED |
violet |
| 6 |
DB6 LED |
vert |
| 7 |
DB7 LED |
orange |
| 8 |
PIR |
jaune |
| 11 |
LED |
bleu vif |
Elément 2 : câblage de l’écran LCD 16×2 :
| De |
A |
Couleur |
| GND |
breadboard |
noir |
| VCC |
breadboard |
rouge |
| V0 |
Potentiomètre |
orange |
| RS |
Arduino 2 |
marron |
| RW |
GND breadboard |
noir |
| E |
Arduino 3 |
gris |
| DB0 |
/ |
|
| DB1 |
/ |
|
| DB2 |
/ |
|
| DB3 |
/ |
|
| DB4 |
Arduino 4 |
bleu clair |
| DB5 |
Arduino 5 |
violet |
| DB6 |
Arduino 6 |
vert |
| DB7 |
Arduino 7 |
orange |
| LED |
5V breadboard |
rouge |
| LED |
Résistance 1 kohm |
noir |
Elément 3 : cablage du breadboard (plaque de prototypage) :
Arduino, mouvement et luminosité : préparation branchements
Le code
J’ai utilisé ce code Arduino, mouvement, luminosité, LCD et speaker : le code ARDUINO.
Vérifier le fonctionnement
Arduino, mouvement et luminosité : mouvement détecté, luminosité mesurée
Arduino, mouvement et luminosité : en attente de mouvement
Ca fonctionne comme je veux. Et l’affichage défile lorsqu’il est en attente.
Remplacement du potentiomètre
J’ai mesuré avec un ohmmètre la valeur de la résistance du potentiomètre correspondant à un affichage correct sur l’écran LCD (contraste permettant la lecture). J’ai obtenu 1.2 KΩ. J’ai enlevé le potentiomètre et mis une résistance de 1.5 KΩ (pas de 1.2 sous la main), qui fonctionne très bien. J’ai mis une borne de la résistance sur GND, supprimé le fil rouge pour le VCC du potentiomètre et mis l’autre borne de la résistance sur le fil orange qui va à V0 de l’écran LCD.
Le code qui inclut le potentiomètre n’a pas besoin d’être changé puisque le potentiomètre n’était pas lu par l’Arduino.
Et maintenant ?
Il va falloir que je place ce prototype dans un boitier et que je réalise les soudures pour rendre les branchements définitifs. Mais je veux aussi pouvoir envoyer les données mesurées à un serveur externe. Ces projets feront l’objet d’articles à venir, dans cette série Arduino : détection de lumière et de mouvement.
par Anne-Laure DELPECH | 12 Oct 2017 | développement web
J’explique ici la longue liste des actions à réaliser pour déplacer le contenu d’un site de tests (développement) vers le site de production. En écrivant celà, je conserve une trace de tout ce qu’il faut faire et vérifier avant de déclarer que le site a été modifié avec succès.
Ce tutoriel s’applique en totalité dans le cas suivant :
- Votre ancien site utilise WordPress et est hébergé sur Infomaniak et n’utilise pas l’un des thèmes Premium mis gratuitement à disposition par Infomaniak ;
- Votre nouveau site utilise WordPress et sera toujours hébergé sur Infomaniak et utilisera le thème Divi (ou sans doute un autre des thèmes Premium) ;
Si vous utilisez un thème que vous pouvez télécharger via votre tableau de bord WordPress, ou que vous pouvez installer en FTP, le changement sera un peu plus simple puisque vous n’aurez pas à gérer l’installation du thème par le serveur Infomaniak.
Le principe général
J’ai un site de développement, qui s’appelle test.exemple.com. Il est finalisé et je veux que ce soit le site qui sera disponible sur exemple.com. Exemple.com est mon site de « production », le site que les internautes voient. Je souhaite que le transfert génère le moins de perturbation possible.
Pour l’essentiel, c’est simple :
- importer les tables de la base de données de test (corriger le prefixe dans wp-config si nécessaire) dans la base de données du site à transformer ;
- Copier les fichiers contenus dans wp-content du site de test vers le site à transformer ;
- Eventuellement désactiver toutes les extensions puis les réactiver.
La difficulté c’est que le thème employé (DIVI) et certaines extensions (elegant theme (monarch, divi builder et bloom) sont fournies gratuitement par Infomaniak et doivent être installées à partir de l’interface Infomaniak pour que l’on dispose automatiquement des mises à jour ensuite. Si on les installe en FTP, la mise à jour automatique ne fonctionne pas.
La phase 1 : Préparation
Check list récapitulative : Phase 1 Préparation
| « Photos » de l’ancienne version du site |
|
| Exporter les réglages du thème Divi ou son thème enfant |
|
| Dans site test Désactiver le thème DIVI et toutes les extensions, ou au moins les extensions Elegant Theme (Divi builder, bloom et Monarch) |
|
| Dans site test, mettre en mode maintenance |
|
| Sauvegarder la base de données du site de test |
|
| Sauvegarder la base de données du site à modifier |
|
| Faire une copie de wp-config.php du site à modifier |
|
| Faire une copie de wp-config.php du site de test |
|
| Copier les fichiers de wp-content du site à modifier |
|
| Copier les fichiers de wp-content du site de test |
|
| Supprimer les répertoires Divi, divi builder, bloom et monarch de la copie du site de test |
|
Garder des traces de l’ancien site
On peut faire des « photos » des pages intéressantes du site qui va disparaître (exemple.com). J’ai utilisé les captures d’écran des outils de développement Chrome (article en anglais ici) .
Exporter les réglages du thème Divi
Si le site à transformer utilise le thème Divi, ou un thème enfant de Divi, il vaut mieux en exporter tous les réglages également, pour avoir une copie en cas de problème. Tout est expliqué dans cet article : Importer et exporter des paramètres et modèles du thème Divi pour WordPress.
Désactiver les extensions et changer de thème sur le site de test
Dans le tableau de bord WordPress du site test, désactiver le thème Divi et les 3 extensions Elegant Theme (monarch, divi builder et bloom). En effet, c’est Infomaniak qui gérera l’installation et l’activation de ces thèmes et sites.
Mettre le site test en mode maintenance
On devrait mettre le site de test en mode maintenance, de manière à ce que ce mode soit immédiatement appliqué dans le site à transformer. Pour ce faire, on peut se lire cet article, How To Put WordPress Site Into Maintenance Mode, ou utiliser l’extension « Maintenance Mode« , de Lukas Juhas.
Exporter une copie des bases de données
Sur le compte Infomaniak, les bases de données peuvent être exportées dans le menu bases de données d’infomaniak.
Pour les options, on choisit Gzippé, DROP Table et CREATE TABLE IF NOT EXIST
On exporte la base de données du site de test et la base de données du site à modifier.
Copier les fichiers de wp-content et wp-config.php
Avec le FTP en ligne d’infomaniak (en tous cas pour ceux qui ont des connexions lentes et ne veulent pas rapatrier les fichiers dans leur ordinateur), faire une copie des fichiers et répertoires suivants vers un répertoire ald-utils/site-date/ que j’ai mis à la racine de l’hébergement :
- wp-config.php
- fichiers de wp-content/plugins
- fichiers de wp-content/themes
- fichiers de wp-content/uploads
A faire pour le site à transformer au cas où.
A faire pour le site de tests. Pour celui-ci-, dans le répertoire de destination de la copie (je l’ai appelé ald-utils/test-exemple-2017-10-10/, j’ai supprimé les fichiers du thème Divi et des extensions Divi Builder, Bloom et Monarch. Je les réinstallerai via l’interface Infomaniak.
Phase 2 : transformer le site !
A partir de maintenant, toutes les actions concernent exclusivement le site cible.
Durant cette phase, le site de production entre en maintenance pour une durée de l’ordre de 10 à 15 minutes, plus si on veut faire les phases suivantes en maintenance aussi.
Check list récapitulative : Phase 2 transformation !
| Mettre le site à transformer en maintenance |
|
| Copier les fichiers (sauf extension de maintenance) |
|
| Modifier si nécessaire le préfixe de base de données du site à transformer |
|
| Importer la base de données de test dans la base de données cible |
|
| changer les adresses des liens dans cible avec Search-Replace-DB-master |
|
| vérifier que tout fonctionne |
|
| Désactiver les extensions du site |
|
| Dans le tableau de bord Infomaniak, vérifier les réglages |
|
| Installer Divi et les extensions Elegant Theme souhaitées |
|
| Activer les extensions |
|
| Régler le thème enfant de Divi (ou le thème Divi) |
|
Mettre le site à transformer en maintenance
mettre le site en maintenance, comme pour le site de test dans la phase de préparation.
Copier les nouveaux fichiers dans wp-content du site à transformer
copier les fichiers du site de test dans wp-content de la cible : répertoires plugins, themes et uploads. On supprime d’abord ceux qui sont présents (à l’exception de l’extension de maintenance) puis on fait la copie.
wp-config.php : Modifier si nécessaire le préfixe de base de données
Il faut que ce soit le préfixe de la nouvelle base que l’on va importer.
Importer la base de données de test dans la base de données cible
Importer la base de données de test dans la base de donnée de la cible.
changer les adresses des liens dans la cible avec Search-Replace-DB-master
On remplace https://test.exemple.com par https://exemple.com. Dans mon cas, 16 437 valeurs ont été changées !
On n’oublie pas de supprimer le répertoire dans lequel on a placé Search-Replace-DB-master.
vérifier que tout fonctionne
On vérifie pour :
- le mode maintenance si on n’est pas connecté en tant qu’administrateur
- le site si on est connecté en tant qu’administrateur
- le tableau de bord WordPress si on est connecté en tant qu’administrateur
ATTENTION AU CACHE DE CHROME…
pour une raison que j’ignore chrome redirige la cible vers test mais pour autant firefox affiche correctement, et via « voir le site » d’infomaniak ça fonctionne aussi… Dans chrome il faut taper https://exemple.com/?donotcachepage pour que ça fonctionne sans rediriger… aussi https://exemple.com/wp-login.php?donotcachepage
Désactiver les extensions du site
Dans le tableau de bord WordPress, désactiver toutes les extensions, sauf celle de maintenance
Dans le tableau de bord Infomaniak, vérifier les réglages
- vérifier les réglages de l’hébergement :
- version PHP 7.1
- max_execution_time à 300 secondes
- memory_limit à 640 Mo
- Compression des fichiers ON
- Module Google PageSpeed ON
Installer Divi et les extensions Elegant Theme souhaitées
- Dans « mon site WordPress » >> Paramètres, activer le thème DIVI (sans importer le contenu de démonstration du thème)
- installer (sans activer) Monarch et Bloom
L’extension Divi Builder est installée automatiquement lorsqu’on installe le thème Divi.
Activer les extensions
Nota : il vaut mieux ne pas activer WP Super Cache à ce stade.
Nota : le site doit avoir l’extension « Customizer Export/Import » de Beaver builder si on utilise un thème enfant de Divi.
Régler le thème enfant de Divi (ou le thème Divi)
Activer le cas échéant le thème enfant de Divi.
Importer les réglages de thème du site test (ils ont été exportés dans la phase 1 de préparation).
- fichier en .dat si thème enfant pour la personnalisation (via Export/import tout en bas du menu de personnalisation du thème enfant) ou fichier Json si thème Divi utilisé directement
- fichiers Json pour les options et la bibliothèque Divi
A ce stade, le site se présente exactement comme le site test initial. Il est cependant toujours en mode maintenance. On peut le remettre en production si on le souhaite.
| activer et vérifier le réglage de google analytics |
|
| saisir les redirections dans l’extension redirections |
|
| dans réglages / lecture : autoriser la lecture par les robots |
|
| réactiver yoast seo |
|
| Vérifier que les widgets se sont correctement transférés |
|
| Désactiver le mode maintenance |
|
| activer WP Super Cache |
|
Autres vérifications ou ajustements
L’extension Yoast SEO affichait qu’il y avait un problème de chargement de la page d’accueil. J’ai suivi les instructions de cette page d’aide Yoast et vérifié le site avec le test de sites pour mobiles de Google qui confirmait le problème. Ensuite, la page d’aide Yoast recommandait de faire « fetch the current status » dans le tableau de bord WordPress (fenêtre Yoast). Maintenant ça fonctionne correctement mais je n’ai pas du tout compris le problème…
Il y a eu une mise à jour du thème Divi et du Divi Builder dans les heures qui ont suivi la mise en ligne de la nouvelle version du site. Elle a fonctionné correctement. Mon protocole est donc bien adapté.
Et maintenant ?
Nous disposons maintenant d’une check-list précise de ce qu’il faut réaliser pour faire un changement important dans un site. Si vous avez des conseils à partager, vos commentaires seront bienvenus.
par Anne-Laure DELPECH | 12 Oct 2017 | astuces rapides, Plugin (extension) WordPress
Cécile, qui utilise un site mis à jour récemment avec un thème enfant pour Divi m’a envoyé la demande suivante : « Le divi builder ne peut pas prendre en compte mes sauts de paragraphes. Peux-tu me dire quel code html ajouter pour ne pas que tout mes textes se retrouvent à la suite des uns des autres sans mise en page STP ».
Je suis allée regarder de plus près et, effectivement, impossible de conserver les retours à la ligne lors de la publication des contenus qu’elle créait dans des « bascules » (toggle en anglais). J’ai essayé diverses solutions puis fait une recherche Google. Là je suis tombée sur l’article « Divi Text Module loses formatting« .
J’ai appliqué la solution : installer et activer l’extension TinyMCE Advanced d’Andrew Ozz.
Pour les réglages de Tiny MCE Advanced :
- Décocher « Activer le menu de l’éditeur » car je trouve l’éditeur actuel très bien ;
- Cocher « Conserver les balises de paragraphe » car c’est là que se trouve la solution au problème de la perte des retours à la ligne :
- Activer les améliorations pour tous les éditeurs :
Et voilà !
Si je crée des paragraphes séparés dans l’onglet visuel de l’éditeur d’un module Bascule de Divi :
Lorsque je regarde avec l’onglet texte, des balises <p> et </p> sont maintenant présentes !
Et l’affichage se fait maintenant comme je le souhaitais, même après publication de la page dans laquelle se trouvait ce module !
Commentaires récents