< Retour au blog

Un widget personnalisé pour Elementor

Publié le

dans la catégorie


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.

Bouton fixé
Bouton fixé dans le constructeur de page

 

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

 

Crédit photo : pixel2013 / Pixabay



21 réponses à “Un widget personnalisé pour Elementor”

  1. Bonjour,

    article très intéressant.
    Peut-être pouvez-vous m’aider en tant que pro d’elementor.

    Est-il possible d’ajouter un method= »POST » dans les formulaires générés par elementor (pro)

    Merci
    Jeanson

    • Bonjour Jeanson,
      Désolée mais je ne sais pas si c’est possible.
      Vous pouvez poser la question au support d’Elementor, ils auront surement la réponse.

      • Bonjour Marie,

        merci pour votre réponse.
        En fait, je me suis rendu compte que le form est déjà en method POST. Du coup, ma question est caduque.
        Cependant, je ne comprends pas pourquoi lorsque je fais un traitement_formulaire avec add_action(‘template_redirect’, ‘traitement_formulaire’); et que je fais un print_r($_POST) ; j’ai un Array() vide.
        Si jamais vous avez une idée…

        Jeanson

        • Bonjour Jeanson,
          Ce retour vide peut être causé par énormément de facteurs, c’est difficile de vous aider avec seulement ces informations.

  2. Hello,

    je voulais vous remercier pour votre tuto qui est vraiment super bien fait.

    C’est vrai que c’est super de pouvoir ajouter des plugins, mais est-ce que vous savez comment si prendre pour faire des skins pour les widgets déjà existants ?

    J’ai réussi à créer des skins, mais le seul problème, c’est que je ne suis pas capable d’en faire des plugins. Ce qui m’oblige à modifier directement le plugin d’Elementor et ce n’est vraiment pas propre.

    J’ai essayé de mélanger votre tuto et ce que la doc propose, mais je n’ai pas réussi.

    Est-ce que vous avez une idée ?

    • Bonjour Éric,
      Merci pour votre commentaire !
      Avez vous lu cette partie de la documentation https://github.com/pojome/elementor/blob/master/docs/content/hooks/php-hooks.md#elementorwidgetnameskins_init ?
      Elle donne le bon hook pour ajouter un skin à un widget existant, et dans l’exemple ‘Skin_Dark_Map’ serait, dans votre cas, le nom de votre classe dans laquelle vous instanciez votre code.
      Que voulez vous dire par « je n’arrive pas à un faire un plugin »?
      Qu’est ce qui bloque?

      • Bonjour,

        Oui j’ai fait un tour sur la documentation. J’ai justement utilisé cette façon pour ajouter un skin, mais je n’ai pas réussi à l’utiliser comme dans la doc.
        Je n’ai pas réussi à adapter le bricolage que j’ai fait pour en faire un plugin, c’est cela que je voulais dire. J’aimerais avoir un code propre sans avoir à modifier le code source d’Elementor ^^. Histoire de pouvoir faire les mises à jour sans problème.

        Je pense que je ne suis pas très loin de réussir à faire fonctionner mon code, mais pour le moment ce n’est pas le cas.

        Voici mon github, peut-être que vous arrivez à voir mon problème : https://github.com/tungdil213/Add-skin-elementor

        Pour le moment j’ai cette erreur :
        Fatal error: Uncaught Symfony\Component\Debug\Exception\FatalThrowableError: Class ‘CS_Posts\Skins\Skin_Custom’ not found in wp-content/plugins/elementor-add/plugin.php:15 Stack trace: #0
        wp-includes/class-wp-hook.php(298): CS_Posts\Plugin->CS_Posts\{closure}(Object(ElementorPro\Modules\Posts\Widgets\Posts)) #1
        wp-includes/class-wp-hook.php(323): WP_Hook->apply_filters( », Array) #2
        wp-includes/plugin.php(453): WP_Hook->do_action(Array) #3
        wp-content/plugins/elementor/includes/base/widget-base.php(135): do_action(‘elementor/widge…’, Object(ElementorPro\Modules\Posts\Widgets\Posts)) #4
        /home/clients/7bd44129349568a157b53f736d417af2/web/dev_structo- in wp-content/plugins/elementor-add/plugin.php on line 15

        • Bonjour Eric,
          J’ai forké votre repo ici : https://github.com/MarieComet/Add-skin-elementor pour corriger votre code.
          Vous pouvez voir les modifications effectuées ici : https://github.com/MarieComet/Add-skin-elementor/commit/6f53c96a0e940618dc9198b16d6040c1470c8b5a
          Je vous laisse regarder les changements, en résumé voici les principaux problèmes corrigés :
          – Vous n’étiez pas hooké sur la bonne action (elementor/widgets/widgets_registered)
          – Vous n’aviez pas inclus le fichier de votre skin (function includes)
          – Dans votre fichier de skin vous ne faisiez pas appel à « use Elementor\Skin_Base; », du coup le « class Skin_Custom extends Skin_Base » ne pouvais pas fonctionner
          – Vous devez utiliser les même fonctions que la classe parente (Skin_Base) (render, etc).

          Avec cette base la skin personnalisée apparait bien dans les widgets « posts », vous pouvez maintenant la construire réellement.
          Bon développement ! 🙂

          • Bonjour,

            Merci beaucoup pour votre aide très précieuse. Je suis parvenu à tout faire fonctionner, j’ai maintenant un plugin qui permet d’ajouter des templates aux widgets D’Elementor.

            Je comprends mes erreurs, je manque de pratique en langage objet, et je fais parfois ce genre d’erreur.

            Pour ce qui est d’utiliser les mêmes fonctions que la classe parente, c’est effectivement, car j’utilise la classe « Skin_Base » d’Elementor pro, du coup il y a des variations.

            Encore merci pour le temps que vous avez consacré à mon problème.

            Bonne continuation.

            Monnier Eric

  3. Merci pour ce tuto, ça peux servir !!
    Juste une question, je vois que tu utilise Pastacode pour partager du code source, j’ai télécharger le plugin mais il ne semble pas compatible avec elementor, il y a pas de widget WordPress Pastacode dans les widgets de Elementor, du coup je ne peux pas utiliser Pastacode.

    As-tu une idée pour le rendre compatible ?

    • Oui j’utilise bien Pastacode, mais pas Elementor 🙂
      Est-ce qu’en insérant un widget « éditeur de texte » avec Elementor tu n’aurais pas l’outil d’insertion Pastacode dans la barre d’outil WYSIWYG ?

  4. Non justement il y a pas de possiblité d’ajouter Pastacode dans l’éditeur de texte Elementor.

    J’ai trouvé un autre moyen, il faut passer par l’éditeur de texte de WordPress, mais pas pratique et pas très fonctionnel, l’idéal reste un widget directement dans elementor ou ajouter pastacode dans l’outil WYSIWYG, mais pas très simple pour moi.

    ps: (on ne reçoit pas de notification par email quand une autre réponse est apportée sur ton blog, pas pratique)

  5. Bonsoir Marie, je travaille actuellement sur elementor pro Version 2.4.5 (bien que je sois débutante sur ce builder) avec wordpress 5.0.3, j’y ai injecté votre plugin sans souci.
    Seulement, je ne parviens pas à mettre le bouton en fixe malgré diverse manipulation du sticky. Pouvez-vous m’aider svp?
    Lorsque je scrolle, le bouton il disparaît avec le reste de ma section.

  6. Bonjour,
    Merci pour ce tuto Marie 🙂
    Cependant j’ai découvert un plugin excellent qui pourrait intéresser certains en rapport justement avec les Widgets d’Elementor.
    Le plugin permet de créer ses propres Widgets (il faut quand même une connaissance de base en HTML/CSS ou même JS pour faire des chose plus poussé, après ça dépends de ce que l’ont souhaite faire).
    Il y a pas mal de Widgets déjà prêt en gratuit et encore plus en payant mais je vous conseil de le découvrir…
    Voici le lien vers le plugin: http://bit.ly/unlimited-elements-for-elementor

    Bonne construction 🙂
    Sam

  7. Très beau travail, j’aimerais savoir si dans le bouton Fixed il serait possible de faire un effet slide pour intégrer un post avec le menu du jour. pour un restaurant.

    Merci

Laisser un commentaire

Votre adresse e-mail 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.