Une extension pour ajouter des fonctionnalités au thème Divi (WordPress)

Le thème Divi est très bien, mais il lui manque quelques fonctionnalités pratiques. J’ai créé précédemment un thème enfant pour Divi afin de générer différemment les pages de catégorie. Mais pour ajouter d’autres fonctionnalités, il était préférable de créer une extension, afin de ne pas mélanger les choses. Je commente ici l’extension créée.

Ce que je voulais obtenir

  • le style des méta-données de catégorie dans les pages de catégorie doivent être de la couleur des liens du site. Plutôt que de modifier à la main la feuille de style du thème enfant, je voulais trouver automatiquement la couleur définie dans Divi pour les liens et l’appliquer à ces méta-données par  le biais d’un style défini en code (inline style).
  • Lorsqu’on écrit un nouvel article, ou n’importe quel autre type de contenu, avec l’éditeur classique, on dispose d’un moyen de changer la couleur du texte. Mais les couleurs proposées ne sont pas celles du site. Je voulais donc trouver automatiquement la palette par défaut du site (définie dans les options Divi, onglet général) et utiliser cette palette comme couleurs possibles pour le texte.
  • Je voulais aussi supprimer la possibilité d’insérer manuellement un titre H1 dans un contenu. Les titres H1 sont réservés aux titres de pages web et sont générés automatiquement par le thème. Il ne doit pas y avoir de deuxième titre H1 dans une page car ça « perturbe » les moteurs de recherche.

L’extension finie

L’extension (sur GitHub, ou la version 1.0 – zip – commentée ici, en téléchargement : Extension « Divi Add functions » (zip) ) peut être installée sur un site WordPress par le biais d’ajout d’extension. Il suffit ensuite de l’activer, il n’y a pas de réglage à réaliser.

Je suis partie d’une extension réalisée par Divi Space, ici sur GitHub et je l’ai modifiée de manière extensive.

Trouver la couleur appliquée aux liens

Dans le répertoire /wp-content/plugins/clea-divi-add-functions/includes , deux fichiers ( cdaf-enqueues.php  et cdaf-editor.php ) contiennent les lignes :

$link_color prend la valeur définie dans le paramètre « COULEUR DU LIEN DU CORPS » de la personnalisation du thème Divi (ou du thème enfant), onglet « Paramètres Généraux » >> « Typographie ». Je ne suis pas certaine de ce à quoi correspond accent_color…

Définir un style en ligne (inline style)

C’est en regardant le code de l’extension réalisée par Divi Space, ici sur GitHub que j’ai compris comment on fait ça. Le fichier contient :

La fonction exécute les instructions suivantes :

  • si (et seulement si) le thème Divi (ou un thème enfant de Divi) est utilisé, alors :
    1. charge la feuille de style css/clea-divi-add-functions.css (qui ne contient rien actuellement) – cette instruction ne sert à rien en l’état actuel de l’extension.
    2. Trouve quel est le code de la couleur définie pour les liens
    3. ajoute un style « inline » qui contient le texte défini dans la variable $custom_css . Il faut bien noter qu’il y a deux } à la fin de ce texte.

