Como Personalizar o botão Leia Mais (Read More) do WordPress

O botão Leia Mais (Read More) aparece na página de listagem dos posts, ou seja, na página inicial, de buscas, etc dos sites WordPress. Ele nada mais é do que um link que manda o visitante para a página onde é exibido o post completo.

Existem centenas de temas WordPress maravilhosos. Entretanto, boa parte deles em inglês com o famoso botão "Read More". Nesse artigo vamos mostrar como traduzir esse botão para "Leia mais" ou para o termo que desejar.

Com isso, se impede aquele estranhamento do leitor ao encontrar uma frase em outro idioma, personaliza o seu tema e garante que a mensagem transmitida seja a mais clara possível.

Essa tradução do termo é muito simples, como verá nas próximas linhas, você só precisa inserir uma pequena linha de código no functions.php ou instalar um plugin de tradução.

Fique tranquilo que veremos passo a passo como fazer cada uma dessas opções. A primeira e mais simples ou a segundo um pouco mais complexa, mas que te garante traduzir outros itens do seu tema também.

O que é o botão Leia Mais (Read More) e para quê ele serve no WordPress?

Na página inicial de um blog, a disposição dos posts possui elementos já consolidados na experiência geral do usuário.

• Título: em que você coloca o principal chamado do artigo, sendo esse um dos elementos de maior destaque.
• Imagem ou Miniatura ou Thumbnail: a imagem de destaque normalmente vinculada ao assunto tratado na postagem.
• Texto de apresentação ou excerpt: normalmente as primeiras linhas do conteúdo, algo para dar ao leitor uma "degustação" do que será apresentado.
• Botão leia mais (read more): o responsável por levar o leitor até a página do post, para que ele possa ler o conteúdo completo.

Todos esses elementos são importantíssimos e vem com alteração padrão no WordPress. Em outras palavras, você consegue mudar com facilidade o título, a imagem e o texto de apresentação. Mas isso não acontece com o botão Leia Mais (Read More).

Sendo necessário assim, seguir os passos desse artigo para personalizá-lo e traduzi-lo para a nossa língua portuguesa.

Existe também um problema de SEO, já que esses links costumam vir com um "#ready-more" depois do link. Esse "pequeno texto" no final da url só serve para deixar a mesma esteticamente feia.

Esse problema da url com "#read-more" no final pode ser facilmente resolvido ao personalizar a tag Leia Mais, conforme veremos abaixo na seção como traduzir a tag leia mais.

Como traduzir o texto "read more" para o português

Método 1: Inserir o código de tradução do Leia Mais no functions.php

Todo tema do WordPress possui em sua composição um arquivo chamado functions.php. Esse arquivo é responsável por receber novos códigos e, com isso, implementar novas funcionalidades, uma forma inteligente do WordPress de expandir os recursos dos temas de forma simples para o usuário.

Você pode editar o functions.php via FTP, Gerenciador de Arquivos ou pela edição de arquivos do próprio CMS, essa última não sendo recomendada por causar erros no site.

Entretanto, é importante afirmar que o código a ser mostrado não funciona em todos os temas. Depende muito da forma com que ele foi construído, principalmente das funções vinculadas ao botão. Felizmente, existe o método 2 que funciona em qualquer tipo de template para WordPress.

A sugestão é inserir o código abaixo no functions.php e verificar se ele foi o suficiente para a tradução do Leia Mais (read more). Se não foi, vá para o segundo método. Ele é garantido.

add_filter('the_content_more_link', 'filter_more_link');
function filter_more_link( $link ) {
return ' <a class="read-more" href="'. get_permalink( get_the_ID() ) . '" title="Continue lendo '.get_the_title().'">Leia mais '.get_the_title().'...</a>';
}

Método 2: Instalar o plugin de tradução Loco Translate

