Como tornar um site multilíngue construído pelo JetEngine

Preparando o site para funcionar em vários idiomas

Comece comprando o pacote Multilingual CMS WPML. Ele contém WPML String Translation, WPML Media Translation e o plugin principal WPML Multilingual CMS necessário para traduzir o site construído pelo Crocoblock. Depois de carregá-lo no WordPress, conclua a configuração básica do idioma .

Configuração WPML

Execute o assistente de configuração do WPML. Na primeira etapa, escolha os idiomas padrão e de tradução do site. Além disso, você pode criar um idioma personalizado, se necessário.

etapa de configuração de idiomas do wpml

A segunda etapa permite formatar a URL do site traduzido e oferece três opções de escolha:

  • “Diferentes idiomas em diretórios”;
  • “Um domínio diferente por idioma”;
  • “Nome do idioma adicionado como parâmetro.”
etapa de formato de URL de configuração do wpml

Na terceira etapa, você deve registrar o WPML. Сlique no link “ Obter uma chave para este site ” se ainda não o fez. Isso o levará à conta WPML, onde você poderá registrar o WPML no site necessário e gerar uma chave do site. 

Depois de fazer isso, cole a chave recebida no campo Chave do site na janela Configuração do WPML.

Prosseguindo para a próxima etapa, você precisa decidir como gostaria de traduzir o site. 

Ao escolher o modo “Traduzir tudo automaticamente”, o WPML começará a traduzir o conteúdo em segundo plano. Você pode verificar o progresso da tradução acessando WordPress Dashboard > WPML > Translation Management ou pressionando o logotipo do WPML na barra de ferramentas. 

À medida que o novo conteúdo for publicado ou editado, ele será traduzido automaticamente.

Aviso

Para tradução automática, serão utilizados créditos WPML .

etapa do modo de tradução de configuração do wpml

Porém, se for escolhido “Traduzir o que você escolher”, você deverá definir quem irá traduzir o conteúdo na etapa seguinte.

Se você não definiu todas as funções de tradução necessárias ao configurar o WPML, você pode fazer isso no Painel do WordPress > WPML > Gerenciamento de tradução > guia Tradutores. Você pode atribuir todas as funções imediatamente ou uma de cada vez – basta retornar a esta página mais tarde. 

Observe que você pode alternar entre os modos posteriormente acessando WordPress Dashboard > WPML > Settings .

tradutor de configuração wpml

A quinta etapa, chamada Suporte , permite enviar dados de temas e plugins para o suporte WPML. Desta forma, você receberá alertas de compatibilidade que diminuirão os possíveis problemas de tradução de sites.

etapa de suporte de configuração do wpml

Na sexta etapa dos Plugins , instale os plugins recomendados com base nos temas do site ou pule se não estiver interessado.

etapa de plug-ins de configuração do wpml

A etapa final exibe informações adicionais que podem ajudá-lo a personalizar ainda mais o processo de tradução. Clique no botão “ Concluir ” para concluir a configuração.

Depois, vá para WordPress Dashboard > WPML > guia Configurações e defina o método de tradução para o novo conteúdo e as traduções criadas anteriormente na seção Editor de Tradução . Escolha “Clássico” ou “Avançado” para cada recurso.

Observe que sugerimos usar o “Editor de tradução avançado” para novos conteúdos e o “Clássico” para conteúdos antigos. Desta forma, não afetará as traduções antigas.

Depois de tudo feito, vamos traduzir o conteúdo gerado pelo JetEngine .

Traduzir metacaixas e metacampos

Inicialmente, você terá que tornar as Meta Boxes e Meta Fields traduzíveis. Para fazer isso, vá para a página WordPress Dashboard > WPML > Settings e role para baixo até Custom Fields Translation .

Coisas para saber

Uma barra de pesquisa no topo da lista permite encontrar metacampos rapidamente.

