html2wp / Blog / Lovable sang WordPress
Từ Lovable sang WordPress: chuyển dự án thành một theme thật
Chuyển Lovable sang WordPress giống chuyển HTML sang WordPress, chỉ thêm một bước. Dự án Lovable cũ là một ứng dụng React, nên HTML của nó không có gì để chuyển đổi: trang chỉ hiện ra trong trình duyệt, sau khi JavaScript chạy. Các dự án mới hơn (TanStack Start, từ tháng 5 năm 2026) render trang trên máy chủ, và html2wp chuyển đổi cả hai loại theo cùng một cách. Bài hướng dẫn này đưa bạn từ loại dự án đó tới một theme WordPress mang chính mã của bạn, không phải bản dựng lại. Mọi bước đều lấy từ một lần chuyển đổi thật, và bạn có thể mở cả hai đầu của nó.
Ví dụ chuyển Lovable sang WordPress, mở được cả hai đầu
Mọi thứ dưới đây mô tả một lần chuyển đổi chúng tôi đã thực sự chạy. Bản gốc là một ứng dụng Lovable: bruce-banner.lovable.app, một portfolio nhiếp ảnh. Kết quả là bruce.html2wp.dev, chạy trên WordPress. Bạn vào được trang quản trị tại /wp-admin với tên đăng nhập demo và mật khẩu demo.
Lần chuyển đổi tạo ra năm trang và năm bài viết trên theme bruce-banner. Con số đó nằm trong bản miễn phí, vốn chuyển đổi tối đa năm trang mỗi lần và không cần khóa. Hãy mở hai site cạnh nhau trước khi đọc tiếp. Bài viết này nói về khác biệt giữa chúng, nên bạn có thể tự đo.
Hai lần chuyển đổi Lovable khác cũng mở được theo cách tương tự. Thứ nhất, spark-remix-kindred.lovable.app trở thành terra.html2wp.dev, một cửa hàng đồ len trên WooCommerce. Thứ hai, bloom-echo-remix.lovable.app trở thành soria.html2wp.dev, site của một nhiếp ảnh gia cưới. Trên cả ba site, thông tin đăng nhập quản trị WordPress là demo / demo.
“1:1” ở đây chính xác nghĩa là gì
Mã mà ứng dụng Lovable dựng trong trình duyệt chính là mã đi vào theme. Không ai dựng lại các section thành widget của page builder, nên bạn không bao giờ nhận một bản ước chừng thiết kế theo từng trang. Mọi bước dưới đây đều xuất phát từ điều đó.
Máy tính cần gì để chuyển Lovable sang WordPress
Việc build, công việc trong trình duyệt và mọi bước kiểm tra đều chạy trên máy của bạn. Chỉ kết quả đã build được gửi tới dịch vụ tạo theme. Vì vậy đây không phải dịch vụ web nơi bạn tải lên một file ZIP, và nó có những yêu cầu bạn nên biết trước:
- Node 20 trở lên cho việc build và các script cục bộ.
- Python 3 với các gói Playwright và Pillow. Playwright điều khiển một trình duyệt thật, và đó là cách một ứng dụng React biến thành HTML.
- Docker với lệnh
docker compose. Nó khởi động một WordPress tạm thời trên máy tính của bạn, và công cụ chuyển đổi kiểm tra theme ở đó trước khi bạn xem. - php-cli, vì mọi file PHP đều qua kiểm tra cú pháp trước khi vào file ZIP.
jq,curl,bashvàtar. WordPress đích phải là phiên bản 6.6 trở lên.
Plugin kiểm tra tất cả những thứ này ở bước đầu tiên và in ra hai danh sách. Danh sách thứ nhất cho thấy những gì nó tự cài được bên trong thư mục của bạn. Danh sách thứ hai là những gì bạn phải quyết định: Docker, Node mới hơn và việc khởi động Docker. Nó không bao giờ tự cài nhóm thứ hai sau lưng bạn.
Docker làm mọi người bất ngờ nhất
Các công cụ chuyển đổi khác không cần nó, vì chúng bỏ qua bước này. Ở đây công cụ chuyển đổi cài theme vừa tạo vào một WordPress thật và kiểm thử ở đó. Trình duyệt và container dùng cho việc đó. Nếu bạn muốn một công cụ năm phút trong trình duyệt, đây không phải nó.
Cài plugin
Chúng tôi phát hành plugin hai lần, mỗi agent một bản. Các script và số phiên bản giống nhau cho Claude Code và Codex. Hãy chọn bản bạn dùng.
Claude Code
/plugin marketplace add iOSDevSK/html2wp-cc-plugin /plugin install html2wp@html2wp
Sau đó, một lần, trong terminal:
python3 -m playwright install chromium
Codex
codex plugin marketplace add iOSDevSK/html2wp-codex-plugin codex plugin add html2wp@html2wp
Với bản miễn phí, không cần thiết lập gì thêm: không khóa, không đăng ký, không thẻ. Nếu bạn không muốn làm việc trong terminal, bạn có thể chạy cùng lần chuyển đổi đó trong ứng dụng desktop html2wp (hướng dẫn có ảnh chụp màn hình).
Cách đưa dự án Lovable về ổ đĩa của bạn
Địa chỉ của một site đang chạy không phải đầu vào được hỗ trợ, và đó là có chủ ý. Bản sao của một trang đã xuất bản chỉ giữ kết quả hiển thị. Nó mất những gì mã nguồn biết: có những route nào, các component là gì và quá trình build tạo ra gì.
Vì vậy đầu vào là một thư mục. Lovable đồng bộ dự án của bạn với một kho GitHub. Kết nối nó, clone nó về, và bạn có dự án trên máy. Dù giao diện Lovable tháng này trông thế nào, kho mã mới là thứ bạn cần: chính các file mà Lovable dùng để build site.
git clone https://github.com/<you>/<your-lovable-project>.git cd <your-lovable-project>
Bạn không phải chạy npm install hay build trước. Quá trình chuyển đổi tự làm việc đó.
Nói “convert this project”
Trong thư mục đó, khi agent đang mở, hãy gõ:
/html2wp:html2wp
convert this project
Codex không có lệnh slash. Thay vào đó, hãy nói với nó convert this project into a verified WordPress block theme và nó tự tìm ra skill. Với Claude Code hay Codex, câu đó là toàn bộ chỉ dẫn. Bạn không viết file cấu hình nào và không phải chọn lệnh build.
Flash mất khoảng 30 phút và Full khoảng một giờ, tùy số trang và tốc độ máy tính của bạn. Phần lớn thời gian nó tự chạy và báo đang ở đâu sau mỗi bước, nên đừng chờ sự im lặng.
Chuyện gì xảy ra với React khi chuyển Lovable sang WordPress
Đây là bước mà dự án Lovable thêm vào.
Một ứng dụng Lovable cũ (React và Vite) chỉ có một file index.html. Phần body của nó là một phần tử trống để ứng dụng React gắn vào, cộng một thẻ script, nên không có gì để chuyển đổi. Trước tiên công cụ chuyển đổi build dự án. Sau đó một trình duyệt thật đi qua từng route trong khi một bộ ghi theo dõi. Kết quả là HTML tĩnh cho từng route, đúng thứ mà phần còn lại của quy trình cần. Một dự án mới trên TanStack Start đã render trang trên máy chủ; công cụ chuyển đổi vẫn build nó và đi qua từng route theo cùng một cách.
Bộ ghi ghi lại những gì
- Trạng thái chỉ tồn tại sau khi JavaScript chạy. Accordion đang mở, nội dung menu thả xuống, class do script thay đổi. Bộ ghi lưu chúng dưới dạng dữ liệu trên các phần tử, và một runtime nhỏ, dùng chung, phát lại chúng. Không ai phải viết tay chúng theo trí nhớ.
- Ngưỡng cuộn, chính xác đến từng pixel. Một header đổi ở
scrollY > 40dùng một con số ai đó tự đặt ra. Bộ ghi tìm ra nó và xác định chính xác vị trí. Một con số đoán làm tròn sẽ khiến header đổi sai thời điểm, mãi mãi. - Quan hệ “chỉ một mục được mở”. Bạn mở A, rồi mở B. A có đóng lại không? Ghi từng phần tử riêng lẻ không trả lời được, nên bộ ghi kiểm tra điều đó riêng.
- Hiệu ứng xuất hiện khi cuộn vẫn được giữ. Bộ ghi ghi lại chúng, và theme phát lại giống hệt bản gốc. Nội dung vẫn hiển thị khi không có JavaScript, một phần tử chỉ ẩn trong lúc runtime chạy, và với
prefers-reduced-motiontheme bỏ qua hiệu ứng. Chúng tôi đo độ khớp 1:1 ở trạng thái tĩnh, khi hiệu ứng đã chạy xong.
Những gì nó không làm giả
- Hành vi không ghi lại được sẽ vào một danh sách. Mỗi trang có danh sách riêng. Hãy đọc nó.
Bước này có bước kiểm tra riêng, vì không bước kiểm tra nào sau đó thấy được nó. Công cụ chuyển đổi chụp màn hình từng route đang chạy và so với bản ghi tĩnh ở độ rộng 1440, 820 và 390 pixel. Nếu chúng khác nhau, bước này không đạt. Mọi bước sau đều đo từ bản ghi tới WordPress, nên một lỗi sinh ra ở đây sẽ lọt qua tất cả.
Bước rà soát không thể bỏ qua
Khi các bước kiểm tra tự động xong, việc chuyển đổi vẫn chưa kết thúc. Công cụ chuyển đổi đặt mỗi trang vào một ảnh cạnh bản gốc, và bạn đọc từng ảnh từ trên xuống dưới.
Trong một lần chuyển đổi, cả một section ở phía dưới trang bị mất, và phép so sánh pixel chỉ cho thấy khác biệt 0,4%. Trang đó qua kiểm tra mà không có section. Về bản chất, kiểm tra tự động không thấy được ba loại lỗi. Loại đầu tiên là một nút điều khiển trông hoàn hảo nhưng không làm gì. Loại thứ hai là một giá trị gán cứng từ đúng một trang mà template được tạo ra. Còn loại thứ ba là bất cứ thứ gì chỉ xuất hiện sau khi bạn cuộn, bấm hoặc gửi form.
Hãy kiểm tra cả việc bạn có sửa được nội dung hay không, chứ không chỉ việc nó trông đúng. Một trang có thể khớp đến từng pixel mà chủ site vẫn không sửa được FAQ hay lưới tính năng của nó. Chúng tôi đã thấy điều này thật: một accordion năm câu hỏi trông giống hệt, nhưng không trình chỉnh sửa nào cho sửa nó. Một lần rà soát chỉ nhìn bề ngoài đã để nó lọt qua. Vì vậy với mỗi trang, hãy hỏi xem bạn có sửa được từng nhóm lặp lại và từng khối chữ từ wp-admin không.
Cài theme
Thư mục dự án của bạn nhận một file ZIP theme và, bên cạnh, CONVERSION-REPORT.md. Không gì khác. Thư mục làm việc chứa bản build nằm ngoài dự án, trong một thư mục cache, nên kho mã của bạn vẫn sạch. Báo cáo là ngoại lệ, vì người đọc nó là bạn. Báo cáo liệt kê những gì việc chuyển đổi đã bao quát, những gì bước rà soát tìm ra, mọi cảnh báo (kể cả những cảnh báo chấp nhận được) và những gì còn bỏ ngỏ.
Trong WordPress, vào Giao diện → Giao diện → Thêm mới → Tải giao diện lên, chọn file ZIP và kích hoạt. Theme tự đứng độc lập. Trang, blog, form, menu, SEO và chuyển hướng đều là mã riêng của nó. Nó không cần plugin nào để chạy và không bao giờ liên lạc với máy chủ nào của chúng tôi.
Chỉnh sửa site sau khi chuyển Lovable sang WordPress: ba cách
Bài viết blog trở thành bài viết WordPress bình thường, nên bạn viết chúng trong trình soạn thảo block ngay. Chữ trên các trang vẫn nằm trong HTML của bạn, và cho phần đó có hai lựa chọn đáng biết. Một trong số đó là page builder.
| Cách | Bạn nhận được gì | Bạn phải trả giá gì |
|---|---|---|
| Chỉ dùng theme | Mã của bạn, không thay đổi. Không plugin, không phụ thuộc, không có gì phải gia hạn. Bài viết được viết trong trình soạn thảo block. | Không có plugin, chữ trên trang được sửa trong HTML. Nếu khách hàng muốn tự sửa, Visual Edit làm được việc đó (bản Lite miễn phí). |
| Visual Edit, plugin của chúng tôi | Bạn bấm vào một tiêu đề ngay trên trang, gõ đè lên và lưu. Bạn sửa chữ, hình ảnh, liên kết, form và menu ngay tại chỗ, và mã vẫn như cũ. Lite miễn phí và không cần khóa. | Thêm một plugin cài trên WordPress. Lite giữ lịch sử 10 bước và không có chat AI. Pro giá 59 € mỗi năm. |
| Elementor hoặc page builder khác |
Ai biết Elementor cũng có thể tự sắp xếp lại trang, và rất nhiều người biết nó. Với khách hàng sẽ tự đổi bố cục, sự quen thuộc đó có giá trị. | Mã bị dựng lại thành widget của builder, nên không còn là của bạn. Sau đó site không hiển thị được nếu thiếu Elementor, và bạn thừa hưởng cấu trúc, CSS và các bản cập nhật của nó. |
Nếu bạn chuyển đổi để giữ thiết kế, page builder chính là thứ phá hủy nó. Chuyển thiết kế vào builder bằng tay là bước khiến site không còn giống thiết kế, và đó là lý do công cụ chuyển đổi này tồn tại. Nhưng nếu thiết kế chỉ là điểm khởi đầu và quý sau khách hàng đằng nào cũng dựng lại một nửa, cứ việc đưa họ Elementor.
Lite hay Pro, nếu bạn chọn Visual Edit
| Lite (miễn phí) | Pro | |
|---|---|---|
| Sửa nội dung bằng cách bấm vào | ✓ | ✓ |
| Form, menu, trường SEO | ✓ | ✓ |
| Sửa qua chat AI | – | ✓, với API key của bạn |
| Xuất theme | – | ✓ |
| Bảo vệ form bằng Turnstile | – | ✓ |
| Sửa ảnh bằng AI và tạo animation từ ảnh | – | ✓ |
| Lịch sử chỉnh sửa | 10 bước | 300 bước |
Chat AI trong Pro chạy bằng API key của riêng bạn. Chúng tôi không bán token cho bạn, và bạn thanh toán chi phí sử dụng trực tiếp với nhà cung cấp.
Lovable hay WordPress? Bạn không phải chọn một
Người ta thường đặt vấn đề là chọn cái này hoặc cái kia. Với một site nội dung, không nhất thiết như vậy. Trong Lovable bạn làm thiết kế nhanh. Trong WordPress một site sống nhiều năm và người khác chỉnh sửa nó. Việc chuyển đổi giữ cái thứ nhất và chuyển sang cái thứ hai. Theme chạy trên mọi hosting WordPress, nên site không còn phải ở nơi bạn đã dựng nó.
Thứ được chuyển là website: trang, blog, form, menu, SEO và chuyển hướng. Thứ không được chuyển là ứng dụng phía sau: đăng nhập, cơ sở dữ liệu và các lệnh gọi tới API riêng của bạn. Nếu dự án Lovable của bạn chủ yếu là những thứ đó, hãy giữ nó trong Lovable. Cửa hàng nằm ở giữa. Với giấy phép Pro, danh mục sản phẩm trở thành WooCommerce, như với Terra Studios.
Chuyển Lovable sang WordPress tốn bao nhiêu và bị từ chối khi nào
Bản miễn phí mở cho mọi người, không cần khóa và không cần đăng ký: ba lần chuyển đổi, mỗi lần năm trang và tổng cộng năm lần chạy lại. Cả hai con số đều tính theo địa chỉ IP, nên một văn phòng dùng chung một địa chỉ chỉ có một hạn mức cho tất cả. Bản miễn phí dành cho việc thử công cụ, site cá nhân và công việc phi thương mại.
Giấy phép Pro bỏ giới hạn trang và không giới hạn chuyển đổi lẫn chạy lại. Pro cũng thêm bước biến cửa hàng thành WooCommerce. Bước đó hoàn toàn không có trong bản miễn phí: ứng dụng từ chối thẳng một lần chuyển đổi miễn phí của site có cửa hàng, thay vì làm một nửa. Pro giá 49 € mỗi tháng hoặc 490 € mỗi năm, và giá có trên trang bảng giá. Trong giai đoạn beta, lần thanh toán đầu rẻ hơn 30% và khóa được gửi qua email.
Có hai trường hợp từ chối nên biết trước. Một dự án React mà route chỉ tồn tại theo từng bản ghi (/product/:id không có dữ liệu để hiển thị) là ứng dụng web, không phải site để chuyển đổi. Công cụ chuyển đổi từ chối nó công khai thay vì xuất ra một bản ngẫu nhiên của template. Và đây là bản beta: các bước kiểm tra bắt được phần lớn khác biệt, không phải tất cả. Vì vậy việc rà soát từng trang là một phần của quy trình, không phải bước trau chuốt tùy chọn.
Hướng dẫn từng bước cho toàn bộ quy trình có trong tài liệu ứng dụng html2wp. Ba lần chuyển đổi Lovable bạn có thể mở cả hai đầu nằm trong ví dụ ở đầu bài viết này.