{"id":25127,"date":"2021-05-31T12:00:00","date_gmt":"2021-05-31T09:00:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=25127"},"modified":"2021-10-18T02:10:09","modified_gmt":"2021-10-17T23:10:09","slug":"comment-creer-un-widget-elementor-personnalise","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fr\/comment-creer-un-widget-elementor-personnalise\/","title":{"rendered":"Comment cr\u00e9er un widget Elementor personnalis\u00e9"},"content":{"rendered":"

Elementor<\/a> est l’un des constructeurs de pages les plus populaires pour WordPress. Construire un site Web WordPress \u00e0 l’aide d’Elementor est facile et vous pouvez gagner beaucoup de temps en utilisant ce plugin populaire. Elementor fournit des widgets pour cr\u00e9er diff\u00e9rentes sections sur vos pages. Il vous suffit de prendre un widget, de le configurer et il affichera les \u00e9l\u00e9ments g\u00e9n\u00e9r\u00e9s sur le frontend.<\/p>\n

Il peut arriver que vous n’obteniez pas les widgets de votre choix. Vous recherchez peut-\u00eatre une fonctionnalit\u00e9 diff\u00e9rente qui n’est pas possible via les widgets par d\u00e9faut d’Elementor. Dans de tels sc\u00e9narios, vous avez besoin d’un widget personnalis\u00e9 qui r\u00e9pond \u00e0 vos besoins. Heureusement, Elementor est facile \u00e0 \u00e9tendre et vous pouvez cr\u00e9er tout type de fonctionnalit\u00e9 que vous souhaitez en cr\u00e9ant une extension Elementor. Les extensions Elementor sont les m\u00eames que les plugins WordPress classiques, elles \u00e9tendent les fonctionnalit\u00e9s de base.<\/p>\n

Dans cet article, je vous montre comment cr\u00e9er un widget Elementor personnalis\u00e9 qui n’est rien d’autre qu’une extension Elementor.<\/p>\n

Pour le voir pratiquement, je prends un exemple de Bootstrap Carousel<\/a>. Nous allons cr\u00e9er un plugin WordPress pour le widget Elementor personnalis\u00e9. Ce widget vous donnera la possibilit\u00e9 d’ajouter un carrousel Bootstrap sur vos pages.<\/p>\n

Le but de ce didacticiel est de vous familiariser avec le d\u00e9veloppement de widgets Elementor. Nous allons d\u00e9velopper un widget Elementor pour Bootstrap Carousel. En utilisant la m\u00eame approche, vous pouvez cr\u00e9er vos propres widgets.<\/p>\n

Cr\u00e9ation d’une extension pour Elementor<\/h3>\n

Pour commencer, vous devez avoir install\u00e9 et activ\u00e9 le plugin Elementor. Apr\u00e8s cela, cr\u00e9ez un dossier ‘artisansweb-elementor-add-on’ dans le r\u00e9pertoire ‘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\u00e9f\u00e9rences uniques. Vous pouvez modifier ce terme comme vous le souhaitez.<\/p>\n

Dans notre plugin, cr\u00e9ez un fichier artisansweb-elementor-add-on.php<\/code>. Ce fichier contiendra un code qui cr\u00e9e une extension d’Elementor.<\/p>\n

Vous obtiendrez le passe-partout de la cr\u00e9ation de l’extension sur la documentation<\/a> Elementor .<\/p>\n

En suivant la documentation, j’ai \u00e9crit un code ci-dessous que vous devez ajouter dans le artisansweb-elementor-add-on.php<\/code>fichier.<\/p>\n

<?php\n\/*\nPlugin Name: Elementor Widget - Bootstrap Carousel\nPlugin URI: https:\/\/artisansweb.net\nDescription: Creates a Bootstrap Carousel.\nAuthor: Artisans Web\nVersion: 1.0\nAuthor URI: https:\/\/artisansweb.net\n*\/\n\u00a0\nif (! defined( 'ABSPATH')) {\n\u00a0\u00a0\u00a0\u00a0exit; \/\/ Exit if accessed directly.\n}\n\u00a0\nfinal class Artisansweb_Elementor_Extension {\n\u00a0\n\u00a0\u00a0\u00a0\u00a0const VERSION = '1.0';\n\u00a0\u00a0\u00a0\u00a0const MINIMUM_ELEMENTOR_VERSION = '2.0.0';\n\u00a0\u00a0\u00a0\u00a0const MINIMUM_PHP_VERSION = '7.0';\n\u00a0\n\u00a0\u00a0\u00a0\u00a0private static $_instance = null;\n\u00a0\n\u00a0\u00a0\u00a0\u00a0public static function instance() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (is_null( self::$_instance)) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0self::$_instance = new self();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return self::$_instance;\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0public function __construct() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0add_action( 'init', [ $this, 'i18n' ] );\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0add_action( 'plugins_loaded', [ $this, 'init' ] );\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0add_action( 'wp_enqueue_scripts', [ $this, 'enqueue_scripts' ], 11 );\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0public function init() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ Check if Elementor installed and activated\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (! did_action( 'elementor\/loaded')) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0add_action( 'admin_notices', [ $this, 'admin_notice_missing_main_plugin' ] );\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ Check for required Elementor version\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (! version_compare( ELEMENTOR_VERSION, self::MINIMUM_ELEMENTOR_VERSION, '>=')) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0add_action( 'admin_notices', [ $this, 'admin_notice_minimum_elementor_version' ] );\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ Check for required PHP version\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (version_compare( PHP_VERSION, self::MINIMUM_PHP_VERSION, '<')) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0add_action( 'admin_notices', [ $this, 'admin_notice_minimum_php_version' ] );\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ Add Plugin actions\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0add_action( 'elementor\/widgets\/widgets_registered', [ $this, 'init_widgets' ] );\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0public function i18n() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0load_plugin_textdomain( 'artisansweb-elementor-add-on' );\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0public function admin_notice_missing_main_plugin() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (isset( $_GET['activate'])) unset( $_GET['activate'] );\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$message = sprintf(\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/* translators: 1: Plugin name 2: Elementor *\/\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0esc_html__( '\"%1$s\" requires \"%2$s\" to be installed and activated.', 'artisansweb-elementor-add-on' ),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'<strong>'. esc_html__( 'Elementor', 'artisansweb-elementor-add-on' ). '<\/strong>'\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0printf( '<div class=\"notice notice-warning is-dismissible\"><p>%1$s<\/p><\/div>', $message );\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0public function admin_notice_minimum_elementor_version() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (isset( $_GET['activate'])) unset( $_GET['activate'] );\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$message = sprintf(\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/* translators: 1: Plugin name 2: Elementor 3: Required Elementor version *\/\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0esc_html__( '\"%1$s\" requires \"%2$s\" version %3$s or greater.', 'artisansweb-elementor-add-on' ),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'<strong>'. esc_html__( 'Elementor', 'artisansweb-elementor-add-on' ). '<\/strong>',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0self::MINIMUM_ELEMENTOR_VERSION\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0printf( '<div class=\"notice notice-warning is-dismissible\"><p>%1$s<\/p><\/div>', $message );\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0public function admin_notice_minimum_php_version() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (isset( $_GET['activate'])) unset( $_GET['activate'] );\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$message = sprintf(\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/* translators: 1: Plugin name 2: PHP 3: Required PHP version *\/\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0esc_html__( '\"%1$s\" requires \"%2$s\" version %3$s or greater.', 'artisansweb-elementor-add-on' ),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'<strong>'. esc_html__( 'PHP 7.0', 'artisansweb-elementor-add-on' ). '<\/strong>',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0self::MINIMUM_PHP_VERSION\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0printf( '<div class=\"notice notice-warning is-dismissible\"><p>%1$s<\/p><\/div>', $message );\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0public function init_widgets() {\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ Include Widget files\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0require_once( __DIR__. '\/widgets\/artisansweb-testimonial-widget.php' );\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ Register widget\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0ElementorPlugin::instance()->widgets_manager->register_widget_type( new Artisansweb_Testmonial_Widget() );\n\u00a0\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0public function enqueue_scripts() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0wp_register_style( \"bootstrap-css\", \"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.1.3\/css\/bootstrap.min.css\", array(), false, \"all\" );\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0wp_enqueue_style( \"bootstrap-css\" );\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0wp_register_script(\"bootstrap-js\", \"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.1.3\/js\/bootstrap.min.js\", array(), false, true);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0wp_enqueue_script(\"bootstrap-js\");\n\u00a0\u00a0\u00a0\u00a0}\n}\nArtisansweb_Elementor_Extension::instance();<\/code><\/pre>\n
Dans le code ci-dessus \u00e0 l’int\u00e9rieur de la init_widgets()<\/code>m\u00e9thode, j’ai inclus un artisansweb-testimonial-widget.php<\/code>du r\u00e9pertoire ‘widgets’. Cela signifie que vous devez cr\u00e9er un dossier \u00ab\u00a0widgets\u00a0\u00bb et \u00e0 l’int\u00e9rieur, cr\u00e9er un artisansweb-testimonial-widget.php<\/code>fichier.<\/p>\n
J’ai ajout\u00e9 les fichiers JS et CSS de Bootstrap \u00e0 partir de la enqueue_scripts<\/code>fonction. Remarquez, j’ai donn\u00e9 un chemin CDN de ces fichiers directement. L’utilisateur peut conserver ces fichiers dans le dossier du plugin et l’inclure en rempla\u00e7ant le chemin CDN ci-dessus.<\/p>\n
\u00c0 ce stade, vous devriez voir le nom du plugin appara\u00eetre sur la page Plugins->Plugins install\u00e9s<\/strong>.<\/p>\n
N’activez pas le plugin. Nous devons \u00e9crire plus de code pour que cela fonctionne.<\/p>\n
Structure du widget Elementor<\/h3>\n
Nous avons termin\u00e9 d’inclure les fichiers requis pour notre widget. La partie suivante consiste \u00e0 cr\u00e9er un widget Elementor r\u00e9el. Le site Web Elementor a fourni une structure de widgets<\/a> que nous devons suivre.<\/p>\n
Ajoutez la structure de base au artisansweb-testimonial-widget.php<\/code>fichier comme suit.<\/p>\n
<?php\nclass Artisansweb_Testmonial_Widget extends ElementorWidget_Base {\n\u00a0\n\u00a0\u00a0\u00a0\u00a0public function get_name() {}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0public function get_title() {}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0public function get_icon() {}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0public function get_categories() {}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0protected function _register_controls() {}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0protected function render() {}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0protected function _content_template() {}\n\u00a0\n}<\/code><\/pre>\n
Toutes les m\u00e9thodes d\u00e9finies dans la classe ci-dessus ont leur propre responsabilit\u00e9. Vous devez ajouter le nom de votre widget dans la m\u00e9thode get_name()<\/code>, l’ic\u00f4ne du widget ira \u00e0 l’int\u00e9rieur get_icon()<\/code>, la partie frontale s’affichera \u00e0 partir de la render()<\/code>m\u00e9thode, etc. Les descriptions de toutes les m\u00e9thodes sont disponibles sur leur documentation<\/a>.<\/p>\n
Remarque :<\/strong> Elementor permet d’utiliser des ic\u00f4nes g\u00e9niales, renvoyant simplement le nom de la classe sous forme de cha\u00eene. Je vais ajouter l’ic\u00f4ne ‘fa fa-sliders’ pour notre widget.<\/p>\n
Compl\u00e9tons le code pour toutes les m\u00e9thodes sauf le render()<\/code>. Comme nous devons prendre une r\u00e9f\u00e9rence du carrousel Bootstrap, nous ajouterons le code pour la render()<\/code>fonction dans la derni\u00e8re partie du didacticiel.<\/p>\n
<?php\nclass Artisansweb_Testmonial_Widget extends ElementorWidget_Base {\n\u00a0\n\u00a0\u00a0\u00a0\u00a0public function get_name() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return 'artisansweb-carousel';\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0public function get_title() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return __( 'Artisansweb Carousel', 'artisansweb-elementor-add-on' );\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0public function get_icon() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return 'fa fa-sliders';\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0public function get_categories() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return [ 'general' ];\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0protected function _register_controls() {\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$this->start_controls_section(\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'content_section',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0[\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'label' => __( 'Content', 'artisansweb-elementor-add-on' ),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'tab' => ElementorControls_Manager::TAB_CONTENT,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0]\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$repeater = new ElementorRepeater();\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$repeater->add_control(\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'list_title', [\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'label' => __( 'Title', 'artisansweb-elementor-add-on' ),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'type' => ElementorControls_Manager::TEXT,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'default' => __( 'List Title', 'artisansweb-elementor-add-on' ),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'label_block' => true,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0]\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$repeater->add_control(\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'list_image',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0[\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'label' => __( 'Choose Image', 'artisansweb-elementor-add-on' ),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'type' => ElementorControls_Manager::MEDIA,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'default' => [\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'url' => ElementorUtils::get_placeholder_image_src(),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0],\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0]\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$this->add_control(\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'list',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0[\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'label' => __( 'Repeater List', 'artisansweb-elementor-add-on' ),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'type' => ElementorControls_Manager::REPEATER,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'fields' => $repeater->get_controls(),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'default' => [\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0[\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'list_title' => __( 'Title #1', 'artisansweb-elementor-add-on' ),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'list_image' => __( 'Item image.', 'artisansweb-elementor-add-on' ),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0],\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0[\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'list_title' => __( 'Title #2', 'artisansweb-elementor-add-on' ),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'list_image' => __( 'Item image.', 'artisansweb-elementor-add-on' ),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0],\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0],\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'title_field' => '{{{ list_title }}}',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0]\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$this->end_controls_section();\n\u00a0\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0protected function render() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ generate the final HTML on the frontend using PHP\n\u00a0\u00a0\u00a0\u00a0}\n}<\/code><\/pre>\n
J’ai utilis\u00e9 un contr\u00f4le de r\u00e9p\u00e9teur Elementor qui vous permet de cr\u00e9er des blocs de champs r\u00e9p\u00e9tables. Comme nous cr\u00e9ons un carrousel, il aura plusieurs champs. Ici, j’ai donn\u00e9 les options pour ajouter une image et une l\u00e9gende \u00e0 l’aide d’un contr\u00f4le de r\u00e9p\u00e9tition.<\/p>\n
En plus du contr\u00f4le du r\u00e9p\u00e9teur, j’ai \u00e9galement utilis\u00e9 le contr\u00f4le Text and Media. Cliquez ici<\/a> pour en savoir plus sur les contr\u00f4les Elementor.<\/p>\n
Activez le plugin et essayez de modifier votre page avec Elementor. Recherchez ‘Artisansweb Carousel’, ajoutez ce widget \u00e0 la page. Vous verrez les options pour ajouter une l\u00e9gende et des images comme indiqu\u00e9 dans la capture d’\u00e9cran ci-dessous.<\/p>\n
Bootstrap Carousel utilisant le widget Elementor personnalis\u00e9<\/h3>\n
Nous avons tous entrepris de construire un carrousel \u00e0 l’aide du widget Elementor. Si vous jetez un \u0153il \u00e0 la documentation du carrousel Bootstrap<\/a>, ils ont fourni le code HTML du carrousel. Je prends l’exemple d’un carrousel avec des l\u00e9gendes. Pour ce type de carrousel, vous devez utiliser le code HTML ci-dessous.<\/p>\n
<div id=\"carouselExampleIndicators\" class=\"carousel slide\" data-ride=\"carousel\">\n\u00a0\u00a0\u00a0\u00a0<ol class=\"carousel-indicators\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<li data-target=\"#carouselExampleIndicators\" data-slide-to=\"0\" class=\"active\"><\/li>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<li data-target=\"#carouselExampleIndicators\" data-slide-to=\"1\"><\/li>\n\u00a0\u00a0\u00a0\u00a0<\/ol>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"carousel-inner\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"carousel-item active\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<img class=\"d-block w-100\" src=\"...\/800x400?auto=yes&bg=777&fg=555&text=First slide\" alt=\"First slide\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<h3>Caption here...<\/h3>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"carousel-item\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<img class=\"d-block w-100\" src=\"...\/800x400?auto=yes&bg=666&fg=444&text=Second slide\" alt=\"Second slide\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<h3>Caption here...<\/h3>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<a class=\"carousel-control-prev\" href=\"#carouselExampleIndicators\" role=\"button\" data-slide=\"prev\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"carousel-control-prev-icon\" aria-hidden=\"true\"><\/span>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"sr-only\">Previous<\/span>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/a>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<a class=\"carousel-control-next\" href=\"#carouselExampleIndicators\" role=\"button\" data-slide=\"next\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"carousel-control-next-icon\" aria-hidden=\"true\"><\/span>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"sr-only\">Next<\/span>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/a>\n<\/div><\/code><\/pre>\n
Celui ci-dessus est du HTML statique. En ce qui concerne le widget Elementor, nous devons le rendre dynamique en utilisant les valeurs ajout\u00e9es pour le titre et l’image.<\/p>\n
Ainsi, notre render()<\/code>m\u00e9thode aura le code suivant.<\/p>\n
<?php\nprotected function render() {\n\u00a0\u00a0\u00a0\u00a0\/\/ generate the final HTML on the frontend using PHP\n\u00a0\u00a0\u00a0\u00a0$settings = $this->get_settings_for_display();\n\u00a0\n\u00a0\u00a0\u00a0\u00a0if ($settings['list']) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div id=\"carouselExampleIndicators\" class=\"carousel slide\" data-ride=\"carousel\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<ol class=\"carousel-indicators\">\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php for($i=0; $i<count($settings['list']); $i++) { ?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<li data-target=\"#carouselExampleIndicators\" data-slide-to=\"0\" class=\"<?php echo ($i==0)? 'active':''; ?>\"><\/li>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php } ?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/ol>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"carousel-inner\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php $i = 0; ?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php foreach (\u00a0 $settings['list'] as $item) { ?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"carousel-item <?php echo ($i==0)? 'active':''; ?>\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<img class=\"d-block w-100\" src=\"<?php echo $item['list_image']['url']; ?>\" alt=\"<?php echo $item['list_title']; ?>\" \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"carousel-caption d-none d-md-block\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<h3><?php echo $item['list_title']; ?><\/h3>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php $i++; ?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php } ?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<a class=\"carousel-control-prev\" href=\"#carouselExampleIndicators\" role=\"button\" data-slide=\"prev\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"carousel-control-prev-icon\" aria-hidden=\"true\"><\/span>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"sr-only\">Previous<\/span>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/a>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<a class=\"carousel-control-next\" href=\"#carouselExampleIndicators\" role=\"button\" data-slide=\"next\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"carousel-control-next-icon\" aria-hidden=\"true\"><\/span>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"sr-only\">Next<\/span>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/a>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php\n\u00a0\u00a0\u00a0\u00a0}\n}<\/code><\/pre>\n
C’est \u00e7a! Ajoutez vos images et l\u00e9gendes et vous devriez maintenant voir le carrousel Bootstrap appara\u00eetre sur votre page.<\/p>\n
Tout tourne autour du d\u00e9veloppement de widgets dans Elementor. De la m\u00eame mani\u00e8re, vous pouvez personnaliser le code pour utiliser diff\u00e9rents contr\u00f4les Elementor et g\u00e9n\u00e9rer les widgets personnalis\u00e9s selon vos besoins.<\/p>\n
J’esp\u00e8re que vous comprenez comment cr\u00e9er un widget Elementor personnalis\u00e9. S’il vous pla\u00eet partager vos pens\u00e9es et suggestions dans la section commentaires ci-dessous.<\/p>\n
Articles Li\u00e9s<\/h4>\n