[Hướng Dẫn] 2 Cách Thay Đổi Độ Dài Đoạn Mô Tả Bài Viết Trong Theme Flatsome

Thông thường, khi bạn sử dụng giao diện dạng danh sách (list style) cho trang blog hoặc danh mục trong theme Flatsome, đoạn mô tả ngắn (excerpt) mặc định chỉ hiển thị 15 từ. Độ dài này khá ngắn, đôi khi làm cho bố cục trông mất cân đối và không truyền tải đủ thông tin.

[Hướng Dẫn] 2 Cách Thay Đổi Độ Dài Đoạn Mô Tả Bài Viết Trong Theme Flatsome

Bài viết này sẽ hướng dẫn bạn 2 cách để dễ dàng tùy chỉnh độ dài của đoạn mô tả này, từ một giải pháp nhanh chóng đến một phương pháp chuyên nghiệp và bền vững hơn.

Cách 1: Chỉnh Sửa Trực Tiếp File Template (Nhanh nhưng Không Bền Vững)

Đây là phương pháp tương tự như cách bạn đã đề cập, giúp bạn thấy kết quả ngay lập tức. Tuy nhiên, nó có một nhược điểm lớn: mọi thay đổi sẽ bị mất khi bạn cập nhật theme Flatsome. Vì vậy, cách này chỉ nên được thực hiện khi bạn đã sử dụng Theme Con (Child Theme).

Bước 1: Chuẩn bị file trong Child Theme

  1. Truy cập vào hosting/VPS của bạn qua File Manager hoặc FTP.
  2. Tạo cấu trúc thư mục sau trong theme con của bạn (nếu chưa có): public_html/wp-content/themes/flatsome-child/template-parts/post/
  3. Sao chép file gốc từ đường dẫn: .../themes/flatsome/template-parts/post/archive-list.php Và dán vào thư mục bạn vừa tạo trong child theme.

Tại sao phải dùng Child Theme? Việc này giúp bạn tùy chỉnh theme một cách an toàn. Mọi thay đổi sẽ được ưu tiên áp dụng từ child theme mà không làm ảnh hưởng đến theme gốc, đảm bảo bạn không mất công sức chỉnh sửa mỗi khi cập nhật theme.

Bước 2: Chỉnh sửa file archive-list.php

Mở file archive-list.php trong child theme lên và tìm đến đoạn code sau:

echo flatsome_apply_shortcode(
‘blog_posts’,
array(
‘type’ => ‘row’,
‘image_width’ => ’40’,
‘depth’ => get_theme_mod( ‘blog_posts_depth’, 0 ),
‘depth_hover’ => get_theme_mod( ‘blog_posts_depth_hover’, 0 ),
‘text_align’ => get_theme_mod( ‘blog_posts_title_align’, ‘center’ ),
‘style’ => ‘vertical’,
‘columns’ => ‘1’,
‘show_date’ => get_theme_mod( ‘blog_badge’, 1 ) ? ‘true’ : ‘false’,
‘ids’ => $ids,
)
);

excerpt lenght

 

Bây giờ, hãy thêm tham số 'excerpt_length' => 40, vào trong mảng array. Ví dụ, bạn có thể thêm nó ngay dưới dòng 'ids' => $ids,.

Code sau khi thêm vào sẽ trông như thế này:

echo flatsome_apply_shortcode(
‘blog_posts’,
array(
‘type’ => ‘row’,
‘image_width’ => ’40’,
‘depth’ => get_theme_mod( ‘blog_posts_depth’, 0 ),
‘depth_hover’ => get_theme_mod( ‘blog_posts_depth_hover’, 0 ),
‘text_align’ => get_theme_mod( ‘blog_posts_title_align’, ‘center’ ),
‘style’ => ‘vertical’,
‘columns’ => ‘1’,
‘show_date’ => get_theme_mod( ‘blog_badge’, 1 ) ? ‘true’ : ‘false’,
‘ids’ => $ids,
‘excerpt_length’ => 40, // <– Thêm dòng này
)
);

 

Lưu ý: Bạn có thể thay đổi số 40 thành số lượng từ bạn muốn hiển thị.

Bước 3: Lưu và Kiểm tra

Lưu file lại và tải lại trang blog/danh mục của bạn để xem kết quả.

 

Cách 2: Sử Dụng Hook Function (Chuyên Nghiệp và Khuyến Khích)

Đây là phương pháp an toàn và bền vững nhất. Bằng cách sử dụng hook, bạn sẽ không cần phải chỉnh sửa file template. Đoạn code này sẽ được đặt trong file functions.php của child theme và sẽ không bị ảnh hưởng bởi các bản cập nhật theme.

Bước 1: Mở file functions.php

Truy cập vào thư mục child theme của bạn và mở file functions.php.

Bước 2: Thêm đoạn code sau

Dán đoạn code dưới đây vào cuối file functions.php:

/**
* Thay đổi độ dài đoạn mô tả cho blog posts trong Flatsome. – hoidapwp.com
* Hook vào shortcode [ blog_posts] để tùy chỉnh tham số.
*/
add_filter( ‘shortcode_atts_blog_posts’, ‘hoidapwp_change_blog_excerpt_length’, 100, 1 );

function hoidapwp_change_blog_excerpt_length( $out ) {
// Chỉ áp dụng cho giao diện dạng danh sách (list style)
// Bạn có thể xóa điều kiện if này nếu muốn áp dụng cho tất cả các kiểu
if ( isset( $out[‘style’] ) && $out[‘style’] === ‘vertical’ ) {
$out[‘excerpt_length’] = 40; // <– Thay đổi số lượng từ bạn muốn ở đây
}
return $out;
}

 

Giải thích code:

Bước 3: Lưu và Kiểm tra

Lưu file functions.php lại. Bây giờ hãy ra ngoài trang web và tận hưởng thành quả!

Kết Luận

Cả hai cách đều giúp bạn đạt được mục tiêu, nhưng chúng tôi khuyến khích bạn sử dụng Cách 2. Việc sử dụng hook không chỉ giúp code của bạn gọn gàng, tập trung mà còn đảm bảo website hoạt động ổn định và dễ dàng bảo trì trong tương lai.

Chúc bạn thực hiện thành công!

 

4.7/5 - (56 bình chọn)
Đăng ký
Thông báo về
guest
0 Bình Luận
Oldest
Newest Most Voted
Inline Feedbacks
Xem tất cả
0
Rất thích suy nghĩ của bạn, hãy bình luận.x
()
x