Início » Posts do antigo blog » web

Tag: web

crp taxonomy

Melhorando o Contextual Related Posts com Taxonomy Tools

Em outro artigo, eu falava sobre o plugin Contextual Related Posts, uma adição indispensável a qualquer site construído com WordPress, que exibe posts relacionados àquele que o leitor está vendo. É uma ferramenta essencial porque prende o leitor, fazendo-o navegar de um artigo a outro dentro do mesmo site, gerando vários e vários cliques.

crp taxonomy

Bom. Mas o CRP às vezes torna-se bem irritante, já que os posts “relacionados” muitas vezes pertencem a categorias diferentes e têm em comum, apenas, algumas palavras muito usadas – não o assunto em si.

Mas e se fosse possível limitar o conceito de “related” a algo controlável, como categorias ou tags?

Pois bem. Com o uso do CRP puro, isso não pode ser feito. Para isso, precisamos de um segundo plugin, o CRP Taxonomy Tools.

Trata-se de uma mera adição ao plugin original. Sua instalação é semelhante, e na verdade, se vocês já leram meu artigo anterior, já sabem que com o Plugin ativo basta clicar em Configurações, e depois em Related Posts, para abrir a tela de configuração do Contextual Related Posts.

É aqui que o novo plugin se faz visível. Ele adiciona novas opções. Especificamente, essas aqui:

crp taxonomy

Em “Fetch related posts only from”, podemos escolher se queremos limitar os posts relacionados àqueles que pertencem à mesma categoria, ou que têm as mesmas Tags (as palavras-chave que colocamos no post quando o criamos, para facilitar a vida dos mecanismos de busca levando o site a bombar no Google).

Podemos escolher as duas coisas, inclusive. Elas não são excludentes. 

Na opção abaixo, “Taxonomy Matching”, temos a opção de uma associação mais radical, relacionando apenas posts que sejam exatamente iguais nos itens selecionados acima (da mesma categoria, com exatamente as mesmas tags, ou ambas as características). É uma opção realmente extrema, para sites com montanhas de posts, e eu não consigo imaginar que possa ser útil ao blogueiro comum.


 

E é isso. Com CRP e sua extensão Taxonomy Tools, podemos exibir finalmente uma lista de assuntos que o leitor do artigo que está na tela irá, com certeza, ter interesse ler. E assim, fazemos com que nossos leitores “se percam” dentro do site, lendo artigo atrás de artigo, o que é bom para todo mundo: leitor, blogueiro e anunciantes.

Espero ter ajudado. Continuem ligados porque, sempre que dá um tempo, trago aqui novas dicas. WordPress é vida (mas já havia vida antes dele, que fique claro).

Até mais!

crp-menu-900x300

Código CSS para deixar o Contextual Related Posts mais bonito

Boa noite, leitores amantes do WordPress. Hoje, falaremos de um Plugin muito popular entre wordpresseiros: o Contextual Related Posts, utilizado para exibir aquela pequena relação de matérias que têm algo a ver com a que o usuário acaba de ler.

Pois bem: o Contextual Related é um dos melhores plugins para isso, pois é leve e adaptável. O problema é que ele não é muito bonito. Felizmente, é customizável. Eu deixei o meu com a seguinte aparência:

menu1

Quando o usuário passa o mouse sobre uma das matérias, eis o que acontece:

menu2

Gostou?

Então, agora vamos construir isso, passo a passo.


PASSO 1 – INSTALAR O PLUGIN

Essa é a parte mais fácil. Abra “Plugins”, “Adicionar Novo”, e em seguida, busque pelo nome, “Contextual Related Posts”. Instale o plugin. Agora, seu painel tem uma nova opção dentro de “Configurações”. Abra.

menu3  


PASSO 2 – CONFIGURAÇÕES MANUAIS

Com a tela “General Settings” devidamente aberta pela clicada do passo anterior, vamos uma série de opções para escolher. Uma delas, “Number of related posts to display” é muito interessante, porque nos permite escolher quantos posts relacionados vamos mostrar ao final de cada matéria.

O centro da nossa atividade de hoje, no entanto, é “Thumbnal Options”, porque aqui vamos modificar o tamanho e a forma das imagens que serão exibidas para chamar leitores para o próximo post.

Primeira parada, opções básicas:

menu4

Aqui é importante notar que eu marquei “Display thumbnails inline with posts, before title”, e depois, na opção de tamanho, “Custom size”.

