Cách khắc phục lỗi loading UX Builder trên theme Flatsome hiệu quả

Những nội dung quan trọng cần nắm

• Quan điểm: Lỗi UX Builder không ảnh hưởng trực tiếp đến người dùng cuối nhưng lại làm gián đoạn toàn bộ quá trình chỉnh sửa nội dung và phát triển website.

• Khái niệm: Đây là lỗi khiến trình chỉnh sửa trực quan của Flatsome không thể load hoàn chỉnh.

• Nguyên nhân: Thường đến từ plugin xung đột, thiếu tài nguyên server, lỗi AJAX, cấu hình .htaccess hoặc X-Frame-Options.

• Cách xử lý: Kiểm tra plugin, tăng memory, rà soát hosting/server và cấu hình hệ thống.

• Lưu ý: Luôn backup trước khi chỉnh sửa mã nguồn hoặc cấu hình server.

Lỗi loading UX Builder là gì?

Lỗi loading UX Builder xảy ra khi bạn chọn Edit with UX Builder nhưng giao diện chỉnh sửa không hiển thị được, chỉ đứng ở trạng thái loading hoặc màn hình trắng/trống.

Thông thường:

• Frontend website vẫn hoạt động

• Chỉ riêng UX Builder không load được

Điều này khiến bạn không thể chỉnh sửa bằng visual builder của Flatsome.

Nguyên nhân gây lỗi loading UX Builder

Xung đột plugin hoặc code tùy biến

Đây là nguyên nhân phổ biến nhất.

Các plugin như:

• Cache

• Optimize CSS/JS

• Security plugin

• Plugin builder khác

có thể can thiệp vào script hoặc AJAX của UX Builder khiến builder không khởi chạy được.

Ngoài ra:

• WordPress

• Flatsome

• Plugin

nếu lệch phiên bản cũng dễ gây lỗi JS/PHP.

Thiếu bộ nhớ WordPress hoặc PHP

UX Builder tiêu tốn khá nhiều RAM để tải:

• Script

• Layout

• Data

• Components

Nếu:

• WP_MEMORY_LIMIT thấp

• PHP memory_limit thấp

thì builder có thể bị treo ở trạng thái loading.

Hosting/VPS quá yếu

Server yếu hoặc cấu hình không phù hợp cũng là nguyên nhân phổ biến:

• CPU quá tải

• RAM thấp

• Timeout

• Thiếu module PHP

Ngoài ra, kết nối mạng tới hosting không ổn định cũng có thể làm JS/CSS tải không đầy đủ.

Sai file .htaccess

Các rule rewrite hoặc redirect sai trong .htaccess có thể:

• Chặn request AJAX

• Redirect vòng lặp

• Chặn backend route

khiến UX Builder không render được giao diện.

Lỗi X-Frame-Options

UX Builder hoạt động bằng iframe.

Nếu server cấu hình:

X-Frame-Options: DENY

hoặc sai SAMEORIGIN, trình duyệt sẽ chặn iframe khiến builder chỉ hiện loading.

Cách sửa lỗi loading UX Builder

1. Kiểm tra xung đột plugin

Bước 1

Vào hosting → public_html/wp-content/

Tìm thư mục:

plugins

Bước 2

Đổi tên thành:

pluginss

để vô hiệu hóa toàn bộ plugin.

Bước 3

Mở lại UX Builder để kiểm tra.

Nếu builder hoạt động:

→ nguyên nhân là plugin xung đột.

Bước 4

Đổi lại tên thư mục thành:

plugins

Sau đó bật plugin từng cái để tìm plugin gây lỗi.

2. Tăng WordPress Memory Limit

Bước 1

Mở file:

wp-config.php

Bước 2

Thêm dòng sau phía trên:

define('WP_MEMORY_LIMIT', '256M');

Bước 3

Vào hosting → PHP Settings:

• memory_limit → 256M+

• max_input_vars → ~6000

Bước 4

Refresh lại UX Builder để kiểm tra.

3. Kiểm tra hosting/VPS và PHP

Các bước nên kiểm tra:

• PHP version (khuyến nghị PHP 7.4+)

• RAM/CPU hosting

• Module PHP:
  • curl
  • json
  • mbstring
  • zip

Nếu hosting thường xuyên full tài nguyên:

→ nên nâng cấp gói.

4. Sửa file .htaccess

Bước 1

Bật hiển thị file ẩn và mở:

.htaccess

Bước 2

Backup file trước khi sửa.

Bước 3

Kiểm tra:

• RewriteBase
• RewriteRule
• Redirect

Nếu quá rối:

→ thay bằng .htaccess mặc định của WordPress.

Bước 4

Lưu file và test lại UX Builder.

5. Sửa lỗi “Load denied by X-Frame-Options”

Bước 1

Nhấn:

F12 → Console

Kiểm tra lỗi:

Load denied by X-Frame-Options

Bước 2

Kiểm tra cấu hình:

• Apache

• Nginx

• LiteSpeed

Bước 3

Điều chỉnh:

X-Frame-Options: SAMEORIGIN

hoặc loại bỏ rule chặn iframe.

6. Cài lại theme Flatsome

Nếu nghi ngờ theme lỗi:

Bước 1

Backup thư mục:

wp-content/themes/flatsome

Bước 2

Xóa theme cũ.

Bước 3

Tải lại theme Flatsome sạch từ nguồn chính thức.

Bước 4

Upload và kích hoạt lại theme.

Bước 5

Test lại UX Builder.

Những lưu ý quan trọng khi sửa lỗi

• Luôn backup source code và database trước khi thao tác

• Thực hiện từng bước và test lại sau mỗi thay đổi

• Hạn chế sửa cấu hình server nếu chưa có kinh nghiệm

• Chỉ dùng theme/plugin từ nguồn uy tín

• Kết hợp xem:

• PHP error log

• Browser console

• Network tab

để xác định đúng nguyên nhân

• Sau khi sửa xong, kiểm tra lại toàn bộ website để đảm bảo không phát sinh lỗi mới