Neste tutorial, você aprenderá como criar um site multilíngue com o Stitched e o WPML. O Stitched é um tema para artesãos. Você pode usar o componente de introdução da página inicial para falar sobre você aos seus visitantes e pode estender a funcionalidade dele instalando os plugins recomendados que podem ser integrados a ele.
O Stitched é desenvolvido pela WooThemes. Para temas e plugins desenvolvidos pela WooThemes, recomendamos que você use a interface integrada do WPML para a tradução de recursos especiais que a WooThemes / Plugins usam em seus códigos. Neste tutorial, vou guiar você passo a passo de forma simples para fazer isso.
Você pode ver um exemplo ao vivo no site de demonstração do Stitched + WPML.
Para administrar um site multilíngue com o Stitched e o WPML, você precisará de:
- Tema Stitched
- Uma versão recente do WPML, incluindo os complementos Tradução de Strings e Gerenciamento de tradução
Primeiros passos
Estes são os principais passos que você precisa seguir para começar:
- Instalar e ativar o Stitched
- Instalar e ativar os plugins do WPML (WPML Multilingual CMS, WPML Tradução de Strings, WPML Gerenciamento de tradução)
- Configurar o WPML em WPML -> Idiomas. Consulte nosso Guia de primeiros passos do WPML para referência completa
- Instalar e ativar um dos vários plugins que podem ser integrados ao Stitched. Para o propósito deste tutorial, usaremos o Projects
Tradução da mensagem introdutória
O recurso de 'Mensagem introdutória' do tema Stitched é uma combinação da imagem do Gravatar do administrador do site, bem como do texto de descrição do site. Com o WPML, qualquer texto (ou string, como gostamos de chamar aqui) que não faz parte de posts, páginas e taxonomia é traduzido usando o módulo Tradução de Strings.
O texto para isso é definido em Configurações > Geral
E agora, para traduzir, basta ir para WPML -> Tradução de Strings e procurar por essa string
, traduzi-la, marcá-la como concluída e salvar
Então, é assim que o nosso front-end fica agora, incluindo a imagem do Gravatar que o tema está buscando automaticamente de acordo com as suas configurações
Tradução de textos gerais
O Stitched vem com mais algumas strings que você pode querer traduzir. Você pode concluir as traduções que faltam usando o módulo Tradução de Strings do WPML, como descrevi para a 'Mensagem introdutória'. Se algumas strings estiverem faltando, siga as instruções para Localização de temas e plugins. Resumindo, vá para WPML -> Localização de temas e plugins e clique em 'Analisar o tema em busca de strings'. Note que você pode facilmente filtrar as strings certas no menu suspenso de contexto – para o Stitched, filtre por 'theme woothemes' e para o 'Projects plugin', filtre por 'plugin projects-by-woothemes'. Fica mais ou menos assim:
Tradução de plugins integrados
Agora que vimos como traduzir todo o texto que vem do tema, vamos ver como tornar as strings e os recursos vindos de um plugin da Woo também traduzíveis. Para o propósito deste tutorial, escolhi o excelente plugin recomendado para uso com o Stitched – 'Projects by WooThemes'.
Depois de instalar e ativar o 'Projects', você poderá ver no seu painel de administração do WordPress um novo menu chamado exatamente assim... 'projects', como aqui:
Para tornar seus projetos e as categorias deles traduzíveis, você usa as configurações do WPML (interface do WPML). Basicamente, o que você faz é ir para WPML -> Gerenciamento de tradução, assim:
Escolha Configuração de conteúdo multilíngue nas abas na parte superior
Antes de continuarmos, apenas algumas palavras sobre o que realmente está acontecendo aqui nos bastidores – o plugin Projects, como muitos outros plugins (e temas), está usando tipos de post personalizados para sua funcionalidade. Estes são um tipo de posts 'especiais' e, por serem especiais, o WPML não 'sabe' que eles precisam ser traduzidos. Então, nosso próximo passo aqui é dizer exatamente isso ao WPML – traduza o Projects!
Clique em Posts personalizados, escolha Traduzir para o Projects – como você pode ver, você também pode definir os slugs do Projects para serem traduzíveis e, logo abaixo, você pode traduzir as Taxonomias personalizadas relacionadas a esses posts personalizados, neste caso, chamadas de 'Project categories'. Agora, basta Salvar e pronto. Da mesma forma, você pode controlar como os campos personalizados são tratados para tradução clicando no link Tradução de campos personalizados na parte superior. Para o Projects, você pode definir 3 campos personalizados: _client, _project_image_gallery e _url, mas para estes, recomendo que você siga o próximo ponto -
Vamos ver como fica a página de administração do Projects. Clicamos em 'Projects' na tela de administração e agora – como em qualquer página ou post 'normal' – podemos duplicar ou traduzir qualquer Project existente, criar um novo em qualquer idioma que quisermos e, muito importante, usar toda a funcionalidade do tipo de post project – neste caso, podemos adicionar Detalhes, Descrição e a galeria especial que ele nos oferece, assim:
Como tornar campos personalizados (e outros itens) traduzíveis na página de edição de posts personalizados
Último ponto aqui – como você provavelmente notou na última tela – você também pode controlar como os Campos personalizados e até mesmo a taxonomia e os tipos de post são tratados para tradução em cada página de edição de um post. Vamos ampliar isso um pouco:
Aqui, queremos que o _project_image_gallery seja copiado entre os idiomas, e achei que faz sentido deixar os campos _client e _url não traduzidos – você ainda pode alterá-los na página do post traduzido, mas não precisamos realmente que eles sejam traduzidos.
Estilização do seletor de idiomas
Por último, mas não menos importante, vamos fazer um pequeno ajuste para que o seletor de idiomas do WPML fique perfeitamente integrado à navegação principal do Stitched. O seletor de idiomas do WPML tem classes adicionadas a ele que podem ser estilizadas de acordo com as suas necessidades. Você pode até mesmo criar um seletor de idiomas personalizado inteiro, se quiser. Aqui isso não é necessário, tudo o que queremos é dar um pouco de preenchimento (padding) à bandeira para que ela 'se encaixe' no lugar e não pareça estranha
Para fazer isso, vamos para WPML -> Idiomas -> Opções do seletor de idiomas -> CSS adicional (opcional) e adicionar um pouco de preenchimento (padding) à classe que controla a estilização da imagem da bandeira do seletor – img.iclflag
Agora ficou muito bom, exatamente como qualquer outro item de menu do Stitched
Conclusão
O Stitched é um tema muito bom para se tornar multilíngue e falar ao mundo sobre você e seus projetos. Você também pode adicionar uma loja a ele usando o WooCommerce e o WPML Multilingual & Multicurrency for WooCommerce. Vimos como você pode ajustar facilmente os recursos dele usando o WPML.
Versões usadas
- WordPress 3.9
- WPML 3.1.5
- Tema Stitched 1.0.2
- Plugin Projects 1.2.0