Por padrão, a opção “Não traduzir” está definida para todos os campos personalizados. Você pode selecionar uma das quatro opções de tradução para os campos personalizados usando botões de opção:

  • Não traduza – o sistema produzirá os campos personalizados fornecidos “como estão”;
  • Copiar – o valor do campo personalizado sempre será copiado para os idiomas secundários, independentemente de você decidir modificar o campo personalizado do idioma padrão ou não;
  • Copiar uma vez – o valor do campo personalizado será copiado para a versão do site no idioma secundário durante o processo inicial de tradução. No entanto, você pode definir um valor diferente para ele que não será substituído pelo valor do campo personalizado do idioma padrão;
  • Traduzir – você poderá traduzir esses campos onde quer que eles apareçam.

Quando todos os botões de opção estiverem marcados, clique no botão “ Salvar ”. Para ir ainda mais fundo, pressione o botão “ Mostrar campos do sistema ” (localizado sob o nome da seção Tradução de campos personalizados ) e você verá os componentes do sistema que podem ser traduzidos ou não.

No entanto, brincar com os campos do sistema pode ser complicado. Tenha cuidado e sempre faça um backup do conteúdo do seu site antes de alterar qualquer coisa no backend.

Aviso

Devido a problemas de integração, alguns campos personalizados podem não ser selecionados pelo editor de tradução WPML. Veja a versão do site em segundo idioma no front-end e, se detectar uma falha, corrija-a manualmente executando as seguintes etapas:

  • Vá para Painel do WordPress > Páginas > Todas as páginas e use o alternador de idioma da barra de administração para visualizar as páginas que pertencem a um determinado idioma;
  • Clique para editar a página/post necessária;
  • Você verá um aviso. Pressione o botão “ Editar mesmo assim ”;
  • Insira as traduções ausentes manualmente e clique no botão “ Atualizar ” para salvar as alterações.

As equipes de desenvolvimento do Crocoblock e do WPML estão cientes desse problema e estão trabalhando para corrigi-lo.

Com relação aos metacampos, lembre-se de que você não deseja alterar nenhum atributo Field , exceto o Label . Se você alterar qualquer outra coisa, existe a possibilidade de o site não funcionar corretamente.

Traduzir campos multiopcionais

Já os metacampos que guardam diversas opções dentro, como Checkbox , Select ou Radio , eles precisam ser traduzidos de forma diferente.

Para traduzi-los, precisamos usar a funcionalidade Glossários do JetEngine .

Crie um glossário que será definido como fonte do metacampo.

Vá para a página onde seu editor de metacampo está localizado. Por exemplo, pode ser uma página de edição CPT ou uma meta box.

Nas configurações de metacampo necessárias, certifique-se de que a opção Obter opções do glossário esteja habilitada e o Glossário esteja selecionado.

Além disso, ative a opção Salvar como array .

Vá para o diretório WordPress Dashboard > WPML > String Translation e localize o rótulo do meta que você precisa. Você pode encontrá-lo manualmente ou usando a barra de pesquisa localizada acima dos itens.

Pressione o botão em forma de adição próximo ao rótulo do meta-campo necessário para adicionar sua tradução.

Em seguida, adicione a tradução às opções do metacampo Labels .

Aviso

Traduza apenas os rótulos e não os valores .

tradução de string dos rótulos dos metacampos

Agora, o metacampo e suas opções podem ser verificados tanto para a versão original quanto para a traduzida.

Traduza o filtro JetSmartFilters com base no glossário criado com JetEngine

Vá para WordPress Dashboard > JetEngine > JetEngine e abra a guia Glossários .

Pressione o botão “ Novo Glossário ”.

botão novo glossário

Defina o Nome do glossário e defina sua Fonte de Dados . Pode ser “Definir itens manualmente” ou “Obter itens do arquivo carregado”.

Caso queira adicionar um novo item, pressione o botão “ Novo campo ”.

botão novo campo

Cada item adicionado tem as seguintes configurações de personalização:

