Hướng dẫn chèn khung soạn thảo danh mục sản phẩm Flatsome

Theme Flatsome là một trong những giao diện WordPress phổ biến nhất, đặc biệt dành cho các website thương mại điện tử sử dụng WooCommerce. Một tính năng nổi bật của Flatsome là khả năng tùy chỉnh nội dung hiển thị ở đầu (Top Content) và cuối (Bottom Content) của các danh mục sản phẩm (Product Categories) và thẻ sản phẩm (Product Tags). Tuy nhiên, trình soạn thảo mặc định của Flatsome cho các trường này có thể hạn chế, đặc biệt khi bạn muốn thêm nội dung phong phú như hình ảnh, video, hoặc định dạng phức tạp.

Trong bài viết này, chúng tôi sẽ hướng dẫn bạn cách sử dụng đoạn mã PHP tùy chỉnh để thay thế trình soạn thảo mặc định bằng trình soạn thảo WP Editor (trình soạn thảo giống như trong bài viết WordPress), giúp bạn dễ dàng tạo nội dung đa dạng và chuyên nghiệp hơn. Bài viết được thiết kế chi tiết, dễ hiểu cho cả người mới bắt đầu và những nhà phát triển có kinh nghiệm.

Hướng Dẫn Sử Dụng Trình Soạn Thảo Top Content và Bottom Content Trong Theme Flatsome WordPress

1. Tổng Quan Về Đoạn Mã PHP

Đoạn mã PHP dưới đây cho phép bạn:

Xóa các trình soạn thảo văn bản mặc định của Flatsome cho Top Content và Bottom Content trong danh mục và thẻ sản phẩm.
Thay thế bằng trình soạn thảo WP Editor, hỗ trợ các tính năng như chèn media, định dạng văn bản, và chỉnh sửa trực quan.

Lợi ích của việc sử dụng đoạn mã này:

Giao diện soạn thảo trực quan, dễ sử dụng.
Hỗ trợ chèn hình ảnh, video, và các định dạng HTML phức tạp.
Tăng tính linh hoạt khi tạo nội dung SEO hoặc nội dung quảng cáo cho danh mục sản phẩm.
Tương thích với theme Flatsome và WooCommerce.

Yêu cầu trước khi bắt đầu:

Website WordPress đã cài đặt theme Flatsome và plugin WooCommerce.
Quyền truy cập vào file functions.php của theme hoặc khả năng tạo child theme.
Sao lưu website trước khi chỉnh sửa mã để tránh rủi ro.

2. Hướng Dẫn Cài Đặt Và Sử Dụng Đoạn Mã

Bước 1: Thêm Đoạn Mã Vào File functions.php

add_action('init', function () {
remove_action('product_cat_edit_form_fields', 'top_text_taxonomy_edit_meta_field', 10);
remove_action('product_tag_edit_form_fields', 'top_text_taxonomy_edit_meta_field', 10);
remove_action('product_cat_edit_form_fields', 'bottom_text_taxonomy_edit_meta_field', 10);
remove_action('product_tag_edit_form_fields', 'bottom_text_taxonomy_edit_meta_field', 10);

add_action('product_cat_edit_form_fields', 'nguyenlan_editor_top', 10, 2);
add_action('product_tag_edit_form_fields', 'nguyenlan_editor_top', 10, 2);
add_action('product_cat_edit_form_fields', 'nguyenlan_editor_bottom', 10, 2);
add_action('product_tag_edit_form_fields', 'nguyenlan_editor_bottom', 10, 2);
});

function nguyenlan_editor_top($term) {
$meta = get_term_meta($term->term_id, 'cat_meta', true);
$content = isset($meta['cat_header']) ? $meta['cat_header'] : '';
echo '<tr class="form-field"><th><label for="term_meta[cat_header]">Top Content</label></th><td>';
wp_editor($content, 'term_meta_cat_header', ['textarea_name' => 'term_meta[cat_header]', 'media_buttons' => true, 'textarea_rows' => 10]);
echo '</td></tr>';
}

function nguyenlan_editor_bottom($term) {
$meta = get_term_meta($term->term_id, 'cat_meta', true);
$content = isset($meta['cat_footer']) ? $meta['cat_footer'] : '';
echo '<tr class="form-field"><th><label for="term_meta[cat_footer]">Bottom Content</label></th><td>';
wp_editor($content, 'term_meta_cat_footer', ['textarea_name' => 'term_meta[cat_footer]', 'media_buttons' => true, 'textarea_rows' => 10]);
echo '</td></tr>';
}

