Este documento fornece uma introdução sobre como criar módulos para o Divi no WordPress de forma simples. Explica a estrutura básica de arquivos necessária, como criar funções e seções, e os principais tipos de campos disponíveis. Também mostra como renderizar os dados no frontend e incluir arquivos CSS e JS.

1. Guia básico de
construção de
módulos Divi
De forma simples e rápida
Daniel Paz
Desenvolvedor
WordPress

2. Construir um módulo
para o Divi parece um
bixo de 7 cabeças.
Analisando a documentação do Divi, vemos que é
necessário ter conhecimento de React e PHP, e em
parte isso é verdade. Um módulo Divi é baseado
em Plugin, e a pré-visualização do módulo é feita
com React, mas vou mostrar uma maneira mais
simples de construir pequenos módulos.

3. 1. Introdução
➔ Estrutura de arquivos
O que é necessário para criar um
módulo Divi.
➔ Arquivo do Plugin e Modelo
Como criamos funções e executamos
em nosso módulo.
➔ Seções
Entenda o que são seções e como
utilizá-las
➔ Tipos de campos
Quais são os tipos disponíveis e como
utilizar

4. Estrutura de arquivos
Estrutura recomendada
Dica
Quando utilizar
componentes, tais como
bootstrap, material, etc é
importante criar uma pasta
para o componente e
colocar solto dentro de
assets. Para ser possível
controlar troca de versões.
Nome do módulo
- Assets
- Fonts
- CSS
- JS
- Images
- Modules
- Classe do módulo
- Arquivo do módulo

5. Arquivo do Plugin | Onde a
mágica acontece.
Aqui definimos o nome do plugin, o caminho
Para o arquivo do módulo e todas as funções
a serem utilizadas no módulo.
Dica
Aqui podemos colocar
funções que utilizamos
geralmente na
functions.php do nosso
tema, caso a função seja
referente ao módulo.

