In questa guida andrò a spiegare come creare degli elementi custom (widget) di Elementor.
Questa guida non spiga come creare un plugin che genera i widget, ma come crearne ed includerli all'interno del tema in uso. La stessa procedura di creazione si può poi applicare all'interno di un plugin con le dovute accortezze e seguendo le regole per la creazione dei plugins.
La guida userà i nomi che ho dato ai miei files, quindi potete ovviamente assegnarne di diversi.
Creiamo quindi per prima cosa una cartella "RedElementorElements" con all'interno:
- sottocartella "widgets"
- index.php
- plugin.php
- red_elementor_elements.php
In functions.php richiamiamo red_elementor_elements.php che potete scaricare da qui e in cui sostanzialmente vengono fatti dei controlli della versione di php, di Elementor e poco altro, oltre a richiamare il file plugin.php
Index.php è il solito file vuoto con "Silence is golden" che potete prendere ad esempio da quello presente in wp-content.
Mentre il cuore vero e proprio della cosa è in plugin.php che potete scaricare da qui
Plugin.php contiene sostanzialmente
- il richiamo dei js
- il richiamo dei css
- il richiamo dei widgets che andrete a creare
- la creazione del blocco in cui verranno messi (alla pari dei blocchi "Base" "Pro" ecc)
Avendo io gestito i files css e js in modo diverso (messi in coda nel tema per gestire anche gli shortcodes), troverete vuote le funzioni che si occupano di mettere in coda i relativi files. Sta a voi decidere come procedere in tal senso
In plugin.php ho lasciato il richiamo a un widget che ho creato e che vedremo tra poco.
Nella cartella widgets, andrete quindi ad inserire tutti i widget che creerete e che verranno richiamati da plugin.php come potete vedere aprendo il file stesso.
Creiamo ad esempio RedElementorFlipBox.php nella cartella widgets. Il file potete trovarlo qui
Vediamo ora quindi nello specifico cosa serve per creare un widget:
- definiamo un namespace
- includiamo eventuali classi necessarie, di cui una lista abbastanza completa potrebbe essere questa:
(ovviamente caricate solo quelle necessarie in base a quello che dovete inserire come opzioni nel widget)
use ElementorWidget_Base;
use ElementorControls_Manager;
use ElementorControl_Dimensions;
use ElementorGroup_Control_Text_Shadow;
use ElementorGroup_Control_Border;
use ElementorGroup_Control_Typography;
use ElementorScheme_Typography;
- definiamo tutte le funzioni necessarie come quella del nome, del titolo, dell'icona ecc fino ad arrivare a "_register_controls"
- Questa funzione è il cuore del backend del widget e ci permette di aggiungere tutti gli elementi utili alla sua creazione e alla definizione delle sue caratteristiche
Nel file scaricato potete vedere alcuni degli elementi che Elementor mette a disposizione, mentre qui avete tutto l'elenco completo e tutte le altre informazioni utili per la generazione delle opzioni.
A seguito di questa funzione, abbiamo il cuore della generazione del codice.
La funzione render() si occupa di prendere tutti i dati salvati e generare, secondo le istruzioni date, il codice finale.
La funzione content_template() si occupa del refresh dell'elemento con JS in caso di variazioni. Tuttavia, anche se per questo elemento l'avevo scritta, non è obbligatoria come si evince da qui ed infatti per elementi molto complessi ho evitato di definirla.
Questa breve guida serve giusto per capire le metodologie di creazione dei widget. Per tutte le caratteristiche dei controlli, delle opzioni ecc potete fare riferimento alle guide ufficiali.
