Comment créer un widget Elementor personnalisé
Elementor est l’un des constructeurs de pages les plus populaires pour WordPress. Construire un site Web WordPress à l’aide d’Elementor est facile et vous pouvez gagner beaucoup de temps en utilisant ce plugin populaire. Elementor fournit des widgets pour créer différentes sections sur vos pages. Il vous suffit de prendre un widget, de le configurer et il affichera les éléments générés sur le frontend.
Il peut arriver que vous n’obteniez pas les widgets de votre choix. Vous recherchez peut-être une fonctionnalité différente qui n’est pas possible via les widgets par défaut d’Elementor. Dans de tels scénarios, vous avez besoin d’un widget personnalisé qui répond à vos besoins. Heureusement, Elementor est facile à étendre et vous pouvez créer tout type de fonctionnalité que vous souhaitez en créant une extension Elementor. Les extensions Elementor sont les mêmes que les plugins WordPress classiques, elles étendent les fonctionnalités de base.
Dans cet article, je vous montre comment créer un widget Elementor personnalisé qui n’est rien d’autre qu’une extension Elementor.
Pour le voir pratiquement, je prends un exemple de Bootstrap Carousel. Nous allons créer un plugin WordPress pour le widget Elementor personnalisé. Ce widget vous donnera la possibilité d’ajouter un carrousel Bootstrap sur vos pages.
Le but de ce didacticiel est de vous familiariser avec le développement de widgets Elementor. Nous allons développer un widget Elementor pour Bootstrap Carousel. En utilisant la même approche, vous pouvez créer vos propres widgets.
Création d’une extension pour Elementor
Pour commencer, vous devez avoir installé et activé le plugin Elementor. Après cela, créez un dossier ‘artisansweb-elementor-add-on’ dans le répertoire ‘wp-content/plugins’. Ici pour le nom du dossier et dans la partie suivante du code j’utilise le terme ‘artisansweb’ pour garder des références uniques. Vous pouvez modifier ce terme comme vous le souhaitez.
Dans notre plugin, créez un fichier artisansweb-elementor-add-on.php. Ce fichier contiendra un code qui crée une extension d’Elementor.
Vous obtiendrez le passe-partout de la création de l’extension sur la documentation Elementor .
En suivant la documentation, j’ai écrit un code ci-dessous que vous devez ajouter dans le artisansweb-elementor-add-on.phpfichier.
<?php
/*
Plugin Name: Elementor Widget - Bootstrap Carousel
Plugin URI: https://artisansweb.net
Description: Creates a Bootstrap Carousel.
Author: Artisans Web
Version: 1.0
Author URI: https://artisansweb.net
*/
if (! defined( 'ABSPATH')) {
exit; // Exit if accessed directly.
}
final class Artisansweb_Elementor_Extension {
const VERSION = '1.0';
const MINIMUM_ELEMENTOR_VERSION = '2.0.0';
const MINIMUM_PHP_VERSION = '7.0';
private static $_instance = null;
public static function instance() {
if (is_null( self::$_instance)) {
self::$_instance = new self();
}
return self::$_instance;
}
public function __construct() {
add_action( 'init', [ $this, 'i18n' ] );
add_action( 'plugins_loaded', [ $this, 'init' ] );
add_action( 'wp_enqueue_scripts', [ $this, 'enqueue_scripts' ], 11 );
}
public function init() {
// Check if Elementor installed and activated
if (! did_action( 'elementor/loaded')) {
add_action( 'admin_notices', [ $this, 'admin_notice_missing_main_plugin' ] );
return;
}
// Check for required Elementor version
if (! version_compare( ELEMENTOR_VERSION, self::MINIMUM_ELEMENTOR_VERSION, '>=')) {
add_action( 'admin_notices', [ $this, 'admin_notice_minimum_elementor_version' ] );
return;
}
// Check for required PHP version
if (version_compare( PHP_VERSION, self::MINIMUM_PHP_VERSION, '<')) {
add_action( 'admin_notices', [ $this, 'admin_notice_minimum_php_version' ] );
return;
}
// Add Plugin actions
add_action( 'elementor/widgets/widgets_registered', [ $this, 'init_widgets' ] );
}
public function i18n() {
load_plugin_textdomain( 'artisansweb-elementor-add-on' );
}
public function admin_notice_missing_main_plugin() {
if (isset( $_GET['activate'])) unset( $_GET['activate'] );
$message = sprintf(
/* translators: 1: Plugin name 2: Elementor */
esc_html__( '"%1$s" requires "%2$s" to be installed and activated.', 'artisansweb-elementor-add-on' ),
'<strong>'. esc_html__( 'Elementor', 'artisansweb-elementor-add-on' ). '</strong>'
);
printf( '<div class="notice notice-warning is-dismissible"><p>%1$s</p></div>', $message );
}
public function admin_notice_minimum_elementor_version() {
if (isset( $_GET['activate'])) unset( $_GET['activate'] );
$message = sprintf(
/* translators: 1: Plugin name 2: Elementor 3: Required Elementor version */
esc_html__( '"%1$s" requires "%2$s" version %3$s or greater.', 'artisansweb-elementor-add-on' ),
'<strong>'. esc_html__( 'Elementor', 'artisansweb-elementor-add-on' ). '</strong>',
self::MINIMUM_ELEMENTOR_VERSION
);
printf( '<div class="notice notice-warning is-dismissible"><p>%1$s</p></div>', $message );
}
public function admin_notice_minimum_php_version() {
if (isset( $_GET['activate'])) unset( $_GET['activate'] );
$message = sprintf(
/* translators: 1: Plugin name 2: PHP 3: Required PHP version */
esc_html__( '"%1$s" requires "%2$s" version %3$s or greater.', 'artisansweb-elementor-add-on' ),
'<strong>'. esc_html__( 'PHP 7.0', 'artisansweb-elementor-add-on' ). '</strong>',
self::MINIMUM_PHP_VERSION
);
printf( '<div class="notice notice-warning is-dismissible"><p>%1$s</p></div>', $message );
}
public function init_widgets() {
// Include Widget files
require_once( __DIR__. '/widgets/artisansweb-testimonial-widget.php' );
// Register widget
ElementorPlugin::instance()->widgets_manager->register_widget_type( new Artisansweb_Testmonial_Widget() );
}
public function enqueue_scripts() {
wp_register_style( "bootstrap-css", "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css", array(), false, "all" );
wp_enqueue_style( "bootstrap-css" );
wp_register_script("bootstrap-js", "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js", array(), false, true);
wp_enqueue_script("bootstrap-js");
}
}
Artisansweb_Elementor_Extension::instance();Dans le code ci-dessus à l’intérieur de la init_widgets()méthode, j’ai inclus un artisansweb-testimonial-widget.phpdu répertoire ‘widgets’. Cela signifie que vous devez créer un dossier « widgets » et à l’intérieur, créer un artisansweb-testimonial-widget.phpfichier.
J’ai ajouté les fichiers JS et CSS de Bootstrap à partir de la enqueue_scriptsfonction. Remarquez, j’ai donné un chemin CDN de ces fichiers directement. L’utilisateur peut conserver ces fichiers dans le dossier du plugin et l’inclure en remplaçant le chemin CDN ci-dessus.
À ce stade, vous devriez voir le nom du plugin apparaître sur la page Plugins->Plugins installés.
N’activez pas le plugin. Nous devons écrire plus de code pour que cela fonctionne.
Structure du widget Elementor
Nous avons terminé d’inclure les fichiers requis pour notre widget. La partie suivante consiste à créer un widget Elementor réel. Le site Web Elementor a fourni une structure de widgets que nous devons suivre.
Ajoutez la structure de base au artisansweb-testimonial-widget.phpfichier comme suit.
<?php
class Artisansweb_Testmonial_Widget extends ElementorWidget_Base {
public function get_name() {}
public function get_title() {}
public function get_icon() {}
public function get_categories() {}
protected function _register_controls() {}
protected function render() {}
protected function _content_template() {}
}Toutes les méthodes définies dans la classe ci-dessus ont leur propre responsabilité. Vous devez ajouter le nom de votre widget dans la méthode get_name(), l’icône du widget ira à l’intérieur get_icon(), la partie frontale s’affichera à partir de la render()méthode, etc. Les descriptions de toutes les méthodes sont disponibles sur leur documentation.
Remarque : Elementor permet d’utiliser des icônes géniales, renvoyant simplement le nom de la classe sous forme de chaîne. Je vais ajouter l’icône ‘fa fa-sliders’ pour notre widget.
Complétons le code pour toutes les méthodes sauf le render(). Comme nous devons prendre une référence du carrousel Bootstrap, nous ajouterons le code pour la render()fonction dans la dernière partie du didacticiel.
<?php
class Artisansweb_Testmonial_Widget extends ElementorWidget_Base {
public function get_name() {
return 'artisansweb-carousel';
}
public function get_title() {
return __( 'Artisansweb Carousel', 'artisansweb-elementor-add-on' );
}
public function get_icon() {
return 'fa fa-sliders';
}
public function get_categories() {
return [ 'general' ];
}
protected function _register_controls() {
$this->start_controls_section(
'content_section',
[
'label' => __( 'Content', 'artisansweb-elementor-add-on' ),
'tab' => ElementorControls_Manager::TAB_CONTENT,
]
);
$repeater = new ElementorRepeater();
$repeater->add_control(
'list_title', [
'label' => __( 'Title', 'artisansweb-elementor-add-on' ),
'type' => ElementorControls_Manager::TEXT,
'default' => __( 'List Title', 'artisansweb-elementor-add-on' ),
'label_block' => true,
]
);
$repeater->add_control(
'list_image',
[
'label' => __( 'Choose Image', 'artisansweb-elementor-add-on' ),
'type' => ElementorControls_Manager::MEDIA,
'default' => [
'url' => ElementorUtils::get_placeholder_image_src(),
],
]
);
$this->add_control(
'list',
[
'label' => __( 'Repeater List', 'artisansweb-elementor-add-on' ),
'type' => ElementorControls_Manager::REPEATER,
'fields' => $repeater->get_controls(),
'default' => [
[
'list_title' => __( 'Title #1', 'artisansweb-elementor-add-on' ),
'list_image' => __( 'Item image.', 'artisansweb-elementor-add-on' ),
],
[
'list_title' => __( 'Title #2', 'artisansweb-elementor-add-on' ),
'list_image' => __( 'Item image.', 'artisansweb-elementor-add-on' ),
],
],
'title_field' => '{{{ list_title }}}',
]
);
$this->end_controls_section();
}
protected function render() {
// generate the final HTML on the frontend using PHP
}
}J’ai utilisé un contrôle de répéteur Elementor qui vous permet de créer des blocs de champs répétables. Comme nous créons un carrousel, il aura plusieurs champs. Ici, j’ai donné les options pour ajouter une image et une légende à l’aide d’un contrôle de répétition.
En plus du contrôle du répéteur, j’ai également utilisé le contrôle Text and Media. Cliquez ici pour en savoir plus sur les contrôles Elementor.
Activez le plugin et essayez de modifier votre page avec Elementor. Recherchez ‘Artisansweb Carousel’, ajoutez ce widget à la page. Vous verrez les options pour ajouter une légende et des images comme indiqué dans la capture d’écran ci-dessous.
Bootstrap Carousel utilisant le widget Elementor personnalisé
Nous avons tous entrepris de construire un carrousel à l’aide du widget Elementor. Si vous jetez un œil à la documentation du carrousel Bootstrap, ils ont fourni le code HTML du carrousel. Je prends l’exemple d’un carrousel avec des légendes. Pour ce type de carrousel, vous devez utiliser le code HTML ci-dessous.
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
<h3>Caption here...</h3>
</div>
<div class="carousel-item">
<img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
<h3>Caption here...</h3>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>Celui ci-dessus est du HTML statique. En ce qui concerne le widget Elementor, nous devons le rendre dynamique en utilisant les valeurs ajoutées pour le titre et l’image.
Ainsi, notre render()méthode aura le code suivant.
<?php
protected function render() {
// generate the final HTML on the frontend using PHP
$settings = $this->get_settings_for_display();
if ($settings['list']) {
?>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<?php for($i=0; $i<count($settings['list']); $i++) { ?>
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="<?php echo ($i==0)? 'active':''; ?>"></li>
<?php } ?>
</ol>
<div class="carousel-inner">
<?php $i = 0; ?>
<?php foreach ( $settings['list'] as $item) { ?>
<div class="carousel-item <?php echo ($i==0)? 'active':''; ?>">
<img class="d-block w-100" src="<?php echo $item['list_image']['url']; ?>" alt="<?php echo $item['list_title']; ?>" />
<div class="carousel-caption d-none d-md-block">
<h3><?php echo $item['list_title']; ?></h3>
</div>
</div>
<?php $i++; ?>
<?php } ?>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<?php
}
}C’est ça! Ajoutez vos images et légendes et vous devriez maintenant voir le carrousel Bootstrap apparaître sur votre page.
Tout tourne autour du développement de widgets dans Elementor. De la même manière, vous pouvez personnaliser le code pour utiliser différents contrôles Elementor et générer les widgets personnalisés selon vos besoins.
J’espère que vous comprenez comment créer un widget Elementor personnalisé. S’il vous plaît partager vos pensées et suggestions dans la section commentaires ci-dessous.
Articles Liés
- Intégration de MailChimp avec le plugin Contact Form 7
- Comment ajouter du code après la balise Body dans WordPress
- Comment envoyer un e-mail WordPress à l’aide du serveur SMTP