Thay áo mới cho blog: Kadence Theme

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.

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 đó.

Giao diện mới cho blog: Twenty Twenty + Twentig

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

1. Vào phần Customizer của trang nháp để Export thông số.
2. Vào trang chính, cài đặt và kích hoạt Kadence
3. 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!