Cómo construir un widget Elementor personalizado
Elementor es uno de los creadores de páginas más populares para WordPress. Crear un sitio web de WordPress con Elementor es fácil y puede ahorrar mucho tiempo con este popular complemento. Elementor proporciona widgets para crear diferentes secciones en sus páginas. Solo necesita elegir un widget, configurarlo y mostrará los elementos generados en la interfaz.
Puede suceder que no obtenga los widgets de su elección. Es posible que esté buscando una funcionalidad diferente que no es posible a través de los widgets predeterminados de Elementor. En tales escenarios, necesita un widget personalizado que cumpla con sus requisitos. Afortunadamente, Elementor es fácil de ampliar y puede crear cualquier tipo de funcionalidad que desee creando una extensión de Elementor. Las extensiones de Elementor son las mismas que los complementos regulares de WordPress, extienden la funcionalidad básica.
En este artículo, le muestro cómo construir un widget Elementor personalizado que no es más que una extensión de Elementor.
Para verlo de manera práctica, estoy tomando un ejemplo de Bootstrap Carousel. Construiremos un complemento de WordPress para el widget Elementor personalizado. Este widget le dará la posibilidad de agregar carrusel Bootstrap en sus páginas.
El propósito de este tutorial es familiarizarlo con el desarrollo de widgets de Elementor. Vamos a desarrollar un widget Elementor para Bootstrap Carousel. Con el mismo enfoque, puede crear sus propios widgets.
Creando una extensión para Elementor
Para comenzar, debe haber instalado y activado el complemento Elementor. Después de esto, cree una carpeta ‘artisansweb-elementor-add-on’ dentro del directorio ‘wp-content / plugins’. Aquí, en el nombre de la carpeta y en la siguiente parte del código, utilizo el término ‘artisansweb’ para mantener referencias únicas. Puede cambiar este término como desee.
Dentro de nuestro complemento crea un archivo artisansweb-elementor-add-on.php. Este archivo contendrá un código que crea una extensión de Elementor.
Obtendrá el texto estándar de la creación de la extensión en la documentación de Elementor .
Siguiendo la documentación, escribí un código a continuación que debe agregar en el artisansweb-elementor-add-on.phparchivo.
<?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();En el init_widgets()método de código interno anterior, incluí un artisansweb-testimonial-widget.phpdel directorio ‘widgets’. Es decir, tienes que crear una carpeta de ‘widgets’ y dentro de ella hacer un artisansweb-testimonial-widget.phparchivo.
Agregué los archivos JS y CSS de Bootstrap desde la enqueue_scriptsfunción. Tenga en cuenta que he proporcionado una ruta CDN de esos archivos directamente. El usuario puede mantener estos archivos en la carpeta del complemento e incluirlos reemplazando la ruta CDN anterior.
En esta etapa, debería ver que el nombre del complemento aparece en la página Complementos-> Complementos instalados.
No active el complemento. Tenemos que escribir más código para que funcione.
Estructura del widget Elementor
Hemos terminado de incluir los archivos necesarios para nuestro widget. La siguiente parte es crear un widget Elementor real. El sitio web de Elementor proporcionó una estructura de widgets que debemos seguir.
Agregue la estructura básica al artisansweb-testimonial-widget.phparchivo de la siguiente manera.
<?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() {}
}Todos los métodos definidos en la clase anterior tienen su propia responsabilidad. Debe agregar el nombre de su widget en el método get_name(), el icono del widget irá adentro get_icon(), la parte de la interfaz se mostrará desde el render()método y así sucesivamente. Las descripciones de todos los métodos están disponibles en su documentación.
Nota: Elementor permite usar íconos de fuentes increíbles, simplemente devuelva el nombre de la clase como una cadena. Agregaré el ícono ‘fa fa-sliders’ para nuestro widget.
Completemos el código para todos los métodos excepto el render(). Como tenemos que tomar una referencia del carrusel de Bootstrap, agregaremos el código para la render()función en la parte posterior 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
}
}He usado un control de repetidor Elementor que le permite construir bloques de campos repetibles. A medida que creamos un carrusel, tendrá varios campos. Aquí, di las opciones para agregar una imagen y un título usando un control de repetidor.
Junto con el control de repetidor, también utilicé el control de Texto y Medios. Haga clic aquí para leer más sobre los controles de Elementor.
Active el complemento e intente editar su página con Elementor. Busque ‘Artisansweb Carousel’, agregue este widget a la página. Verá las opciones para agregar subtítulos e imágenes como se muestra en la captura de pantalla a continuación.
Bootstrap Carousel usando el widget Elementor personalizado
Todos nos propusimos construir un carrusel usando el widget Elementor. Si echas un vistazo a la documentación del carrusel de Bootstrap, te han proporcionado el código HTML para el carrusel. Estoy tomando un ejemplo de carrusel con subtítulos. Para este tipo de carrusel, debe utilizar el siguiente HTML.
<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>El anterior es HTML estático. Cuando se trata del widget Elementor, tenemos que hacerlo dinámico usando los valores agregados para el título y la imagen.
Entonces, nuestro render()método tendrá el código de la siguiente manera.
<?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
}
}¡Eso es! Agregue sus imágenes y leyendas y ahora debería ver que el carrusel Bootstrap aparece en su página.
Se trata del desarrollo de widgets en Elementor. De manera similar, puede personalizar el código para usar diferentes controles de Elementor y generar los widgets personalizados según sus requisitos.
Espero que comprenda cómo crear un widget Elementor personalizado. Comparta sus pensamientos y sugerencias en la sección de comentarios a continuación.
Artículos relacionados
- Integración de MailChimp con el complemento Contact Form 7
- Cómo agregar código después de la etiqueta del cuerpo en WordPress
- Cómo enviar correo electrónico de WordPress usando el servidor SMTP