Un widget personnalisé pour Elementor

Connaissez-vous le constructeur de page Elementor ?

 

Si non, testez-le vite, il vaut le détour. Je ne vais pas faire ici une présentation détaillée de cet outil, ça a déjà été fait par GeekPress, et bien d’autres.

En bref, Elementor vous permet de construire des pages, avec des sections, des colonnes, et des widgets – tous les « éléments » sont des widgets.

J’avoue que j’ai un peu du mal à me faire à son interface « full front-end », mais mis à part cela le rendu est vraiment bon, et contrairement à certains de ses concurrents, Elementor rend un code plutôt propre, et surtout, il est orienté développeurs.

En effet, je vous invite à parcourir le code qui est très lisible, bien commenté, on se l’approprie facilement, et bien sûr on l’étend !

C’est l’objet de cet article : créer un widget personnalisé pour Elementor afin d’étendre ses fonctionnalités.

Les possibilités sont infinies, on peut faire ce que l’on veut avec un widget, et d’ailleurs il en existe déjà beaucoup dans la version gratuite, et encore plus dans la version payante du constructeur de page.

Avant de commencer : je ne détaille volontairement pas tout le code, car il y en a beaucoup. J’ai essayé d’aborder les points les plus importants et spécifiques au sujet, mais si un point en particulier n’est pas clair n’hésitez pas à poser votre question en commentaire.

 

Dans la pratique… un bouton fixe

 

Pour cet article j’ai créé un widget bouton « fixe » : il reprend toutes les fonctionnalités du bouton natif proposé par Elementor, sauf qu’en plus il peut être fixé à droite ou à gauche de l’écran, et restera toujours visible au défilement. Ce sera utile pour un bouton d’appel d’action par exemple.

Ils sont sympas chez Elementor, ils ont créé un « starter plugin« . On peut ainsi comprendre facilement que notre architecture de fichiers dans notre extension se composera ainsi :

 

[pastacode lang= »php » manual= »%2Felementor-button-fixed%0A%20%2Fassets%20%2F%2F%20tous%20nos%20CSS%20et%20JS%0A%20%2Fwidgets%20%2F%2F%20le%20dossier%20contenant%20notre%20widget%0A%20%20%20%20-%20button-fixed.php%20%2F%2F%20la%20classe%20du%20widget%0A%20-%20elementor-button-fixed.php%20%2F%2F%20la%20classe%20qui%20instancie%20le%20plugin%0A%20-%20plugin.php%20%2F%2F%20la%20classe%20principale%20qui%20charge%20les%20widgets » message= » » highlight= » » provider= »manual »/]

(Gardez en tête que la grande majorité des fonctions utilisées ci-dessous, dans les extraits de codes, sont natives à Elementor, pour plus de détails sur celles-ci je vous invite à faire quelques recherches dans son code source et lire la documentation).

Commençons par le fichier elementor-button-fixed.php :

[pastacode lang= »php » user= »MarieComet » repos= »Elementor-Button-Fixed » path_id= »elementor-button-fixed.php » revision= »master » highlight= »33,42,51,132,153″ lines= » » provider= »github »/]

Ce fichier déclare notre extension via l’entête, rien de spécifique, c’est lui qui sera chargé en premier.
La classe MC_Elementor_Custom_Widget sert à plusieurs choses :
– Définir plusieurs constantes : la version de l’extension (ligne 33), la version minimum d’Elementor requise (ligne 42), la version minimum de PHP requise (ligne 51)
– La fonction init vérifie qu’Elementor est bien chargé, et que les versions d’Elementor et PHP répondent bien aux exigences des constantes définies plus haut, si oui, elle charge le fichier plugin.php qui contient une autre classe, si non, des notices sont affichées.

 

---

 

Passons au fichier suivant : plugin.php dans lequel on va déclarer notre classe principale et appeler notre classe propre de notre widget :

[pastacode lang= »php » user= »MarieComet » repos= »Elementor-Button-Fixed » path_id= »plugin.php » revision= »master » highlight= »2,4,50,61,75,87,102″ lines= » » provider= »github »/]

Vous remarquerez que j’utilise des espaces de noms (lignes 2 et 4), si besoin vous pouvez lire cet excellent tuto sur Open Class Room.

Décortiquons la classe Plugin :

• – La fonction widget_scripts charge les scripts (ici commenté, car pas de script pour notre exemple)
  – La fonction widget_styles charge les styles
  – La fonction include_widgets_files charge le ou les fichiers contenant nos widgets, elle est privée (private) et n’est pas appelée directement
  – La fonction register_widgets appelle la fonction include_widgets_files puis enregistre le ou les widgets
  A ce stade Elementor n’a toujours pas connaissance de notre widget
  – Dans la fonction construct on dit à Elementor qu’on a :
  – des scripts via l’action elementor/frontend/after_register_scripts
  – des styles via l’action elementor/frontend/after_enqueue_styles
  – des widgets via l’action elementor/widgets/widgets_registered
  A ce stade Elementor chargera nos scripts, styles, et widgets.

