Sau hơn 3 năm sử dụng theme Twenty Twenty + plugin Twentig làm giao diện cho blog, mình đã quyết định thay áo mới cho blog bằng theme Kadence.
Mục Lục
I. Tại sao cần thay áo mới?
Khi quyết định thay giao diện mới cho blog hồi năm 2021, mình muốn tìm kiếm 1 theme tối giản, dễ sử dụng và tương thích tốt với trình duyệt Gutenberg. Twenty Twenty là một lựa chọn hoàn hảo vào thời điểm đó.
Sau khi thay áo mới, mình dành thời gian xây dựng nội dung cho blog. Không bị xao nhãng vào việc tối ưu giao diện nữa.
Dạo gần đây, mình muốn cấu hình thêm nhiều tính năng nâng cao cho blog, ví dụ: chèn thêm banner, bổ sung Dark Mode,… Theme Twenty Twenty trở nên đuối sức, khó đáp ứng nhu cầu của mình được nữa.
Mình cần tìm 1 giao diện mới cho blog để chuẩn bị cho các mục tiêu tương lai.
II. Xin chào Kadence Theme
Không khó để mình tìm ra ứng cử viên thay thế cho Twenty Twenty. Kadence ngay lập tức là ứng cử viên hàng đầu.
Kể từ khi làm quen với Kadence từ 2022, nó nhanh chóng trở thành lựa chọn hàng đầu của mình khi mình xây dựng một website WordPress mới. Trên thực tế, đa số các website mình quản lý đều đã chuyển qua dùng Kadence trong 2 năm gần đây.
- YCB: https://ycb.vn (trước đây dùng Astra)
- Purna: https://purna.vn (trước đây dùng Genesis Framework)
- Yêu Chạy Bộ: https://yeuchaybo.com (trước đây dùng Genesis Framework)
- Ba Lô & Dép Lào: https://balodeplao.com (trước đây dùng Genesis Framework)
- Lành Kitchen: https://lanhkitchen.com (trước đây dùng Astra)
- Keeb VN: https://keeb.vn (xây mới bằng Kadence)
Mình cũng đã nghiên cứu thử theme Twenty Twenty Four để làm quen với công cụ Full Site Editing mới của WordPress. Nhưng theo quan điểm cá nhân, Site Editor vẫn còn quá khó sử dụng, khó tùy biến so với phương pháp truyền thống: tùy biến bằng Customizer + Action Hooks.
Mình đã quá quen thuộc với Kadence theme nên việc chuyển đổi qua giao diện này sẽ trở nên nhanh chóng và dễ dàng hơn so với việc ngồi mò 1 theme hoàn toàn mới.
Chốt Kadence!
III. Các bước thay áo mới cho blog
Việc thay áo mới cho website không đơn giản chỉ là tải theme mới về và kích hoạt là xong. Nhiều khu vực trên trang sẽ bị xáo trộn do cách thiết lập khác nhau giữa các theme. Nếu không chú ý test kỹ thì việc thay áo mới sẽ khiến website trở thành 1 đống hỗn tạp, hay tệ hơn có thể bị lỗi không thể tải trang.
Mình đã có kinh nghiệm khi thay giao diện cho các website trước đây nên lần này làm khá trơn tru.
Các bước thay giao diện cho website gồm các bước chính sau:
1. Tạo Staging site
Mình tạo 1 website nháp bằng công cụ wordpress-caddy-docker. Sau đó copy dữ liệu từ blog chính này qua để tạo 1 trang staging site thử nghiệm.
Giao diện mới sẽ được tinh chỉnh trên trang nháp này trước khi áp dụng lên trang chính.
2. Tối ưu giao diện
Cài đặt và kích hoạt Kadence theme. Sau đó dành thời gian tối ưu giao diện bằng Customizer. Mục tiêu của mình là tinh chỉnh Kadence theme để có được giao diện y hệt như khi dùng Twenty Twenty.
3. Chuyển thông số qua trang chính
Cài thêm plugin Kadence Starter Template để copy thông số của theme Kadence
- Vào phần Customizer của trang nháp để Export thông số.
- Vào trang chính, cài đặt và kích hoạt Kadence
- Vào phần Customizer của trang chính để Import thông số vừa tạo từ trang nháp.
Cài plugin Widget Importer & Exporter để chuyển thông số Widget từ trang nháp qua trang chính.
4. Chỉnh sửa trang chủ homepage
Sau khi đổi giao diện, trang chủ homepage thường sẽ bị lỗi layout, font chữ,… do chưa tương thích với các thiết lập của theme mới. Do đó, cần phải vào chỉnh sửa trang chủ để bảo đảm nó hiển thị chính xác trở lại.
5. Mông má và sửa lỗi
Chắc chắn sẽ còn nhiều khu vực trên web sẽ bị lỗi hiển thị. Do đó cần phải kiểm tra thêm, nếu thấy lỗi thì chỉnh sửa.
Vậy là xong! Blog đã được khoác áo mới với thương hiệu Kadence. Giao diện bên ngoài nhìn chẳng khác gì theme cũ, nhưng backend đã được trang bị thêm nhiều tính năng mạnh mẽ hơn hẳn.
Bạn nào thấy lỗi hiển thị ở trang nào thì báo giúp mình để chỉnh sửa kịp thời nhé. Cám ơn bạn!
Nếu bài viết của mình mang đến thông tin, kiến thức hữu ích cho bạn, đừng ngại mời mình ly bia để có thêm động lực chia sẻ nhiều hơn nữa. Cám ơn bạn!
Lỗi này anh: https://i.postimg.cc/yYZVRSV6/2024-07-11-080627.png
Cám ơn em. Cái này chắc do CSS nó chưa load hết. Anh thử trên nhiều máy rồi mà thấy không hiện ra lỗi giống vậy