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 :

$accent_color = esc_html( et_get_option( 'accent_color', '#2ea3f2' ) );
$link_color = et_get_option( 'link_color', $accent_color );

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

add_action( 'wp_enqueue_scripts', 'cdaf_divi_enqueue_scripts' );

function cdaf_divi_enqueue_scripts() {
	
	if ( wp_basename( get_bloginfo( 'template_directory' ) ) == 'Divi' ) {
		wp_enqueue_style( 'cdaf-stylesheet', CDAF_DIR_URL . 'css/clea-divi-add-functions.css' );
		
		$accent_color = esc_html( et_get_option( 'accent_color', '#2ea3f2' ) );
		$link_color = et_get_option( 'link_color', $accent_color );
		
		// there must be an extra } at the end of the custom_css string...
		$custom_css = "#left-area .post-meta a[rel='category tag'] {color: {$link_color};}}";
		wp_add_inline_style( 'cdaf-stylesheet', $custom_css );	
	}
}

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 :

<link rel='stylesheet' id='cdaf-stylesheet-css' href='https://parcours-performance.com/wp-content/plugins/clea-divi-add-functions/css/clea-divi-add-functions.css?ver=4.8.2' type='text/css' media='all'/>
<style id='cdaf-stylesheet-inline-css' type='text/css'>
#left-area .post-meta a[rel='category tag'] {color: #843bbb;}}
</style>

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 :

function cdaf_read_color_palette() {
	
	$cdaf_color_palette = et_get_option( 'divi_color_palette', false ) ; 
	$return = explode("|", $cdaf_color_palette);
	return $return ;
}

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

function cdaf_editor_colors($init) {

	/*********** PARTIE 1 **************************
	***********************************************/
	$cdaf_colors = cdaf_read_color_palette() ; // an array of hex codes beginning with #
	$index = 0 ;
	$default_colors =  array();
	
	// what is the link color for text ?
	$accent_color = esc_html( et_get_option( 'accent_color', '#2ea3f2' ) );
	$link_color = et_get_option( 'link_color', $accent_color );
	// remove # in color code
	$link_color = ltrim( $link_color, "#" ) ;
	// met en majuscule le code HEX
	$link_color = strtoupper( $link_color );		

	/*********** PARTIE 2 **************************
	***********************************************/
	// transformer en array avec code hex sans # et nom sous forme "color n"
	foreach ( $cdaf_colors as $color ) {

		// remove # in color code
		$color = ltrim( $color, "#" ) ;
		// met en majuscule le code HEX
		$color = strtoupper( $color );	

		if ( !( $link_color == $color ) ) {

			// the text color palette should not include the link color
			$default_colors[] = array( $color, 'color ' . $index  )  ;
			
			$index++ ; 			
		
		}
					
	}

	// the only way I found to have a string which works....
	// the string shoulr be like this : '"423432","color 0","FFFFFF","color 1","4C858D","color 2","ED693B","color 3","F28A2B","color 4","FAC079","color 5","F6DB6B","color 6","A60F65","color 7"' 
	$custom_colours = wp_json_encode( $default_colors ) ;
	$replace = array( "[", "]") ; // we don't want these in the final string
	$custom_colours = str_replace($replace, "", $custom_colours );

	/*********** PARTIE 3 **************************
	***********************************************/
    // build colour grid default+custom colors
    $init['textcolor_map'] = '['.$custom_colours.']';

    // change the number of rows in the grid if the number of colors changes
    // 8 swatches per row
    $init['textcolor_rows'] = 1;

	// debug will echo in the footer of the editor ! 
	//echo "<p>" . $custom_colours . "</p>" ;

    return $init;
}
	/*********** PARTIE 4 **************************
	***********************************************/
add_filter('tiny_mce_before_init', 'cdaf_editor_colors');

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 :

'"423432","color 0","FFFFFF","color 1","4C858D","color 2","ED693B","color 3","F28A2B","color 4","FAC079","color 5","F6DB6B","color 6","A60F65","color 7"'

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 :

add_filter( 'tiny_mce_plugins', 'cdaf_tiny_mce_remove_custom_colors' );

function cdaf_tiny_mce_remove_custom_colors( $plugins ) {       

    foreach ( $plugins as $key => $plugin_name ) {
        if ( 'colorpicker' === $plugin_name ) {
            unset( $plugins[ $key ] );
            return $plugins;            
        }
    }

    return $plugins;            
}

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.

function cdaf_remove_h1_from_editor( $settings ) {

    $settings['block_formats'] = 'Paragraph=p;Heading 2=h2;Heading 3=h3;Heading 4=h4;Heading 5=h5;Heading 6=h6;Preformatted=pre;';
    return $settings;
}

add_filter('tiny_mce_before_init', 'cdaf_remove_h1_from_editor');

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.

Print Friendly, PDF & Email
0 0 votes
Évaluation de l'article
5
0
Nous aimerions avoir votre avis, veuillez laisser un commentaire.x