O Loco Translate é um dos melhores plugins de tradução de toda a comunidade WordPress. Com ele você consegue traduzir temas e plugins de uma maneira rápida, simples e dinâmica.

Para utilizarmos o Loco Translate, baixe o plugin e instale no seu WordPress. Dessa forma, um novo item de menu aparecerá no painel do WordPress.

Na aba Active theme (tema ativo), clique no nome do seu tema atual. É aqui que iniciamos o processo de tradução dele. Depois, na nova tela que aparecer, vá em "New Language (nova linguagem)".

Preencha o campo "Language" com o Portuguese (Brazil). Tome cuidado para não selecionar o português de outro país e defina a localização da tradução. Optamos por "Author".

No campo de pesquisa da tela de edição de termos, pesquise por "read more". Caso queira traduzir outros termos do seu site, o passo a passo é o mesmo.

Após a seleção, o campo abaixo "Portuguese (Brazil) translation" estará aberto para edição. Basta digitar o termo que você quiser: leia mais, continue lendo, dentre outros; e salve a tradução.

Com isso, o Leia mais (read more) é traduzido e estará disponível para todos os visitantes da página. O resultado do nosso site de testes pode ser visto logo abaixo.

Porque personalizar o Leia Mais?

Existem muitos motivos que levam as pessoas a personalizar o botão Leia Mais, um dos motivos principais é o fato de ele vir escrito em inglês em alguns temas do WordPress. Outro bom motivo para modificá-lo é para deixar a url dos posts mais "amigáveis", conforme dito anteriormente.

E também uma das poucas vantagens (e bem pouco utilizada) é de ter a liberdade de colocar a call to action (chamada para ação) que você quiser no botão. Não é necessário ser exatamente o "Leia mais". Logo abaixo mostraremos algumas sugestões.

Alternativas que podem ser utilizadas ao invés do "Leia mais"

É possível usar também termos mais sérios ou descontraídos como:

• Leia o artigo.
• Tenha acesso ao artigo.
• Continue a leitura.
• Leia tudo.
• Acesse o conteúdo.

Ou até mesmo manter o termo "leia mais", porém com emojis, como no exemplo abaixo.

Como inserir a tag Leia Mais onde você quiser

Durante a edição de um conteúdo, pode ser que você queira definir onde o texto é cortado de forma manual.

Isso é possível através de um recurso nativo do Gutenberg. Utilizá-lo é extremamente intuitivo, já que usa o recurso de blocos já conhecido durante a preparação das postagens.

Para inserir a tag leia mais, basta digitar "/leia mais" em uma linha em branco, até o seguinte "pop-up" aparecer. Opte pela primeira opção, em que ele insere o Read More em um divider (algo que vai "cortar o seu texto" para você saber até que ponto ele está disponível na página inicial.

Seu conteúdo no editor padrão do WordPress aparecerá da seguinte maneira. Depois, basta continuar escrevendo seu conteúdo.

Deixar de usar o Leia Mais (read more) é um problema?

Alguns temas naturalmente não possuem o uso de botões de leia mais. Seja por decisão estética ou funcional, muitos se perguntam se isso, de fato, é uma boa ideia. Um exemplo disso é o próprio WP Total.

Como pôde ser visto, ele contém apenas a imagem de destaque, o título e o resumo do conteúdo. Nossa equipe acha melhor mostrar o conteúdo direto ao ponto.

No entanto, isso não elimina os benefícios de call to action do botão read more.

Conclusão: como personalizar o botão leia mais no WordPress

Nesse artigo explicamos de forma rápida os dois melhores métodos para personalizar o read more no WordPress. O método mais simples, em que basta inserir um código no functions.php e outro um pouco mais complexo, mas que te permite traduzir diversos termos do seu tema.

Independente do método escolhido, espero que o conteúdo tenha cumprido o objetivo de te ajudar a personalizar o botão. Qualquer dúvida, como de costume, fique a vontade nos comentários.

Um forte abraço!