O editor de blocos do WordPress está sempre criando novas possibilidades para personalizar seu site. Neste tutorial, analisaremos o uso de blocos para criar um menu em dois idiomas e um botão seletor de idioma para permitir que seus visitantes alterem o idioma do site.
Veja uma demonstração aqui:
Neste guia
- Notas e referências
- Método
- 1. Configurar páginas e seus slugs
- 2. Selecionar o layout do menu e do botão seletor de idioma
- 3. Criar o botão seletor de idioma
- 4. Adicionar um menu de navegação para as páginas com a sua língua materna
- 5. Salvar o novo menu e o botão seletor de idioma
- 6. Menu no segundo idioma
- 7. Adicionar os novos menus a outras páginas
- 8. Adicionar mais páginas
- O botão seletor de idioma não traduz suas páginas, mas ele permite que seu site seja mostrado em dois ou mais idiomas. Cabe a você traduzir as páginas!
- O botão seletor só redireciona os usuários à página inicial de cada idioma.
- Você também precisa atualizar os menus se adicionar novas páginas ao site.
- A configuração inicial demora um pouco, mas depois que está pronta, atualizações e ajustes são rápidos.
Este tutorial usa as seguintes funções:
- Slugs de página
- Páginas principais e secundárias
- Página inicial estática
- Bloco de colunas
- Bloco de parágrafo
- (Opcional) Imagens embutidas (disponível na barra de ferramentas do bloco de parágrafo)
- Bloco de navegação
- Blocos reutilizáveis
1. Configurar páginas e seus slugs
2. Selecionar o layout do menu e do botão seletor de idioma
3. Criar o botão seletor de idioma
4. Adicionar menu de navegação para as páginas com a sua língua materna
5. Salvar o novo menu e o botão seletor de idioma
6. Menu no segundo idioma
7. Adicionar os novos menus a outras páginas
8. Adicionar mais páginas
Para este tutorial funcionar bem, recomendamos usar um dos temas compatíveis com o editor de blocos, listados aqui.
Acesse Meu site → Site → Páginas. Comece criando uma página de início para cada idioma que você quer no site. Você não precisa adicionar muito conteúdo agora. Um título para a página é suficiente.
Publique cada página para atualizá-la e mude o slug de cada página para remeter ao idioma. Neste exemplo, a página inicial em francês é intitulada Accueil e tem o slug /fr/:
Defina a página inicial com o seu idioma principal como a página inicial estática do seu site. Com isso, os visitantes veem seu site nesse idioma e podem mudar para outro.
Depois de criar as páginas iniciais necessárias, crie outras páginas de conteúdo nos outros idiomas. Você ainda não precisa adicionar conteúdo. Basta publicar a página somente com o título por enquanto.
Ao criar essas páginas, defina-as como Páginas secundárias da página inicial do seu idioma na seção “Atributos de página”.
Exemplo: visão geral da estrutura da página
Em Meu site > Site > Páginas, clique no título da página inicial do idioma principal para abri-la no editor do WordPress.
Abaixo do título da página no editor, adicione um bloco de colunas e escolha o layout de duas colunas. Se mudar de ideia, você pode trocar o layout nas configurações do bloco. Acesse o guia de blocos de coluna para saber mais.
Sugerimos um layout com uma coluna maior e outra menor. A coluna menor conterá o botão seletor de idioma e a maior conterá o menu.
Defina o bloco de colunas como largo ou largura total:
Você pode exibir o botão seletor de idioma de duas maneiras: digitando os nomes dos idiomas ou usando imagens embutidas das bandeiras.
Observação: não recomendamos o uso das bandeiras por dois motivos.
1. É menos acessível para visitantes que não conseguem enxergar
2. Elas podem causar confusão quanto aos idiomas que os visitantes associam a cada bandeira. Nem todo mundo pensa da mesma forma.
Para deixar tudo claro, recomendamos o uso de links de texto (primeiro ou segundo método).
Primeiro método: links de texto no bloco de navegação
Você pode alterar o texto de cada item para apresentar o nome do idioma (ou a abreviação):
Segundo método: links de texto em um bloco de parágrafo
Digite o idioma no formato da sua preferência, como “EN” e “FR” ou “inglês” e “francês”.
Destaque os nomes dos idiomas e clique no botão Inserir hiperlink para vincular o nome do idioma à respectiva página inicial. Exemplo:
Terceiro método: imagens embutidas
Quando a imagem for adicionada, clique nela para redimensioná-la:
Na coluna oposta ao novo botão seletor de idioma, adicione um bloco de navegação. Clique na coluna vazia para abrir o menu de blocos e pesquise Navegação ou procure o bloco na seção Elementos de layout:
O bloco mostrará duas opções, escolha Criar navegação em branco. Você verá o bloco pronto para você adicionar suas páginas:
Adicione um link para cada página do seu idioma principal. Clique no botão de adicionar bloco (o botão preto “+”), à direita do bloco de navegação, para adicionar mais um link:
Use o botão Navegação nos blocos, na parte superior do editor, para selecionar suas colunas:
Use a barra de ferramentas do bloco de colunas para ver mais opções e escolha Adicionar aos blocos reutilizáveis:
Dê um nome de fácil identificação ao bloco reutilizável, como Menu – Inglês. Leia mais sobre blocos reutilizáveis neste guia.
Não se esqueça de Atualizar sua página para salvar as alterações. Pronto! Seu primeiro menu e o botão seletor de idioma estão prontos.
Para criar o menu do segundo idioma, siga os passos de 1 a 5 novamente ou use este atalho:
Abra uma das páginas no segundo idioma no editor do WordPress. Clique no botão de adicionar bloco (o botão preto com um sinal “+”) para adicionar um novo bloco à página. Na lista de blocos, role para baixo até a categoria de blocos reutilizáveis, onde seu menu está salvo. Se preferir, use a caixa de pesquisa.
Quando o bloco de menu for adicionado à página, use o menu “Mais opções” para Converter em blocos comuns:
Quando os blocos aparecerem como blocos comuns em vez de reutilizáveis, você poderá atualizar o bloco de navegação para vincular as páginas do seu segundo idioma.
Primeiro método: remova e adicione novamente um novo bloco de navegação
Segundo método: alterar itens de navegação
Depois de fazer as alterações, salve o novo bloco de colunas como um bloco reutilizável novo, como foi feito naetapa 5acima, e dê um nome que indique que é o menu do segundo idioma.
Não se esqueça de Atualizar sua página para salvar as alterações. Pronto! Seu segundo menu e o botão seletor de idioma estão prontos.
Seus menus e o botão seletor de idioma estão prontos. Agora você pode adicionar dois menus de idioma às outras páginas dos respectivos idiomas, como descrito na etapa 6. Lembre-se: depois de salvar os blocos reutilizáveis, você pode adicioná-los a outras páginas sem precisar convertê-los em blocos comuns.
Você criou mais páginas para cada idioma e precisa adicioná-las ao menu? Sem problemas, basta editar seus blocos reutilizáveis. Eles serão atualizados em cada página a que eles foram adicionados. Veja mais detalhes aqui.
Suporte 