html2wp / Blog / Lovable sang WordPress trong ứng dụng

Chuyển Lovable sang WordPress: từng bước trong ứng dụng html2wp

Hướng dẫn này chỉ cách chuyển dự án Lovable sang WordPress trong ứng dụng html2wp, chạy trên Mac và Windows. Bạn không cần terminal hay biết lập trình. Bạn thêm dự án dưới dạng ZIP, chọn Flash hoặc Full, và cuối cùng tải về một theme WordPress hoàn chỉnh trông giống thiết kế của bạn.

Hướng dẫn ngày · Flash khoảng nửa giờ, Full khoảng một giờ · ảnh chụp màn hình từ html2wp 1.0.20
Trước khi bắt đầuỨng dụng và tài khoản của bạn

Bạn cần gì để chuyển Lovable sang WordPress trong ứng dụng

  • Máy Mac chip Apple silicon (M1 trở lên) và macOS 12 trở lên.
  • Tài khoản ChatGPT. AI trong gói của chính bạn thực hiện việc chuyển đổi, nên bạn không trả chúng tôi tiền credit hay token.
  • Dự án Lovable dưới dạng ZIP hoặc thư mục chứa mã nguồn. Các bước để lấy nó ở bên dưới.
  • Dung lượng ổ đĩa. Mỗi lần chuyển đổi đang chạy chiếm vài GB.

Bạn không phải cài Docker Desktop trước, vì ứng dụng tự tải và cài khi cần. Bản miễn phí chuyển đổi ba site, mỗi site tối đa năm trang, đủ để chuyển một site Lovable nhỏ sang WordPress. Với dự án khách hàng, site lớn hơn và cửa hàng WooCommerce, bạn cần giấy phép Pro từ trang bảng giá.

Cài ứng dụng html2wp

Tải ứng dụng cho Mac, mở file DMG và kéo html2wp vào thư mục Applications. Trong hướng dẫn này, tên các nút được viết đúng như trên màn hình.

Chuẩn bị môi trường

Trong Settings của ứng dụng, bấm Prepare environment. Ứng dụng tải và khởi động Docker nếu cần, rồi nạp môi trường chuyển đổi cùng các image WordPress và cơ sở dữ liệu. Lần đầu việc này mất vài phút. Mac có thể hỏi mật khẩu, và Docker hiển thị điều khoản giấy phép của nó.

Ứng dụng html2wp: Settings với nút Prepare environment trước lần chuyển đổi đầu tiên
Trước lần chuyển đổi đầu tiên: nút "Prepare environment" trong Settings.

Khi mọi thứ sẵn sàng, ứng dụng hiện “Ready to work” và nút đổi thành Repair environment. Bạn chỉ cần nó nếu sau này môi trường bị hỏng.

Ứng dụng html2wp với môi trường đã chuẩn bị xong và nút Repair environment
Môi trường đã sẵn sàng, thanh bên hiện "Environment ready".

Đăng nhập bằng ChatGPT

Bấm Connect with ChatGPT. Ứng dụng hiện một mã, và nút "Open sign-in page" mở trang của OpenAI. Đăng nhập ở đó bằng tài khoản ChatGPT và nhập mã từ ứng dụng. Bạn chỉ gõ mật khẩu trên trang của OpenAI, nên ứng dụng không bao giờ thấy nó.

Đăng nhập ứng dụng html2wp vào ChatGPT bằng mã trên trang OpenAI
Bạn nhập mã từ ứng dụng trên trang đăng nhập của OpenAI.

Sau khi đăng nhập, chọn "Conversion model" và "Reasoning effort", hoặc giữ mặc định. Nếu có giấy phép Pro, hãy nhập khóa trong Settings và bấm Save & check. Bản miễn phí không cần khóa.

Ứng dụng html2wp đã đăng nhập tài khoản ChatGPT, với cài đặt model và mức suy luận
Tài khoản đã đăng nhập và lựa chọn model cho việc chuyển đổi.
Chuyển đổiTừ Lovable tới theme

Dự án Lovable của bạn trong ứng dụng

Ứng dụng cần file nguồn của dự án, không phải địa chỉ của site đang chạy. Lovable đồng bộ dự án với một kho GitHub. Mở kho trên GitHub và tải về bằng Code → Download ZIP. Bạn không phải build dự án hay chạy npm install, vì ứng dụng tự làm việc đó.

Trong ứng dụng, bấm New project (⌘N). Ở mục Output, giữ HTML WordPress theme và chọn Import a ZIP, hoặc "Choose a folder" nếu bạn đã giải nén dự án. Ứng dụng làm việc trên một bản sao, nên file gốc của bạn không thay đổi.