Bước 2: Kiểm Tra Trình Soạn Thảo Mới

Xóa cache website (nếu sử dụng plugin như WP Super Cache hoặc W3 Total Cache) để đảm bảo thay đổi có hiệu lực.

Truy cập danh mục sản phẩm:
- Vào trang quản trị WordPress, chọn Sản phẩm > Danh mục.
- Chọn một danh mục hiện có hoặc tạo mới.
Kiểm tra trường Top Content và Bottom Content:
- Khi chỉnh sửa danh mục, bạn sẽ thấy hai trường mới: Top Content và Bottom Content, sử dụng trình soạn thảo WP Editor.
- Trình soạn thảo này có giao diện giống như khi viết bài viết, bao gồm các nút định dạng, chèn media, và chế độ trực quan/văn bản.
Tương tự với thẻ sản phẩm:
- Vào Sản phẩm > Thẻ, chỉnh sửa hoặc tạo mới một thẻ.
- Các trường Top Content và Bottom Content cũng sẽ xuất hiện với WP Editor.4. Lưu Ý Khi Sử Dụng Đoạn Mã

Sử dụng Child Theme: Luôn thêm mã vào child theme để tránh mất tùy chỉnh khi cập nhật theme Flatsome.
Kiểm tra xung đột plugin: Một số plugin có thể gây xung đột với WP Editor. Nếu gặp lỗi (ví dụ: trình soạn thảo không tải), vô hiệu hóa từng plugin để kiểm tra.
Tối ưu hiệu suất: Nếu thêm nhiều media vào Top/Bottom Content, sử dụng plugin nén hình ảnh (như Smush) và cache (như WP Rocket) để duy trì tốc độ tải trang.
Cập nhật theme Flatsome: Đảm bảo bạn sử dụng phiên bản mới nhất của Flatsome để tránh lỗi tương thích.

3. Lưu Ý Khi Sử Dụng Đoạn Mã

Sử dụng Child Theme: Luôn thêm mã vào child theme để tránh mất tùy chỉnh khi cập nhật theme Flatsome.
Kiểm tra xung đột plugin: Một số plugin có thể gây xung đột với WP Editor. Nếu gặp lỗi (ví dụ: trình soạn thảo không tải), vô hiệu hóa từng plugin để kiểm tra.
Tối ưu hiệu suất: Nếu thêm nhiều media vào Top/Bottom Content, sử dụng plugin nén hình ảnh (như Smush) và cache (như WP Rocket) để duy trì tốc độ tải trang.
Cập nhật theme Flatsome: Đảm bảo bạn sử dụng phiên bản mới nhất của Flatsome để tránh lỗi tương thích.

4. Khắc Phục Một Số Lỗi Thường Gặp

Trình soạn thảo không hiển thị:
- Kiểm tra xem đoạn mã đã được dán đúng vào functions.php.
- Đảm bảo theme Flatsome và WordPress được cập nhật.
- Xóa cache trình duyệt và website.
Nội dung không lưu:
- Kiểm tra quyền truy cập cơ sở dữ liệu của website.
- Đảm bảo không có lỗi PHP trong file functions.php (sử dụng plugin Query Monitor để kiểm tra).
Xung đột với trình soạn thảo UX Builder:
- UX Builder của Flatsome không liên quan trực tiếp đến đoạn mã này, nhưng nếu bạn sử dụng UX Builder để chỉnh sửa danh mục, hãy ưu tiên WP Editor cho Top/Bottom Content để tránh xung đột.

Sử dụng đoạn mã PHP trên giúp bạn thay thế trình soạn thảo mặc định của Flatsome bằng WP Editor, mang lại trải nghiệm chỉnh sửa nội dung linh hoạt và chuyên nghiệp hơn. Với trình soạn thảo mới, bạn có thể tạo nội dung Top Content và Bottom Content hấp dẫn, tối ưu SEO, và tăng chuyển đổi cho website bán hàng.

Hãy áp dụng các bước trong bài viết này, kết hợp với chiến lược SEO hiệu quả, để đưa danh mục sản phẩm của bạn lên top Google. Nếu bạn gặp khó khăn trong quá trình thực hiện, hãy để lại câu hỏi hoặc liên hệ với tôi sẽ trợ giúp bạn.