• Bem vindo à nossa comunidade - Quer se juntar ao resto dos nossos membros? Registre-se*Registros aprovados pela adminitração

Como adicionar conteúdos relacionados nos posts do seu site wordpress

XSystemX

Usuário XPZ
Olá galera da XPZONE. Encontrei, no site escolawp, um tutoria interessante de como criar os Related Posts (Post relacionados), uma ferramenta muito interessante para seu site em wordpress.

Com certeza nós nos deparamos com esse recurso em diversos sites, mas talvez não tenha entendida a importância desse recurso para um site. O recurso de relacionar o conteúdo do seu site é uma aplicação prática de uma técnica fundamental usada para melhorar o engajamento de sites. Para sites WordPress o conteúdo relacionado ou também conhecido como Posts relacionados exibem, em um determinado local de uma página, uma lista de outras páginas ou artigos que tenha conteúdo relacionado com o conteúdo da páginas que está sendo visitada.

Se você fizer um bom trabalho de organização das categorias e tags do seu WordPress e fizer uso do recurso de posts relacionados, você estará dando a possibilidades de seus vistantes acessarem outras páginas do seu site que tenham alguma relevância com o conteúdo que elas já visitaram. Em resumo isso significa que seus visitantes ficarão mais em seu site, o que reduz a taxa de rejeição e pode melhorar o posicionamento do seu site.

artigos.jpg


COMO ADICIONAR O POST RELACIONADOS NO WORDPRESS SEM PLUGINSUma das grandes vantagens de usar WordPress são os plugins, mas sabemos também que o uso de muitos plug-ins em uma única instalação do WordPress, faz com que você corra  o risco de tornar seu site mais pesado e lento, prejudicando a qualidade da experiência do seu site. Então vou trazer uma solução que encontrei e implementei em alguns sites, uma função que realiza essa tarefa de forma a não deixar nada a deseja para nenhum plugin.

Para poder adicionar esta funcionalidade no seu site WordPress, você precisará acessar a pasta de seu templates (Cujo caminho padrão é: www.seusite.com/wp-contant/themes/seutemplate). Selecione o arquivo functions.php, crie um backup dele e vamos começar a inserir o código abaixo:

1

2

function my_related_posts() {

}

Esta será a função que irá exibir o conteúdo relacionado a cada um de seus posts quando alguém estiver na visitando-o

Nesta função vamos passar algumas informações de como queremos que estes posts relacionados sejam exibidos, em primeiro lugar, a quantidade de posts que desejamos exibir e em segundo lugar, quais são as condições para que os artigos sejam exibidos:

1

2

3

4

$args = array(

        'posts_per_page' => 5,

        'post_in'  => get_the_tag_list()

);

O próximo passo é criar uma variável, chamada $the_query  que será usada pelo WordPress para ele exibir as mensagens.

1

$the_query = new WP_Query( $args );

Em seguida o que precisamos fazer é exibir as mensagens. Para fazer isso, usamos um while com o código abaixo:

1

2

3

4

5

6

7

echo '<ul>';

while ( $the_query->have_posts() ) : $the_query->the_post();

        ?>

        <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a> </li>

        <?php

endwhile;

echo '</ul>';

Insira na ultima linha da função o código abaixo para preparar uma nova consulta.

1

wp_reset_postdata();

O código acima irá exibir uma lista simples. Mas preciso de um pouco de estilo então, para isso você vai inserir no arquivo algumas modificações do arquivo functions.php que editamos no seu template os códigos abaixo:

1

echo '<h2>Related Posts</h2>';

1

<span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; font-size: 13px; line-height: 19px;">Para inserirmos uma miniatura da imagem destaque do artigo usaremos o código abaixo:</span>

1

2

3

4

5

6

7

8

9

10

while ( $the_query->have_posts() ) : $the_query->the_post();

?>

<li>

<?php if ( has_post_thumbnail() ) { ?>

<div><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a></div>

<?php } ?>

<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>

</li>

<?php

endwhile;

1

<span style="font-size: 13px; line-height: 19px; font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;">Com esse estilo teremos um resultado semelhante ao layout abaixo. Fique a vontade para editar o CSS e fazer o layout de acordo com seu site.</span>

post-relacionado.jpg


Recapitulando. Teremos então o código final da função que irá inserir os posts relacionados:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

function ll_related_posts() {

$args = array(

'posts_per_page' => 5,

'post_in'  => get_the_tag_list(),

);

$the_query = new WP_Query( $args );

echo '<section id="related_posts">';

echo '<h2>Related Posts</h2>';

while ( $the_query->have_posts() ) : $the_query->the_post();

?>

<section class="item">

<?php if ( has_post_thumbnail() ) { ?>

<section class="related_thumb"><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail( 'related-post' ); ?></a></section>

<?php } else { ?>

<section class="related_thumb"><a href="<?php the_permalink(); ?>"><img src="<?php bloginfo('template_directory')?>/lib/images/thumb.png" /></a></section>

<?php } ?>

<?php the_title(); ?>

</section>

<?php

endwhile;

echo '<div class="clear"></div></section>';

wp_reset_postdata();

}

Use o código CCS a seguir para ter o resultado esperado, mas sinta-se livre para editá-lo de acordo com a identidade visual do seu site:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

#related_posts {

    margin-top: -10px;

    margin-bottom: 10px;

    padding-bottom: 20px;

    border-bottom: 20px solid #E2E2E2;

}

 

#related_posts .item {

    width: 132px;

    max-height: 200px;

    overflow: hidden;

    float: left;

    margin: 6px;

    font-weight:bold;

    text-align:center;

}

 

#related_posts .item img {

    -webkit-box-shadow: 0 0 4px #999;

    box-shadow: 0 0 4px #999;

    border: white solid 1px;

    padding: 4px;

    margin: 0 auto;

    background: #f2f2f2;

}

Créditos / Fonte: 
Por favor, Entrar ou Registrar para ver o conteúdo das URLs!
 do site escolawp.
 
Topo Bottom