Sou a web developer que veio do Oceano!
Foi durante a faculdade de Oceanografia que tive o primeiro contato programação Busquei aprender mais sobre HTML, CSS., PHP e JS. Descobri o WordPress e todo seu potencial.Mais tarde trabalhei em algumas agências de PP em São Paulo e também como freelancer. Atualmente trabalho como Desenvolvedora WordPress na Human Made.
Widgets customizados possuem a vantagem de serem extremamente versáteis e gerantem um conteúdo diversificado (texto, imagem, vídeo) com apenas um Widget.
O uso desses controles pode deixar seu código mais limpo e garantir uma experiência melhor ao utilizar o Widget em uma página.
Para ilustrar esse exemplo vamos utilizar um widget bem simples que conta com os seguintes itens:
Esse é o visual do Widget:
O vídeo e a imagem abaixo ilustram um exemplo de Controle Condicional aplicado a um Widget do Elementor.
Ao aplicar o Controle de Condicional é dado ao usuário o poder de escolher qual tipo de mídia será usado, não havendo a necessidade de mostrar ambos os campos (vídeo ou imagem), sendo que apenas um será usado. E o no código surge a possibilidade de renderizar o conteúdo escolhido pelo usuário.
Ao criar um novo Widget para o Elementor (aprenda como fazer isso aqui) você deve registrar controls para isso.
Exemplo de um control que usamos em nosso widget, o Título (TEXT):
$this->add_control(
'titulo',
[
'label' => __( 'Título', 'plugin-domain' ),
'type' => Controls_Manager::TEXT,
'placeholder' => __( 'Insira o título aqui', 'pipefy-2020-admin' ),
]
); E isso resultará em:
Note que utilizamos vários parâmetros dentro do control: label, type e placeholder. Para usarmos o parâmetro de condition basta inseri-lo dentro do de um control.
Agora que você já está familiar ao conceito de control podemos começar a inseir o parâmetro de condition em um exemplo real.
Primeiro vamos criar um control de CHOOSE (veja mais sobre aqui), para que o usuário possa escolher entre imagem ou vídeo.
$this->add_control(
'imagem_ou_video',
[
'label' => __( 'Usar imagem ou vídeo?', 'plugin-domain' ),
'type' => \Elementor\Controls_Manager::CHOOSE,
'options' => [
'imagem' => [
'title' => __( 'Imagem', 'plugin-domain' ),
'icon' => 'fa fa-image',
],
'video' => [
'title' => __( 'Vídeo', 'plugin-domain' ),
'icon' => 'fa fa-video',
],
],
'default' => 'imagem',
'toggle' => true,
]
); Vamos criar o um control para a imagem e já inserir uma condition (condição) para que ela apareça para o usuário. E a condição é que o control ‘imagem_ou_vídeo’ seja igual a opção ‘imagem’.
$this->add_control(
'selecionar_image',
[
'label' => __( 'Imagem', 'plugin-domain' ),
'type' => \Elementor\Controls_Manager::MEDIA,
'default' =>
[
'url' => \Elementor\Utils::get_placeholder_image_src(),
],
'condition' =>
[
'imagem_ou_video' => 'imagem',
],
]
); Agora vamos criar o um control para o vídeo e também inserir uma condition (condição) para que ela apareça para o usuário. Dessa vez a condição é que o control ‘imagem_ou_vídeo’ seja igual a opção ‘video’.
$this->add_control(
'selecionar_image',
[
'label' => __( 'Imagem', 'plugin-domain' ),
'type' => \Elementor\Controls_Manager::MEDIA,
'default' =>
[
'url' => \Elementor\Utils::get_placeholder_image_src(),
],
'condition' =>
[
'imagem_ou_video' => 'imagem',
],
]
); Ao selecionar o ícone “Imagem”, logo abaixo o campo de imagem aparecerá para que o usuário insira a imagem de sua preferência. E ao selecionar o ícone “Vídeo” é possível inserir o vídeo desejado.
Você pode utilizar o parâmetro de condition de modo mais avançado. Nesse modo utilizaremos no plural condiitons.
'conditions' =>
[
'relation' => 'and', //podemos usar 'and' ou 'or'
'terms' =>
[
[
'name' => 'imagem_ou_video',
'operator' => '==',
'value' => 'imagem'
],
[
//vamos imaginar que criamos um control SWITCHER para mostrar ou não o título, chamado 'mostrar_titulo'
'name' => 'mostrar_titulo',
'operator' => '==', //aqui podemos utilizar outros operadores do php ex: >= , !==, < . etc
'value' => 'sim'
]
]
] Post photo by Justin Luebke on Unsplash
Sou a web developer que veio do Oceano!
Foi durante a faculdade de Oceanografia que tive o primeiro contato programação Busquei aprender mais sobre HTML, CSS., PHP e JS. Descobri o WordPress e todo seu potencial.Mais tarde trabalhei em algumas agências de PP em São Paulo e também como freelancer. Atualmente trabalho como Desenvolvedora WordPress na Human Made.
Saiba como criar Widgets personalizados no Elementor.
Caso não tenha o plugin do Elementor instalado você pode fazê-lo diretamente na sessão de plugins do WordPress. Ou se preferir faça o download aqui.
Na pasta do seu tema (preferencialmente no tema filho) crie os seguintes arquivos:
Estrutura:
widgetsEstrutura do arquivo de listagem (listagem-widgets.php):
Após criar um namespace (que chamei de Meus_Widgets você deverá adicionar basicamente duas funções:
<?php
namespace Meus_Widgets;
// use Elementor\Plugin;
class Widget_Loader {
private static $_instance = null;
public static function instance() {
if ( is_null( self::$_instance ) ) {
self::$_instance = new self();
}
return self::$_instance;
}
private function include_widgets_files() {
require_once __DIR__ . '/widgets/meu-primeiro-widget.php';
}
public function register_widgets() {
$this->include_widgets_files();
\Elementor\Plugin::instance()->widgets_manager->register_widget_type( new Widgets\Meu_Primeiro_Widget() );
}
public function __construct() {
add_action( 'elementor/widgets/widgets_registered', array( $this, 'register_widgets' ), 99 );
}
}
// Instantiate Plugin Class
Widget_Loader::instance();
Criar um widget para o Elementor não é muito diferente de criar um widget para o WordPress. Basta criar uma classe que faça a extensão do Widget_Base e preencher os métodor necessários.
Cada widget prescisa de alguns itens básicos tais como:
<?php
class Meu_Primeiro_Widget extends \Elementor\Widget_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() {}
} Detalhando:
Para colocar todas as peças juntas, vamos criar um widget Elementor simples que usará a funcionalidade nativa oEmbed do WordPress.
Primeiro crie a classe que estenda a Widget_Base class:
class Meu_Primeiro_Widget extends \Elementor\Widget_Base {
} Widget Data
Agora vamos começar a preencher os métodos:
<?php
class Elementor_Test_Widget extends \Elementor\Widget_Base {
public function get_name() {
return 'meu-primeiro-widget';
}
public function get_title() {
return 'Meu primeiro widget';
}
public function get_icon() {
return 'fa fa-trophy';
}
public function get_categories() {
return [ 'meus widgets' ];
}
} Widget Controls
Em seguida, precisamos adicionar os controles do widget usando o método _register_controls (). Optei por utilizar o controle de texto.
Aqui você pode visualizar todos os controls do Elementor e suas aplicações.
<?php
class Elementor_Test_Widget extends \Elementor\Widget_Base {
protected function _register_controls() {
$this->start_controls_section(
'secao_conteudo',
[
'label' => 'Conteúdo',
'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
]
);
$this->add_control(
'titulo',
[
'label' => __( 'titulo', 'plugin-domain' ),
'type' => \Elementor\Controls_Manager::TEXT,
'default' => 'Título padrão',
'placeholder' => 'Insira o título aqui',
]
);
$this->end_controls_section();
}
} Visualização no Frontend
E, por último, precisamos implementar nosso método render() que obtém o text que o usuário insere no controle de TEXT acima e obtém o conteúdo.
<?php
class Meu_Primeiro_Widget extends \Elementor\Widget_Base {
//PHP Render
protected function render() {
$settings = $this->get_settings_for_display();
?>
<div><?php echo $settings['titulo']; ?></div>;
}
} Bônus: Visualização em tempo real no Elementor
Adicionando a função_content_template() é possível observar as alterações em tempo real no editor, permitindo recriar o método render () em JavaScript.
<?php
//JS RENDER
protected function _content_template() {
?>
<div>{{{ settings.titulo }}}</div>
<?php
} O widget está pronto! Você pode adicionar diversos controles no mesmo widget e obter algo mais complexo, veja aqui a lista. Ou Consulte meu GitHub para widgets com maior variedade.
Código completo
<?php
namespace Meus_Widgets;
use Elementor\Widget_Base;
use Elementor\Controls_Manager;
if (!defined('ABSPATH')) exit; // Exit if accessed directly
class Meu_Primeiro_Widget extends Widget_Base{
public function get_name(){
return 'meu-primeiro-widget';
}
public function get_title(){
return 'Meu primeiro widget';
}
public function get_icon(){
return 'fa fa-trophy';
}
public function get_categories(){
return ['meus widgets'];
}
protected function _register_controls(){
$this->start_controls_section(
'secao_conteudo',
[
'label' => 'Conteúdo',
'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
]
);
$this->add_control(
'titulo',
[
'label' => __( 'titulo', 'plugin-domain' ),
'type' => \Elementor\Controls_Manager::TEXT,
'default' => 'Título padrão',
'placeholder' => 'Insira o título aqui',
]
);
$this->end_controls_section();
}
//PHP Render
protected function render() {
$settings = $this->get_settings_for_display();
?>
<div><?php echo $settings['titulo']; ?></div>
<?php
}
//JS RENDER
protected function _content_template() {
?>
<div>{{{ settings.titulo }}}</div>
<?php
}
}
Sou a web developer que veio do Oceano!
Foi durante a faculdade de Oceanografia que tive o primeiro contato programação Busquei aprender mais sobre HTML, CSS., PHP e JS. Descobri o WordPress e todo seu potencial.Mais tarde trabalhei em algumas agências de PP em São Paulo e também como freelancer. Atualmente trabalho como Desenvolvedora WordPress na Human Made.