campo glossário
  • Valor do campo — um valor exclusivo do item que deve conter apenas letras latinas minúsculas, sem espaços e pode conter números e símbolos “-” e “_”;
  • Rótulo do campo — um nome do item exibido como seu rótulo;
  • Está marcado (selecionado) — um botão de alternância que deve ser ativado se você quiser que o item seja selecionado por padrão.

Terminada a personalização do glossário, pressione o botão “ Salvar ”.

Em seguida, precisamos adicionar os metadados à fonte que queremos conectar ao filtro.

Isso pode ser feito no diretório WordPress Dashboard > JetEngine > Post Types se você deseja anexar o filtro a Custom Post Types ou WordPress Dashboard > JetEngine > Meta Boxes para ajustar uma meta box para outras fontes.

Por exemplo, vamos para WordPress Dashboard > JetEngine > Post Types e abrimos a página de edição de tipo de post existente.

Na seção Metacampos , clique no botão “ Novo Metacampo ” para criar um novo metacampo.

Preencha o rótulo e altere o nome/ID do campo, se necessário. 

Em seguida, defina seu tipo de campo como “Checkbox” e selecione “Glossário” como fonte . Além disso, escolha um glossário que você acabou de criar.

Isso é tudo com a edição de metadados, então clicamos no botão “ Atualizar tipo de postagem ”.

Vá para as postagens do CPT editado e preencha o metacampo “Caixa de seleção” recém-adicionado.

A próxima etapa é garantir que você ativou a tradução para a origem atual e o campo personalizado. Para fazer isso, navegue até Painel do WordPress > WPML > Configurações .

Primeiro, rolamos para baixo até a seção Tradução de tipos de postagem , pois trabalhamos com CPT e precisamos garantir que ele possa ser traduzido. Encontramos o tipo de postagem necessário, definimos como “Traduzível” e pressionamos o botão “ Salvar ”.

Repita a mesma etapa com a fonte à qual o metacampo “Caixa de seleção” foi aplicado.

Em seguida, vá para a seção Campos personalizados . Encontre o campo “Caixa de seleção” que você criou (você pode fazer isso com a barra de pesquisa Pesquisar :), defina seu status como “Copiar” e clique no botão “ Salvar ”.

Depois de aplicar as alterações, vá para WordPress Dashboard > WPML > String Translation .

Aqui, encontre os rótulos dos campos do glossário e clique no botão “ mais ” ao lado deles para adicionar a tradução.

Aviso

Traduza apenas os rótulos dos campos do glossário. Os valores devem ser deixados originais.

Conclua a tradução de todos os itens necessários.

Vá para Painel do WordPress > Filtros Inteligentes > Adicionar Novo para criar um novo filtro.

Defina o nome do filtro e selecione a opção “Lista de caixas de seleção” como tipo de filtro .

Em seguida, selecione sua fonte de dados como “Glossário JetEngine” e escolha o glossário necessário no campo Selecionar glossário correspondente .

Ative a alternância do campo Is Checkbox Meta (Jet Engine) enquanto trabalhamos com o campo “Checkbox” do JetEngine .

No campo Variável de Consulta , coloque o Nome/ID do metacampo “Checkbox” construído.

Preencha a seção Etiquetas de filtro e pressione o botão “ Atualizar ” para salvar o filtro.

Vá ao editor preferido para adicionar o conteúdo; pode ser Block Editor, Elementor ou Bricks. Por exemplo, trabalhamos em Elementor.

Na página, coloque o widget Language Switcher para poder alternar entre os idiomas posteriormente.

Adicione o widget Filtro de caixas de seleção à página de edição. Selecione o filtro necessário e defina seu provedor no campo Este filtro para .

Adicione o provedor à página. Por exemplo, adicionamos o widget Listing Grid . 

Ajuste ainda mais a página, se necessário, e quando estiver pronto, pressione o botão “ Publicar/Atualizar ”.

