Tag "leia mais" em posts do wordpress

Olá Andréia, tudo bem?

O tema Sydney realmente oculta o "Leia mais". Dei uma olhada no seu perfil e nos cursos que você já concluiu, acho que podemos dar uma mexida em um arquivo do wordpress para resolver isso :)

No seu painel de controle do wordpress, acesse Aparência > Editor.

No lado direito do editor, na lista de arquivos chamada Modelos, encontre o arquivo Funções do Tema (functions.php) e clique/abra ele.

Desça até a última linha desse arquivo aberto (depois de tudo mesmo), copie esse bloco de código abaixo e cole lá. Depois é só clicar no botão Atualizar arquivo.

function new_excerpt_more($more) {
    global $post;
    return '<a class="moretag" href="'. get_permalink($post->ID) . '"> Leia mais</a>';
}
add_filter('excerpt_more', 'new_excerpt_more');

Deve funcionar. Me avisa depois?

Abraço, Thiago Vilaça

Oi Thiago! Tudo bem!?

Você me ajudou bastante! Eu fiz o processo porém o Leia mais só está aparecendo no evento "hover" do mouse. Como não tenho experiência em javaScript ainda, não consegui uma solução. Pode me ajudar? Não encontrei um site para armazenar as imagens e compartilhar com vc, só se tiver seu e-mail.

Muito obrigada!

Andréia, tudo ótimo! Legal que deu certo!

Agora é trabalhar um pouquinho com CSS para resolver isso (acho que até já viu um pouco nos cursos que fez, né?).

Repare que naquele bloco de código que você incluiu para exibir o Leia Mais tem a linha <a class="moretag" href="'. get_permalink($post->ID) . '">. Nesta linha, incluímos na tag <a> a classe moretag. Com essa classe, conseguimos manipular as cores desse link facilmente.

Faz o seguinte: vai em Aparência > Personalizar e seleciona CSS Adicional (último item da lista). Vai abrir um bloco que você pode adicionar seu CSS personalizado.

Como a classe desse link de leia mais é a moretag, vamos trabalhar com ela para manipular/personalizar esse link.

Copie e cole no campo do CSS adicional esse código abaixo:

.moretag {
color: blue;
}
.moretag:hover {
color: green;
}

A primeira classe vai definir que a cor do link é azul. A segunda, que é uma pseudo classe, vai definir que o hover da classe moretag será em cor verde.

Aí depois você pode brincar com mais propriedades no .moretag, por exemplo:

.moretag {
color: blue;
margin-left: 10px;
text-decoration: underline;
font-weight: bold;
}

Nesse exemplo, vamos colocar uma margem de 10px na esquerda do link, separando um pouco do conteúdo. Colocaremos um sublinhado no link e colocaremos a a fonte como bold.

Testa e veja se solucionamos? :)

Thiago!! Bom dia!!

Maravilha!! funcionou perfeitamente! Muito obrigada por sua didática e explicação, já customizei o css para meu "Leia mais" de acordo com meu site.

Só uma pequena dúvida: Como o tema ativo é um tema child que eu criei para o Sydnei, então esse Css que eu customizei não sofrerá alterações caso o tema Sydney seja atualizado correto?

Muito obrigada mais uma vez!

Andréia, provavelmente não sofrerá alterações... quando os temas são atualizados, não costumam fazer grandes alterações estruturais nem mudar nomes de classes. Nunca tive problema com temas que personalizei e foram atualizados.

Legal que deu tudo certo :)

Até mais!