Partager du code dans un site WordPress 5 ou plus

Partager du code dans un site WordPress 5 ou plus

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) :

Code Prettify comme syntax highlighter

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
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
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.

Menus WordPress : comment faire un lien vers un site externe correctement ?

Menus WordPress : comment faire un lien vers un site externe correctement ?

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) ?

Sauter d'un site à l'autre via le menu WordPress

WebDonut / Pixabay

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 :

  1. l’internaute ouvre un autre onglet lorsqu’il clique sur le menu (le site sur lequel il était reste ouvert dans l’onglet initial).
  2. 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 :

L'affichage par défaut pour les réglages 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.

L'internaute qui place sa souris sur cet élément de menu ne sait pas qu'il sera dirigé vers 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 :

Réglages de menu WordPress : les options d'affichage

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).

Réglages de menu WordPress avec d'autres options d'affichage

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.

Menu avec popup vu par l'internaute

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 :

Réglages de menu WordPress : un titre de menu avec une icone Dashicons

j’ai ajouté « <span class=”dashicons dashicons-external”></span>  » au titre.

Et maintenant l’internaute voit :

Menu avec icone et popup vu par l'internaute

Ajuster le style de l’icone et du popup

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

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 :

/* --- Menus avec classe CSS "lien-ext" : icone et popup --- */
.lien-ext .dashicons.dashicons-external {
	vertical-align: bottom !important;
}

.lien-ext a[title]:hover::after {
	content: attr(title);
	position: absolute;
	left: 0;
	top: -40%;
	white-space: nowrap;
	padding: 0.5rem;
	border: none;
	background-color: white;
	font-style: italic;
	font-weight: 400;
	font-size: 90%;
	text-align: right;
}

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.

Menu avec popup et style CSS modifié

Et maintenant ?

A vous de jouer !

Créer un thème enfant pour Divi (WordPress)

Créer un thème enfant pour Divi (WordPress)

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 , 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é.

Je suis donc allée sur la page du “Divi child theme builder” du site divi.space.

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.

Sauvegarder les réglages du thème parent

Avant d’activer le thème enfant, sauvegarder les fichiers de réglage de divi, comme indiqué dans l’article Importer et exporter des paramètres et modèles du thème Divi pour WordPress, (uniquement ce qui concerne la personnalisation et les options du thème).

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é.

Je recrée les barres latérales à la main ou par importation avec  l’extension Widget Settings Importer/Exporter.

Et ça y est, on a un thème enfant fonctionnel !

Et maintenant ?

Dans le prochain article de cette série , 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.

Pour ou contre le thème Divi

Pour ou contre le thème Divi

Dans cet article de la série ““, 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, ,portera sur le transfert de réglages et de modèles Divi d’un site à l’autre. 

Importer et exporter des paramètres et modèles du thème Divi pour WordPress

Importer et exporter des paramètres et modèles du thème Divi pour WordPress

Dans cet article de la série , je regarde si le système d’importation et exportation de la personnalisation, des options et des modèles du thème Divi est pratique et facile d’utilisation. La réponse est oui, et c’est très très bien fait !

Quels sont les éléments que l’on peut exporter ou importer d’un site à l’autre ?

Divi est très bien fait et on peut exporter l’ensemble des éléments qui composent un thème, ainsi que les modules Divi Builder sauvegardés dans la bibliothèque de modules :

  • la personnalisation du thème telle qu’elle est définie dans le menu Apparence >> Personnalisation ;
  • Les options du thème telles que réglées dans le menu Divi >> Options ;
  • la personnalisation des modules, telle que définie dans le menu Divi >> Personnalisateur de module ;
  • les modèles sauvegardés dans la bibliothèque (menu Divi >> bibliothèque Divi).

Le cas particulier d’un thème enfant de Divi

MAJ du 12/10/2017 :

Si on utilise un thème enfant, le processus qui suit fonctionne pour les options du thème enfant et pour la bibliothèque Divi, mais pas pour la personnalisation du thème enfant.

Avec un thème enfant de Divi, je parviens à exporter les options et la bibliothèque divi (theme enfant) mais pas la personnalisation.

L’article How To Package a Divi Child Theme for Sale indique qqu’il faut utiliser l’extension “Customizer Export/Import” de Beaver builder Team. Et ça fonctionne parfaitement, en utilisant la fonction export (onglet tout en bas de personnalisation thème). 

Comment exporter les réglages du thème Divi ?

Pour les personnalisations et options, il suffit de cliquer sur un bouton “↑↓”, comme ici dans la personnalisation du thème.

Importer et exporter des paramètres et modèles du thème Divi pour WordPress

Importer et exporter des paramètres et modèles Divi

Pour les modèles, il faut cliquer sur un bouton « Importer et exporter » tout en haut de la bibliothèque.

C’est vraiment très simple. A chaque fois, cela crée un fichier Json que l’on sauvegarde avant réutilisation.

Et pour l’importation, comment ça se passe ?

On fait exactement la même chose, après avoir activé le thème Divi, on clique sur le bouton “↑↓” (ou “Importer et exporter” pour les modèles), et ça y est, on a importé les personnalisations, réglages ou modèles.

MAJ du 12/10/2017 : pour importer la personnalisation d’un thème enfant de Divi, on utilise l’extension “Customizer Export/Import” comme pour l’exportation (onglet tout en bas de personnalisation thème). Ca fonctionne parfaitement pour importer le fichier .dat généré par la même extension dans un autre site.

Ce qui est vraiment impressionnant, c’est que l’importateur modifie les url des images que l’on avait défini dans les options ou paramètres et place ces images dans la bibliothèque de médias du nouveau site. C’est très très bien fait !

Et c’est là qu’on est vraiment content d’avoir utilisé les couleurs par défaut plutôt que d’avoir défini à la main pour chaque item. Il me suffit de modifier ma palette de couleur par défaut, comme expliqué dans l’article “Régler la palette de couleur par défaut du thème Divi”   et ça y est, on a un site différent, dont on ne va peut-être changer que la forme de page d’accueil.

Et maintenant ?

Je vais continuer à explorer ce thème Divi et l’extension Divi Builder. Rendez-vous dans d’autres articles de cette série, !