---

 

Maintenant que nous avons indiqué à Elementor qu’on a un nouveau widget pour lui, il faut le créer, passons au fichier /widgets/button-fixed.php :

[pastacode lang= »php » user= »MarieComet » repos= »Elementor-Button-Fixed » path_id= »widgets/button-fixed.php » revision= »master » highlight= »2-10,22,31,42,53,71,86″ lines= »1-89″ provider= »github »/]

Tout d’abord remarquez la déclaration de mon espace de nom, et également l’appel aux espaces de noms d’Elementor (use). Ils sont importants car j’indique que je vais les utiliser, en clair ils permettent d’appeler des dépendances propres à Elementor, sans cela nous aurions des erreurs fatales.

En ligne 22 nous lançons notre classe qui étend la classe Widget_Base (elementor/includes/base/widget-base.php).

La fonction get_name sert à enregistrer notre « identifiant » de widget.

La fonction get_title sert à enregistrer notre « titre » de widget, c’est celui qui sera visible en back-office.

La fonction get_icon sert à indiquer quel icône nous souhaitons utiliser pour notre widget.

La fonction get_categories sert à définir dans quelle catégorie doit être rangé notre widget. Les natives sont : basic, pro-elements, theme-elements, woocommerce-elements, general, pojo, wordpress.
Pour créer une catégorie personnalisée, rendez-vous sur la documentation officielle.

La fonction get_script_depends est à utiliser seulement si vos scripts sont requis pour que votre widget fonctionne.

Plus complexe, la fonction _register_controls sert à déclarer toutes les sections, paramètres et options que nous souhaitons rendre disponibles pour notre widget :

[pastacode lang= »php » user= »MarieComet » repos= »Elementor-Button-Fixed » path_id= »widgets/button-fixed.php » revision= »master » highlight= »116,123,162″ lines= »108-181″ provider= »github »/]

Plusieurs fonctions nous seront utiles :

• – start_controls_section ouvre une nouvelle section (ce sont les onglets en haut dans le panneau d’Elementor lorsqu’on édite un widget)
• – add_control créé un nouveau contrôle, c’est à dire une option, par exemple en ligne 129 un sélecteur qui permet de choisir le type de notre bouton. Je vous invite à parcourir les widgets natifs d’Elementor pour tous les découvrir.
• – add_responsive_control fait la même chose que add_control, avec une gestion du responsive en plus. En ligne 167 je défini que je veux un choix « droite » ou « gauche » pour l’alignement de mon bouton.
• – end_controls_section sert à fermer la section que l’on a ouverte. Si vous oubliez de fermer une section avant d’en ouvrir une autre, Elementor vous retournera une erreur.

---

 

Pour le rendu en back-office, lors de l’édition d’une page, c’est la fonction _content_template qui se charge de l’affichage, retenez que le système de template utilise Backbone JavaScript et que les paramètres du widget sont accessibles via la variable JavaScript settings :

[pastacode lang= »php » user= »MarieComet » repos= »Elementor-Button-Fixed » path_id= »widgets/button-fixed.php » revision= »master » highlight= » » lines= »456-478″ provider= »github »/]

 

---

 

Nous avons donc définis les paramètres qui seront rendus en administration, place à la partie front-office, toujours dans le même fichier :

[pastacode lang= »php » user= »MarieComet » repos= »Elementor-Button-Fixed » path_id= »widgets/button-fixed.php » revision= »master » highlight= »416,418,448,450″ lines= »408-454″ provider= »github »/]

La fonction render contrôle l’affichage du « markup » (html) de notre widget en front-office :

• – get_settings sert à récupérer tous nos paramètres précédemment déclarés dans l’administration.
• – add_render_attribute ajoute une valeur à un attribut de l’élément : le premier paramètre est l’élément à cibler, le deuxième son attribut (class, ID, etc), le troisième la valeur à ajouter.
• – get_render_attributes sert à récupérer la valeur d’un attribut, elle prend en paramètre le nom de cet attribut.
• – render_text est l’appel à la fonction qui affiche le contenu (ligne 485), je ne la détaillerai pas ici car le fonctionnement est sensiblement le même que render.

---

 

Voilà ! Vous pouvez retrouver l’extension sur mon compte Github.

 

Vous êtes maintenant prêt à créer vos widgets personnalisés directement dans Elementor.

 

Crédit photo : pixel2013 / Pixabay