Volte à lista de postagens do CPT e traduza o item clicando no botão “ mais ”.

Conclua a tradução de todos os itens do CPT .

tradução de página

Prossiga para o front-end para verificar o resultado. A princípio, vemos a versão original da página.

página original

Assim que clicarmos na bandeira ucraniana, mudamos para a versão ucraniana da página.

Como você pode observar, o conteúdo já foi traduzido.

página traduzida

Vamos verificar como funciona o filtro selecionando as opções no Checkbox Filter .

Grade de Listagem agora é filtrada pelas opções de Filtro de Caixa de Seleção .

itens marcados no filtro

Traduzir taxonomias

Vá para Painel do WordPress > WPML > Configurações . Role para baixo até Tradução de taxonomias e clique nos botões de opção “ Traduzir ” ao lado das taxonomias que você precisa para serem traduzidas. Pressione o botão “ Salvar ”.

Agora, siga o diretório WordPress Dashboard > WPML > Taxonomy Translation e escolha aquele para editar na lista suspensa. Aqui você pode ver o conteúdo que esta taxonomia inclui. Para adicionar uma tradução, pressione o ícone “ + ”.

Na janela recém-exibida, envie as traduções necessárias. O slug será gerado automaticamente. Tenha em mente que se houver slugs idênticos no site, o sistema adicionará um sufixo como “-uk”, onde “uk” é a abreviação do segundo (terceiro, quarto, etc.) idioma. Não se esqueça de pressionar o botão “ Salvar ” toda vez que editar o conteúdo da taxonomia.

Repita o mesmo processo para cada taxonomia que você definiu para ser traduzida.

Traduzir tipos de postagem personalizados e itens de listagem

Aviso

Reconheça que, no momento, é impossível traduzir CCTs com WPML.

Vá para a página Painel do WordPress > WPML > Configurações e encontre a seção Tradução de tipos de postagem . Torne os tipos de postagem personalizados traduzíveis. Em seguida, clique no botão “ Salvar ” .

Aqui, os itens da listagem também podem ser definidos como traduzíveis.

Existem três opções disponíveis para você aqui:

  • Traduzível – mostrar apenas itens traduzidos – marque este botão de opção para exibir no front end apenas os itens que você traduziu;
  • Traduzível – use tradução se disponível ou retorne ao idioma padrão — esta opção produzirá a tradução do conteúdo se você a tiver fornecido, e os itens sem traduções ativas serão mostrados “como estão”;
  • Não traduzível — uma opção autoexplicativa. 

Depois, abra a guia Tipos de postagem no painel de administração e você verá pequenos ícones “+” aparecerem ao lado dos títulos dos tipos de postagem.

Pressione um desses botões para ser redirecionado para a janela do WPML Advanced Translation Editor. Traduza você mesmo toda a seção ou use a tradução automática. Não esqueça de confirmar cada linha separadamente; a escala inferior não permitirá que você desista até que esteja 100% cheia.

Você pode traduzir os itens da listagem exatamente da mesma maneira:

  1. Torne-os traduzíveis na seção Tradução de tipos de postagem ;
  2. Vá para Painel WordPress > JetEngine > Listagens ;
  3. Abra o Item de Listagem desejado clicando no ícone “+”;
  4. Insira a tradução manualmente ou automaticamente;
  5. Pressione “ Concluído ”.
Aviso

Alguns tipos de postagem/itens de listagem podem não ter traduções na frente devido à má integração do plugin. Se você estiver usando um widget de plug-in de terceiros cuja compatibilidade com WPML não foi confirmada, não há garantia de que o conteúdo será traduzido. Você deve inserir as traduções que faltam manualmente na página de edição de postagem do Elementor ou do WordPress.

Traduzir lesmas CPT

Siga o caminho Painel do WordPress > WPML > Configurações . 

