Como construir um elemento customizado ou widget
Elementor é um dos criadores de páginas mais populares para WordPress. Construir um site WordPress usando Elementor é fácil e você pode economizar muito tempo usando este plugin popular. Elementor fornece widgets para criar diferentes seções em suas páginas. Você só precisa pegar um widget, configurá-lo e ele exibirá os elementos gerados no frontend.
Pode acontecer que você não esteja recebendo os widgets de sua escolha. Você pode estar procurando por uma funcionalidade diferente que não é possível através dos widgets padrão do Elementor. Em tais cenários, você precisa de um widget customizado que atenda aos seus requisitos. Felizmente, Elementor é fácil de estender e você pode construir qualquer tipo de funcionalidade que desejar criando uma extensão Elementor. As extensões Elementor são iguais aos plug-ins normais do WordPress, estendem a funcionalidade básica.
Neste artigo, mostro como construir um widget Elementor customizado que nada mais é do que uma extensão Elementor.
Para ver na prática, estou usando um exemplo de Carrossel Bootstrap. Vamos construir um plugin WordPress para o widget Elementor customizado. Este widget lhe dará a capacidade de adicionar carrossel Bootstrap em suas páginas.
O objetivo deste tutorial é familiarizá-lo com o desenvolvimento de widget Elementor. Vamos desenvolver um widget Elementor para o Bootstrap Carousel. Usando a mesma abordagem, você pode construir seus próprios widgets.
Criando uma extensão para o Elementor
Para começar, você deve ter instalado e ativado o plugin Elementor. Depois disso, crie uma pasta ‘artisansweb-elementor-add-on’ dentro do diretório ‘wp-content / plugins’. Aqui, no nome da pasta e na próxima parte do código, uso o termo ‘artisansweb’ para manter referências exclusivas. Você pode alterar este termo conforme desejar.
Dentro do nosso plugin, crie um arquivo artisansweb-elementor-add-on.php
. Este arquivo conterá um código que cria uma extensão de Elementor.
Você obterá o clichê de criação da extensão na documentação do Elementor .
Seguindo a documentação, escrevi um código abaixo que você deve adicionar ao artisansweb-elementor-add-on.php
arquivo.
<?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();
No init_widgets()
método interno do código acima, incluí um artisansweb-testimonial-widget.php
do diretório ‘widgets’. Isso significa que você tem que criar uma pasta de ‘widgets’ e dentro dela fazer um artisansweb-testimonial-widget.php
arquivo.
Eu adicionei os arquivos JS e CSS do Bootstrap da enqueue_scripts
função. Observe, eu forneci um caminho CDN desses arquivos diretamente. O usuário pode manter esses arquivos na pasta de plug-ins e incluí-los substituindo o caminho CDN acima.
Neste estágio, você deve ver o nome do plug-in aparecer na página Plug-ins-> Plug-ins instalados.
Não ative o plugin. Precisamos escrever mais código para fazê-lo funcionar.
Elementor Widget Structure
Terminamos de incluir os arquivos necessários para nosso widget. A próxima parte é criar um widget Elementor real. O site Elementor forneceu uma estrutura de widget que devemos seguir.
Adicione a estrutura básica ao artisansweb-testimonial-widget.php
arquivo da seguinte maneira.
<?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 os métodos definidos na classe acima têm sua própria responsabilidade. Você tem que adicionar o nome do widget no método get_name()
, o ícone do widget irá para dentro get_icon()
, a parte do frontend será exibida a partir do render()
método e assim por diante. As descrições de todos os métodos estão disponíveis em sua documentação.
Nota: Elementor permite usar ícones impressionantes de fontes, basta retornar o nome da classe como uma string. Vou adicionar o ícone ‘fa fa-sliders’ para o nosso widget.
Vamos preencher o código para todos os métodos, exceto o render()
. Como precisamos obter uma referência do carrossel do Bootstrap, adicionaremos o código para a render()
função na parte posterior do 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
}
}
Eu usei um controle de repetidor Elementor que permite construir blocos de campos repetíveis. Como estamos criando um carrossel, ele terá vários campos. Aqui, dei as opções para adicionar uma imagem e uma legenda usando um controle repetidor.
Junto com o controle de repetidor, também usei o controle de Texto e Mídia. Clique aqui para ler mais sobre os controles Elementor.
Ative o plugin e tente editar sua página com Elementor. Pesquise por ‘Artisansweb Carousel’ e adicione este widget à página. Você verá as opções para adicionar legendas e imagens, conforme mostrado na captura de tela abaixo.
Carrossel de bootstrap usando o widget Custom Elementor
Todos nós decidimos construir um carrossel usando o widget Elementor. Se você der uma olhada na documentação do carrossel do Bootstrap, eles forneceram o código HTML para o carrossel. Estou dando um exemplo de carrossel com legendas. Para este tipo de carrossel, você deve usar o HTML abaixo.
<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>
O acima é HTML estático. Quando se trata do widget Elementor, temos que torná-lo dinâmico usando os valores adicionados para título e imagem.
Portanto, nosso render()
método terá o código a seguir.
<?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
}
}
É isso! Adicione suas imagens e legendas e você verá que o carrossel Bootstrap aparece em sua página.
É tudo sobre o desenvolvimento de widgets no Elementor. De maneira semelhante, você pode personalizar o código para usar diferentes controles Elementor e gerar os widgets personalizados de acordo com seus requisitos.
Espero que você entenda como construir um widget Elementor customizado. Por favor, compartilhe seus pensamentos e sugestões na seção de comentários abaixo.
Artigos relacionados
- Integração MailChimp com Formulário de Contato 7 Plugin
- Como adicionar código após a tag do corpo no WordPress
- Como enviar e-mail WordPress usando o servidor SMTP