Et maintenant, si je regarde dans le <head> d’une page du site (par exemple https://parcours-performance.com), je trouve :

La feuille de style est chargée, et un style « inline » est défini pour #left-area .post-meta a[rel=’category tag’].

Trouver la palette de couleurs définie par l’utilisateur de Divi

Le fichier cdaf-utilities.php  contient la fonction suivante :

Cette fonction va chercher la valeur de 'divi_color_palette' et me renvoie une chaîne de caractères (string) avec les codes couleurs séparés par |. Avec explode, je place dans $return  un tableau (array) contenant les codes hexadécimaux des couleurs.

Modifier les couleurs proposées dans l’éditeur WordPress

L'éditeur WordPress : les couleurs de texte par défautA l’origine l’éditeur WordPress par défaut propose un ensemble de couleurs, plus des cases « personnalisées » que l’on ne peut pas modifier.

Le fichier cdaf-editor.php  contient le code correspondant à cette fonctionnalité. Dedans, deux fonctions assurent la modification des couleurs proposées par l’éditeur WordPress.

  • La fonction  cdaf_editor_colors( $init ) assure le passage de l’état initial (image 1) à l’état 2 (image 2) dans lequel les couleurs par défaut sont remplacées par les couleurs du site.
  • La fonction  cdaf_tiny_mce_remove_custom_colors( $plugins ) s’occupe d’enlever les cases blanches « personnalisée » qui ne fonctionnent pas. Je l’ai trouvée sur StackExchange. Je n’ai pas cherché à comprendre comment elle marche.

Intéressons nous à la fonction   cdaf_editor_colors( $init ) , que j’ai eu bien du mal à créer, même si je suis partie d’une solution initiale qui fonctionnait (disponible ici). Elle contient les éléments suivants (que j’ai divisé en quatre parties) :

Partie 1 : Définir les variables qui vont nous intéresser

Ces variables sont la palette par défaut (celle que l’administrateur a défini dans les options Divi) ainsi que la couleur des liens définie dans la personnalisation du thème. Avec la palette par défaut, j’ai la liste des codes couleur que je voudrais intégrer dans l’éditeur WordPress. Mais on ne veut pas que la couleur des liens soit accessible à un auteur de contenu. L’internaute ne comprendrait pas que certains textes d’une couleur soient cliquables quand d’autres ne le sont pas. Il faut donc que je sache quelle est cette couleur de lien.

J’obtiens deux variables qui contiennent les données définies par l’administrateur du site :

  • $link_color , qui contient un code à 6 chiffres ou lettres A à F en majuscules. Le # du code a été enlevé.
  • $default_colors , un tableau (array) tel que défini précédemment.

Partie 2 : transformer l’array de couleurs

Je dois obtenir une chaîne de caractère au format suivant :

Je pars d’un tableau (array) qui contient simplement les codes Hexadécimaux des couleurs sous la forme #AABBCC. Pour aboutir à la chaîne de caractère ci-dessus, il faut :

  • lire chaque élément du tableau (array), avec  foreach ( $cdaf_colors as $color )
  • pour chaque valeur ($color) :
    • enlèver le # devant ( ltrim( $color, "#" ) ) et le mettre en majuscule ( strtoupper( $color ) ) ;
    • si elle est égale à la couleur utilisée pour les liens je ne l’utilise pas ;
    • sinon, je la place dans un nouveau tableau, sous la forme (code Hex, nom couleur).

A la sortie de cette boucle, $default_colors contient toutes les couleurs à utiliser, avec leur nom (sous la forme « couleur n »). Mais ce n’est toujours pas une chaîne de caractères…

J’ai passé beaucoup, beaucoup de temps à bloquer là dessus. Tout le monde saisit à la main les couleurs à intégrer dans l’éditeur, sans profiter de l’automatisation possible. Mais j’ai trouvé !!!

  • avec wp_json_encode( $default_colors ) , on transforme le tableau (array) en une chaîne de caractères ;
  • avec str_replace($replace, "", $custom_colours ) , on enlève tous les caractères dont on ne veut pas, définis dans $replace = array( "[", "]") .

Partie 3 indiquer à l’éditeur les nouvelles couleurs de texte

Là je me suis bornée à recopier ce qui était écrit dans le code proposé sur StackExchange.

La seule difficulté (importante) était de fournir une chaîne de caractères au bon format.

Partie 4 dire à WordPress de charger la fonction

Avec add_filter('tiny_mce_before_init', 'cdaf_editor_colors'); , on dit qu’au moment où l’éditeur s’ouvre, il doit exécuter la fonction cdaf_editor_colors.

A ce stade, lorsqu’on utilise l’éditeur, il nous propose les couleurs définies dans les options de Divi, moins celle qui est dédiée aux liens :

L'éditeur WordPress : des couleurs de texte personnalisées V1

Je n’aime pas du tout les carrés « personnalisée » en dessous. Je n’y faisais pas attention avant, mais là, ça me gène. Alors j’ai ajouté une autre fonction, trouvée dans une autre discussion sur StackExchange :

Et maintenant, les choix de couleur de texte sont présentés de manière « propre » !

L'éditeur WordPress : des couleurs de texte personnalisées V2

Supprimer les titres H1 des styles proposés par l’éditeur WordPress

Je me suis bornée à reprendre le code proposé dans ce gist, sur GitHub.

Avant, l’éditeur proposait aux auteurs des style Titre 1, maintenant il n’est plus possible de commettre l’erreur de donner un tel style à du texte.

L'éditeur WordPress : les styles par défaut   L'éditeur WordPress : pas de H1 dans les styles

Et maintenant ?

Si vous voulez télécharger l’extension complète : Extension « Divi Add functions » (zip). Je la ferai certainement évoluer ultérieurement. Mais pour l’instant elle répond à mes besoins.

5 commentaires


  1. Et bien j’entendais par sélecteur manuel, le sélecteur de couleurs « personnalisées » qui est accessible juste sous les vignettes de couleurs par défaut.
    J’ai voulu ajouter une capture d’écran au message mais comme Divi ne propose toujours pas l’option je ne peux pas. Peut-être trouverez-vous une option pour ceci aussi, je compte chercher un peu aussi dès que le site est finalisé.

    Bonne suite pour Clea.

    Répondre

  2. Bonjour, j’ai trouvé votre plugin fort intéressant, surtout pour la sélection des couleurs du thème pour les polices. Je regrette toutefois que le sélecteur manuel soit désactivé, raison pour laquelle j’hésite à utiliser le plugin.
    Pensez-vous pouvoir remédier à ça ?

    Désactiver la fonction de couleur de liens pourrait également s’avérer utile si non souhaité.

    Bien à vous.

    Répondre

    1. Bonjour Thibault
      Merci pour votre commentaire.
      Je ne comprends pas ce que vous voulez dire par « sélecteur manuel désactivé ». Pouvez-vous préciser ?
      Je comprends que vous hésitiez à utiliser cette extension. De manière générale, il vaut mieux n’utiliser que des extensions qui ont été passées dans le dépôt d’extensions WordPress. Et si je voulais y proposer cette extension, il faudrait certainement que je prépare une page de réglage de l’extension pour pouvoir désactiver telle ou telle fonctionnalité.
      Ca m’intéresserait beaucoup de travailler une extension pour qu’elle soit acceptée sur WordPress. Ce serait amusant et source d’apprentissages. Mais ça me prendrait beaucoup de temps. Alors je reporte sans arrêt ma première tentative !
      Cordialement,
      Anne-Laure

      Répondre

      1. En relisant rapidement votre article je vois que c’est cette option que j’aurais voulu retrouver (avec ou sans les carrés, mais pourquoi pas).

        « Je n’aime pas du tout les carrés « personnalisée » en dessous. Je n’y faisais pas attention avant, mais là, ça me gène. Alors j’ai ajouté une autre fonction, trouvée dans une autre discussion sur StackExchange : »

        J’ai voulu ajouter une capture d’écran au message mais comme Divi ne propose toujours pas l’option je ne peux pas. Peut-être trouverez-vous une option pour ceci aussi, je compte chercher un peu aussi dès que le site est finalisé.

        Bonne suite pour Clea.

        Répondre

        1. Merci pour vos précisions Thibault.
          Si c’est la seule chose qui vous dérange, il vous suffit d’enlever le code qui a supprimé les carrés personnalisés par un simple « // » devant la ligne add_filter( ‘tiny_mce_plugins’, ‘cdaf_tiny_mce_remove_custom_colors’ );

          Quant aux captures d’écran dans les commentaires, c’est vrai que c’est parfois utile. Si vous trouvez une solution, dites-nous.

          Bonne finalisation de votre site !
          Anne-Laure

          Répondre

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *