Cẩm nang kiến thức
Thêm bài viết liên quan theme Flatsome WordPress
Th2
Thêm bài viết liên quan theme Flatsome WordPress – Hỗ trợ Flatsome tạo bài viết liên quan cực đẹp.
Mặc định Flatsome không có bài viết liên quan, chỉ có nút trở lại và xem tiếp cực xấu, quá đơn điệu. Vì vậy mình hướng dẫn thêm code bài viết liên quan cho wordpress. Bắt đầu luôn nhé!
Cách 1: Cài Plugin
- Bước 1: Chuẩn bị bài viết liên quan
Trước tiên, bạn cần chuẩn bị các bài viết liên quan mà bạn muốn chèn vào theme Flatsome. Hãy chắc chắn rằng bạn đã tạo và xuất bài viết này trong hệ thống quản lý nội dung (CMS) của bạn, ví dụ như WordPress.
- Bước 2: Cài đặt và kích hoạt plugin liên quan
Theme Flatsome hỗ trợ nhiều plugin để mở rộng chức năng của nó. Trong trường hợp này, chúng ta cần cài đặt và kích hoạt plugin “Flatsome Blog Posts” để có thể chèn bài viết liên quan.
- Đăng nhập vào trang quản trị WordPress của bạn.
- Di chuột qua mục “Plugins” trong thanh bên trái và nhấp vào “Add New” (Thêm mới).
- Trong trường tìm kiếm, nhập “Flatsome Blog Posts”.
- Khi plugin hiển thị, nhấp vào “Install Now” (Cài đặt ngay) và sau đó nhấp vào “Activate” (Kích hoạt).
- Bước 3: Cấu hình plugin “Flatsome Blog Posts”
- Sau khi kích hoạt plugin, bạn cần cấu hình các tùy chọn để chèn bài viết liên quan vào theme Flatsome.
Cách 2: Chèn code này vào file function.php của flatsome-child
//Bài viết liên quan
function chowordpress_baivietlienquan($content) {
if (is_single()) {
$content .= "<div class='clearfix'></div>";
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, // Number of related posts that will be shown.
'caller_get_posts'=>1
);
$my_query = new wp_query( $args );
if( $my_query->have_posts() ) {
$content .= '<div id="related_posts"><h3>Bài viết liên quan</h3><ul>';
while( $my_query->have_posts() ) {
$my_query->the_post();
$content .= '
<li class="col large-4">
<div class="relatedthumb">
<a href="' . get_the_permalink() .'">'. get_the_post_thumbnail().'</a>
</div>
<div class="relatedcontent">
<h3>
<a href="'. get_the_permalink().'">'. get_the_title().'</a>
</h3>
</div>
</li>';
} //End while
$content .= "</ul></div>
<div class='clearfix'></div>";
} //End if
} //End if
}
return $content;
}
add_filter ('the_content', 'chowordpress_baivietlienquan', 0);
Chèn đoạn mã css này vào file style.css của flatsome-child
#related_posts .col {
float: left;
margin-left: 0;
list-style: none;
}
.relatedcontent h3 {
font-size: 16px;
margin-top: 7px;
}
.relatedthumb img {
height: 100%;
max-height: 165px;
}
#related_posts {
border-top: 4px double #e8e8e8;
padding-top: 10px;
}
#related_posts li:nth-child(1) {
padding-left: 0 !important;
}
#related_posts li:nth-child(2) {
padding-left: 0 !important;
padding-right: 0 !important;
}
#related_posts li:nth-child(3) {
padding-right: 0 !important;
}
.relatedthumb img {
min-height: 125px;
}
Nếu có vấn đề gì về việc sử dụng các thông tin trên bạn có thể comment để chúng tôi hỗ trợ.
Chúc các bạn thành công!
========================================================================================================
Chúng tôi cung cấp dịch vụ thiết kế website trọn gói chỉ 1.299.000 VNĐ bao gồm hosting, tên miền, SSL và 01 mã nguồn website tự chọn.
Dịch vụ tên miền, ssl, Email và Hosting các bạn tham khảo: HOSTCO
Thông tin dịch vụ thiết kế website trọn gói: WEB TRỌN GÓI
Mọi thông tin xin liên hệ HOTLINE/ZALO: 0965.63.1986
Email: info@taithemewp.com
