Kiến Thức Web

Code bài viết liên quan theo tag hoặc chuyên mục theme Flatsome

Hiện tại, phần bài viết liên quan của theme Flatsome khá xấu xí, bài viết này mình xin chia sẻ các bạn cách viết đoạn code đơn giản để hiển thị bài viết liên quan random theo thẻ tag hoặc chuyên mục trong theme flatsome nha!

Code bài viết liên quan theo tag hoặc chuyên mục theme Flatsome
Code bài viết liên quan theo tag hoặc chuyên mục theme Flatsome

1. Copy dán đoạn code bên dưới vào functions.php


Giao diện >> sửa giao diện >> functions.php

#1. Code bài viết liên quan theo thẻ tag


Đoạn code ở dưới là code bài viết liên quan theo thẻ tag nha các bạn!

Thả vào như hình:

Code bài viết liên quan theme flasome 1
Code bài viết liên quan theme flasome 1

Xem đoạn code

/*
* Code bài viết liên quan
*/
function bvlq() {
global $post;
$tags = wp_get_post_tags($post->ID);
if ($tags){
$output = ‘<div class=”relatedcat”>’;
$first_tag = $tags[0]->term_id;

$args=array(
‘tag__in’ => array($first_tag),
‘post__not_in’ => array($post->ID),
‘posts_per_page’=>6Sửa lại số lượng bài viết hiển thị theo ý anh em
‘caller_get_posts’=>1
);
$my_query = new wp_query($args);

if( $my_query->have_posts() ):
$output .= ‘<ul class=”row related-post”>’;
while ($my_query->have_posts()):$my_query->the_post();
$output .=
‘<li class=”col large-4″>
<a href=”‘.get_the_permalink().'” title=”‘.get_the_title().'”>
<div class=”feature”>
<div class=”image” style=”background-image:url(‘. get_the_post_thumbnail_url() .’);”></div>
</div>
</a>
<div class=”related-title”><a href=”‘.get_the_permalink().'” title=”‘.get_the_title().'”>’.get_the_title().'</a></div>
</li>’;
endwhile;
$output .= ‘</ul>’;
endif; wp_reset_query();
$output .= ‘</div>’;
return $output;
}
else return;
}
add_shortcode(‘bvlq’, ‘bvlq’);

Chú ý: bvlq là đoạn mã để tí nữa chúng ta gọi nó ra để hiển thị bên dưới bài viết nhé!

Đoạn code tải ở đây: Tải đoạn code bài viết liên quan theo thẻ tag

#2. Code bài viết liên quan theo thẻ tag


Đoạn code ở dưới là code bài viết liên quan theo thẻ tag nha các bạn!

Thả vào như hình:

Code bài viết liên quan theme flasome 1
Code bài viết liên quan theme flasome 1

Xem đoạn code

function bvlq_danh_muc() {
$output = ”;
if (is_single()) {
global $post;
$categories = get_the_category($post->ID);
if ($categories) {
$category_ids = array();
foreach($categories as $individual_category) $category_ids[] = $individual_category->term_id;
$args=array(
‘category__in’ => $category_ids,
‘post__not_in’ => array($post->ID),
‘posts_per_page’=>3, Sửa lại số lượng bài viết hiển thị theo ý anh em
‘caller_get_posts’=>1
);

$my_query = new wp_query( $args );
if( $my_query->have_posts() ):
$output .= ‘<div class=”relatedcat”>’;
$output .= ‘<p>Bài viết liên quan:</p><div class=”row related-post”>’;
while ($my_query->have_posts()):$my_query->the_post();
$output .=
‘<div class=”col large-4″>
<a href=”‘.get_the_permalink().'” title=”‘.get_the_title().'”>
<div class=”feature”>
<div class=”image” style=”background-image:url(‘. get_the_post_thumbnail_url() .’);”></div>
</div>
</a>
<div class=”related-title”><a href=”‘.get_the_permalink().'” title=”‘.get_the_title().'”>’.get_the_title().'</a></div>
</div>’;
endwhile;
$output .= ‘</div>’;
$output .= ‘</div>’;
endif; //End if.
wp_reset_query();
}
return $output;
}
}
add_shortcode(‘bvlq_danh_muc’,’bvlq_danh_muc’);

Chú ý: bvlq là đoạn mã để tí nữa chúng ta gọi nó ra để hiển thị bên dưới bài viết nhé!

Đoạn code tải ở đây: Tải đoạn code bài viết liên quan theo thẻ chuyên mục

2. Copy dán đoạn code vào css


Css các bạn có nhiều chỗ để dán, chú ý đoạn css bên dưới các bạn copy pass thôi nhé, còn nếu chỉnh sửa lại gặp lỗi, các bạn tự fix nhé!

Cách 1: tùy biến >> css bổ sung

Cách 2: giao diện >> sửa giao diện >> style.css

Cách 3: Flatsome >> Advanced >> Cumtom css ( mình hay dùng cách này)

Thả vào như hình:

Code bài viết liên quan theme flasome 2
Code bài viết liên quan theme flasome 2

Xem đoạn code css

.feature {
position: relative;
overflow: hidden;
}
.feature::before {
content: “”;
display: block;
padding-top: 56.25%;
}
.feature .image{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
background-size: cover;
background-position: center;
}
ul.row.related-post li {
list-style: none;
}
.related-title {
line-height: 1.3 !important;
margin-top: 10px !important;

}

Đoạn code link tải: Tải code css

3. Nhúng thêm đoạn hiển thị vào dưới nội dung bài viết


Code bài viết liên quan theme flasome 3
Code bài viết liên quan theme flasome 3

Các bạn chỉ cần thả [bvlq] ở mục 1 ra đây là nó hiển thị.

Tùy biến >> Blog >> Blog Single Post >> kéo xuống HTML after blog posts điền [bvlq] vào

Trong hình mình có thêm cái title h2 bài viết liên quan vào cho đẹp. Demo xem tại đây nha: Sửa biến tần Schneider

Tải theme Flatsome free bản quyền từ Anh Dũng SEO tại: Theme Flatsome

Tags

Anh Dũng Seo

Tôi là Mai Anh Dũng hay còn gọi là Anh Dũng SEO, tôi viết blog để chia sẻ đến các bạn kiến thức MMO, Marketting, thủ thuật, công nghệ và các mẹo nhỏ.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Back to top button