Astuces de développement Elementor

Au fil de mes missions freelance, dans le développement de site avec Elementor, je découvre plusieurs fonctionnalités de ce constructeur de page qui sont plus ou moins documentées (voir pas du tout). J’ai décidé de regrouper ces « astuces » dans un article afin qu’elles profitent au plus grand nombre.
Je viendrais donc alimenter cette liste au fur et à mesure de mes découvertes, et n’hésitez pas à participer dans les commentaires 🙂 !

Sommaire


Définir programmatiquement des palettes de couleurs Elementor

Elementor propose de gérer des palettes de couleurs à deux endroits :

  • La palette de couleurs générale :
  • Les sélecteur de couleurs des widgets (color picker) :

Ces palettes de couleurs sont enregistrées en base de données, en tant qu’options, il est donc possible de les définir et les mettre à jour programmatiquement.
Pour définir les couleurs générales il faut mettre à jour l’option elementor_scheme_color, et pour le sélecteur de couleur c’est l’option elementor_scheme_color-picker.

Voici deux fonctions qui servent à déclarer les tableaux de couleurs, notez les clés  :

// define a main colors scheme
function prefix_color_scheme( $colors = array() ) {
	$colors = [
		'1' => '#ddd',
		'2' => '#000',
		'3' => '#454545',
		'4' => '#D34D4D',
	];
	return $colors;
}

// define a colors scheme for color picker
function prefix_color_scheme_picker( $colors_picker = array() ) {
	$colors_picker = [
		'1' => '#fff',
		'2' => '#000',
		'3' => '#ccc',
		'4' => '#F20000',
		'5' => '#1EBA0E',
		'6' => '#182FC2',
	];
	return $colors_picker;
}

Voici la fonction qui permet de mettre à jour les options en base de données lors d’un changement de thème (à adapter sur une autre action au besoin) :

// update elementor color scheme on switch theme
add_action( 'after_switch_theme', 'prefix_update_elementor_scheme_color' );
function prefix_update_elementor_scheme_color() {
	$colors = prefix_color_scheme();
	if ( $colors ) {
		update_option( 'elementor_scheme_color', $colors );
	}
	$colors_picker = prefix_color_scheme_picker();
	if ( $colors_picker ) {
		update_option( 'elementor_scheme_color-picker', $colors_picker );
	}
}

Injecter des contrôles à un endroit précis

Elementor dispose d’une méthode qui permet d’injecter des éléments à un endroit précis d’un widget, par exemple avant ou après un contrôle existant.
Les méthodes à utiliser sont start_injection pour commencer l’injection, et end_injection pour la terminer (documentation de start_injection).

La fonction ci-dessous permet d’ajouter au widget Bouton un nouveau contrôle de type texte, avant ('at' => 'before') le contrôle existant « Lien » ('of' => 'link').

/**
 * Add injection
 *
 * Used to inject controls and sections to a specific position in the stack.
 *
 * @param Element_Base $element The edited element.
 * @param array  $args Section arguments.
 *
 */
function add_injection( $element, $args ) {
	// start injection of control before an other control
	$element->start_injection( [
		'at' => 'before',
		'of' => 'link',
	] );
	// add control
	$element->add_control(
		'button_custom_control',
		[
			'label' => __( 'Custom control', 'textdomain' ),
			'type' => \Elementor\Controls_Manager::TEXT,
			'default' => 'default value',
		]
	);
	// end injection just after
	$element->end_injection();
}

Ensuite, il faut ajouter la fonction à la fin de la section où se situe le contrôle sur lequel on se positionne.
Ici, c’est la section principale qui a pour identifiant section_button, on peut donc utiliser le hook elementor/element/{$section_name}/{$section_id}/before_section_end (documentation) comme ceci :

add_action( 'elementor/element/button/section_button/before_section_end', 'add_injection', 10, 2 );

Mettre à jour un contrôle existant

Elementor dispose de la méthode update_control qui permet de mettre à jour un contrôle existant, elle ressemble beaucoup à add_control : on utilise l’identifiant du contrôle ciblé et on définit dans un tableau les paramètres que l’on veut mettre à jour. Vous pouvez modifier et/ou ajouter n’importe qu’elle option disponible pour le contrôle. (documentation d’update_control)

Par exemple, pour définir une valeur d’alignement par défaut au widget Bouton et également masquer le contrôle d’alignement si le type de bouton est différent de la valeur « info » :

function update_controls( $element, $args ) {
	// update "align" control, set default value to "center"
	// add condition : show control only if button type is not "info"
	$element->update_control(
		'align',
		[
			'default' => 'center',
			'condition' => [
				'button_type!' => 'info',
			],
		]
	);
}

Un autre exemple, pour ajouter une nouvelle option de style (« Fiesta ») pour le contrôle « Bordure », et définir la couleur de bordure à #000 par défaut :

function update_controls( $element, $args ) {
	// update "border" control, add custom style option "Fiesta"
	// update "border" control, set default value to "solid"
	$element->update_control(
		'border_border',
		[
			'options' => [
				'' => __( 'None', 'elementor' ),
				'dashed groove double dotted' => _x( 'Fiesta', 'Border Control', 'elementor' ),
				'solid' => _x( 'Solid', 'Border Control', 'elementor' ),
				'double' => _x( 'Double', 'Border Control', 'elementor' ),
				'dotted' => _x( 'Dotted', 'Border Control', 'elementor' ),
				'dashed' => _x( 'Dashed', 'Border Control', 'elementor' ),
				'groove' => _x( 'Groove', 'Border Control', 'elementor' ),
			],
			'default' => 'solid',
		]
	);
	// update "border color" control, set default value to "#000"
	$element->update_control(
		'border_color',
		[
			'default' => '#000',
		]
	);
}

Ensuite, il faut ajouter la fonction à la fin de la section où se situe le contrôle sur lequel on se positionne.
Ici, c’est la section de style qui a pour identifiant section_style, on peut donc utiliser le hook elementor/element/{$section_name}/{$section_id}/after_section_end (documentation) comme ceci :

add_action( 'elementor/element/button/section_style/after_section_end', 'update_controls', 10, 2 );

Laisser un commentaire

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

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

vel, quis, massa ante. facilisis efficitur.