Mình cũng như các bạn lúc mới làm website bằng flatsome thì đi tìm nhiều diễn đàn và nhiều video hướng dẫn nhưng thật sự khá ít chủ đề mà các bạn chia sẻ có hiệu quả, rồi mình cũng đã tìm ra được một số để áp dụng trong công việc và chia sẻ cùng anh em đỡ vất vả hơn. Đây là một hướng dẫn cơ bản về cách chèn bài viết liên quan cho theme flatsome.
Trong đây mình hướng dẫn 2 cách bạn chọn cách nào phù hợp với ý tưởng của bạn thì bạn áp dụng nha, cái nào cũng có cái hay cái chưa hay của nó, ok giờ bắt tay vào xử lý thôi, đầu tiên mình dùng cách plugin cho lẹ nào.
- 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.
– Trong trang quản trị WordPress, di chuột qua “Flatsome” trong thanh bên trái và chọn “Flatsome Blog Posts”.
– Trong tab “Settings” (Cài đặt), bạn có thể định cấu hình các tùy chọn như số bài viết liên quan hiển thị, kiểu bố cục, hiển thị hình ảnh, v.v. Cấu hình theo ý muốn của bạn.
– Chọn các điều kiện lọc bài viết liên quan như danh mục, thẻ, hoặc từ khóa.
– Điều chỉnh các tùy chọn khác nếu cần thiết và nhấp vào “Save Changes” (Lưu thay đổi).
Bước 4: Chèn bài viết liên quan vào theme Flatsome
Khi bạn đã cấu hình plugin, bạn có thể chèn bài viết liên quan vào theme Flatsome bằng cách sử dụng các khối giao diện (blocks) có sẵn hoặc mã ngắn (shortcode).
– Tìm nơi bạn muốn chèn bài viết liên quan trong theme Flatsome, ví dụ như trang chủ hoặc trang chi tiết sản phẩm.
– Nếu bạn sử dụng Flatsome Builder để xây dựng trang, hãy thêm một khối giao diện mới và tìm kiếm khối “Blog Posts” (hoặc tương tự) trong thư viện khối.
– Kéo và thả khối “Blog Posts” vào vị trí mong muốn trên trang.
– Nếu bạn không sử dụng Flatsome Builder, bạn có thể sử dụng mã ngắn [flatsome_blog_posts] để chèn danh sách bài viết liên quan vào trang hoặc bài đăng.
Bước 5: Lưu và kiểm tra kết quả
Sau khi đã chèn bài viết liên quan vào theme Flatsome, hãy nhớ lưu các thay đổi và kiểm tra kết quả trên trang web của bạn. Các bài viết liên quan sẽ được hiển thị theo cấu hình bạn đã đặt trong plugin.
Sau khi xử xong bằng plugin bạn thấy chưa ổn thì mình qua cách tay nha, khó hơn chút mà đẹp và tùy biến khá ổn…
Bài viết này sẽ xử lý sâu trong code php của theme, do đó các bạn lưu ý nên backup web trước khi thực hiện, tránh trường hợp làm hỏng file gốc có thể gây nguy hại cho website.
Một lưu ý nữa là khi sử dụng theme flatsome chúng ta nên copy những file được chỉnh sửa sang child theme để sau này update không bị mất. Cụ thể như sau:
Chuyển file từ core theme sang child theme để sửa. Mình sẽ sửa trong file content-single.php của theme. Do đó, mình sẽ thực hiện chuyển file từ Core theme sang Child theme để chỉnh sửa.
Bước 1: Các bạn vào quản trị hosting, tìm truy cập file manager. Sau đó các bạn vào thư mục wp-content/themes/flatsome/
Bước 2: Các bạn copy toàn bộ thư mục Template-part của theme Flatsome sang Child theme nha.
Sau khi anh em xử lý file từ thư mục flatsome qua theme con Child theme thì chúng ta làm như sau, trường hợp khi cài theme mà chúng ta không cái file con là theme child thì anh em sửa trong file thư mục chính của theme flatsome cũng ok, có điều sau này khi chung ta nâng cấp theme thì phải vào copy lại file có tên thư mục template-parts, mục đích sau nâng cấp thì chúng ta không mất file thư viện đang chỉnh này.
1. Hãy copy toàn bộ code ở dưới đây ⇓
<div class="entry-content single-page">
<?php the_content(); ?>
<?php
wp_link_pages( array(
'before' => '<div class="page-links">' . __( 'Pages:', 'flatsome' ),
'after' => '</div>',
) );
?>
<div class="xem-them">
<span class="tieu-de-xem-them">Xem thêm nhá:</span>
<ul>
<?php
$postquery = new WP_Query(array('posts_per_page' => 8, 'orderby' => 'rand'));
if ($postquery->have_posts()) {
while ($postquery->have_posts()) : $postquery->the_post();
$do_not_duplicate = $post->ID;
?>
<li>
<a href="<?php the_permalink();?>"><?php the_title();?></a>
</li>
<?php endwhile; } wp_reset_postdata(); ?> </ul>
</div>
<?php if ( get_theme_mod( 'blog_share', 1 ) ) {
// SHARE ICONS
echo '<div class="blog-share text-center">';
echo '<div class="is-divider medium"></div>';
echo do_shortcode( '[share]' );
echo '</div>';
} ?>
</div><!-- .entry-content2 -->
<?php if ( get_theme_mod( 'blog_single_footer_meta', 1 ) ) : ?>
<footer class="entry-meta text-<?php echo get_theme_mod( 'blog_posts_title_align', 'center' ); ?>">
<?php
/* translators: used between list items, there is a space after the comma */
$category_list = get_the_category_list( __( ' ', 'flatsome' ) );
/* translators: used between list items, there is a space after the comma */
$tag_list = get_the_tag_list( '', __( ' ', 'flatsome' ) );
// But this blog has loads of categories so we should probably display them here.
if ( '' != $tag_list ) {
$meta_text = __( '<div class="danh-muc"><span class="title">Danh mục:</span> %1$s</div><div class="the-tim-kiem"><span class="title">Từ khóa:</span> %2$s</div>', 'flatsome' );
} else {
$meta_text = __( '<div class="danh-muc"><span class="title">Danh mục:</span> %1$s</div>', 'flatsome' );
}
printf( $meta_text, $category_list, $tag_list, get_permalink(), the_title_attribute( 'echo=0' ) );
?>
</footer><!-- .entry-meta -->
<?php endif; ?>
<?php
/*
* Code hiển thị bài viết liên quan trong cùng 1 category
*/
$categories = get_the_category(get_the_ID());
if ($categories){
echo '<div class="bai-viet-lien-quan">';
$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' => 16, // So bai viet dc hien thi
);
$my_query = new wp_query($args);
if( $my_query->have_posts() ):
echo '<h3>Bài viết cùng chủ đề:</h3>
<ul class="list-bai-viet">';
while ($my_query->have_posts()):$my_query->the_post();
?>
<li>
<div class="box-image">
<a href="<?php the_permalink() ?>"><?php the_post_thumbnail('large'); ?></a>
</div>
<a href="<?php the_permalink() ?>"><h4 class="tieu-de-bai-viet"><?php the_title(); ?></h4>
</a>
</li>
<?php
endwhile;
echo '</ul>';
endif; wp_reset_query();
echo '</div>';
}
?>
<?php if ( get_theme_mod( 'blog_author_box', 1 ) ) : ?>
<div class="entry-author author-box">
<div class="flex-row align-top">
<div class="flex-col mr circle">
<div class="blog-author-image">
<?php
$user = get_the_author_meta( 'ID' );
echo get_avatar( $user, 90 );
?>
</div>
</div><!-- .flex-col -->
<div class="flex-col flex-grow">
<h5 class="author-name uppercase pt-half">
<?php echo esc_html( get_the_author_meta( 'display_name' ) ); ?>
</h5>
<p class="author-desc small"><?php echo esc_html( get_the_author_meta( 'user_description' ) ); ?></p>
</div><!-- .flex-col -->
</div>
</div>
<?php endif; ?>
<?php if ( get_theme_mod( 'blog_single_next_prev_nav', 1 ) ) :
flatsome_content_nav( 'nav-below' );
endif; ?>Anh em lưu ý dùm mình phần (xem thêm nhá, dòng thứ 12, và dòng thứ 14 số 8 là số hiện thị bài tùy ý anh em muốn sao chỉnh vậy)… nếu anh em không thấy thì nhấn tổ hợp phím ctrl + f rồi tìm chỗ cần sửa là xong.
2. Truy cập Child theme/Template-parts/posts/content-single.php.
3. Xóa toàn bộ nội dung file Content-single.php và thay bằng đoạn code mình show trên bước 1.
4. Thay sửa thông tin cần thiết như đã trình bài bên trên.
Các bạn có thể xem hình dưới đây để biết các thông tin có thể chỉnh sửa theo ý các bạn…
- Thêm CSS để làm đẹp cho phần hiển thị.
- Việc copy-paste code sang child theme mới giải quyết được việc hiển thị thôi, còn để nó đẹp theo ý mình thì phải set thêm CSS cho nó nữa.
Thêm CSS để hiển thị đẹp trên PC.
Bước 1: Copy toàn bộ đoạn CSS sau
.xem-them .tieu-de-xem-them {
font-weight: 700;
display: block;
margin-bottom: 10px;
font-size: 19px;
color: black;
}
.xem-them ul li {
margin-bottom: 3px;
}
.xem-them ul li a {
font-weight: 700;
font-size: 16px;
color: #2a9e2f;
}
.xem-them ul li a:hover {
text-decoration: underline;
}
.blog-single .entry-meta {
text-transform: none;
font-size: 14px;
letter-spacing: 0;
color: gray;
border-top: 1px solid #e2e2e2;
border-bottom: 1px solid #e2e2e2;
padding: 10px;
background: #f9f9f9;
}
.danh-muc {
margin-bottom: 15px;
}
.danh-muc span.title, .the-tim-kiem span.title {
border-radius: 4px;
background: #126e32;
padding: 4px 10px;
color: white;
margin-right: 5px;
}
.danh-muc a, .the-tim-kiem a {line-height:32px;
border-radius: 4px;
margin-bottom: 10px;
padding: 4px 10px;
background: #dedede;
color: #464646;
}
.danh-muc a:hover, .the-tim-kiem a:hover {
background: #6dca19;
color: white;
}
.bai-viet-lien-quan {
margin-top: 15px;
}
.bai-viet-lien-quan h3 {
font-size: 19px;
color: black;
}
.bai-viet-lien-quan ul {
margin-bottom: 0;
display: inline-block;
width: 100%;
}
.bai-viet-lien-quan ul li {
list-style: none;
width: 25%;
color: graytext;
float: left;
padding-left: 4px;
padding-right: 5px;
}
.bai-viet-lien-quan ul li .box-image img {
height: 120px;
border-radius: 4px;
object-fit: cover;
object-position: center;
}
.bai-viet-lien-quan h4 {
font-size: 15px;
color: black;
line-height: 19px;
padding-top: 7px;
height: 64px;
overflow: hidden;
}Bước 2: Paste toàn bộ đoạn code CSS trên vào Giao diện – Tùy biến – Style – Custom CSS – Custom CSS.
Bước 3: Lưu lại và hưởng thành quả trên PC.
Thêm CSS để làm đẹp trên Mobile
Bước 1: Copy toàn bộ đoạn code CSS sau:
.bai-viet-lien-quan ul li {
width: 50%;
}
.bai-viet-lien-quan ul li .box-image img {
height: 90px;
}Bước 2: Paste toàn bộ đoạn code CSS trên vào Giao diện – Tùy biến – Style – Custom CSS – Custom CSS Mobile
Bước 3: Lưu lại và hưởng thành quả trên Mobile
Anh em LƯU Ý KỸ nhớ backups lại kỹ trước khi sửa, tránh lỗi không mong muốn làm mất thời gian phải xử lý.
Anh em nào chưa hiểu và mới làm quen thì phần tuy biến không còn trong hosting nữa mà ngoài trang admin nha, sau khi đăng nhập mình trê chuột lên chỗ thanh công cụ admin í, thấy chữ tùy biến rồi làm theo như trên là xong, chưa hiểu nữa comment mình hướng dẫn nếu anh em chưa tìm ra.
Rôi chỉ vậy thôi có 2 đường để anh em giải quyết bài toán theme flatsome hiển thị bài liên quan, cảm ơn anh em đã theo dõi bài viết, cần gì thêm vui lòng comment bên dưới mình hỗ trợ thêm…
Cảm ơn đã xem bài viết!
