Thêm bài viết liên quan cho WordPress kèm thumbnail

10/15/2017

Thêm bài viết liên quan cho WordPress kèm thumbnail

Việc thêm bài viết liên quan vào sau mỗi bài viết của wordpress là một việc làm rất quan trọng. Nó sẽ giúp cho người đọc dễ dàng tìm được các bài viết liên quan đến chủ đề mà họ quan tâm, đồng thời nó còn giúp chúng ta tăng cường các backlink nội bộ, cải thiện bounce rate và tăng pageview rất tốt. Mặc định một số theme đã hỗ trợ bạn việc này, nhưng nếu theme bạn đang sử dụng mà nằm ở trong số còn lại thì sao? Hãy xem hướng dẫn của Chia sẻ WP ngay nhé.

Có hai cách cơ bản giúp bạn thêm bài viết liên quan đó. Một là sử dụng plugin, hai là chỉnh sửa code. Ở bài viết này mình tập trung hướng dẫn các bạn thêm code để hiển thị, còn plugin mình chỉ xin nêu tên phía dưới thôi, bạn tự tìm hiểu tiếp nhé.

Hiển thị bài viết liên quan theo category

Đầu tiên, bạn phải đăng kí kích thước ảnh để hiển thị. Bạn kiểm tra xem theme bạn đã đăng kí kích thước ảnh 150×100 chưa? Nếu chưa thì thêm ngay đoạn code sau vào file functions.php đang sử dụng nhé.

add_theme_support( 'post-thumbnails' );set_post_thumbnail_size( 150, 100, true );

1

2

add_theme_support( 'post-thumbnails' );

set_post_thumbnail_size( 150, 100, true );

Xong bước đầu tiên, tiếp theo các bạn mở file single.php, bổ sung đoạn code sau vào:

//* Add related pots category<div class="relatedposts"><h3>Related posts</h3><?php$orig_post = $post;global $post;$tags = wp_get_post_tags($post->ID);if ($tags) {$tag_ids = array();foreach($tags as $individual_tag) $tag_ids[] = $individual_tag->term_id;$args=array('tag__in' => $tag_ids,'post__not_in' => array($post->ID),'posts_per_page'=>4, // hiển thị số bài viết.'caller_get_posts'=>1);$my_query = new wp_query( $args );while( $my_query->have_posts() ) {$my_query->the_post();?><div class="relatedthumb"><a rel="external" href="<? the_permalink()?>"><?php the_post_thumbnail(array(150,100)); ?><br /><?php the_title(); ?></a></div><? }}$post = $orig_post;wp_reset_query();?></div>

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

26

27

28

29

30

31

32

33

//* Add related pots category

<div class="relatedposts">

<h3>Related posts</h3>

<?php

$orig_post = $post;

global $post;

$tags = wp_get_post_tags($post->ID);

if ($tags) {

$tag_ids = array();

foreach($tags as $individual_tag) $tag_ids[] = $individual_tag->term_id;

$args=array(

'tag__in' => $tag_ids,

'post__not_in' => array($post->ID),

'posts_per_page'=>4, // hiển thị số bài viết.

'caller_get_posts'=>1

);

$my_query = new wp_query( $args );

while( $my_query->have_posts() ) {

$my_query->the_post();

?>

 

<div class="relatedthumb">

<a rel="external" href="<? the_permalink()?>"><?php the_post_thumbnail(array(150,100)); ?><br />

<?php the_title(); ?>

</a>

</div>

 

<? }

}

$post = $orig_post;

wp_reset_query();

?>

</div>

Mình để mặc định là hiển thị 4 bài viết liên quan, bạn có thể chỉnh sửa lại cho phù hợp với nhu cầu và sở thích của mình. Để làm việc này, tại dòng code 14, bạn thay số bài viết hiển thị nhé.

Hiển thị bài viết liên quan theo tag

Cũng tương tự như đối với category, các bạn thêm đoạn code sau vào single.php.

