J’ai écrit un article contenant des émojis récemment et il était impossible de l’enregistrer. Il y avait un message disant « impossible de mettre à jour la publication dans la base de données ». A force de supprimer des éléments de l’article pour déterminer ce qui bloquait, j’ai compris que mon site, et celui-ci, ne supportaient pas les émojis. J’y ai perdu beaucoup de temps 😠. Alors je documente la solution pour me permettre de la retrouver si nécessaire, et pour aider d’autres internautes si nécessaire.
Pour déterminer la solution, je me suis appuyée sur cet excellent article, dont j’ai validé le processus par un bref echange avec Gemini 2.5 Flash.
Un InterClassement trop ancien !
Comme on le voit dans cette copie d’écran, certaines de mes tables utilisent utf8mb3_general_ci et d’autres utf8mb4_unicode_520_ci. Selon Gemini, « L’interclassement, ou « collation » en anglais, est un ensemble de règles qui définit comment les chaînes de caractères sont triées et comparées dans une base de données. Il détermine l’ordre alphabétique des caractères, la sensibilité à la casse (majuscules/minuscules) et aux accents, ce qui est crucial pour le tri des résultats de recherche ou le filtrage de données. »
Tous les interclassements que j’utilise sont basés sur UTF-8, encodage bien adapté. Mais utf8mb3 n’utilise que 3 octets par caractères et ne convient pas pour certains caractères spéciaux comme les emojis. Et il traite aussi les caractères accentués comme s’ils ne l’étaient pas, ce qui le rend moins précis.
utf8mb4_unicode_ci semble être le standard recommandé actuellement. Il convient à une gamme très large de caractères, y compris les emojis et caractères asiatiques. Il respecte les règles de tri d’Unicode, ce qui le rend bien adapté à la plupart des langues. utf8mb4_unicode_520_ci est encore plus récent.
Quelles solutions ?
Après analyse de l’article et consultation de Gemini, j’ai décidé de procéder en trois étapes :
Etape 1 : sauvegarder la base de données
Ca se fait dans l’interface de l’hébergeur (Infomaniak par exemple) ou avec l’interface phpMyAdmin.
Etape 2 : Modifier wp-config.php
Il vaut mieux en télécharger la version actuelle au cas où avant de le modifier. Dans ce fichier je vois :
define('DB_CHARSET', 'utf8');
Je me modifie en :
define('DB_CHARSET', 'utf8mb4');
Et je vois qu’il n’y a pas besoin de changer la ligne
define('DB_COLLATE', '');
Et je sauvegarde le fichier wp-config.php ainsi modifié.
Etape 3 : migrer la base de données
Je vais migrer l’ensemble de la base de données vers utf8mb4_unicode_ci.
Dans phpMyAdmin, sélectionnez votre base de données.
Cliquez sur l’onglet « Opérations » en haut.
Dans la section « Interclassement », sélectionnez utf8mb4_unicode_ci dans la liste déroulante.
Cochez la case « Changer l’interclassement de toutes les tables » puis la case « Changer les interclassements de toutes les colonnes de toutes les tables »
cliquer sur « Exécuter » :
Une fois l’opération terminée, vous verrez un message de succès.
Notez Que si on clique sur « information schema » ça reste toujours le vieil interclassement ; mais ce schéma ne sert à rien (pour le site lui-même). Donc pas de problème !
Et maintenant ?
Je peux mettre autant d’emojis que je veux dans mes articles. Est-ce que c’est mieux ou pas, je ne sais pas !
Dans cet article, je note rapidement ce que j’ai choisi comme nouveau moyen de faire du « syntax highlighting » (mise en évidence de la syntaxe) du code que je partage dans ce site ou d’autres.
L’extension utilisée jusqu’à présent
J’utilisais Crayon Syntax Highlighter, mais malheureusement l’extension ne fonctionnait plus depuis le passage de WordPress en version 5.0, avec l’éditeur Gutenberg et les blocs.
Sur le site WordPress.org de l’extension, on voit que l’extension, malgré 50 000 installations actives, n’est plus mise à jour depuis 3 ans. Il faut donc que je cesse de l’utiliser.
Comment remplacer Crayon Syntax Highlighter ?
Ce qui a déclenché cette recherche, et cet article, c’est la lecture d’un très bon article du blog d’Elegant Themes, le créateur du thème Divi. L’article s’intitule « How to Share and Style Code Snippets in Divi (3 Methods)« . Il contient des informations concrètes sur :
créer des boîtes Divi pour code, avec ajout manuel de code ou utilisation d’une extension
encodage de code HTML pour l’afficher dans une page wordpress
utilisation de Gist
utilisation d’extensions dédiées à la mise en évidence de code
Pour ma part, j’ai décidé de remplacer Crayon Syntax Highlighter par l’extension proposée dans l’article d’Elegant Themes. Et pour écrire cet article j’ai utilisé l’encodage de code HTML qui est aussi présenté dans l’article des créateurs du thème Divi.
encodage de code HTML
WordPress transforme le code HTML saisi directement dans un bloc paragraphe classique, et le sépare même en autant de blocs. Ci-dessous j’ai juste mis les trois premières lignes :
<!– Code collé dans un bloc paragraphe –>
<!DOCTYPE
html>
<html>
Si je place le code dans un bloc « code » classique, toutes les lignes sont dans un même bloc.
<!-- Code collé dans un bloc paragraphe -->
<!DOCTYPE html>
<html>
<title>HTML Tutorial</title>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Et maintenant j’encode l’HTML avec Code Beautify, puis je le place dans un bloc « paragraphe » classique, le code se présente correctement :
<!DOCTYPE html>
<html>
<title>HTML Tutorial</title>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Mais tout ceci est compliqué. Et on n’a pas de mise en évidence de la syntaxe, et c’est difficile à analyser puis copier-coller pour l’internaute.
Utilisation de l’extension Code Prettify
Utilisation de l’extension Code Prettify. C’est une très bonne extension, très simple. Par exemple, elle fait du « syntax highlighting » automatiquement de ce code Processing (java) :
L’inconvénient est qu’il faut que j’aille modifier le style des blocs de code pour par exemple faire des retours à la ligne (word-wrap je crois).
L’extension SyntaxHighlighter Evolved
SyntaxHighlighter Evolved est également citée dans l’article de Elegant Themes, et c’est finalement le choix que j’ai fait. Je n’ai fait aucun réglage, j’ai simplement installé l’extension.
On peut utiliser des shortcodes mais je préfère choisir le bon bloc d’édition.
Maintenant dans l’éditeur, je peux trouver un bloc de mise en page, intitulé « SyntaxHighlighter Code » :
Bloc SyntaxHighlighter Code de l’extension SyntaxHighlighter Evolved
Si je place le code HTML vu précédemment dans deux blocs successifs, le premier sans spécifier que le langage est HTML, le deuxième en le spécifiant, voici ce que j’obtiens :
SyntaxHighlighter Evolved comme syntax highlighter
L’extension ne reconnait pas automatiquement le langage mais la mise en page est vraiment réussie.
Et l’ancien code ???
Est-ce qu’il faut que j’aille corriger tout le code partagé ces dernières années ?
Dans ce site, de nombreux articles contiennent du code partagé. Il faut continuer à le partager mais pas question d’aller corriger chaque article ! Par exemple, l’article https://knowledge.parcours-performance.com/processing-video-ou-gif-anime/ contient du code défini avec l’ancienne extension Crayon Syntax Highlighter. Le code se présentait ainsi :
Crayon Syntax Highlighter sur du code java
Avec la nouvelle extension, il est toujours lisible, et copiable, mais plus rien ne met en évidence la syntaxe. Il faudra donc que je fasse des corrections si je met à jour des articles.
Dès maintenant je supprime Crayon Syntax Highlighter.
On peut définir des liens personnalisés dans les menus WordPress. Mais le visiteur qui clique sur l’élement de menu se trouve brutalement dans un autre site, sans en avoir été informé. Nous allons donc voir comment faire pour que le lien s’ouvre dans un autre onglet et que l’utilisateur en soit averti (attributs de titre) ?
Afin d’éviter que l’internaute se retrouve subitement dans un autre site, je me propose de régler les liens vers des url externes de telle sorte que :
l’internaute ouvre un autre onglet lorsqu’il clique sur le menu (le site sur lequel il était reste ouvert dans l’onglet initial).
L’internaute voit apparaître une information lui indiquant que le lien va s’ouvrir dans un autre onglet.
Les options de menu WordPress par défaut
Par défaut, voici ce que l’on voit lorsque l’on est administrateur dans un élément de menu WordPress :
Et l’internaute qui place sa souris sur un lien externe (ici « Ma chaîne Vidéos ») n’a aucune idée qu’il va être envoyé dans un site externe.
Activer d’autres options
Dans la page de réglage des menus de WordPress (Apparence >> Menus), il y a un tout petit bouton « options de l’écran » tout en haut à droite. Si on clique dessus, on voit apparaître différentes options :
Je clique sur les cases à cocher « cible du lien » et « Description »
Maintenant, je peux cocher « ouvrir le lien dans un nouvel onglet » et « attribut de titre » (qui s’affichera lorsque l’internaute place sa souris sur le lien).
Après sauvegarde du menu, l’internaute voit apparaître un « popup » qui l’informe qu’il sera envoyé vers un nouvel onglet et s’il clique sur le lien, un nouvel onglet s’ouvre dans son navigateur.
Une icone pour être encore plus explicite
Ce serait encore plus clair si le lien du menu affichait en permanence l’information que le lien est externe. On peut le faire en ajoutant une icone au titre de l’élément de menu :
J’ai donné une classe CSS à l’élément de menu « lien-ext » (on peut le faire si on a coché « classe CSS » dans les options d’affichage de la page de réglage du menu.
Réglages de menu WordPress : un titre de menu avec classe CSS spécifique
On peut modifier le fichier style.css (de notre thème enfant) et définir un style différent pour l’icone du menu et le popup :
Maintenant l’internaute voit l’icone bien alignée par rapport au titre du menu et lorsqu’il pose sa souris sur le titre, il voit (deux…) popup l’informant qu’il sera envoyé dans un autre onglet.
J’ai besoin de modifier des fichiers (php et css) du thème Divi. Je crée donc un thème enfant qui me permettra de faire ces modifications sans toucher au thème Divi et en maintenant sa capacité à se mettre à jour. Dans cette article de la série Utiliser le thème DIVI d’Elegant Themes, j’explique comment s’organiser et créer ce thème enfant.
La situation initiale
Je suis sur un site de test, avec le thème Divi que j’ai déjà largement réglé. Bon nombres d’éléments de la personnalisation et des options du thème ont été modifiés. J’ai aussi réglé des barres latérales avec des widgets.
Il va donc falloir que je conserve tous ces ajustements.
Créer un thème enfant
Normalement, pour créer un thème enfant, il suffit de créer un répertoire dans wp-config/themes/ et d’y placer un fichier style.css contenant au moins un nom (theme name) et indiquant que c’est un thème enfant de Divi (Template: Divi) :
/*---------------------------------------------------------------------------------
Theme Name: LE NOM DU THEME
Theme URI:
Description: A child theme for Divi
Author: Anne-Laure
Author URI: https://knowledge.parcours-performance.com/
Template: Divi
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/
/* On peut mettre du CSS additionnel à partir d'ici */
Mais je ne connais pas encore bien Divi, et j’ai vu qu’il existait un site « constructeur de thème enfant pour Divi ». Alors j’ai essayé.
J’ai rempli les lignes du formulaire puis téléchargé le fichier zip.
En regardant le contenu des fichiers, j’ai constaté que login-editor.php contient des éléments qui modifient la personnalisation de la page de login du site. J’ai décidé de laisser ce fichier, et l’instruction qui le requiert dans functions.php. Mais on peut certainement les supprimer.
Ensuite, j’ai installé le fichier zip sur le site mais je ne l’ai pas activé tout de suite.
Pour les widgets placés dans des barres latérales (les « sidebars » qui peuvent aussi être en dessous ou au dessus !), je ne sais pas comment les récupérer automatiquement. Il faut donc faire des copies d’écran et de contenus…
MAJ du 28/09/2017 pour exporter les réglages de widgets :
pour les widget, utiliser l’extension Widget Settings Importer/Exporter. Attention, toutes les extensions utilisées pour générer des éléments des widgets doivent avoir été activées au préalable et réglées si nécessaire.
Ensuite dans le tableau de bord WordPress, menu outils, on a Widget Settings Import et export.
On peut choisir ce que l’on exporte. On obtient un fichier widget_data.json que l’on sauvegarde. Ensuite on pourra importer ce fichier. Ca marche parfaitement pour moi.
Activer le thème enfant puis le régler
J’active le thème enfant puis j’mporte la personnalisation et les options du thème Divi que j’ai sauvegardé.
Dans le prochain article de cette série Utiliser le thème DIVI d’Elegant Themes, je modifie Divi grâce à mon thème enfant : je crée un nouveau modèle (template) pour les pages de catégories et j’ajoute un style spécifique.
Dans cet article de la série « Utiliser le thème DIVI d’Elegant Themes« , je me demande si c’est une bonne idée d’installer le thème Divi ! Je me pose en effet les questions suivantes :
Est-ce que ce thème est utilisable dans de nombreux contextes WordPress ?
Est-ce qu’il est simple de transférer les réglages d’un site vers l’autre puis de faire quelques ajustements ?
Que se passe-t-il si je décide de changer complètement de thème ? Que deviennent les contenus que j’ai placé grâce au Divi Builder ?
Est-ce qu’il est facile de créer un thème enfant, ou une extension, pour ajouter quelques fonctions ou styles ?
Est-ce que ce thème permet d’accélérer un site réalisé avec le thème que j’utilise habituellement ?
Je vais répondre à 4 de ces 5 questions. A ce stade, je n’ai pas encore ajouté de fonctions et je n’ai pas encore eu besoin d’une extension ou d’un thème enfant.
Utilisation du thème Divi dans des contextes très différents ?
Est-ce que ce thème est utilisable dans de nombreux contextes WordPress ?
La réponse est oui, sans hésiter ! Je l’affirme après seulement quelques heures d’exploration des possibilités du thème. On peut tout faire avec.
Le thème Divi est compatible Woocommerce ;
Le thème Divi permet de réaliser à peu près tous les styles de site sans codage ;
Le thème Divi fonctionne sans difficultés avec les extensions que j’utilise habituellement ;
Le thème Divi est bien documenté, avec de très nombreux tutoriels, en français comme en anglais ;
Et quand je vois le nombre de développeurs WordPress qui l’utilisent, je me dis qu’ils ne le feraient pas si ils devaient changer de thème, ou passer du temps à développer du spécifique dès que la demande client est un peu différente.
Transférer des réglages de Divi d’un site à un autre ?
Est-ce qu’il est simple de transférer les réglages d’un site vers l’autre puis de faire quelques ajustements ?
La réponse à cette question est importante puisqu’il s’agit de ne pas réinventer l’eau chaude pour chaque nouveau site, et de ne pas perdre de temps. Et la réponse est encore Oui ! J’ai fait des tests sur un site puis transféré la personnalisation du thème, les options du thème et même des modèles vers un autre site. C’est remarquablement bien fait (j’en parle dans le prochain article de cette série).
Est-on définitivement lié à Divi ?
Que se passe-t-il si je décide de changer complètement de thème ? Que deviennent les contenus que j’ai placé grâce au Divi Builder ?
Dans l’article If you use the Divi theme with WordPress, it better be forever, Chris Lema dit avec justesse que si on utilise un thème Divi avec WordPress, on a intérêt à ce que ce soit pour toujours ! Il a raison évidemment. Toute page, ou article, créé avec le thème Divi ne sera pas restituée correctement si on change de thème. Mais c’est vrai avec n’importe quel thème. Et maintenant que le Divi Builder est une extension séparée du thème, je pourrai sans doute récupérer l’essentiel de mon travail.
Vitesse d’un site Divi ?
Est-ce que ce thème permet d’accélérer un site réalisé avec le thème que j’utilise habituellement ?
J’ai testé un site WordPress sur lequel j’ai installé Divi, et utilisé le Divi Builder uniquement pour la page d’accueil. Les tests avec PageSpeed Insights et Test My Site with Google indiquent qu’il n’y a ni dégradation ni amélioration notable.
Et après avoir subitement pensé à redimensionner toutes les miniatures avec l’extension Regenerate Thumbnails, il n’y a aucun changement.
Et maintenant ?
Il faudra que je voie plus tard si il est facile de créer un thème enfant, ou une extension, pour ajouter quelques fonctions ou styles. En attendant, mon prochain article de cette série, Utiliser le thème DIVI d’Elegant Themes,portera sur le transfert de réglages et de modèles Divi d’un site à l’autre.
Commentaires récents