Como manter a compatibilidade do Divi Builder com o WPML

Aprenda a manter a compatibilidade dos módulos do Divi com o WPML por meio do arquivo de configuração de idioma wpml-config.xml.

Esta documentação é destinada à equipe de desenvolvimento do Divi e aos desenvolvedores web que usam o Divi. Ela explica o processo de manutenção da compatibilidade do Divi Builder com o WPML, que é feito atualizando o arquivo de configuração de idioma.

Esta página se refere ao Divi 5, que armazena o conteúdo como blocos compatíveis com o Gutenberg (o Divi 4 costumava usar shortcodes).

Como a integração do Divi Builder funciona com o WPML

Para entender como o Divi Builder funciona com o WPML, vamos começar criando uma página simples usando o Divi Builder. Adicionamos alguns módulos em nosso exemplo abaixo, como Texto, um Contador de números, um Ícone, etc.

Para traduzir, vá para WPML → Painel de tradução e encontre a página na seção Páginas. Selecione-a e clique em Traduzir seu conteúdo para selecionar o método de tradução. Se você tiver créditos de tradução automática, poderá traduzir esta página automaticamente em minutos.

Como usar o arquivo de configuração de idioma

No arquivo wpml-config.xml, você pode configurar os seguintes elementos:

• Blocos de construtor de páginas
• Campos personalizados
• Taxonomias personalizadas
• Textos de administração / wp_options
• Configuração do seletor de idiomas

Para mais informações sobre estrutura e sintaxe, consulte nosso guia do arquivo de configuração de idioma.

Como obter o arquivo de configuração para o Divi

A configuração do arquivo wpml-config.xml extrai as strings das páginas criadas usando o Divi Builder e as carrega no Editor de tradução avançado. Use este arquivo para adicionar novos tipos de blocos e atributos, bem como para remover tipos de blocos obsoletos.

Você pode baixar o arquivo de configuração de idioma do nosso repositório e colocá-lo na pasta raiz do seu tema depois de configurado.

Nós hospedamos o arquivo de configuração de idioma para o Divi em nossos servidores, portanto, ele substitui o arquivo de configuração local colocado na pasta raiz do Divi. Isso garante que o arquivo de configuração esteja sempre atualizado.

Como configurar blocos no arquivo de configuração de idioma

O Divi 5 usa a sintaxe de blocos, portanto, registrar os módulos do Divi para tradução é semelhante ao processo de tradução de blocos do Gutenberg:

• Todas as definições de blocos são envolvidas por um elemento pai <gutenberg-blocks>.
• Cada bloco individual é declarado com um elemento <gutenberg-block>, onde o atributo type corresponde ao nome registrado do bloco.
• Os campos traduzíveis são declarados como elementos filhos <key>.

Vamos pegar o exemplo de um módulo Call to Action do Divi:

<!-- wp:divi/cta {"module":{"title":"CTA","button_text":"Contact Us","button_url":"https://example.com/contact/"}} /-->

Veja como ele é configurado no wpml-config.xml:

<gutenberg-blocks>
    <gutenberg-block type="divi/cta" translate="1">
       <key name="module">
         <key name="title" />
         <key name="button_text" />
         <key name="button_url" type="link" />
       </key>
    </gutenberg-block>
</gutenberg-blocks>

A estrutura se divide da seguinte forma:

• O elemento <gutenberg-blocks> envolve todas as definições de blocos.
• Um elemento <gutenberg-block> define um único tipo de bloco, identificado pelo atributo type. O translate="1" diz ao WPML para processá-lo.
• Cada elemento <key> identifica um campo traduzível: title e button_text para campos de texto simples, e button_url para um link.
• O atributo type="link" diz ao WPML para substituir automaticamente o URL pela versão traduzida do post ou página vinculada.

Como testar o arquivo de configuração de idioma

Para testar o arquivo de configuração de idioma atualizado, siga estes passos:

1. Configure um site com o Divi e o WPML ativados. Certifique-se de também ativar os complementos Tradução de Strings e Tradução de mídia.

2. Para substituir o arquivo de configuração de idioma remoto pela versão atualizada, navegue até WPML → Configurações e clique na aba Configuração XML personalizada. Copie o conteúdo do seu arquivo de configuração de idioma atualizado para o editor e, em seguida, clique em Salvar.

3. Crie uma nova página e adicione o(s) novo(s) módulo(s) a ela. Se você atualizou alguns atributos de módulos existentes, adicione-os à página também. Neste exemplo, vamos supor que o módulo Botão foi recém-adicionado ao Divi Builder. Adicione-o à página e, em seguida, clique em Publicar.

4. Para traduzir a página com o botão, você pode usar o Painel de tradução. Uma alternativa é usar o Editor de tradução avançado (ATE), o que pode ser útil durante os testes — ele permite que você veja a tag do módulo para cada elemento do Divi na página. Para abrir o ATE, vá para Editar a página e clique no ícone de mais sob a Caixa de idiomas na barra lateral direita.

5. Verifique os elementos e adicione suas traduções ou permita que o ATE traduza automaticamente.

Agora, você pode dar uma olhada na página traduzida no front-end. A página traduzida deve mostrar todas as strings traduzidas, o que indica que o arquivo de configuração de idioma atualizado está funcionando corretamente.

Caso você esteja enfrentando algum problema, entre em contato com nossa equipe de desenvolvimento de compatibilidade. Eles ficarão felizes em verificar problemas relacionados ao arquivo de configuração de idioma.

Assim que terminar os testes, envie um merge request para o nosso repositório. Nossos desenvolvedores de compatibilidade receberão suas solicitações e as revisarão.