Review 7 chủ đề WordPress tốt nhất cho Gutenberg cho năm 2022

Gutenberg lần đầu tiên xuất hiện cách đây vài năm và được cho là tương lai của chỉnh sửa trang trong WordPress. Và bây giờ, phiên bản mới nhất — Gutenberg 9.7 vừa được phát hành và chứng minh rằng nó không chỉ là tương lai của chỉnh sửa trang mà còn hơn thế nữa. Với Gutenberg và chủ đề WordPress dành cho người mới bắt đầu  — miễn phí hoặc trả phí, bạn có thể dễ dàng xây dựng trang web của mình với nhiều khối mạnh mẽ.

Vì vậy, chúng tôi đã nảy ra ý tưởng xem xét một số chủ đề WordPress tương thích với Gutenberg phổ biến nhất mà bạn có thể sử dụng làm chủ đề bắt đầu.

Những tính năng nào bạn cần trong một chủ đề WordPress tương thích với Gutenberg?

Một chủ đề tốt tương thích với Gutenberg phải đáp ứng các yêu cầu sau:

• Hiển thị tất cả các khối lõi Gutenberg một cách độc đáo
• Hỗ trợ các tính năng bổ sung như kích thước phông chữ, bảng màu, gradient nền, màu nền, …
• Đồng bộ hóa các cài đặt trong Customizer và kiểu trong Gutenberg
• Hỗ trợ các mẫu khối và hiển thị chúng tốt
• Hỗ trợ chỉnh sửa toàn trang. Tính năng này sẽ xuất hiện trên WordPress 5.8. Bây giờ, nó đang thử nghiệm. Nhưng hãy xem có chủ đề nào hỗ trợ nó chưa.

Bên cạnh đó, chúng ta sẽ xem chủ đề có plugin Gutenberg của riêng nó hay không và nó hoạt động như thế nào.

Dưới đây là đánh giá về một số chủ đề Gutenberg phổ biến nhất vào năm 2021. Hãy tin tôi, đánh giá là công bằng và không thiên vị.

Astra

Tất cả các bạn có thể nghe nói về chủ đề WordPress đa năng freemium nổi tiếng này ít nhất một lần. Cùng với khả năng tương thích mạnh mẽ với các trình tạo trang, bạn cũng có thể sử dụng Astra làm chủ đề khởi động Gutenberg. Bên cạnh đó, Astra có rất nhiều bản trình diễn cài sẵn cho bất kỳ loại trang web nào.

Hỗ trợ Core Gutenberg Blocks

Bên cạnh hỗ trợ tiêu chuẩn cho các khối Gutenberg cốt lõi, chúng có một số tính năng đặc biệt như hoạt ảnh nút:

Tuy nhiên, tôi nghĩ Astra nên chú ý hơn đến một số cải tiến nhỏ như lề của blockquote. Đây là phiên bản giao diện người dùng:

Và nó trông khác ở mặt sau:

Đồng bộ hóa Cài đặt trong Trình tùy chỉnh với Kiểu trong Gutenberg

Không có vấn đề gì với việc đồng bộ hóa giữa các cài đặt kiểu chữ trong Customizer và trình chỉnh sửa Gutenberg .

Ngay cả khi bạn thay đổi bố cục từ được đóng hộp thành toàn chiều rộng (hoặc ngược lại) trong Trình tùy chỉnh, bố cục trình chỉnh sửa cũng được thay đổi tương ứng:

Nhưng màu nền được đặt trong Trình tùy chỉnh không được đồng bộ hóa với màu nền trong trình chỉnh sửa Gutenberg.

Các mẫu khối

Các mẫu khối Gutenberg mặc định hiển thị tốt trong Astra.

Chỉnh sửa toàn trang

Chưa được hỗ trợ

Các tính năng khác

Trong khi cài đặt plugin đồng hành cho mỗi chủ đề, tôi nhận thấy rằng nếu bạn kích hoạt plugin Kadence Blocks, chiều rộng của bố cục trong Gutenberg sẽ bị ảnh hưởng.

Vì vậy, tôi nghĩ tốt hơn nên sử dụng o Ultimate Addons cho Gutenberg, plugin Gutenberg được Astra đề xuất. Sử dụng plugin này, bạn có thể có thêm hơn 30 khối.

Bên cạnh đó, Astra cung cấp cho bạn một số cài đặt bổ sung cho Gutenberg mà không cần plugin đồng hành. Không có nhiều tùy chọn ở đây nhưng bạn vẫn có thể đối phó với một số tính năng quan trọng tại đây:

Blocksy

Blocksy là tên của một chủ đề Gutenberg-base với hơn 10.000 cài đặt đang hoạt động trên wordpress.org. Hãy xem lại cách nó hoạt động với Gutenberg.

Hỗ trợ Core Gutenberg Blocks

