Code bài viết cùng chuyên mục kèm hình ảnh (thumbnai)

Việc sử dụng nhiều plugin trên website wordpress của bạn được các chuyên gia khuyến cáo là không nên, vì nó có nguy cơ làm chậm trang web của bạn, chưa kể đến việc các plugin có thể xung đột với nhau.

Hôm nay mình giới thiệu cho các bạn đoạn Code bài viết cùng chuyên mục kèm hình ảnh (thumbnai) cho WordPress vừa nhẹ và cách làm cũng đơn giản , giúp bạn không cần cài thêm plugin gây nặng web

Code bài viết cùng chuyên mục kèm hình ảnh (thumbnai) cho WordPress

Tính năng bài viết liên quan này có thể hiển thị ở mọi vị trí mà bạn muốn miễn nó nằm trong loop của wordpress, nhưng hôm nay mình sẽ hướng dẫn chi tiết cách hiển thị bài viết liên quan chỉ ở cuối của mỗi bài viết (single.php)

Hiển thị bài viết liên quan kèm ảnh thumbnai sử dụng code.

Tính năng bài viết liên quan này có thể hiển thị ở mọi vị trí mà bạn muốn miễn nó nằm trong loop của wordpress, nhưng tôi sẽ hướng dẫn chi tiết cách hiển thị bài viết liên quan chỉ ở trong trang bài viết (single.php)

Thumbnai trong bài viết

Thật ra thì chức năng này đã có sẵn ở các phiên bản wordpress gần đây. Nhưng không phải theme nào cũng đã kích hoạt nó, để kích hoạt đó, bạn cần thêm đoạn code bên dưới vào trong file functions.php của theme bạn đang sử dụng.

add_theme_support( ‘post-thumbnails’ );
set_post_thumbnail_size(100,50,true);

Chú thích

Dòng 1: Để bật tính năng thumbnail của bài viết.
Dòng 2: Để set width và hight của ảnh thumbnail.

Lưu ý: Để hiển thị được ảnh thumbnail thì bạn cần sử dụng chức năng Use as featured image trong khi viết bài. Nếu không thì bạn có thể sử dụng plugin Auto Post Thumbnail để nó tự động làm việc này (Plugin này sẽ tự động lấy ảnh đầu tiên trong bài viết làm featured images)

Các bạn có thể tham khảo bài liên quan bằng Plugin hoặc bằng code mà mình đã giới thiệu :

Hiển thị bài viết liên quan (Related Post) kèm thumbnail

Sử dụng đoạn code bên dưới, chèn vào file single.php . Bạn muốn bài viết liên quan hiển thị ở đâu thì chèn ở đó.

<!--- bài liên quan -->
<h3>BÀI CÙNG CHUYÊN MỤC</h3>
<div class="bailienquan">
<?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, // Số bài viết liên quan muốn hiển thị.
'caller_get_posts'=>1
);

$my_query = new wp_query( $args );

while( $my_query->have_posts() ) {
$my_query->the_post();
?>
<div class="hinh-text">
<div class="hinh">
<a rel="external" href="<? the_permalink()?>"><?php the_post_thumbnail(array(150,100)); ?>
</a>
</div>
<div class="text">
<a rel="external" href="<? the_permalink()?>">
<?php the_title(); ?>
</a>
</div>
</div>
<? }
}
$post = $orig_post;
wp_reset_query();
?>
</div>

<h3>BÀI CÙNG CHUYÊN MỤC</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, // Số bài viết liên quan muốn hiển thị.

'caller_get_posts'=>1

);

$my_query = new wp_query( $args );

while( $my_query->have_posts() ) {

$my_query->the_post();

</a>

</div>

<?php the_title(); ?>

</a>

</div>

<? }

}

$post = $orig_post;

wp_reset_query();

</div>

Thêm Css

/*Bài cùng chuyên mục */
.hinh-text {
display: block;
}
.bailienquan {
display: flex;
}
.hinh img {
width: 200px;
height: 150px !important;
}
.text a {
color: black;
font-weight: 600;
}
.text a:hover {
color: red;
}

/*Bài cùng chuyên mục */

.hinh-text {

display: block;

}

.bailienquan {

display: flex;

}

.hinh img {

width: 200px;

height: 150px !important;

}

.text a {

color: black;

font-weight: 600;

}

.text a:hover {

color: red;

}

Kết quả

Sau khi thực hiện những bước trên thì bạn sẽ có kết quả giống như hình bên dưới đây

Code bài liên quan update ngày 27/09/2021

<!--- 9 bai viet lien quan-->
<div id="related-posts">
<?php
$categories = get_the_category(get_the_ID());
if ($categories){
echo '<div class="relatedcat">';
$category_ids = array();
foreach($categories as $individual_category) $category_ids[] = $individual_category->term_id;
$args=array(
'category__in' => $category_ids,
'post__not_in' => array(get_the_ID()),
'posts_per_page' => 9,
);
$my_query = new wp_query($args);
if( $my_query->have_posts() ):
echo '<div class="row row-small"><div class="col large-12" style="padding: 0 5px; margin-bottom:5px;">
<h2 class="highlight-event__title">BÀI MỚI CẬP NHẬT</h2>
</div>';
while ($my_query->have_posts()):$my_query->the_post();
?>
<div class="col large-4 medium-6 small-12"><a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('full'); ?><?php the_title(); ?></a></div>
<?php
endwhile;
echo '</div>';
endif; wp_reset_query();
echo '</div>';
}
?>
</div>

<?php

$categories = get_the_category(get_the_ID());

if ($categories){

echo '<div class="relatedcat">';

$category_ids = array();

foreach($categories as $individual_category) $category_ids[] = $individual_category->term_id;

$args=array(

'category__in' => $category_ids,

'post__not_in' => array(get_the_ID()),

'posts_per_page' => 9,

);

$my_query = new wp_query($args);

if( $my_query->have_posts() ):

echo '<div class="row row-small"><div class="col large-12" style="padding: 0 5px; margin-bottom:5px;">

</div>';

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

<div class="col large-4 medium-6 small-12"><a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('full'); ?><?php the_title(); ?></a></div>

<?php

endwhile;

echo '</div>';

endif; wp_reset_query();

echo '</div>';

}

</div>

bạn có thể đổi số ‘posts_per_page’ => 9, trong này thành số bài bạn muốn hiện thị

Nguồn bài đăng : https://thanhthai.org/code-bai-viet-lien-quan-kem-anh-thumbnai-cho-wordpress.html