Come creare un widget Elementor personalizzato
Elementor è uno dei page builder più popolari per WordPress. Creare un sito Web WordPress utilizzando Elementor è 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à gli elementi generati sul frontend.
Può succedere che tu non stia ricevendo i widget di tua scelta. Potresti cercare una funzionalità diversa che non è possibile tramite i widget predefiniti di Elementor. In tali scenari, hai bisogno di un widget personalizzato che soddisfi le tue esigenze. Fortunatamente, Elementor è facile da estendere e puoi creare qualsiasi tipo di funzionalità desideri creando un’estensione Elementor. Le estensioni di Elementor sono le stesse dei normali plugin di WordPress, estendono le funzionalità di base.
In questo articolo, ti mostro come creare un widget Elementor personalizzato che non è altro che un’estensione Elementor.
Per vederlo praticamente, prendo un esempio di Bootstrap Carousel. Creeremo un plug-in WordPress per il widget Elementor personalizzato. Questo widget ti darà la possibilità di aggiungere il carosello Bootstrap alle tue pagine.
Lo scopo di questo tutorial è farti familiarizzare con lo sviluppo di widget Elementor. Svilupperemo un widget Elementor per Bootstrap Carousel. Utilizzando lo stesso approccio, puoi creare i tuoi widget.
Creazione di un’estensione per Elementor
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.
All’interno del nostro plugin creiamo un file artisansweb-elementor-add-on.php. Questo file conterrà un codice che crea un’estensione di Elementor.
Otterrai il boilerplate della creazione dell’estensione nella documentazione di Elementor .
Seguendo la documentazione, ho scritto un codice sotto che dovresti aggiungere nel artisansweb-elementor-add-on.phpfile.
<?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();Nel init_widgets()metodo del codice interno sopra, ho incluso un artisansweb-testimonial-widget.phpdalla directory "widget". Significa che devi creare una cartella "widget" e al suo interno creare un artisansweb-testimonial-widget.phpfile.
Ho aggiunto i file JS e CSS di Bootstrap dalla enqueue_scriptsfunzione. Avviso, ho fornito direttamente un percorso CDN di quei file. L’utente può conservare questi file nella cartella del plugin e includerli sostituendo il percorso CDN sopra.
A questo punto, dovresti vedere il nome del plugin apparire nella pagina Plugin->Plugin installati.
Non attivare il plugin. Dobbiamo scrivere più codice per farlo funzionare.
Struttura widget Elementor
Abbiamo finito di includere i file richiesti per il nostro widget. La parte successiva è la creazione di un vero widget Elementor. Il sito Web di Elementor ha fornito una struttura di widget che dobbiamo seguire.
Aggiungi la struttura di base al artisansweb-testimonial-widget.phpfile come segue.
<?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() {}
}Tutti i metodi definiti nella classe precedente hanno la propria responsabilità. Devi aggiungere il nome del tuo widget nel metodo get_name(), l’icona del widget andrà all’interno get_icon(), la parte frontend verrà visualizzata dal render()metodo e così via. Le descrizioni di tutti i metodi sono disponibili nella relativa documentazione.
Nota: Elementor consente di utilizzare icone fantastiche per i caratteri, semplicemente restituisce il nome della classe come stringa. Aggiungerò l’icona ‘fa fa-sliders’ per il nostro widget.
Compiliamo il codice per tutti i metodi tranne il render(). Poiché dobbiamo prendere un riferimento dal carosello Bootstrap, aggiungeremo il codice per la render()funzione nella parte successiva del tutorial.
<?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
}
}Ho usato un controllo ripetitore Elementor che ti consente di creare blocchi di campi ripetibili. Poiché stiamo creando un carosello, avrà più campi. Qui, ho dato le opzioni per aggiungere un’immagine e una didascalia usando un controllo ripetitore.
Insieme al controllo ripetitore, ho utilizzato anche il controllo Testo e Media. Clicca qui per saperne di più sui controlli Elementor.
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.
Bootstrap Carousel utilizzando il widget Elementor personalizzato
Abbiamo deciso di creare un carosello utilizzando il widget Elementor. Se dai un’occhiata alla documentazione del carosello Bootstrap, 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.
<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>Quello sopra è HTML statico. Quando si tratta del widget Elementor, dobbiamo renderlo dinamico utilizzando i valori aggiunti per titolo e immagine.
Quindi, il nostro render()metodo avrà il codice come segue.
<?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
}
}Questo è tutto! Aggiungi le tue immagini e didascalie e ora dovresti vedere il carosello Bootstrap apparire sulla tua pagina.
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.
Spero che tu capisca come creare un widget Elementor personalizzato. Per favore condividi i tuoi pensieri e suggerimenti nella sezione commenti qui sotto.
articoli Correlati
- Integrazione di MailChimp con il plug-in Contact Form 7
- Come aggiungere il codice dopo il tag del corpo in WordPress
- Come inviare e-mail WordPress utilizzando il server SMTP