Blocksy cũng hoạt động hoàn hảo với các khối Gutenberg cốt lõi và các tính năng như cài đặt màu sắc và phông chữ, độ dốc nền:

Các khối khác như báo giá và bìa hoạt động tốt:

Hơn nữa, chủ đề tương thích với Gutenberg miễn phí này đã thêm hiệu ứng thay đổi màu sắc để làm cho các nút trở nên sinh động hơn:

Đồng bộ hóa Cài đặt trong Trình tùy chỉnh với Kiểu trong Gutenberg

Blocksy có 3 bảng màu cho màu toàn cục và một số phần màu tùy chỉnh khác. Khi bạn tùy chỉnh màu sắc bằng Trình tùy chỉnh, bạn sẽ thấy sự thay đổi tương tự trong trình chỉnh sửa Gutenberg. Và kiểu chữ cũng vậy.

Các mẫu khối

Đối với các mẫu khối Gutenberg, Blocksy hỗ trợ cẩn thận tất cả chúng. Bạn có thể thấy rằng chủ đề này thậm chí còn thêm một số yếu tố để làm cho mô hình này trông đẹp mắt:

Nhưng tôi không thấy những yếu tố này ở mặt sau:

Chỉnh sửa toàn trang

Chưa được hỗ trợ.

Các tính năng khác

Blocksy có thêm một bảng để cài đặt bố cục, trông trực quan và tối giản để tôi có thể làm việc với nó một cách dễ dàng. Tôi cũng đã thử tất cả các tùy chọn trong tab bổ sung này và kết quả đã làm tôi hài lòng.

Bên cạnh đó, bạn có thể cài đặt plugin Getwid do Blocksy đề xuất để có hơn 40 khối Gutenberg và plugin Stackable để có thư viện các khối Gutenberg của trình tạo trang.

eStar

eStar là một chủ đề đa năng WordPress miễn phí mà chúng tôi đã tạo vào năm ngoái. Nó được tạo ra để thân thiện với SEO, tối ưu hóa mã và tương thích với nhiều trình tạo trang cũng như tất cả các khối Gutenberg.

Hỗ trợ Core Gutenberg Blocks

eStar hỗ trợ tất cả các cài đặt Gutenberg mặc định bao gồm màu và phông chữ tùy chỉnh:

Bên cạnh kích thước phông chữ phổ biến, bạn cũng có thể có một số kích thước đặc biệt như XL, 2XL, 3XL (tốt, giống như bạn đang mua quần áo)

Và đây là tùy chọn gradient:

Các khối Gutenberg cốt lõi khác được hỗ trợ tốt ở đây. Ví dụ, vẫn có hai kiểu mặc định cho blockquote nhưng eStar làm cho chúng trông khá đẹp và độc đáo:

Đồng bộ hóa các cài đặt trong Customizer với các kiểu trong Gutenberg

Về khía cạnh này, eStar cũng hỗ trợ tốt việc đồng bộ hóa giữa cài đặt Customizer và cài đặt Gutenberg.

Dưới đây là các cài đặt màu sắc và kiểu chữ trong Customizer:

Và ở đây, bạn có thể thấy rằng tất cả các cài đặt ở trên đều giống nhau ở mặt sau.

Các mẫu khối

Tôi đã thử nghiệm tất cả các mẫu khối được tạo sẵn từ Gutenberg và thấy rằng eStar hiển thị chúng tốt mà không có bất kỳ lỗi nào.

Chỉnh sửa toàn trang

Chưa được hỗ trợ.

Các tính năng khác

Nhìn chung, eStar khá dễ sử dụng. Nó có thiết kế và giao diện tối giản để mọi người có thể sử dụng chủ đề miễn phí này như một người mới bắt đầu Gutenberg.

Mặc dù eStar không chính thức hỗ trợ bất kỳ plugin nào của Gutenberg, nhưng bạn vẫn có thể kết hợp sử dụng chủ đề này với bất kỳ tiện ích bổ sung nào của Gutenberg. Bên cạnh đó, với ít hơn 10KB CSS và JS, eStar có thể là một trong những chủ đề nhẹ nhất mà bạn có thể tìm thấy bây giờ.

Bài đánh giá này của eStar sẽ cung cấp cho bạn thêm thông tin về chủ đề tương thích với Gutenberg miễn phí này.

GeneratePress

GeneratePress cũng là một chủ đề WordPress đa năng được thiết kế để phù hợp với mọi nơi và hoạt động với nhiều trình tạo trang phổ biến. Đây là đánh giá của GeneratePress về khả năng tương thích với Gutenberg của nó.

Hỗ trợ Core Gutenberg Blocks

GeneratePress hoạt động khá tốt với các khối Gutenberg cốt lõi. Nó hỗ trợ cài đặt màu sắc, cài đặt kích thước phông chữ, nền gradient, …

