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 namescape – REDO. 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.