Cửa sổ New project trong html2wp: đầu ra theme WordPress và nhập thư mục hoặc ZIP của dự án Lovable
New project: đầu ra HTML WordPress theme và nhập ZIP hoặc thư mục.
Dự án Lovable đã nhập vào ứng dụng html2wp dưới dạng HTML WordPress theme
Sau khi nhập, ứng dụng xác nhận file gốc của bạn không thay đổi.

Flash hay Full để chuyển Lovable sang WordPress

Trên màn hình dự án, bạn chọn mức độ kỹ lưỡng khi ứng dụng chuyển site Lovable sang WordPress. Flash là mặc định: mỗi bước chạy một lần, và mất khoảng nửa giờ. Full chạy mọi bước kiểm tra và cố sửa các lỗi tìm thấy, nên mất khoảng một giờ. Thời gian chính xác tùy số trang và tốc độ máy Mac của bạn.

Dự án Lovable trong ứng dụng html2wp trước khi bắt đầu chuyển đổi Flash hoặc Full sang WordPress
Nút Flash và Full, cùng loại theme: HTML hoặc Astro 5.

Nếu không cần WordPress, hãy đổi loại sang Astro 5. Khi đó ứng dụng build một site tĩnh, và bạn có thể triển khai nó lên Cloudflare Pages ngay từ ứng dụng.

Quá trình chuyển đổi

Trong lúc chuyển đổi, tab "Overview" hiển thị các bước mà plugin chuyển đổi đang làm và các lỗi nó đã tự sửa. Phần lớn thời gian nó chạy mà không cần bạn. Dù dự án Lovable là ứng dụng React cũ hay dự án TanStack Start mới hơn, trước tiên ứng dụng build nó, mở nó trong trình duyệt và lưu từng trang thành HTML hoàn chỉnh. Chỉ sau đó nó mới biến HTML đó thành theme.

Chuyển đổi Flash từ Lovable sang WordPress trong ứng dụng html2wp, với tiến độ và nút Stop conversion
Một lần chuyển đổi Flash đang chạy, kèm phần trăm và bước tiếp theo.

Để tạm dừng, bấm Stop conversion, rồi tiếp tục bằng "Continue". Nếu plugin tự dừng ở một bước, Repair and continue cho phép nó sửa lỗi và chạy tiếp.

So sánh site Lovable với bản WordPress

Tab Compare hiển thị từng trang của bản gốc cạnh bản WordPress, ở độ rộng desktop (Desktop · 1440) và mobile (Mobile · 390), kèm mức chênh lệch tính bằng phần trăm. Hãy tự xem qua từng trang. Kiểm tra tự động bắt được phần lớn khác biệt, nhưng không phải tất cả: trong một lần chuyển đổi, cả một section bị mất mà khác biệt chỉ là 0,4%.

Tab Compare trong ứng dụng html2wp: bản gốc bên trái, bản WordPress bên phải
So sánh một trang ở độ rộng desktop. Ảnh chụp từ một site mẫu.

Trong tab Preview, "Open website" mở site WordPress cục bộ và "WordPress admin" mở bảng điều khiển của nó. Nếu muốn đổi gì đó, hãy gõ vào khung chat bên phải. Thay đổi hiện ngay trong bản xem trước sau vài giây. Sau đó bấm Make release, và ứng dụng đóng gói theme đúng như bạn thấy trong bản xem trước.

Ứng dụng html2wp sau một thay đổi qua chat, với nút Make release
Sau một thay đổi trong chat, ứng dụng hiện số thay đổi và nút "Make release".

Xuất theme WordPress từ dự án Lovable

Khi bạn chuyển Lovable sang WordPress xong, các file hoàn chỉnh nằm trong tab Exports. Cạnh theme WordPress, bấm "Save" và lưu file ZIP. Bạn cũng tìm thấy báo cáo chuyển đổi dạng PDF, file ZIP của dự án gốc và, sau một lần chuyển đổi Flash, một dự án Astro 5.

Tab Exports trong ứng dụng html2wp với file ZIP theme WordPress và báo cáo chuyển đổi
Theme dạng ZIP, báo cáo chuyển đổi và dự án gốc.

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. Trang, blog, form, menu, SEO và chuyển hướng đều là một phần của theme và chạy không cần plugin.

Nếu bạn muốn khách hàng sửa chữ và hình ảnh bằng cách bấm ngay trên trang, hãy thêm trình chỉnh sửa Visual Edit. Nếu bạn thích làm việc với agent trong terminal, hướng dẫn với plugin cho Claude Code và Codex nói về cùng lần chuyển đổi đó.