Vá para a seção Traduções de slug para certificar-se de ter marcado a opção Traduzir postagem personalizada e slugs de base de taxonomia (via WPML String Translation) para permitir a tradução do slug.

Não se esqueça de apertar o botão “ Salvar ”.

Role para baixo até a seção Tradução de tipos de postagem e certifique-se de que o CPT necessário esteja definido para a opção “Traduzível” (funciona para ambas as opções disponíveis “Traduzível”).

Traduza os slugs pressionando “ Definir diferentes slugs em diferentes idiomas para {Seu nome CPT} ”.

tradução de slug de tipos de postagem

Após essas etapas, os links permanentes devem ser atualizados. Vá para Painel do WordPress> Configurações> Links permanentes e pressione o botão “ Salvar alterações ”.

Links permanentes e regras de reescrita agora foram liberados.

configurações de links permanentes

Traduzir formulários JetEngine (legado)

Os formulários JetEngine podem ser traduzidos. Para fazer isso, vá para Painel do WordPress > WPML > Configurações , role para baixo até Tradução de tipos de postagem e ative o botão de opção “Traduzível” na linha Formulários .

formulários traduzíveis

Para traduzir qualquer formulário para o idioma de sua escolha, siga o diretório WordPress Dashboard > JetEngine > Forms e pressione o botão de adição ao lado do formulário desejado para adicionar uma tradução a ele.

botão de adição ao lado do formulário

Preencha a tradução do nome do formulário e pressione o botão “ Concluir ” para salvar o resultado.

Agora volte ao Formulários e clique no botão “ Editar ” para abrir o editor da versão traduzida do formulário.

Como o formulário traduzido não possui campos originais, crie-os novamente. Desta vez, complete seus rótulos com versões traduzidas e salve-os clicando no botão “ Aplicar alterações ”.

campo de formulário traduzido

Depois que os campos estiverem concluídos, navegue até as seções Configurações de mensagens e traduza as notificações.

Em seguida, pressione o botão “ Atualizar ” para salvar o formulário.

tradução de formulário

Vá para Painel do WordPress > Páginas e abra o editor de versão traduzida da página onde o formulário foi adicionado originalmente.

editar página traduzida

Adicione um formulário à página e, no campo Selecionar formulário , escolha a versão traduzida do formulário. 

Quando a página estiver pronta, você poderá atualizá-la.

formulário traduzido na página
Aviso

Observe que os formulários JetBooking e JetAppointment não podem ser traduzidos. Iremos abordá-los nos próximos tutoriais. Além disso, os formulários do Profile Builder não podem ser traduzidos com WPML. Portanto, como o WPML não consegue traduzir a página da conta com o Profile Builder , os formulários não funcionam corretamente. A única opção é duplicá-los para o idioma secundário necessário e traduzi-los conforme descrito acima.

Por último, mas não menos importante, você precisa traduzir os modelos de cabeçalho e rodapé, pois eles estarão sempre presentes nas páginas do site no idioma secundário.

Aviso

A funcionalidade a seguir funciona se o plugin JetThemeCore estiver instalado e ativado.

Em primeiro lugar, vá para Painel do WordPress > WPML > Configurações e role para baixo até a seção Tradução de tipos de postagem . Encontre a linha Theme Parts e defina-a como “Traduzível”. Salve as alterações.

opção de peças temáticas

Em segundo lugar, vá para a guia WordPress Dashboard> Crocoblock> JetPlugins Settings no painel de administração do WordPress e abra as configurações do plugin JetThemeCore .

Ative a alternância de registro de locais do Prevent Pro na guia Configurações gerais . Isso evitará que os modelos de cabeçalho e rodapé desapareçam nas páginas do site no segundo idioma.

evitar alternância de registro de locais profissionais

Em terceiro lugar, traduza os modelos de cabeçalho e rodapé correspondentes para outros idiomas do site. Para fazer isso, siga o caminho WordPress Dashboard > Crocoblock > Theme Builder . Localize o modelo necessário e pressione o ícone “ + ” a seguir.

