A utilização de tweaks para melhorar a interface da instalação WordPress para os usuários é bastante comum nos dias de hoje e os desenvolvedores e proprietários de websites estão sempre á procura de novas soluções e ideias para levar algo diferente aos seus usuários. Existem alguns tweaks bastante simples que poderão ser introduzidos nos seus websites que irão fazer com que não só o aspeto melhore, mas como também sejam possível fornecer aos visitantes informações adicionais que irão melhorar a usabilidade do website. Um exemplo de uma pequena alteração que pode introduzir tem a ver com a introdução de texto sobre a imagem de destaque dos artigos, que poderá ser útil caso queira informar de forma simples e direta por ex. qual a categoria daquele artigo, inserir o titulo do artigo sobre a imagem, ou qualquer outro tipo de elemento que você ache propício e adequado inserir.
Isto vai melhorar a experiência do usuário, pois poderá também utilizar esta funcionalidade para explicar a imagem ou simplesmente criar um elemento sobre a imagem que quebre a monotonia da mesma. Esta técnica é vista muitas vezes em websites do estilo magazine ou jornais online, que introduzem pequenos excertos da notícia sobre a imagem de destaque, ou inserem o título da notícia sobre a mesma, fazendo com que o website e a própria notícia em si seja mais interativa e mais apelativa para os visitantes.
Enquanto que o processo de captação do titulo, categoria ou excerto do artigo não é um processo complicado, o ajuste e posicionamento da mesma sobre a imagem pode ser uma tarefa mais inglória e mais trabalhosa, valendo no entanto o tempo e esforço dedicado. Neste artigo vamos-lhe mostrar Como adicionar texto sobre imagem de destaque dos artigos, para que possa introduzir um novo elemento no seu website que vai melhorar a interatividade e usabilidade do mesmo.
1. ADICIONAR NOME DA CATEGORIA
O primeiro processo que vamos abordar é como adicionar o nome da categoria sobre a imagem de destaque dos artigos. Naturalmente que isto é feito trabalhando sobre os ficheiros do seu template, pelo que se você mudar o theme do seu website, as alterações feitas no anterior não irão passar para o novo theme. Antes de começar, recomendamos que se ligue por FTP ao servidor onde tem alojado o seu website, e para isso recomendamos a utilização do Filezilla, um cliente de FTP gratuito. Depois de se ligar ao FTP, vá até à pasta do seu theme que deverá estar localizada dentro do seguinte diretório /public_html/wp-content/themes e localize o ficheiro index.php.
Esta é a imagem inicial antes de qualquer edição:
Depois de o abrir para edição, localize o seguinte texto “the_post_thumbnail”. De seguida insira o código de forma a ficar semelhante ao fornecido abaixo:
<div class="postThumb"> <span class="txtimg"> <a href="<?php the_permalink() ?>"><?php the_post_thumbnail(); ?></a> <span> <?php $category = get_the_category(); echo $category[0]->cat_name; ?> </span> </span> </div>
Aqui fizemos a captura da categoria do artigo e inserimos o texto por baixo da imagem em destaque como poderá ver nesta imagem:
Neste momento já temos a captura e a inserção do texto feita, restando agora o posicionamento e estilização do texto sobre a imagem. Como deverá ser do seu conhecimento, a estilização é feita utilizando CSS e para estilizar este elemento, localize o ficheiro style.css presente na mesma pasta do seu theme e insira o seguinte código:
.txtimg span {
background-color: Black;
color:white;
font-size: 12px;
position:absolute;
bottom:0px;
left:0px;
padding-left:10px;
padding: 10px;
-moz-opacity:.80;
filter:alpha(opacity=80);
opacity:.80;
width:180px;
display: block;
}
.txtimg {
float:left;
position:relative;
width: 180px;
overflow:hidden;
}
Este código CSS irá fazer com que o texto seja reposicionado e colocado sobre um fundo semi-transparente que irá dar destaque ao texto:
Embora neste theme esteja a ser feita uma redundância visual, pois a categoria já está visível sobre o título do artigo, no seu theme poderá não existir aquele elemento ou mesmo se existir poderá removê-lo, como acabámos por fazer neste teste:
2. ADICIONAR O TÍTULO DO ARTIGO
O segundo processo que vamos abordar é como adicionar o título do artigo sobre a imagem de destaque dos mesmos. Mais uma vez, isto é feito trabalhando sobre os ficheiros do seu template, pelo que se você mudar o theme do seu website, as alterações feitas no anterior não irão passar para o novo theme. Repetindo o processo anterior, ou caso não o tenha feito sugerimos que se ligue por FTP ao servidor onde tem alojado o seu website, e para isso recomendamos a utilização do Filezilla, um cliente de FTP gratuito. Depois de se ligar ao FTP, vá até à pasta do seu theme que deverá estar localizada dentro do seguinte diretório /public_html/wp-content/themes e localize o ficheiro index.php.
Esta é a imagem inicial sem qualquer edição:
Depois de abrir o ficheiro para edição, localize o seguinte texto “the_post_thumbnail();” e insira o seguinte código para ficar semelhante e poder proceder ás alterações:
<div class="postThumb"> <span class="titleimg"> <a href="<?php the_permalink() ?>"><?php the_post_thumbnail(); ?></a> <span> <?php $title = the_title(); echo $title[0]->title_name; ?> </span> </span> </div>
Neste momento o título já está a ser inserido por baixo do thumbnail do artigo como poderá ver na imagem abaixo, pelo que de seguida irá ser necessária a introdução da estilização:
Neste momento já temos a captura e a inserção do título do artigo feita, restando agora o posicionamento e estilização do texto sobre a imagem. Como deverá ser do seu conhecimento, a estilização é feita utilizando CSS e para estilizar este elemento, localize o ficheiro style.css presente na mesma pasta do seu theme e insira o seguinte código:
.titleimg span {
background-color: Black;
color:white;
font-size: 12px;
position:absolute;
bottom:0px;
left:0px;
padding-left:10px;
padding: 10px;
-moz-opacity:.80;
filter:alpha(opacity=80);
opacity:.80;
width:180px;
display: block;
}
.titleimg {
float:left;
position:relative;
width: 180px;
overflow:hidden;
}
O código acima irá fazer com que o texto seja reposicionado para cima da imagem e seja colocado sobre um fundo semi-transparente que irá dar destaque ao texto:
Mais uma vez e á semelhança do exemplo anterior, temos uma redundância visual ao estar repetido o título do artigo. Caso seja do seu interesse poderá remover o título do artigo, embora não o recomendemos por questões relacionadas com SEO:
Em jeito de conclusão, podemos afirmar que de facto a introdução de texto sobre a imagem de destaque poderá trazer outro aspecto e melhorar a interface e usabilidade por parte dos visitantes do seu website, fornecendo um elemento visual que permite identificar desde logo a categoria do artigo em questão, ou somente introduzir algum texto com informações úteis e relevantes paras os usuários. A utilização deste truque deverá ser feita de forma a que o visitante saia a ganhar com um elemento visual, e não seja bombardeado com demasiado texto ou demasiada informação que poderá eventualmente fazer com que o visitantes nem sequer se sinta tentado a ler o artigo – lembre-se: o objetivo é cativar um leitor!
Abraço!
