{"id":25426,"date":"2021-05-31T11:48:00","date_gmt":"2021-05-31T08:48:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=25426"},"modified":"2021-10-18T03:06:48","modified_gmt":"2021-10-18T00:06:48","slug":"come-creare-un-widget-elementor-personalizzato","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/it\/come-creare-un-widget-elementor-personalizzato\/","title":{"rendered":"Come creare un widget Elementor personalizzato"},"content":{"rendered":"

Elementor<\/a> \u00e8 uno dei page builder pi\u00f9 popolari per WordPress. Creare un sito Web WordPress utilizzando Elementor \u00e8 facile e puoi risparmiare un sacco di tempo utilizzando questo popolare plug-in. Elementor fornisce widget per creare diverse sezioni sulle tue pagine. Devi solo prendere un widget, configurarlo e visualizzer\u00e0 gli elementi generati sul frontend.<\/p>\n

Pu\u00f2 succedere che tu non stia ricevendo i widget di tua scelta. Potresti cercare una funzionalit\u00e0 diversa che non \u00e8 possibile tramite i widget predefiniti di Elementor. In tali scenari, hai bisogno di un widget personalizzato che soddisfi le tue esigenze. Fortunatamente, Elementor \u00e8 facile da estendere e puoi creare qualsiasi tipo di funzionalit\u00e0 desideri creando un’estensione Elementor. Le estensioni di Elementor sono le stesse dei normali plugin di WordPress, estendono le funzionalit\u00e0 di base.<\/p>\n

In questo articolo, ti mostro come creare un widget Elementor personalizzato che non \u00e8 altro che un’estensione Elementor.<\/p>\n

Per vederlo praticamente, prendo un esempio di Bootstrap Carousel<\/a>. Creeremo un plug-in WordPress per il widget Elementor personalizzato. Questo widget ti dar\u00e0 la possibilit\u00e0 di aggiungere il carosello Bootstrap alle tue pagine.<\/p>\n

Lo scopo di questo tutorial \u00e8 farti familiarizzare con lo sviluppo di widget Elementor. Svilupperemo un widget Elementor per Bootstrap Carousel. Utilizzando lo stesso approccio, puoi creare i tuoi widget.<\/p>\n

Creazione di un’estensione per Elementor<\/h3>\n

Per iniziare, devi aver installato e attivato il plug-in Elementor. Successivamente, crea una cartella ‘artisansweb-elementor-add-on’ all’interno della directory ‘wp-content\/plugins’. Qui al nome della cartella e nella parte successiva del codice uso il termine ‘artisansweb’ per mantenere i riferimenti univoci. Puoi modificare questo termine come preferisci.<\/p>\n

All’interno del nostro plugin creiamo un file artisansweb-elementor-add-on.php<\/code>. Questo file conterr\u00e0 un codice che crea un’estensione di Elementor.<\/p>\n

Otterrai il boilerplate della creazione dell’estensione nella documentazione di<\/a> Elementor .<\/p>\n

Seguendo la documentazione, ho scritto un codice sotto che dovresti aggiungere nel artisansweb-elementor-add-on.php<\/code>file.<\/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
Nel init_widgets()<\/code>metodo del codice interno sopra, ho incluso un artisansweb-testimonial-widget.php<\/code>dalla directory "widget". Significa che devi creare una cartella "widget" e al suo interno creare un artisansweb-testimonial-widget.php<\/code>file.<\/p>\n
Ho aggiunto i file JS e CSS di Bootstrap dalla enqueue_scripts<\/code>funzione. Avviso, ho fornito direttamente un percorso CDN di quei file. L’utente pu\u00f2 conservare questi file nella cartella del plugin e includerli sostituendo il percorso CDN sopra.<\/p>\n
A questo punto, dovresti vedere il nome del plugin apparire nella pagina Plugin->Plugin installati<\/strong>.<\/p>\n
Non attivare il plugin. Dobbiamo scrivere pi\u00f9 codice per farlo funzionare.<\/p>\n
Struttura widget Elementor<\/h3>\n
Abbiamo finito di includere i file richiesti per il nostro widget. La parte successiva \u00e8 la creazione di un vero widget Elementor. Il sito Web di Elementor ha fornito una struttura di widget<\/a> che dobbiamo seguire.<\/p>\n
Aggiungi la struttura di base al artisansweb-testimonial-widget.php<\/code>file come segue.<\/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
Tutti i metodi definiti nella classe precedente hanno la propria responsabilit\u00e0. Devi aggiungere il nome del tuo widget nel metodo get_name()<\/code>, l’icona del widget andr\u00e0 all’interno get_icon()<\/code>, la parte frontend verr\u00e0 visualizzata dal render()<\/code>metodo e cos\u00ec via. Le descrizioni di tutti i metodi sono disponibili nella relativa documentazione<\/a>.<\/p>\n
Nota:<\/strong> Elementor consente di utilizzare icone fantastiche per i caratteri, semplicemente restituisce il nome della classe come stringa. Aggiunger\u00f2 l’icona ‘fa fa-sliders’ per il nostro widget.<\/p>\n
Compiliamo il codice per tutti i metodi tranne il render()<\/code>. Poich\u00e9 dobbiamo prendere un riferimento dal carosello Bootstrap, aggiungeremo il codice per la render()<\/code>funzione nella parte successiva del tutorial.<\/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
Ho usato un controllo ripetitore Elementor che ti consente di creare blocchi di campi ripetibili. Poich\u00e9 stiamo creando un carosello, avr\u00e0 pi\u00f9 campi. Qui, ho dato le opzioni per aggiungere un’immagine e una didascalia usando un controllo ripetitore.<\/p>\n
Insieme al controllo ripetitore, ho utilizzato anche il controllo Testo e Media. Clicca qui<\/a> per saperne di pi\u00f9 sui controlli Elementor.<\/p>\n
Attiva il plugin e prova a modificare la tua pagina con Elementor. Cerca "Artisansweb Carousel", aggiungi questo widget alla pagina. Vedrai le opzioni per aggiungere didascalie e immagini come mostrato nello screenshot qui sotto.<\/p>\n
Bootstrap Carousel utilizzando il widget Elementor personalizzato<\/h3>\n
Abbiamo deciso di creare un carosello utilizzando il widget Elementor. Se dai un’occhiata alla documentazione del carosello Bootstrap<\/a>, hanno fornito il codice HTML per il carosello. Sto prendendo un esempio di una giostra con didascalie. Per questo tipo di carosello, devi utilizzare il codice HTML sottostante.<\/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
Quello sopra \u00e8 HTML statico. Quando si tratta del widget Elementor, dobbiamo renderlo dinamico utilizzando i valori aggiunti per titolo e immagine.<\/p>\n
Quindi, il nostro render()<\/code>metodo avr\u00e0 il codice come segue.<\/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
Questo \u00e8 tutto! Aggiungi le tue immagini e didascalie e ora dovresti vedere il carosello Bootstrap apparire sulla tua pagina.<\/p>\n
Si tratta di sviluppare widget in Elementor. In modo simile, puoi personalizzare il codice per utilizzare diversi controlli Elementor e generare i widget personalizzati secondo le tue esigenze.<\/p>\n
Spero che tu capisca come creare un widget Elementor personalizzato. Per favore condividi i tuoi pensieri e suggerimenti nella sezione commenti qui sotto.<\/p>\n
articoli Correlati<\/h4>\n