Đáng chú ý, GeneratePress thậm chí còn thêm một số hoạt ảnh vào nút:

Nhưng theme này nên chú ý đến một số yếu tố nhỏ hơn. Chẳng hạn như sự liên kết của khối và khoảng cách giữa hai khối bìa:

Màn hình của chúng ở mặt trước không giống như ở mặt sau.

Đồng bộ hóa Cài đặt trong Trình tùy chỉnh với Kiểu trong Gutenberg

Cũng giống như hầu hết các chủ đề Gutenberg-starter khác, GeneratePress có khả năng đồng bộ hóa cài đặt màu và phông chữ trong Customizer với các kiểu trong Gutenberg.

Đây là màu tùy chỉnh mà tôi đã thử nghiệm trong Customizer:

Nâng cấp tùy chỉnh kiểu chữ, GeneratePress chỉ cho phép bạn tùy chỉnh từ tiêu đề 1 đến tiêu đề 3:

Và đây là chính xác màu sắc và kiểu chữ ở Gutenberg:

Các mẫu khối

Không có vấn đề gì lớn với các mẫu khối Gutenberg mặc định hiển thị trong GeneratePress ngoại trừ bố cục 3 cột:

Chỉnh sửa toàn bộ trang web

Chưa được hỗ trợ.

Các tính năng khác

GeneratePress có một số cài đặt bố cục bổ sung trong trình chỉnh sửa Gutenberg:

Và nó khuyên bạn nên sử dụng plugin GenerateBlocks để có thêm 4 khối Gutenberg nâng cao. Số lượng khối bổ sung từ GenerateBlocks dường như ít hơn các plugin khác, nhưng mỗi khối có nhiều cài đặt nâng cao. Ví dụ: có nhiều lựa chọn cho bố cục lưới và nhiều tùy chọn trong thanh bên cài đặt:

Kadence

Chủ đề Kadence — từ Kadance WP, chủ sở hữu của plugin Kadence Blocks nổi tiếng — đã tham gia trò chơi vào giữa năm 2020. Nó có khoảng 9 mẫu được tạo sẵn ban đầu có thể được nhập khi bạn cài đặt Kadence Blocks và Kadence Starter Mẫu.

Hỗ trợ Core Gutenberg Blocks

Về cơ bản, Kadence hỗ trợ tốt các khối Gutenberg cốt lõi, bao gồm văn bản tùy chỉnh và màu nền, và kích thước phông chữ.

Bên cạnh đó, Kadence có nền gradient cho một số khối:

Đây là các blockquote và chúng tuân theo 2 kiểu mặc định của Gutenberg:

Sau đó, tôi đã xem xét khối nút, có 2 kiểu nút:

Và đây là nhóm nút trên giao diện người dùng. Tôi thấy rằng không gian giữa chúng hơi khác một chút so với phần cuối:

Đồng bộ hóa Cài đặt trong Trình tùy chỉnh với Kiểu trong Gutenberg

Tôi đã thử nghiệm một số tính năng như tùy chỉnh màu sắc và phông chữ.

Dưới đây là các kích thước phông chữ được đặt trong Customizer:

Và Kadence hiển thị chính xác các kích thước trên chương trình phụ trợ như trong Trình tùy chỉnh:

Đây là cài đặt màu trong Customizer:

Màu tương tự có thể được nhìn thấy trong trình chỉnh sửa Gutenberg. Và cài đặt màu của tất cả các khối được thay đổi theo Bảng tổng thể trong Bộ tùy chỉnh:

Các mẫu khối

Đã xảy ra lỗi khi hiển thị các mẫu khối 3 cột. Đây là ảnh chụp màn hình ở mặt sau.

Và đây là phiên bản lỗi trên giao diện người dùng:

Tôi đã liên hệ với nhóm hỗ trợ và họ cho biết “chúng tôi không có quyền kiểm soát cài đặt của nó. Điều tôi muốn khuyên là thêm mã CSS tùy chỉnh này để làm cho chiều rộng của khối cột theo chiều rộng nội dung của bạn”.

Chỉnh sửa toàn trang

Chưa được hỗ trợ.

Các tính năng khác

Kadence có nhiều cài đặt và tất cả các cài đặt có thể được áp dụng đúng cách. Giao diện dễ sử dụng và thao tác. Các tùy chọn định hướng để chỉnh sửa bố cục chung và một số vị trí cho một số yếu tố quan trọng.

Bên cạnh đó, Kadence cũng cung cấp một plugin đồng hành — Kadence Blocks. Sau khi cài đặt plugin Kadence Blocks, bạn sẽ có các khối được tạo sẵn nâng cao hơn từ chúng và một bảng bổ sung để kiểm soát cài đặt Kadence Blocks. Nhưng nhiều tab và bảng trên thanh bên phải có thể gây nhầm lẫn.

