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.

<?php
/**
	 * Plugin Name: REDO Elementor Additional
	 * Description: Custom element added to Elementor
	 * Plugin URI: https://redo-interactive.com/
	 * Version: 0.0.1
	 * Author: REDO
	 * Author URI: https://redo-interactive.com/
	 * Text Domain: redo-elementor-additional
*/
namespace REDO;
if ( ! defined( 'ABSPATH' ) ) {
    die( '-1' );
}
	require_once('main.php');
	$redo_object = new E_REDO();

<?php

/**

* Plugin Name: REDO Elementor Additional

* Description: Custom element added to Elementor

* Plugin URI: https://redo-interactive.com/

* Version: 0.0.1

* Author: REDO

* Author URI: https://redo-interactive.com/

* Text Domain: redo-elementor-additional

namespace REDO;

if ( ! defined( 'ABSPATH' ) ) {

die( '-1' );

}

require_once('main.php');

$redo_object = new E_REDO();

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

<?php
namespace REDO;
if (!defined('ABSPATH')) exit;

<?php

namespace REDO;

if (!defined('ABSPATH')) exit;

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

class E_REDO { }

1	class E_REDO { }

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.

 private function include_widgets_files()
   {
      require_once(__DIR__ . '/widgets/projekty.php');
   }

private function include_widgets_files()

{

require_once(__DIR__ . '/widgets/projekty.php');

}

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.

public function register_widgets()
   {
      $this->include_widgets_files();
      \Elementor\Plugin::instance()->widgets_manager->register_widget_type(new Widgets\Projekty());
   }

public function register_widgets()

{

$this->include_widgets_files();

\Elementor\Plugin::instance()->widgets_manager->register_widget_type(new Widgets\Projekty());

}

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

public function check_for_install()
   {
      E_REDO::show_redo_warning();
      return;
   }
   private function show_redo_warning()
   {
      if (!defined('ELEMENTOR_VERSION')) {
         $link = "https://pl.wordpress.org/plugins/elementor/";
         $plugin = "Elementor Page Builder";
?>
         <div class="notice notice-warning is-dismissible">
            <p>Please install <a href="<?php echo $link; ?>"><?php echo $plugin; ?></a> to use REDO JSComposer
               Additional.</p>
         </div>
      <?php
      }
      if (!defined('CPT_VERSION')) {
         $link = "https://pl.wordpress.org/plugins/custom-post-type-ui/";
         $plugin = "Custom Post Type UI";
      ?>
         <div class="notice notice-warning is-dismissible">
            <p>Please install <a href="<?php echo $link; ?>"><?php echo $plugin; ?></a> to use REDO JSComposer
               Additional.</p>
         </div>
      <?php
      }
      if (!defined('ACF_VERSION')) {
         $link = "https://pl.wordpress.org/plugins/advanced-custom-fields/";
         $plugin = "Advanced Custom Fields";
      ?>
         <div class="notice notice-warning is-dismissible">
            <p>Please install <a href="<?php echo $link; ?>"><?php echo $plugin; ?></a> to use REDO JSComposer
               Additional.</p>
         </div>
<?php
      }
   }

public function check_for_install()

{

E_REDO::show_redo_warning();

return;

}

private function show_redo_warning()

{

if (!defined('ELEMENTOR_VERSION')) {

$link = "https://pl.wordpress.org/plugins/elementor/";

$plugin = "Elementor Page Builder";

<p>Please install <a href="<?php echo $link; ?>"><?php echo $plugin; ?></a> to use REDO JSComposer

Additional.</p>

</div>

<?php

}

if (!defined('CPT_VERSION')) {

$link = "https://pl.wordpress.org/plugins/custom-post-type-ui/";

$plugin = "Custom Post Type UI";

<p>Please install <a href="<?php echo $link; ?>"><?php echo $plugin; ?></a> to use REDO JSComposer

Additional.</p>

</div>

<?php

}

if (!defined('ACF_VERSION')) {

$link = "https://pl.wordpress.org/plugins/advanced-custom-fields/";

$plugin = "Advanced Custom Fields";

<p>Please install <a href="<?php echo $link; ?>"><?php echo $plugin; ?></a> to use REDO JSComposer

Additional.</p>

</div>

<?php

}

Tout le code de notre fichier main.php :

<?php
namespace REDO;
if (!defined('ABSPATH')) exit;
class E_REDO
{
   public function __construct()
   {
      add_action('init', [$this, 'check_for_install']);
      add_action('elementor/widgets/widgets_registered', [$this, 'register_widgets']);
   }
   private function include_widgets_files()
   {
      require_once(__DIR__ . '/widgets/projekty.php');
   }
   public function register_widgets()
   {
      $this->include_widgets_files();
      \Elementor\Plugin::instance()->widgets_manager->register_widget_type(new Widgets\Projekty());
   }
   public function check_for_install()
   {
      E_REDO::show_redo_warning();
      return;
   }
   private function show_redo_warning()
   {
      if (!defined('ELEMENTOR_VERSION')) {
         $link = "https://pl.wordpress.org/plugins/elementor/";
         $plugin = "Elementor Page Builder";
?>
         <div class="notice notice-warning is-dismissible">
            <p>Please install <a href="<?php echo $link; ?>"><?php echo $plugin; ?></a> to use REDO JSComposer
               Additional.</p>
         </div>
      <?php
      }
      if (!defined('CPT_VERSION')) {
         $link = "https://pl.wordpress.org/plugins/custom-post-type-ui/";
         $plugin = "Custom Post Type UI";
      ?>
         <div class="notice notice-warning is-dismissible">
            <p>Please install <a href="<?php echo $link; ?>"><?php echo $plugin; ?></a> to use REDO JSComposer
               Additional.</p>
         </div>
      <?php
      }
      if (!defined('ACF_VERSION')) {
         $link = "https://pl.wordpress.org/plugins/advanced-custom-fields/";
         $plugin = "Advanced Custom Fields";
      ?>
         <div class="notice notice-warning is-dismissible">
            <p>Please install <a href="<?php echo $link; ?>"><?php echo $plugin; ?></a> to use REDO JSComposer
               Additional.</p>
         </div>
<?php
      }
   }
}

<?php

namespace REDO;

if (!defined('ABSPATH')) exit;

class E_REDO

{

public function __construct()

{

add_action('init', [$this, 'check_for_install']);

add_action('elementor/widgets/widgets_registered', [$this, 'register_widgets']);

}

private function include_widgets_files()

{

require_once(__DIR__ . '/widgets/projekty.php');

}

public function register_widgets()

{

$this->include_widgets_files();

\Elementor\Plugin::instance()->widgets_manager->register_widget_type(new Widgets\Projekty());

}

public function check_for_install()

{

E_REDO::show_redo_warning();

return;

}

private function show_redo_warning()

{

if (!defined('ELEMENTOR_VERSION')) {

$link = "https://pl.wordpress.org/plugins/elementor/";

$plugin = "Elementor Page Builder";

<p>Please install <a href="<?php echo $link; ?>"><?php echo $plugin; ?></a> to use REDO JSComposer

Additional.</p>

</div>

<?php

}

if (!defined('CPT_VERSION')) {

$link = "https://pl.wordpress.org/plugins/custom-post-type-ui/";

$plugin = "Custom Post Type UI";

<p>Please install <a href="<?php echo $link; ?>"><?php echo $plugin; ?></a> to use REDO JSComposer

Additional.</p>

</div>

<?php

}

if (!defined('ACF_VERSION')) {

$link = "https://pl.wordpress.org/plugins/advanced-custom-fields/";

$plugin = "Advanced Custom Fields";

<p>Please install <a href="<?php echo $link; ?>"><?php echo $plugin; ?></a> to use REDO JSComposer

Additional.</p>

</div>

<?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.

<?php
namespace REDO\Widgets;
use Elementor\Widget_Base;
use Elementor\Controls_Manager;
if ( ! defined( 'ABSPATH' ) ) exit;

<?php

namespace REDO\Widgets;

use Elementor\Widget_Base;

use Elementor\Controls_Manager;

if ( ! defined( 'ABSPATH' ) ) exit;

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

class Projekty extends Widget_Base { }

1	class Projekty extends 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.

public function get_name() {
      return 'projekty';
   }
   public function get_title() {
      return __( 'Projekty' );
   }
   public function get_icon() {
      return 'fa fa-eye';
   }
   public function get_categories(){
      return ['general'];
   }
   protected function _register_controls() {}

public function get_name() {

return 'projekty';

}

public function get_title() {

return __( 'Projekty' );

}

public function get_icon() {

return 'fa fa-eye';

}

public function get_categories(){

return ['general'];

}

protected function _register_controls() {}

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.

protected function _register_controls() {
      $this->start_controls_section(
         'section_content',
         [
           'label' => 'Settings',
         ]
       );
       $this->add_control(
         'projekty',
         [
           'label' => 'Projekty',
           'type' => \Elementor\Controls_Manager::HEADING,
           'default' => 'Display projects'
         ]
       );
       $this->end_controls_section();
     }

protected function _register_controls() {

$this->start_controls_section(

'section_content',

[

'label' => 'Settings',

]

);

$this->add_control(

'projekty',

[

'label' => 'Projekty',

'type' => \Elementor\Controls_Manager::HEADING,

'default' => 'Display projects'

]

);

$this->end_controls_section();

}

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

protected function render(){
      $args = array(
         'post_type' => 'projekt',
         'posts_per_page' => -1,
         'orderby' => 'date'
     );
     $projekty = new \WP_Query($args);
?>
         <!-- HTML DESIGN HERE -->
     <div class="projekty-container">
         <h2 class="projekty-container-tytul">PROJEKTY</h2>
             <?php while ($projekty->have_posts()) :  $projekty->the_post(); ?>
                 <div class="projekt">
                         <h1 class="projekt-tytul">
                             <a href="<?php echo get_permalink(); ?>">
                                 <?php echo get_the_title() ?>
                             </a>
                         </h1>
                     <?php echo get_the_post_thumbnail(get_the_ID(), 'medium'); ?>
                 </div>
             <?php endwhile; ?>
     </div>
         <!-- HTML END DESIGN HERE -->
       <?php
     }

protected function render(){

$args = array(

'post_type' => 'projekt',

'posts_per_page' => -1,

'orderby' => 'date'

);

$projekty = new \WP_Query($args);

<h2 class="projekty-container-tytul">PROJEKTY</h2>

<?php while ($projekty->have_posts()) : $projekty->the_post(); ?>

<?php echo get_the_title() ?>

</a>

</h1>

<?php echo get_the_post_thumbnail(get_the_ID(), 'medium'); ?>

</div>

<?php endwhile; ?>

</div>

<?php

}

Le code complet de notre widget :

<?php
namespace REDO\Widgets;
use Elementor\Widget_Base;
use Elementor\Controls_Manager;
if ( ! defined( 'ABSPATH' ) ) exit;
class Projekty extends Widget_Base {
   public function get_name() {
      return 'projekty';
   }
   public function get_title() {
      return __( 'Projekty' );
   }
   public function get_icon() {
      return 'fa fa-eye';
   }
   public function get_categories(){
      return ['general'];
   }
   protected function _register_controls() {
      $this->start_controls_section(
         'section_content',
         [
           'label' => 'Settings',
         ]
       );
       $this->add_control(
         'projekty',
         [
           'label' => 'Projekty',
           'type' => \Elementor\Controls_Manager::HEADING,
           'default' => 'Display projects'
         ]
       );
       $this->end_controls_section();
     }
     protected function render(){
      $args = array(
         'post_type' => 'projekt',
         'posts_per_page' => -1,
         'orderby' => 'date'
     );
     $projekty = new \WP_Query($args);
?>
         <!-- HTML DESIGN HERE -->
     <div class="projekty-container">
         <h2 class="projekty-container-tytul">PROJEKTY</h2>
             <?php while ($projekty->have_posts()) :  $projekty->the_post(); ?>
                 <div class="projekt">
                         <h1 class="projekt-tytul">
                             <a href="<?php echo get_permalink(); ?>">
                                 <?php echo get_the_title() ?>
                             </a>
                         </h1>
                     <?php echo get_the_post_thumbnail(get_the_ID(), 'medium'); ?>
                 </div>
             <?php endwhile; ?>
     </div>
         <!-- HTML END DESIGN HERE -->
       <?php
     }
   }

<?php

namespace REDO\Widgets;

use Elementor\Widget_Base;

use Elementor\Controls_Manager;

if ( ! defined( 'ABSPATH' ) ) exit;

class Projekty extends Widget_Base {

public function get_name() {

return 'projekty';

}

public function get_title() {

return __( 'Projekty' );

}

public function get_icon() {

return 'fa fa-eye';

}

public function get_categories(){

return ['general'];

}

protected function _register_controls() {

$this->start_controls_section(

'section_content',

[

'label' => 'Settings',

]

);

$this->add_control(

'projekty',

[

'label' => 'Projekty',

'type' => \Elementor\Controls_Manager::HEADING,

'default' => 'Display projects'

]

);

$this->end_controls_section();

}

protected function render(){

$args = array(

'post_type' => 'projekt',

'posts_per_page' => -1,

'orderby' => 'date'

);

$projekty = new \WP_Query($args);

<h2 class="projekty-container-tytul">PROJEKTY</h2>

<?php while ($projekty->have_posts()) : $projekty->the_post(); ?>

<?php echo get_the_title() ?>

</a>

</h1>

<?php echo get_the_post_thumbnail(get_the_ID(), 'medium'); ?>

</div>

<?php endwhile; ?>

</div>

<?php

}

Prêt! Nous avons un plugin fonctionnel pour ajouter nos propres widgets dans le plugin 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/