6. Exemplo de Estrutura básica
de Dados do Plugin
<?php
/**
* Plugin Name: Meu Módulo Divi
* Plugin URI:http://www.vistomarketing.com.br
* Description: Meu primeiro Módulo Divi
* Version:1.0
* Author:Daniel Paz
* Author URI:http://www.vistomarketing.com.br
// Exit if accessed directly
if (!defined("ABSPATH")) {
exit;
}

7. Como fazer a chamada do módulo
function meu_modulo_divi(){
require_once 'modules/meu_modulo_divi.php';
}
add_action("et_builder_ready", "meu_modulo_divi");
Neste arquivo, podemos incluir também funções que serão chamadas via ajax ou funções do
próprio módulo que serão chamadas na visualização.

8. Estrutura básica da Classe do Módulo
<?php
if(!class_exists("Meu_Modulo_Divi")){
class Meu_Modulo_Divi extends ET_Builder_Module {
public $slug = "meu_modulo_divi";
public $vb_support = 'on';
public function init() {
$this->name = "Meu Módulo Divi" ;
$this->main_css_element = "%%order_class%%";
}
}
Dica
O nome do módulo que será
exibido na listagem de
módulos do DIvi é o que é
definido no método Init, por
exemplo:
Caso queiramos trocar o
nome para “Hello World”
$this->name = “Hello World”

9. 2. Seções de Campos
Quais são as principais seções de campos.
➔ Por que utilizar seções ?
Dependendo a quantidade de campos
necessários para preenchimento é
ideal segmentar em seções.
➔ É possível criar novas seções ?
Não, mas é possível personalizar
seções existentes, como trocar nome e
ordem.
➔ Quais são as principais seções ?
https:/
/www.elegantthemes.com/doc
umentation/developers/divi-module/
module-settings-groups/

10. Como personalizar uma seção ?
Para isso vamos utilizar o método get_settings_modal_toggles ()
public function get_settings_modal_toggles() {
return array(
"general" => array(
"toggles" => array(
"content" => esc_html__("Conteúdo", "dp_dmb")
)
)
);
}
// No código acima trocamos o título da seção content para Conteúdo.

11. Quais são os tipos de
campos disponíveis ?
Text
Select
Checkboxes
Toggle Button
Range Slider
Dica
Você pode preencher
valores no Select ou em
qualquer campo
utilizando funções no
módulo.

12. Estrutura de dados de um campo
public function get_fields() {
$fields = array(
"meu_campo" => array(
"label" => __("Meu Campo", "dp_dmb"),
"type" => "text",
"default" => __( "", "dp_dmb" ),
"tab_slug" => "general",
"toggle_slug" => "content",
"description" => __("Este é o meu campo", "dp_dmb"),
)
);
}

13. Bônus: Como trazer os resultados de um
select com base em uma função
"tipo" => array(
"label" => __("Tipo", "dp_dmb"),
"type" => "select",
"options" => function_exists("getTipos") ? getTipos() : array("Your selected function
do not exists"),
"default" => function_exists("getTipos") ? array_keys(getTipos())[0] : "",
"dynamic_content" => "text",
"tab_slug" => "general",
"toggle_slug" => "content",
"description" => __("", "dp_dmb"),
),

14. 3. Frontend
Tudo o que vimos até o momento é a
estrutura de nosso módulo no backend, ou
seja na parte administrativa do site, para
começarmos a visualizar os dados precisamos
montar o nosso frontend.
➔ Arquivos CSS e JS
Vamos ver neste tópico como chamar
os arquivos JS e CSS que estão na
pasta assets de nosso plugin.
➔ Função Render
Aqui vamos tratar os dados e
exibir em nosso site.

15. Como incluir arquivos CSS e JS no frontend
de nosso módulo
public function before_render(){
// BOOTSTRAP CSS
wp_enqueue_style('bootstrap', plugin_dir_url( __DIR__ )
.'/assets/bootstrap/css/bootstrap.min.css');
// CSS PERSONALIZADO
wp_enqueue_style('custom-css', plugin_dir_url( __DIR__ ) .'/assets/css/custom.css');
// FONT AWESOME JS
wp_enqueue_script('fontawesome-js', plugin_dir_url( __DIR__ )
.'/assets/fontawesome/js/all.min.js');
}
Neste exemplo incluimos o bootstrap, um arquivo personalizado de CSS e a biblioteca de icones
fontawesome, tudo que o módulo precisa para sua exibição precisa ser definido na função
before_render.

16. Chegou a hora de todo o trabalho
duro render o resultado esperado.
Vamos começar a trabalhar o
front-end de nosso módulo.
Dica
Você pode criar funções
que geram shortcode e
executar o seu shortcode
dentro da função render.
Utilizando a função do WP
do_shortcode(‘[short]’);
https:/
/codex.wordpress
.org/Shortcode_API

17. Exibindo os dados do Plugin
public function render( $attrs, $content = null, $render_slug ) {
$this->add_classname( array(
"et_pb_bg_layout_{$background_layout}",
$this->get_text_orientation_classname(),
));
$helloworld = $this->props["meu_campo"]
ob_start();
?>
<h1>Qualquer HTML que você queira exibir</h1>
<h2>Você também pode exibir <?php echo 'php'; ?> aqui dentro!</h2>
<?php
echo $helloworld;
$output = ob_get_clean();
return $this->_render_module_wrapper( $output, $render_slug );
}

18. Inicializando o
módulo
Para executarmos o módulo basta
instanciar a classe no final do
arquivo e então encerrar a classe
com a tag de fechamento da mesma.
<?php new Meu_Modulo_Divi; } ?>

19. Case : Formulários HTML

20. Obrigado!
Espero que tenha te ajudado a entender
sobre a criação de módulos para o Divi.
Para contatos comerciais, suporte, ou bater
um papo sobre WordPress, seguem meus
contatos.
Daniel Paz
WordPress Developer
Whatsapp: (48) 9 9130-1459
www.vistomarketing.com.br