Để xem xét các tính năng khác, bạn có thể đọc bài đánh giá chủ đề Kadence này .

Neve

Neve là một chủ đề WordPress đa dụng có thể được sử dụng cho các trang web dựa trên Gutenberg. Nó cũng có nhiều bản demo khác nhau được xây dựng với Gutenberg để chọn khi bạn cài đặt plugin Cloud Templates and Patterns Collection.

Hỗ trợ Core Gutenberg Blocks

Khi tôi xem xét Neve, tôi tìm thấy một số vấn đề nhỏ.

Bạn có thể thấy lỗi với các dòng của mỗi đoạn trích dẫn ở mặt sau:

Trong khi chúng trông khác nhau ở giao diện người dùng:

Và căn chỉnh toàn chiều rộng không hiển thị chính xác trên giao diện người dùng:

Đồng bộ hóa Cài đặt trong Trình tùy chỉnh với Kiểu trong Gutenberg

Tất cả các cài đặt về màu sắc và phông chữ trong Customizer sẽ được áp dụng trong Gutenberg. Bạn có thể xem quá trình đồng bộ hóa mà tôi đã thử nghiệm tại đây:

Trong Neve, bạn có thể tùy chỉnh phần màu sắc khác nhau:

Đối với lựa chọn họ phông chữ, Neve chỉ cho phép bạn chọn một phông chữ họ cho tất cả các tiêu đề:

Các mẫu khối

Neve không gặp vấn đề gì với việc hiển thị các mẫu khối Gutenberg. Nó hỗ trợ tất cả các mẫu khá tốt.

Chỉnh sửa toàn trang

Chưa được hỗ trợ.

Các tính năng khác

Trong trình soạn thảo Gutenberg, bạn có thể dễ dàng tùy chỉnh bố cục và hiển thị bài đăng một cách dễ dàng với bảng cài đặt Neve. Giao diện của bảng cài đặt trực quan và rất dễ sử dụng.

Và sau khi bạn cài đặt plugin Gutenberg Blocks and Template Library do Neve đề xuất, bạn sẽ có những thứ sau:

Nếu bạn muốn đọc bài đánh giá chi tiết hơn về chủ đề tương thích với Gutenberg này, vui lòng xem bài đánh giá này của Neve.

OceanWP

OceanWP là một chủ đề nổi tiếng khác với tùy chọn tùy biến và tính linh hoạt cao. Chủ đề có khả năng mở rộng cao này cho phép bạn sử dụng các trình tạo trang khác nhau để tạo thiết kế của riêng bạn. Và chúng ta sẽ khám phá khả năng tương thích với Gutenberg của nó ngay bây giờ!

Hỗ trợ Core Gutenberg Blocks

Giống như các chủ đề khởi động Gutenberg khác ở trên, OceanWP hỗ trợ tốt tất cả các khối cốt lõi của Gutenberg. Không có vấn đề lớn được tìm thấy trong khi tôi thử nghiệm chủ đề này, chỉ là một số khác biệt nhỏ giữa một số khối trên giao diện người dùng và giao diện người dùng.

Đầu tiên, kiểu dáng nút rất đẹp. Nhưng nó không thể được nhìn thấy ở phía sau:

Và căn chỉnh theo chiều rộng đầy đủ không áp dụng đúng cách ngay cả khi tôi chọn bố cục rộng cho toàn bộ trang web:

Đồng bộ hóa Cài đặt trong Trình tùy chỉnh với Kiểu trong Gutenberg

OceanWP chưa hỗ trợ tính năng này. Đây là bằng chứng:

Cài đặt màu và phông chữ trong Gutenberg không giống như trong Customizer:

Và cả kiểu chữ:

Các mẫu khối

Tất cả các mẫu khối Gutenberg mặc định đều trông đẹp trong OceanWP.

Chỉnh sửa toàn trang

Chưa được hỗ trợ.

Các tính năng khác

Hiện tại, OceanWP chưa chính thức hỗ trợ bất kỳ plugin nào của Gutenberg. Tôi nghĩ rằng OceanWP vẫn tập trung vào các công cụ tùy biến khác ngoài Gutenberg.

Sự kết luận

Tất cả các chủ đề này đều linh hoạt và có khả năng tùy biến cao. Tất cả chúng đều hỗ trợ các tính năng cốt lõi của Gutenberg khá tốt và không có nhiều vấn đề.

Sau khi xem qua tất cả 7 chủ đề này, tôi lập bảng so sánh bên dưới để dễ quan sát hơn:

Hy vọng rằng bài đánh giá này phù hợp với bạn để bạn dễ dàng hơn trong việc chọn một chủ đề tương thích với Gutenberg phù hợp. Ngoài ra, nếu bạn không sử dụng Gutenberg, hãy thử một trình tạo trang và sử dụng một chủ đề cho trình tạo trang .