diretório de partes do tema

Adicione as traduções como faria normalmente para um modelo de página normal no Advanced Translation Editor . Feito isso, clique no botão “ Concluir ”. Repita o procedimento para os modelos de cabeçalho e rodapé.

tradução de cabeçalho
Aviso

A tradução do cabeçalho é complicada, pois geralmente contém widgets de outros plugins e um menu de navegação. Para traduzi-lo completamente, você terá que sincronizar todas as versões do site em todos os idiomas.

Siga o caminho WordPress Dashboard > WPML > WP Menus Sync . Pressione o botão “ Sincronizar ” para criar primeiro um menu no idioma secundário. Confirme a ação clicando no botão “ Aplicar alterações ” assim que vê-lo.

diretório de sincronização de menus wp

Uma vez feito isso, prossiga para traduzir as strings do menu. Abaixo do botão “ Sincronizar ”, há algumas informações adicionais. O primeiro ponto contém um link para as sequências de menu necessárias. Clicar nele o levará ao módulo String Translations WPML. Adicione as traduções que faltam, uma por uma, incluindo links.

diretório de tradução de strings
Aviso

Lembre-se de fornecer os links para as páginas reais do idioma secundário. Caso contrário, os itens de menu traduzidos ainda levarão os usuários às páginas do site no idioma padrão.

Por exemplo, o slug de URL em inglês se parece com isto: /properties/ocean-star-luxury-cottage/ . E este é o seu contratipo ucraniano: /properties-uk/ocean-star-luxury-cottage/?lang=uk . 

Quando terminar de traduzir as sequências de menu, retorne à guia WP Menus Sync . Você verá que agora existem traduções disponíveis em idiomas secundários. Pressione novamente os botões “ Sincronizar ” e “ Aplicar alterações ” para finalizar o processo de tradução do menu.  

Confira o resultado no front-end. O modelo de cabeçalho é exibido corretamente; além disso, todos os itens do menu aparecem no idioma secundário necessário. 

Traduzir campos meta da página de opções

Prossiga para Painel do WordPress > WPML > Tradução de strings . Pressione o botão “ Traduzir textos nas telas de administração ”.

traduzir textos na tela de administração

Encontre o metacampo necessário na lista. Na barra de pesquisa, escreva o nome do campo (não slug) e pressione o botão de pesquisa.

Сlique no botão em forma de adição para adicionar uma tradução.

tradução de taxonomia da página de opções

Adicione a tradução correspondente e pressione “ Enter ”no teclado.

campo meta da página de opções traduzidas

O resultado pode ser verificado no front-end. O nome do metacampo agora é traduzido para o outro idioma clicando no botão correspondente.

Traduzir Relações

Para traduzir as conexões de relacionamento do JetEngine com o WPML , você deve recriar as etapas a seguir. 

Inicialmente, você deve traduzir os itens que serão definidos como itens filho e pai. 

Vá para Painel do WordPress > WPML > Configurações e defina dois elementos necessários como “Traduzível”.

Por exemplo, podem ser dois tipos de postagem como no caso descrito. Então, rolamos para baixo até a seção Tradução de tipos de postagem e definimos dois tipos de postagem como “Traduzíveis”.

tipos de postagem traduzíveis

Em seguida, navegamos até um dos Post Types e traduzimos todos os seus itens clicando no botão em forma de adição ao lado deles.

traduzir postagens secundárias

Em seguida, repetimos o mesmo passo para o segundo tipo de postagem: traduza seus itens.

traduzir postagens principais

Agora podemos criar uma relação .

adicionar diretório de relacionamento

Uma vez construída a relação, os itens podem ser conectados.

conectar relações

Agora você sabe como usar o WPML para traduzir metacaixas e campos do JetEngine , formulários, taxonomias, CPTs e itens de listagem e sincronizar os menus do site em diferentes idiomas.

Índice