WordPress

Como usar Controles de Conditions no Elementor

Por

Garanta uma boa experiência e um código mais limpo

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:

  • Titulo
  • Texto
  • Imagem ou Vídeo (nunca ambos)

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. 

Mas como utilizar uma condition?

Primeiro, entenda o que é um control

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.

Já sabe o que é um control? Vamos seguir!

Passo a passo

Agora que você já está familiar ao conceito de control podemos começar a inseir o parâmetro de condition em um exemplo real.

Passo 1

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,
			]
		);

Passo 2

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',
			  ],
		]
	);

Passo 3

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',
			  ],
		]
	);

 Pronto!

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.

Ver código completo

🎉 Bônus!

Você pode utilizar o parâmetro de condition de modo mais avançado. Nesse modo utilizaremos no plural condiitons. 

Relação AND/OR:

  '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

Crie Widgets personalizados no Elementor

Por

Saiba como criar Widgets personalizados no Elementor.

Por que criar plugins personalizados?

  • Maior controle sobre o seu código
  • Evita a necessidade de instalar novos plugins
  • Atender sua demanda com apenas um Widget

Passo a passo

1- Instale o 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.

 

2- Crie um arquivo de listagem de widgets

Na pasta do seu tema (preferencialmente no tema filho) crie os seguintes arquivos:

  1. listagem-widgets.php
  2. Crie uma pasta chamada “widgets”
  3. Dentro da pasta widgets crie um arquivo chamado meu-primeiro-widget.php
  4. Adiocione no arquivo function.php a linha:
    require_once ‘listagem-widgets.php’;

Estrutura:

  • Tema do WordPress
  • Tema filho
    • listagem-widgets.php
      • file_folder  widgets
      • meu-primeiro-widget.php

Estrutura do arquivo de listagem (listagem-widgets.php):

Após criar um namespace (que chamei de Meus_Widgets você deverá adicionar basicamente duas funções:

  • include_widget_files() – para anexar o arquivo do widget
  • register_widgets() – para registrar os widgets na listagem do Elementor
<?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();

3- Começando a trabalhar no widget

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:

  1. Nome único que será identificado pelo nome
  2. Título para o catálogo do Elementor
  3. Ìcone para o catálogo do Elementor
<?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:

  • Nome do widget – O método get_name()  é simples, você só precisa retornar o nome do widget que será usado no código.
  • Título do widget – O método get_title (), que, novamente, é muito simples, você precisa retornar o título do widget que será exibido como o rótulo do widget.
  • Ícone do widget – o método get_icon () é um método opcional, mas recomendado, pois permite definir o ícone do widget. você pode usar qualquer um dos ícones eicon ou font-awesome, basta retornar o nome da classe como uma string.
  • Categorias de widget – o método get_categories permite definir a categoria do widget e retornar o nome da categoria como uma string.
  • Controles de widget – O método _register_controls permite definir quais controles (campos de configuração) seu widget terá.
  • Render Frontend Output – O método render (), que é onde você realmente renderiza o código e gera o HTML final no frontend usando PHP.
  • Render Editor Output – O método _content_template (), é onde você renderiza a saída do editor para gerar a visualização ao vivo usando um modelo Backbone JavaScript.

Vamos começar a juntar as peças:

Para colocar todas as peças juntas, vamos criar um widget Elementor simples que usará a funcionalidade nativa oEmbed do WordPress.

Widget Class

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
	}
}
Foto do post: Abstrato vetor criado por vectorjuice – br.freepik.com