TUTORIEL

Propre plugin ajoutant un widget au plugin Elementor

Dans les tutoriels précédents, nous avons créé REDO JSComposer Additional plugin en ajoutant des widgets à WPBakery plugin. Nous aimerions créer une solution similaire à un autre constructeur de pages – Elementor. Dans cet article, vous apprendrez comment le faire.

Elementor est personnalisé pour créer vos propres widgets et dispose d’un environnement de développement beaucoup plus agréable pour ajouter vos propres extensions. Il existe également de nombreux tutoriels sur la façon de créer votre propre plugin en créant de nouvelles fonctionnalités pour le plugin elementor. Dans cet article, nous suivrons le tutoriel sous ce lien : https://www.youtube.com/watch?v=Ko9i153o_iU&t=454s, vous trouverez ici le code source de ce tutoriel : https://github.com/alexander-young/custom-elementor-widget/.

En outre, lors de la création du plugin, nous suivrons le plugin REDO JSComposer Additional précédemment créé, sa structure et ses fonctionnalités. La description de ce plugin et le processus de sa création peuvent être trouvés dans les articles précédents : Propre plugin ajoutant un widget au plugin WPBakery et REDO JSComposer Additional – plugin ajoutant un widget à WPBakery.

Commençons !

Nous installons une version gratuite du plugin Elementor, que vous trouverez t ici et dans la collection de plugins WordPress.

En outre, nous aurons besoin des plugins ACF et CPT UI, qui ont été présentés dans des articles précédents : Créer une vue (template) pour un article personnalisé dans WordPress et Advanced Custom Fields – types de champs WordPress personnalisés. Nous les utiliserons pour afficher des vues au moyen de widgets, qui contiendront des types et des champs personnalisés. Si vous allez utiliser un plugin pour créer des vues non basées sur ces plugins , vous n’avez pas à les installer (à inclure dans le code de modification si vous n’allez pas utiliser ces plugins).

Si nous avons déjà installé Elementor, nous créons un dossier avec notre plugin. Nous faisons la même chose que pour la création du plugin REDO JSComposer Additional. Nous commençons par créer un dossier dans plugins de notre WordPress. Le dossier est nommé d’après le nouveau plugin : REDO Elementor Additional – le dossier sera nommé – redo-elementor-additional.

La structure du dossier sera similaire à celle du plugin précédent :

  • index.php – contiendra des informations sur notre plugin et fera référence au fichier main.php et initialisera la classe E_REDO – responsable de la gestion de notre plugin,
  • main.php – un fichier qui supporte notre plugin et contient une référence au dossier avec nos widgets,
  • /widgets/ – un dossier contenant des fichiers avec nos widgets, dans ce tutoriel nous allons montrer comment créer un widget affichant les messages de <projet – le fichier avec le widget s’appellera projet.php.

Allez à index.php. Nous appelons notre plugin, ajouter une description, une URL, un auteur, de la même manière que le plugin WPBaker.

Elementor nécessite un espace de noms pour fonctionner correctement namescape, ce qui empêche la duplication des noms de classe – vous trouverez plus d’informations sur les espaces de noms ici : https://www.phpdevs.pl/programowanie-obiektowe/9-przestrzenie-nazw. Nous appelons notre namescapeREDO. Nous procédons ensuite à la création d’une boucle pour vérifier si elle est définie ABSPATH..

En utilisant require_once() nous attribuons notre fichier main.php. Créez ensuite la variable $redo_object contenant l’initiation de la classe E_REDO from main file. php.

Nous allons maintenant éditer le fichier main.php. Nous donnons le même espace de nom et vérifions à nouveau ABSPATH.

Nous créons une classe E_REDO – elle contiendra la logique de notre plugin.

En classe, créez un constructeur de classe en utilisant la fonction __construct(). Dans le constructeur, comme dans le REDO JSComposer Additional, on inclut le hook’i.

  • add_action(‘init’, [$this, ‘check_for_install’]) – lors du lancement de notre plugin, nous ajoutons la vérification de l’installation des plugins nécessaires au bon fonctionnement de notre plugin, à savoir : ACF, CPT UI, Elementor,
  • add_action(‘elementor/widgets/widgets_registered’, [$this, ‘register_widgets’])– ici nous enregistrons notre widget en utilisant la fonction register_widgets().

Nous créons le include_widgets_files() ajout d’un fichier avec notre projekty.php widget.

Ajoutez la fonction register_widgets() en enregistrant notre widget dans Elementor. Il contient également la fonction include_widgets_files() qui attache nos fichiers du dossier /widgets/. N’oublions pas d’ajouter “\”, qui définit les chemins d’accès aux classes.

Nous définissons ensuite notre check_for_install(). Ceci est analogue à la check_for_install() dans le plugin REDO JSComposer Additional.

Tout le code de notre fichier main.php :

Nous passons à l’édition de notre widget – projekt.php.

La première étape consiste à créer un espace de nommage et à ajouter des classes d’éléments sur lesquelles nous baserons notre widget. Nous vérifions également ABSPATH.

Nous créons notre classe Conception en héritant au moyen d’extensions après la classe Widget_Base.

Nous avons paramétré notre widget en conséquence en utilisant la fonction d’élémentor intégrée :

  • get_name() – dans cette section, nous donnons un nom à notre widget (slug),
  • get_title() – nous donnons le Label à notre widget, il sera visible dans le panneau Elementor,
  • get_icon() – ici, nous définissons l’icône de notre widget – dans notre cas, ce sera un œil comme le plugin WPBaker. Nous pouvons ici utiliser les icônes disponibles dans FontAwesome, car Elementor est compatible avec FontAwesome par défaut.
  • get_categories() – définissez la catégorie dans laquelle notre widget sera affiché, sélectionnez ‘general’,
  • _register_controls() – ici nous donnons des options pour personnaliser notre widget, car notre but est seulement d’afficher les projets – nous ajoutons seulement une étiquette indiquant de quoi le widget est responsable.

A l’intérieur _register_controls() nous utilisons une fonction :

  • start_controls_section() – donne le nom d’une section avec personnalisation du widget,
  • add_control() – ajoute nos paramètres de personnalisation,
  • end_controls_section() – il ferme la section.

Ensuite, nous utilisons uniquement render() pour afficher la vue de notre projet.

Le code complet de notre widget :

Prêt! Nous avons un plugin fonctionnel pour ajouter nos propres widgets dans le plugin Elementor.

własny plugin do dodawania widgetów elementor

Summing

La création de plugins compatibles avec d’autres plugins tels que WPBakery ou Elementor nécessite la connaissance de l’environnement du plugin donné. Heureusement, les plug-ins disposent généralement d’une bonne documentation à partir de laquelle nous pouvons nous renseigner sur l’environnement. Dans le cas d’Elementor, il est important de ne pas oublier les espaces de noms et les préfixes des classes “\”. Elementor est adapté pour ajouter des widgets personnalisés et dispose de nombreuses fonctionnalités pour les développeurs. Vérifiez la documentation : https://docs.elementor.com/