<div id="relatedposttags"> <?php $tags = wp_get_post_tags($post->ID); if ($tags) { $tag_ids = array(); foreach($tags as $individual_tag) $tag_ids[] = $individual_tag->term_id; $args=array( 'tag__in' => $tag_ids, 'post__not_in' => array($post->ID), 'showposts'=> 4, // hiển thị số bài viết. 'caller_get_posts'=> 1 ); $my_query = new wp_query($args); if( $my_query->have_posts() ) { echo '<h2>Xem thêm</h2><ul>'; while ($my_query->have_posts()) { $my_query->the_post(); ?> <li><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></li> <?php } echo '</ul>'; } } ?></div>

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

26

27

28

29

<div id="relatedposttags">    

    <?php

        $tags = wp_get_post_tags($post->ID);

        if ($tags)

        {

            $tag_ids = array();

            foreach($tags as $individual_tag) $tag_ids[] = $individual_tag->term_id;

            $args=array(

            'tag__in' => $tag_ids,

            'post__not_in' => array($post->ID),

            'showposts'=> 4, // hiển thị số bài viết.

            'caller_get_posts'=> 1

            );

            $my_query = new wp_query($args);

            if( $my_query->have_posts() )

            {

                echo '<h2>Xem thêm</h2><ul>';

                while ($my_query->have_posts())

                {

                    $my_query->the_post();

                    ?>

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

                    <?php

                }

                echo '</ul>';

            }

        }

    ?>

</div>

Về cơ bản thì bài viết liên quan đã hiển thị trên site của bạn nhưng nó chưa được đẹp, bạn cần thêm đoạn stylesheet cho nó nữa. Có thể tham khảo đoạn code của mình hoặc tự code nhé.

.relatedposts {width: 640px; margin: 0 0 20px 0; float: left; font-size: 12px;}.relatedposts h3 {font-size: 20px; margin: 0 0 5px 0; }.relatedthumb {margin: 0 1px 0 1px; float: left; }.relatedthumb img {margin: 0 0 3px 0; padding: 0;}.relatedthumb a {color :#333; text-decoration: none; display:block; padding: 4px; width: 150px;}.relatedthumb a:hover {background-color: #ddd; color: #000;}

1

2

3

4

5

6

.relatedposts {width: 640px; margin: 0 0 20px 0; float: left; font-size: 12px;}

.relatedposts h3 {font-size: 20px; margin: 0 0 5px 0; }

.relatedthumb {margin: 0 1px 0 1px; float: left; }

.relatedthumb img {margin: 0 0 3px 0; padding: 0;}

.relatedthumb a {color :#333; text-decoration: none; display:block; padding: 4px; width: 150px;}

.relatedthumb a:hover {background-color: #ddd; color: #000;}

Và đây là một số plugin sẽ hỗ trợ bạn thêm bài viết liên quan cho WordPress.

WordPress Related Posts: Plugin hỗ trợ thêm các bài viết có liên quan kèm thumbnails, bao gồm bộ nhớ cache.Contextual Related Posts: Hiển thị các bài viết có liên quan trên blog WordPress và feed. Nó hỗ trợ thumbnails, shortcodes, widgets và tùy chọn kiểu post.Jetpack by WordPress.com: Một bộ công cụ quá nổi tiếng do chính Automattic phát triển, ngoài chức năng hỗ trợ thêm bài viết liên quan ra còn rất nhiều các chức năng khác đáng để sử dụng đó.

Giới thiệu 3 plugin vậy thôi cũng để lựa chọn rồi phải không? Nếu có khó khăn gì thì hãy cho mình biết ở phần bình luận nhé. Chúc các bạn thành công.

Nguồn: Việt Hùng admin https://chiasewp.com/

Chia Sẻ :

Tweet

Bài viết liên quan

Việc thêm bài viết liên quan vào sau mỗi bài viết của wordpress là một việc làm rất quan trọng. Nó sẽ giúp cho người đọc dễ dàng tìm được các bài viết liên quan đến chủ đề mà họ quan tâm, đồng thời nó còn giúp chúng ta tăng cường các backlink nội bộ, cải thiện bounce rate và tăng pageview rất tốt. Mặc định một số theme đã hỗ trợ bạn việc này, nhưng nếu theme bạn đang sử dụng mà nằm ở trong số còn lại thì sao? Hãy xem hướng dẫn của Chia sẻ WP ngay nhé.

Có hai cách cơ bản giúp bạn thêm bài viết liên quan đó. Một là sử dụng plugin, hai là chỉnh sửa code. Ở bài viết này mình tập trung hướng dẫn các bạn thêm code để hiển thị, còn plugin mình chỉ xin nêu tên phía dưới thôi, bạn tự tìm hiểu tiếp nhé.

Hiển thị bài viết liên quan theo category

Đầu tiên, bạn phải đăng kí kích thước ảnh để hiển thị. Bạn kiểm tra xem theme bạn đã đăng kí kích thước ảnh 150×100 chưa? Nếu chưa thì thêm ngay đoạn code sau vào file functions.php đang sử dụng nhé.

add_theme_support( 'post-thumbnails' );set_post_thumbnail_size( 150, 100, true );

1

2

add_theme_support( 'post-thumbnails' );

set_post_thumbnail_size( 150, 100, true );

Xong bước đầu tiên, tiếp theo các bạn mở file single.php, bổ sung đoạn code sau vào:

//* Add related pots category<div class="relatedposts"><h3>Related posts</h3><?php$orig_post = $post;global $post;$tags = wp_get_post_tags($post->ID);if ($tags) {$tag_ids = array();foreach($tags as $individual_tag) $tag_ids[] = $individual_tag->term_id;$args=array('tag__in' => $tag_ids,'post__not_in' => array($post->ID),'posts_per_page'=>4, // hiển thị số bài viết.'caller_get_posts'=>1);$my_query = new wp_query( $args );while( $my_query->have_posts() ) {$my_query->the_post();?><div class="relatedthumb"><a rel="external" href="<? the_permalink()?>"><?php the_post_thumbnail(array(150,100)); ?><br /><?php the_title(); ?></a></div><? }}$post = $orig_post;wp_reset_query();?></div>

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

26

27

28

29

30

31

32

33

//* Add related pots category

<div class="relatedposts">

<h3>Related posts</h3>

<?php

$orig_post = $post;

global $post;

$tags = wp_get_post_tags($post->ID);

if ($tags) {

$tag_ids = array();

foreach($tags as $individual_tag) $tag_ids[] = $individual_tag->term_id;

$args=array(

'tag__in' => $tag_ids,

'post__not_in' => array($post->ID),

'posts_per_page'=>4, // hiển thị số bài viết.

'caller_get_posts'=>1

);

$my_query = new wp_query( $args );

while( $my_query->have_posts() ) {

$my_query->the_post();

?>

 

<div class="relatedthumb">

<a rel="external" href="<? the_permalink()?>"><?php the_post_thumbnail(array(150,100)); ?><br />

<?php the_title(); ?>

</a>

</div>

 

<? }

}

$post = $orig_post;

wp_reset_query();

?>

</div>

Mình để mặc định là hiển thị 4 bài viết liên quan, bạn có thể chỉnh sửa lại cho phù hợp với nhu cầu và sở thích của mình. Để làm việc này, tại dòng code 14, bạn thay số bài viết hiển thị nhé.

Hiển thị bài viết liên quan theo tag

Cũng tương tự như đối với category, các bạn thêm đoạn code sau vào single.php.

<div id="relatedposttags"> <?php $tags = wp_get_post_tags($post->ID); if ($tags) { $tag_ids = array(); foreach($tags as $individual_tag) $tag_ids[] = $individual_tag->term_id; $args=array( 'tag__in' => $tag_ids, 'post__not_in' => array($post->ID), 'showposts'=> 4, // hiển thị số bài viết. 'caller_get_posts'=> 1 ); $my_query = new wp_query($args); if( $my_query->have_posts() ) { echo '<h2>Xem thêm</h2><ul>'; while ($my_query->have_posts()) { $my_query->the_post(); ?> <li><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></li> <?php } echo '</ul>'; } } ?></div>

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

26

27

28

29

<div id="relatedposttags">    

    <?php

        $tags = wp_get_post_tags($post->ID);

        if ($tags)

        {

            $tag_ids = array();

            foreach($tags as $individual_tag) $tag_ids[] = $individual_tag->term_id;

            $args=array(

            'tag__in' => $tag_ids,

            'post__not_in' => array($post->ID),

            'showposts'=> 4, // hiển thị số bài viết.

            'caller_get_posts'=> 1

            );

            $my_query = new wp_query($args);

            if( $my_query->have_posts() )

            {

                echo '<h2>Xem thêm</h2><ul>';

                while ($my_query->have_posts())

                {

                    $my_query->the_post();

                    ?>

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

                    <?php

                }

                echo '</ul>';

            }

        }

    ?>

</div>

Về cơ bản thì bài viết liên quan đã hiển thị trên site của bạn nhưng nó chưa được đẹp, bạn cần thêm đoạn stylesheet cho nó nữa. Có thể tham khảo đoạn code của mình hoặc tự code nhé.

.relatedposts {width: 640px; margin: 0 0 20px 0; float: left; font-size: 12px;}.relatedposts h3 {font-size: 20px; margin: 0 0 5px 0; }.relatedthumb {margin: 0 1px 0 1px; float: left; }.relatedthumb img {margin: 0 0 3px 0; padding: 0;}.relatedthumb a {color :#333; text-decoration: none; display:block; padding: 4px; width: 150px;}.relatedthumb a:hover {background-color: #ddd; color: #000;}

1

2

3

4

5

6

.relatedposts {width: 640px; margin: 0 0 20px 0; float: left; font-size: 12px;}

.relatedposts h3 {font-size: 20px; margin: 0 0 5px 0; }

.relatedthumb {margin: 0 1px 0 1px; float: left; }

.relatedthumb img {margin: 0 0 3px 0; padding: 0;}

.relatedthumb a {color :#333; text-decoration: none; display:block; padding: 4px; width: 150px;}

.relatedthumb a:hover {background-color: #ddd; color: #000;}

Và đây là một số plugin sẽ hỗ trợ bạn thêm bài viết liên quan cho WordPress.

WordPress Related Posts: Plugin hỗ trợ thêm các bài viết có liên quan kèm thumbnails, bao gồm bộ nhớ cache.Contextual Related Posts: Hiển thị các bài viết có liên quan trên blog WordPress và feed. Nó hỗ trợ thumbnails, shortcodes, widgets và tùy chọn kiểu post.Jetpack by WordPress.com: Một bộ công cụ quá nổi tiếng do chính Automattic phát triển, ngoài chức năng hỗ trợ thêm bài viết liên quan ra còn rất nhiều các chức năng khác đáng để sử dụng đó.

Giới thiệu 3 plugin vậy thôi cũng để lựa chọn rồi phải không? Nếu có khó khăn gì thì hãy cho mình biết ở phần bình luận nhé. Chúc các bạn thành công.

Nguồn: Việt Hùng admin https://chiasewp.com/

Thẻ : Wordpress