Hora de correr a tela para baixo um pouco.

Agora, vem a hora mais importante antes do código.

menu5

Aqui, temos uma coisa importante: eu escolhi a largura e a altura das figuras de thumbnail, e marquei a checkbox do “crop mode” para obter um “hard crop”. Ou seja, o plugin vai ficar uma largura e altura de caixa, botar a foto de destaque da matéria centralizada nessa caixa, e cortar os cantos.

Com isso, não teremos deformações nem imagens espichadas ou esquisitas.

A opção “image size attributes” é praticamente irrelevante. Só não escolha “No html or Style”, porque daí não funciona mesmo.

DICA LEGAL: se você, assim como eu, tem a mania de escrever títulos longos e quer evitar que eles sejam cortados no “related”, modifique “Limit post title length (in characters)” para o número de caracteres desejados antes do corte. Esta minha customização foi desenhada para títulos até 95 caracteres, então, pode tacar-le pau na criatividade.


PASSO 3 – O CÓDIGO CSS

Dentro da caixa “Styles”, marque “No styles”, porque nós vamos adicionar um código CSS na caixa logo mais abaixo. O código CSS que criei, e que é uma versão modificada do original, que vem com o plugin:

crp_related {
clear: both;
margin: 10px 0;
}
.crp_related h3 {
margin: 0 !important;
}
.crp_related ul {
list-style: none;
float: left;
margin: 0 !important;
padding: 0 !important;
}
.crp_related li, .crp_related a {
float: left;
overflow: hidden;
position: relative;
text-align: center;
}
.crp_related li {
margin: 5px 5px 5px 0 !important;
border: 1px solid #ddd;
padding: 0;
background:#eee;
}
.crp_related li:hover {
background: #eee;
border-color: #bbb;
}
.crp_related a {
width: 135px;
height: 200px;
text-decoration: none;
}
.crp_related a:hover {
text-decoration: none;
}
.crp_related img {
margin: auto;
}
.crp_related .crp_title {
position: absolute;
min-height:80px;
height: inherit;
bottom: 6px;
left: 0px;
padding: 3px;
/* width: 144px; = 150px – (3px * 2) */
color: #000;
font-size: 1em;
line-height:110%;
text-shadow: 1000 .1em .1em .2em;
background: rgb(255, 255, 255);
background: rgba(255, 255, 255, 1);
}
.crp_related li:hover .crp_title {
color: #fff;
font-size: 1.1em;
font-weight:bold;
height:100%;
top:0;
bottom:0;
background: rgb(0.2, 0.2, 0.2);
background: rgba(0, 0, 0, 0.8);
}

.crp_related .crp_thumb, .crp_related li, .crp_related .crp_title {
vertical-align: bottom;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.4);
box-shadow: 0 1px 2px rgba(0,0,0,.4);
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
}

.crp_clear {
clear: both;
}

Para quem entende um pouquinho sobre CSS, o código acima é bastante compreensível. “.crp_related li”, por exemplo, é a caixa que abriga cada related post. Ela tem um Padding, que pode ser alterado para dar uma distância entre o miolo (foto e título), e as bordas. Já “.crp_title ” é a caixinha com o título de cada matéria, que aparece novamente sob “hover”, com as propriedades dela quando o mouse passa por cima.

As cores estão definidas em RGBA, como em “rgba(0,0,0,.4)”, que para quem não conhece, significa o seguinte: os três primeiros números são as quantidades de cada cor (vermelho, verde e azul), que vão de 0 a 255. O último numeral vai de 0 a 1, e indica a opacidade do objeto (0 o torna invisível, 0.5 o torna meio transparente e 1 o torna sólido).

Note que “.crp_related img” não tem nada de parâmetro algum. É que as imagens já foram trabalhadas pelo código que será gerado pelo plugin seguindo as instruções que demos lá atrás.


PASSO 4 – THUMBNAILS DINÂMICOS

Um inconveniente de usar este Plugin é que, quando modificamos o código CSS, o site já gerou imagens de thumbnail para os posts relacionados. Assim, nunca visualizaremos os resultados de nosso lindo código.

Seria tão bom se o site gerasse esses thumbnails dinamicamente, né? Pois é. Para isso, temos que baixar o Plugin “OTF Regenerate Thumbnails“.

E… pronto!


ATUALIZAÇÃO: os critérios de relacionamento entre posts ficam bem melhores usando CRP Taxonomy Tools, que eu explico em outro artigo!