Implementando i18n em nosso tema<\/h2>\n
J\u00e1 fizemos a primeira parte na etapa anterior<\/a> desta s\u00e9rie de tutoriais de temas, onde adicionamos O primeiro argumento \u00e9 o handle, esta \u00e9 uma string \u00fanica que voc\u00ea usar\u00e1 para agrupar todos os textos que pertencem ao seu tema. Voc\u00ea repetir\u00e1 essa al\u00e7a toda vez que fizer um texto traduz\u00edvel. O segundo argumento informa ao WordPress onde est\u00e3o os arquivos de tradu\u00e7\u00e3o. N\u00f3s os definimos para residir em uma subpasta ‘ N\u00e3o se preocupe se esta pasta n\u00e3o existir ou n\u00e3o contiver nenhum arquivo \u2013 nada ir\u00e1 travar. Se o WordPress n\u00e3o encontrar a pasta nem os arquivos de tradu\u00e7\u00e3o corretos, o padr\u00e3o voltar\u00e1 aos textos que temos no tema.<\/p>\n O pr\u00f3ximo passo \u00e9 passar por todo o nosso c\u00f3digo e encontrar qualquer sa\u00edda de texto que deva ser traduz\u00edvel. \u00c9 uma boa pr\u00e1tica garantir que abrangemos absolutamente todos os textos. Nada \u00e9 mais irritante do que usar um tema ou plugin onde o autor codifica textos impossibilitando a tradu\u00e7\u00e3o ou altera\u00e7\u00e3o de qualquer forma.<\/p>\n O que fazemos com todos os textos \u00e9 coloc\u00e1-los dentro de uma das fun\u00e7\u00f5es gettext do WordPress, que mais comumente s\u00e3o O WordPress tem mais fun\u00e7\u00f5es gettext que atendem a prop\u00f3sitos mais espec\u00edficos, por exemplo As fun\u00e7\u00f5es gettext recebem dois par\u00e2metros; primeiro o pr\u00f3prio texto e, em segundo lugar, o identificador que voc\u00ea definiu em Por exemplo, se voc\u00ea tiver algo assim:<\/p>\n Voc\u00ea precisar\u00e1 substitu\u00ed-lo por:<\/p>\n E da mesma forma para armazenar em uma vari\u00e1vel;<\/p>\n Ele precisa ser escrito assim:<\/p>\n Agora precisamos encontrar todos os textos em nossos modelos! Se voc\u00ea seguiu este tutorial a um “T” n\u00e3o s\u00e3o muitos. Temos algumas strings Vamos come\u00e7ar Como voc\u00ea usou Temos este mesmo texto em nosso A partir de agora, todos os textos que adicionarmos ao nosso tema, certifique-se de envolv\u00ea-los dentro Existem duas maneiras de fornecer arquivos de tradu\u00e7\u00e3o para o seu tema;<\/p>\n O Os arquivos A desvantagem dos arquivos Voc\u00ea precisa de um programa para editar Baixe e instale o PoEdit para seguir o resto do tutorial.<\/p>\n Fazer um arquivo de tradu\u00e7\u00e3o para o ingl\u00eas geralmente n\u00e3o faz sentido quando todos os textos do nosso tema s\u00e3o em ingl\u00eas, mas para os prop\u00f3sitos deste tutorial, farei um arquivo de tradu\u00e7\u00e3o para o ingl\u00eas.<\/p>\n 1 Abra o PoEdit e clique em Arquivo > Novo\u2026<\/p>\n 2 Voc\u00ea ser\u00e1 solicitado a escolher um idioma. Escolha o idioma desejado, por exemplo, ingl\u00eas.<\/p>\n 3 Pressione Salvar (Ctrl+S). Localize a pasta do seu tema e entre na 4 No menu, clique em Cat\u00e1logo > Propriedades\u2026<\/p>\n 5 Na primeira aba voc\u00ea pode preencher algumas informa\u00e7\u00f5es como o nome do seu projeto (tema), ou mudar o idioma \u2013 mas n\u00e3o \u00e9 necess\u00e1rio. Eu recomendo que voc\u00ea mantenha o charset em UTF-8, pois \u00e9 isso que escrevemos para o WordPress.<\/p>\n 6 Clique na guia Caminhos de fontes. Aqui voc\u00ea precisar\u00e1 definir quais pastas o arquivo deve procurar para textos traduz\u00edveis. Os caminhos s\u00e3o relativos, e como j\u00e1 salvamos em uma subpasta do nosso tema, sabemos que precisa subir um diret\u00f3rio. Clique no bot\u00e3o + abaixo da caixa Caminhos e escolha Adicionar pastas. Escolha o diret\u00f3rio do seu tema. Isso deve adicionar um elemento de caminho “.” (subir uma pasta). Verifique novamente se “caminho base” se refere ao diret\u00f3rio do seu tema raiz.<\/p>\n 7 Clique na pr\u00f3xima guia, “Fontes de palavras-chave”. Aqui voc\u00ea precisa informar ao PoEdit quais fun\u00e7\u00f5es voc\u00ea usou para textos traduz\u00edveis (por exemplo load_theme_textdomain<\/code>a fun\u00e7\u00e3o de configura\u00e7\u00e3o do nosso tema. Caso voc\u00ea tenha esquecido, isso \u00e9 o que adicionamos:<\/p>\nload_theme_textdomain('wptutorial', get_stylesheet_directory(). '\/lang');<\/code><\/pre>\nlang<\/code>‘ em nosso diret\u00f3rio de temas.<\/p>\nComo tornar os textos traduz\u00edveis<\/h2>\n
_e()<\/code>ou __()<\/code>. O primeiro \u00e9 um sublinhado com “e” que \u00e9 usado quando voc\u00ea deseja ecoar o texto ao mesmo tempo. O segundo \u00e9 dois sublinhados e \u00e9 usado quando voc\u00ea n\u00e3o deseja eco\u00e1-lo, mas armazen\u00e1-lo ou us\u00e1-lo em uma vari\u00e1vel.<\/p>\nesc_html__()<\/code>, _n()<\/code>, _x()<\/code>e muito mais. No entanto, n\u00e3o entraremos em detalhes neste tutorial.<\/p>\nload_theme_textdomain<\/code>. Neste caso \u00e9 ‘ wptutorial<\/code>‘.<\/p>\necho 'Read more';<\/code><\/pre>\n_e('Read more', 'wptutorial');<\/code><\/pre>\n$myvariable = 'Read more';<\/code><\/pre>\n$myvariable = __('Read more', 'wptutorial');<\/code><\/pre>\nindex.php<\/code>e algumas em single.php<\/code>.<\/p>\nAdicionando suporte de tradu\u00e7\u00e3o em nosso tema<\/h2>\n
index.php<\/code>e localizar a mensagem “Sem postagens, desculpe” que adicionamos se o loop n\u00e3o contivesse nenhuma postagem. Envolvemos esse texto _e()<\/code>porque ainda queremos eco\u00e1-lo. Ent\u00e3o \u00e9 isso que obtemos:<\/p>\n...\n} else {\n ?><p><?php _e('No posts, sorry.', 'wptutorial'); ?><\/p><?php\n}\n...<\/code><\/pre>\n_e()<\/code>, n\u00e3o deve ver nenhuma altera\u00e7\u00e3o quando clicar em atualizar na p\u00e1gina inicial ou no arquivo. Mas sob o cap\u00f4, este texto agora \u00e9 traduz\u00edvel!<\/p>\nsingle.php<\/code>e page.php<\/code>. Atualize-os da mesma maneira que fizemos no index.php<\/code>. Adicionamos mais alguns textos em single.php<\/code>, ent\u00e3o aqui est\u00e1 como fica depois de tornar todos os textos traduz\u00edveis:<\/p>\n...\n <?php the_category(); ?>\n <p><?php _e('Posted', 'wptutorial'); ?>: <?php the_date(); ?> <?php _e('at', 'wptutorial'); ?> <?php the_time(); ?><\/p>\n <p><?php _e('Author', 'wptutorial'); ?>: <?php the_author(); ?><\/p>\n <\/article>\n <?php endwhile;\n} else {\n ?><p><?php _e('No posts, sorry.', 'wptutorial'); ?><\/p><?php\n}\n\u00a0\n...<\/code><\/pre>\n__()<\/code>ou _e()<\/code>.<\/p>\nArquivos de tradu\u00e7\u00e3o<\/h2>\n
\n
.pot<\/code>-arquivo<\/li>\n.po<\/code>e ..mo<\/code><\/li>\n<\/ul>\n.pot<\/code>-file \u00e9 recomendado para um tema que voc\u00ea vende ou d\u00e1 para outros usu\u00e1rios, pois com este arquivo \u00e9 muito f\u00e1cil gerar um arquivo de tradu\u00e7\u00e3o para um novo idioma. No entanto, n\u00e3o \u00e9 f\u00e1cil (ou gratuito) criar um desses arquivos. Se voc\u00ea estiver familiarizado com WP-CLI (linha de comando WordPress) ou Grunt, voc\u00ea pode seguir as diretrizes na documenta\u00e7\u00e3o do WordPress aqui<\/a>. Se n\u00e3o, a outra alternativa pode ser para voc\u00ea.<\/p>\n.po<\/code>e .mo<\/code>trabalham juntos. WordPress requer um .mo<\/code>para tradu\u00e7\u00e3o de textos, mas este arquivo n\u00e3o \u00e9 leg\u00edvel. Portanto, temos o .po<\/code>arquivo que \u00e9 leg\u00edvel para n\u00f3s. Com o software certo, ele gera o .mo<\/code>arquivo sempre que voc\u00ea faz altera\u00e7\u00f5es.<\/p>\n.po<\/code>e .mo<\/code>\u00e9 que voc\u00ea precisa gerar um par para cada idioma e, uma vez traduzido para um idioma, n\u00e3o h\u00e1 uma maneira f\u00e1cil de esvaziar todas as tradu\u00e7\u00f5es para criar outro novo idioma.<\/p>\n.pot<\/code>e .po<\/code>arquivos. O mais comum \u00e9 o PoEdit<\/a>. O PoEdit \u00e9 gratuito e funciona tanto para iOS quanto para Windows. Mas alguns recursos avan\u00e7ados (como gerar um .pot<\/code>-file) infelizmente requerem uma vers\u00e3o paga. Usaremos a vers\u00e3o gratuita para fazer um .po<\/code>arquivo para o nosso tema.<\/p>\nCriando um arquivo .po para nosso tema com PoEdit<\/h2>\n
\/lang\/<\/code>subpasta. (Se voc\u00ea n\u00e3o o criou na \u00faltima etapa, crie-o agora). O nome do seu arquivo \u00e9 cr\u00edtico. Para temas, ele deve ser nomeado apenas com o c\u00f3digo do seu idioma. Para o ingl\u00eas americano seria en_US<\/code>, para o noruegu\u00eas \u00e9 nb_NO<\/code>. Pesquise no Google ou consulte esta vis\u00e3o geral<\/a> para encontrar o c\u00f3digo do seu idioma. Vamos nome\u00e1-lo en_US.po<\/code>.<\/p>\n![\"Tutorial](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-152370-61e4d69a10501.png\")
<\/a><\/p>\n![\"Tutorial](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-152370-61e4d69b261fd.png\")
<\/a><\/p>\n__<\/code>, _e<\/code>, esc_html_e<\/code>e assim por diante). Clique no bot\u00e3o + para adicionar cada fun\u00e7\u00e3o e escreva-as sem “()”. Cabe a voc\u00ea se voc\u00ea deseja cobrir todas as suas bases e adicionar todas as fun\u00e7\u00f5es gettext do WordPress, mas neste tutorial sabemos que usamos apenas duas. Ent\u00e3o adicionamos dois elementos; __()<\/code>e _e()<\/code>. Adicione as fun\u00e7\u00f5es sem nenhum par\u00eantese.<\/p>\n
![\"Tutorial](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-152370-61e4d69c29a5b.png\")
<\/a><\/p>\n![\"Tutorial](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-152370-61e4d69d34b4a.png\")
<\/a><\/p>\n