Quay trở lại vào tháng 12 năm 2018, khi phiên bản WordPress 5.0 ra mắt nó đã gây tranh cãi với dự án Gutenberg của WordPress vào thời điểm đó khi ra mắt tính năng Block Editor. Gutenberg là tên gọi của một dự án dài hạn của WordPress nhằm nâng cấp trải nghiệm sử dụng trên trang, và được chia thành hai giai đoạn.
Đội phát triển chủ lực của WordPress là Automattic đã đặt ra kế hoạch phát triển dự án Gutenberg với bốn giai đoạn, bao gồm:
- Giai đoạn 1: Editing (hoàn tất) – Tập trung vào thay đổi nâng cấp tính năng chỉnh sửa nội dung, và kết quả là bạn có tính năng soạn thảo Block Editor đang sử dụng đây. Block Editor giúp bạn dễ dàng thiết kế lại nội dung tốt hơn bằng việc kết hợp các “block” được cung cấp.
- Giai đoạn 2: Customzation (đang diễn ra) – Ra mắt các tính năng liên quan đến việc tuỳ biến cả trang, và Full Site Editing là tính năng chủ lực giúp tăng cường trải nghiệm liền mạch trên website để tuỳ biến website, thông qua việc mở rộng các tính năng của Block Editor và bổ sung tính năng Site Editor.
- Giai đoạn 3: Collaboration – Tập trung phát triển các tính năng liên quan đến cộng tác, giúp nhiều người cùng tham gia chỉnh sửa website hiệu quả.
- Giai đoạn 4: Multilingual – Tập trung phát triển các tính năng hỗ trợ đa ngôn ngữ trên website. Lúc này việc hỗ trợ đa ngôn ngữ sẽ là tiêu chuẩn mặc định của WordPress
Trong bài này, mình sẽ tập trung hướng dẫn bạn từng bước về tính năng Full Site Editing (viết tắt là FSE) của WordPress để sử dụng nó tuỳ biến lại giao diện website WordPress của mình.
Full Site Editing là gì?
Full Site Editing (FSE) là tính năng chủ lực trong giai đoạn 2 của dự án Gutenberg, và được WordPress ra mắt ở phiên bản Lionel 6.3 ra mắt vào ngày 8/8/2023. FSE tập trung vào việc cải thiện khả năng tuỳ biến lại giao diện của website WordPress trở nên dễ dàng hơn mà không cần biết gì về lập trình cũng dễ dàng làm được.
Tạm thời bạn có thể hiểu ngắn gọn, Full Site Editing là tập hợp các tính năng giúp bạn thiết kế lại cả trang web WordPress bằng giao diện chỉnh sửa theo khối Block Editor mà ở bài trước chúng ta đã làm quen. Bạn sẽ cần phải nắm rõ cách sử dụng Block Editor trước khi tìm hiểu về FSE thì sẽ dễ hiểu hơn.
Xem thêm: Hướng dẫn Block Editor toàn tập
Và cái gì cũng có ưu và nhược điểm của nó, hiện tại khi tiếp xúc với FSE thì mình có một số ưu điểm và nhược điểm như bảng bên dưới.
| Ưu điểm | Nhược điểm |
| Dễ tiếp cận: Tích hợp vào core của WordPress, không cần can thiệp của theme hay plugin. Người dùng dễ dàng trải nghiệm FSE ngay khi mới cài xong website WordPress. | Khó tương thích: FSE chỉ hoạt động tốt trên các block themes, vì vậy nó sẽ không thể tương thích với các themes cổ điển khác hoặc themes sử dụng page builder khác. |
| Thiết kế linh hoạt: Dễ dàng tuỳ biến các thành phần trong website như header, footer, sidebar,…nhờ vào tính năng Templates. | Chưa phù hợp với các website phức tạp: FSE hiện chỉ khai thác tốt trên các website landing pages, blog, trang thông tin với cấu trúc đơn giản. Một số yêu cầu phức tạp hơn FSE có thể chưa đáp ứng được (nếu so với Elementor). |
| Nhẹ: FSE có giao diện sử dụng nhẹ nhàng, tải nhanh thay vì các giao diện phức tạp như Elementor. | Chưa có nhiều plugin hỗ trợ các block/pattern được thiết kế sẵn. Do đó một số yêu cầu phức tạp cũng cần phải tự code để xây dựng block riêng. |
| Tài nguyên đa dạng: Hiện tại WordPress đang có khoảng 1000 block themes hỗ trợ FSE, giúp bạn dễ dàng tìm kiếm một thiết kế phù hợp và tuỳ biến lại. | |
| Mở rộng tốt: FSE cũng cung cấp các API cho các dev-designer thiết kế sẵn các pattern hoặc các block. |
Do vậy, mình đánh giá FSE sẽ phù hợp với những người mới bắt đầu tìm hiểu về WordPress và cần một cách đơn giản nhất để tuỳ biến lại giao diện của mình.
Full Site Editing hoạt động như thế nào?
Bài viết mình sẽ lược bỏ qua một số hướng dẫn về thao tác, chẳng hạn như các thao tác kéo thả hay chỉnh sửa để bài không bị quá dài. Bạn nên xem qua video ở đầu bài để nắm thông tin chi tiết nhất.
Full Site Editing trong WordPress không phải là một chức năng, mà nó là tên gọi của tập hợp nhiều chức năng khác nhau, bao gồm Block Editor và khi kết hợp lại nó sẽ giúp bạn chỉnh sửa bất kỳ nơi nào trên trang.
Ngoại trừ Block Editor mình đã có một bài chi tiết về nó, thì dưới đây là một số tên tính năng mà bạn cần nắm rõ khi sử dụng FSE.
Site Editor (Trình thiết kế)
Site Editor như một sự thay thế hoàn toàn với tính năng Customizer trước đó, tại trang này bạn có thể tuỳ chọn các thiết lập Global Styles (màu sắc, font chữ) và điều hướng đến các templates để thiết kế lại.
khi nhấp vào phần cần thiết kế, nó sẽ chuyển đến giao diện Block Editor để thiết kế lại cả trang đó một cách liền mạch.
Templates (mẫu trang)
Trong FSE, tính năng Templates bạn sẽ sử dụng nhiều để thiết kế lại các giao diện bên trong website. Ví dụ bạn đang cần thay đổi lại giao diện hiển thị bài viết, thì bạn sẽ cần sửa template hiển thị bài viết trong WordPress, tên tiếng anh của template này là Single.
Có thể hiểu đơn giản Templates là các khuôn mẫu được thiết kế sẵn trong website tương ứng với các trang trong WordPress, ví dụ như:
- Trang chủ (Blog Home/Index).
- Trang hiển thị bài viết trong danh mục (Category Archives)
- Trang hiển thị nội dung bài viết (Single item)
- Trang hiển thị nội dung của Page (Pages)
- …
Nếu bạn thực hiện thay đổi thiết kế của một template, thì các trang đang sử dụng template đó cũng sẽ thay đổi theo.
Giờ đây bạn có thể xem lại các templates đã được thiết kế trong một giao diện Block Themes và tuỳ biến lại, hoặc tuỳ ý thiết kế một template mới.
Templates part (Thành phần mẫu trang)
Template parts là khuôn mẫu thiết kế của một thành phần trong trang và bạn sẽ muốn sử dụng nó nhiều lần trên các template khác nhau. Ví dụ mỗi trang đều có hai phần là Header (đầu trang) và Footer (chân trang), khi tạo trang bạn đều muốn chèn hai phần này vào và các phần đó sẽ được gọi là Template parts.
Tính năng này mình thấy tương tự với tính năng Pattern trong Block Editor, và hiện tại Site Editor nó cũng linh hoạt sử dụng pattern và template parts.
Tiếp cận với Full Site Editing
Các hướng dẫn về Full Site Editing bạn có thể tham khảo ChatGPT hoặc các bài viết khác trên mạng. Ở đây mình sẽ hướng dẫn bạn làm quen với FSE thông qua cách đi vào thực tế việc tuỳ biến lại một block themes như thế nào để bạn dần làm quen với FSE.
Bạn xem thêm video mình gắn ở đầu bài để xem chi tiết hơn nhé.
Bước 1. Lựa chọn và cài đặt Block Themes
Như mình có nói ở trên đó, là FSE sẽ phát huy tác dụng với các theme được thiết kế bằng Block Editor, các themes dạng này sẽ gọi là Block Themes. Dĩ nhiên là hiện nay cũng sẽ có các block themes miễn phí lẫn trả phí, nhưng block themes miễn phí hiện nay có số lượng nhiều hơn và cũng khá đẹp.
Để tìm block themes, bạn xem hai trang sau:
- https://fullsiteediting.com/themes/ – Trang này sẽ liệt kê một số block themes miễn phí có thiết kế đẹp và bắt mắt. Mình khuyến khích bạn nên xem qua trang này vì biết đâu tìm ra được một thiết kế như ý.
- https://wordpress.org/themes/tags/full-site-editing/ – Thư viện block themes miễn phí trên trang chủ WordPress.
Hoặc bạn có thể thử trải nghiệm FSE trên theme mặc định của WordPress hiện nay.
Khi xem một block themes miễn phí trên thư viện của WordPress, bạn sẽ xem được thiết kế tổng thể của theme đó, và các pattern và pallete màu được cung cấp sẵn. Mình cảm thấy yêu thích FSE chỉ đơn giản là trải nghiệm xem demo quá đỉnh.
Sau khi bạn chọn được block themes phù hợp và muốn cài đặt, thì chỉ cần tìm theme đó theo tên trong tính năng cài theme miễn phí của WordPress, hoặc là tải theme đó về máy và cài đặt thủ công.
Cũng có một điều cần lưu ý thêm với bạn, đó là nhiều block themes hiện nay họ cung cấp hoàn toàn miễn phí, nhưng họ sẽ có thêm một plugin đi kèm để bạn sử dụng nhiều block hơn, trong đó sẽ cung cấp thêm các block miễn phí và một số block đặc biệt sẽ cần bạn phải nâng cấp lên phiên bản trả phí.
Do đó, khi cài xong một block themes bạn sẽ thường bắt gặp một số thông báo kiểu như bên dưới và bạn cứ cài đặt theo khuyến nghị của họ nhé, miễn là nó miễn phí.
Trong hướng dẫn này mình chọn theme Raft vì thiết kế đẹp, lại có plugin đi kèm khá ngon, có hỗ trợ thêm CSS tuỳ chỉnh vào từng block.
Bước 2. Tuỳ chỉnh Style (màu sắc, font chữ)
Sau khi cài đặt xong block themes thì trang chủ của bạn sẽ hiển thị ra ngay theo thiết kế của nó. Bây giờ bạn có thể bắt đầu tuỳ chỉnh lại màu sắc và font chữ nếu như có nhu cầu tuỳ biến lại phần này.
Trong block themes sẽ được quy định sẵn các styles hiển thị, trong một style sẽ bao gồm thiết lập màu sắc và font chữ tương ứng. Tuỳ theo theme mà nó sẽ có ít hoặc nhiều styles.
Để tuỳ chỉnh hoặc chọn lại styles, bạn vào Appearance => Editor => Styles.
Trong đây sẽ có các style để bạn lựa chọn, và sẽ cung cấp tuỳ chọn chỉnh sửa style hoặc xem thiết kế của style đó trên các block cơ bản.
Khi ấn chỉnh sửa Styles bạn sẽ được chuyển tới giao diện chỉnh sửa Block Editor trên trang và truy cập sẵn vào phần Styles. Bạn cũng có thể chủ động truy cập vào sửa style tại nút có biểu tượng 
trên thanh công cụ Block Editor.
Tại đây sẽ có phần Typography để chỉnh sửa lại font chữ, và Colors để chỉnh sửa lại màu sắc trong style hiện tại. Bạn cũng có thể vào phần Layout để điều chỉnh lại thông số dàn trang trên web.
Trong FSE hay Block Editor, các phần tử sẽ được gọi là Element và khi thay đổi, bạn sẽ thay đổi cho từng phần tử mong muốn. Ví dụ như việc thay đổi font chữ, khi nhấp vào bạn sẽ chọn các element có hỗ trợ đổi font chữ để thiết lập lại.
Thêm Google Fonts hoặc upload font
Với FSE bạn có thể dễ dàng khai báo các font miễn phí của Google Fonts vào website để sử dụng. Tại giao diện thiết lập Typography trong style, bạn chọn nút cài đặt font.
Sau đó bạn vào Install Fonts và cho phép kết nối với Google Fonts.
Sau đó bạn tìm tên font trên Google Fonts cần sử dụng và cài nó vào. Khi cài bạn sẽ chọn các biến thể font tuỳ theo nhu cầu sử dụng, thường thì mỗi font bạn nên chọn biến thể chữ thường, chữ đậm, in nghiêng tuỳ theo font đó cung cấp các biến thể nào.
Sau khi cài xong thì bạn sẽ thấy font xuất hiện trong danh sách font được hỗ trợ trong theme và có thể sử dụng ngay bây giờ.
Bước 3. Tuỳ biến template
Thường thì các block themes sẽ có trang chủ được thiết kế bằng một template và hiển thị nhiều nội dung chứ không chỉ có bài viết. Nếu bạn muốn thay đổi nội dung của trang chủ thì sẽ cần thay đổi lại template của nó, bằng cách ở trang chủ bạn nhấp vào nút Edit Site phía trên thanh công cụ quản trị.
Sau đó bạn được chuyển tới giao diện Block Editor để chỉnh sửa template của trang này. Bạn nên lưu ý, tại bất kỳ trang nào nếu bạn bấm nút Edit Site thì nó sẽ là thay đổi template của trang đó, không phải chỉ là nội dung của trang đó.
Trong giao diện thay đổi template, bạn cần lưu ý phần hiển thị các template part có dùng trong template này tại phần Areas. Mục đích là bạn sẽ biết được trang này đang sử dụng các template nào, và dễ dàng điều hướng đến đó.
Và việc của bạn tại trang này là kết hợp các block của Block Editor mà thay đổi lại nội dung hoặc thiết kế lại.
Chắc chắn rồi, bạn có thể vào xem và sửa lại các template khác trên trang Appearance => Editor => Templates.
Thao tác tạo template mới
Các block themes đều có các template mặc định để hiển thị thiết kế ra bên ngoài. Nhưng nếu bạn tạo ra một template tại khu vực giống như vậy thì nó sẽ thực hiện ghi đè lên. Ví dụ trong themes đã có template cho trang chủ, nhưng nếu bạn tạo ra một template trang chủ mới thì nó sẽ hiển thị trang chủ sử dụng template của bạn tạo ra.
Tại giao diện quản lý template tại Appearance => Editor => Templates, bạn ấn nút Add New Template để tạo ra một template mới. Khi tạo template, bạn sẽ chọn thành phần mà templates sẽ áp dụng bao gồm:
- Blog Home: Trang chủ của website.
- Pages: Hiển thị nội dung chi tiết của Page.
- Author Archives: Trang lưu trữ các bài viết của tác giả.
- Category Archives: Trang lưu trữ bài viết trong danh mục.
- Date Archives: Trang lưu trữ bài viết phân loại theo ngày tháng năm.
- Tag Archives: Trang lưu trữ bài viết của Tag.
- Single item – Post: Trang hiển thị nội dung của một nội dung, ở đây là Post. Nếu bạn có nhiều post type khác trong website thì sẽ có thêm tuỳ chọn khai báo template.
- Custom template: Chọn nếu bạn cần khai báo một template mà sẽ cần áp dụng thủ công khi soạn bài viết hoặc page.
Sau khi tạo ra template, bạn sẽ được chuyển tới giao diện Block Editor và thường là trang sẽ trống hoàn toàn, lúc này bạn sẽ cần khai báo các pattern hoặc template part cần sử dụng. Thao tác này bạn tham khảo trong video hướng dẫn của mình ở đầu bài này.
Bước 4. Tuỳ biến template part header và footer
Một thành phần bạn sẽ cần quan tâm thay đổi trước sau khi cài đặt, là thay đổi lại nội dung hoặc thiết kế của thành phần header (đầu trang) và footer (chân trang). Các block themes đều có sẵn các thiết kế cho phần này, nên để chỉnh sửa bạn sẽ truy cập vào mục Appearance => Editor => Patterns và xem tại mục Template parts.
Theo theo theme đang dùng mà bạn có số lượng template của phần header và footer khác nhau, như hình trên thì theme của mình đang có sẵn 2 thiết kế sẵn cho phần header và footer. Để thay đổi bạn chọn vào phần cần chỉnh sửa, rồi chọn template mà bạn cần thay đổi.
Trong giao diện chỉnh sửa, bạn nên bật chế độ List View lên để xem các thành phần trực quan hơn thay vì nhấp chọn trên màn hình.
Bây giờ việc của bạn là kết hợp với kiến thức Block Editor để khai báo thêm các block cần sử dụng, hoặc chia cột. Ở mỗi block khi bạn chọn, bạn nên xem qua tất cả các tuỳ chọn của nó, đồng thời kiểm tra phần style của riêng block đó xem có các thiết lập nào khác mà bạn đang tìm kiếm hay không.
Nếu bạn có muốn biết cách tạo một header cố định luôn cuộn theo trang (sticky header) thì hãy xem qua hướng dẫn này nhé, khá hay.
Thao tác sửa menu
Một thao tác mình nghĩ ai cũng làm đó là thay đổi menu ở trên header. Các block themes đều có block tên Navigation đặt trên template part Header để hiển thị các liên kết trong menu. Để sửa nó, bạn mở chế độ list view và chọn Navigation. Sau đó ở giao diện tuỳ chọn block bên tay phải, bạn thao tác sửa các liên kết trong menu.
Thường thì trên menu, bạn sẽ sử dụng block Custom Link để chèn một liên kết, hoặc block Buttons để chèn nút bấm,…
Bạn có thể thực hiện thay đổi vị trí của liên kết trên menu bằng cách kéo thả các mục trong đây, hoặc xây dựng một menu đa tầng có hiệu ứng đổ xuống bằng cách kéo nó và thả vào thành phần bạn muốn nó làm phần tử con.
Thêm một template part mới
Trường hợp bạn cần thiết kế lại header hay footer (hoặc tạo ra template part theo mong muốn) thì có thể tạo một template part mới tại giao diện Patterns => Add New Pattern, sau đó chọn Add New Template Part.
Và bạn chọn loại template part cần tạo ra bao gồm:
- General: dùng để tạo một thành phần hiển thị thông tin mà không gắn liền vào một khu vực nào đó trên website, ví dụ như một thành phần kêu gọi mua hàng/hành động (CTA), hiển thị thông tin tác giả,…
- Header: Loại template part hiển thị đầu trang.
- Footer: Loại template part hiển thị chân trang.
Bước 5. Thêm CSS tuỳ chỉnh
Nếu bạn có sẵn các kiến thức về CSS thì sẽ rất hữu ích khi có thể áp dụng nó vào trong FSE. Trong giao diện Block Editor, bạn có thể chuyển qua mục tuỳ chọn Styles, sau đó bấm vào biểu tượng 3 chấm và chọn Additional CSS.
Tuy nhiên nhược điểm của tính năng này là bạn buộc phải tự khai báo vùng chọn và áp dụng cho toàn bộ style đang sử dụng.
Nếu bạn cần thêm tính năng tuỳ chỉnh CSS riêng cho từng block thì có thể sẽ cần sử dụng thêm plugin Blocks CSS: CSS Editor for Gutenberg Blocks, ngoài ra nó còn hỗ trợ bạn viết từ khoá vùng chọn là selector thay vì phải tự viết vùng chọn thủ công (giống Elementor Pro).
Hướng dẫn một số Block trong tuỳ biến giao diện
Các block cơ bản và thường dùng trong soạn nội dung mình đã có hướng dẫn chi tiết trong bài về Block Editor trước đó. Trong bài này mình sẽ tập trung giới thiệu qua một số block mà bạn có thể cần đến khi thực hiện tuỳ biến giao diện website.
Các block liên quan đến việc tuỳ biến website trong FSE bạn có thể xem nó tại mục Theme trong giao diện quản lý block.
Hướng dẫn block: Query Loop
Query là một khái niệm hơi nâng cao mà mình đã có một bài và video rất chi tiết về query trong WordPress. Ở đây bạn có thể tạm thời hiểu một block query loop sẽ lấy các nội dung trong website để hiển thị ra bên ngoài một cách độc lập.
Ví dụ cụ thể để sử dụng Query Loop là bạn đang thiết kế trang chủ, bạn muốn có hai phần hiển thị bài viết trong một chuyên mục nào đó ra bên ngoài. Thì lúc này bạn sẽ cần hai block query loop để lấy bài viết trong hai chuyên mục hiển thị ra bên ngoài.
Tham khảo thêm: Tài liệu về block Query Loop trên WordPress
Để gọi block này, bạn chèn Query Loop vào nội dung như hình bên dưới.
Sua đó bạn sẽ cần phải chọn pattern đã được thiết kế trước đó để hiển thị bài viết, hoặc ấn nút Start Blank để tạo mới.
Sau khi tạo mới pattern thì nó sẽ cung cấp bạn một số mẫu thiết kế sẵn, bạn cứ chọn một mẫu nào đó gần giống với yêu cầu của mình.
Sau đó nó sẽ hiển thị ra phần bài viết với mẫu tương ứng, bạn có thể bỏ bớt một số block không cần thiết, ví dụ như block phân trang.
Và quan trọng nè, là bạn sẽ cần cấu hình query này để lấy bài viết theo mong muốn. Bạn nhìn qua phần tuỳ chọn block này sẽ thấy một số tuỳ chọn cần lưu ý như sau:
- Inherit query from template: Nếu bạn bật tuỳ chọn này lên, thì phần hiển thị bài viết nó sẽ sử dụng query hiện tại trên trang. Mỗi trang của WordPress đều có query riêng, ví dụ như bạn đang ở trang hiển thị nội dung bài viết thì query hiện tại của nó là lấy dữ liệu của bài viết hiện tại đang xem, nếu bạn đang ở trang category thì query của nó là gọi bài viết trong category đó. Vì vậy nếu bạn cần tạo một phần hiển thị bài viết tuỳ chỉnh thì không nên bật tuỳ chọn này.
- Post Type: Chọn loại post type cần lấy dữ liệu (Post, Page, Product,…)
- Order By: Kiểu sắp xếp bài viết
- Sticky Post: Bao gồm hoặc không bao gồm các bài viết đánh dấu là chú ý (sticky post)
Và còn một khu vực tuỳ chọn quan trọng nữa đó là Filters, giúp bạn lọc bài viết thông qua một số điều kiện như sau:
Taxonomies
Loc bài viết theo phân loại bài viết (category) và tag. Khi chọn tuỳ chọn này bạn sẽ khai báo tên của category hoặc tag (hoặc một phân loại nào đó dựa vào tính năng hiện tại trên website đang có). Để sử dụng, bạn chỉ cần nhập từ khoá tên của phân loại là nó sẽ tự gợi ý để bạn chọn.
Authors
Lọc bài viết theo tên tác giả nào đó.
Keywords
Lọc bài viết dựa theo từ khoá tìm kiếm. Ví dụ bạn nhập từ khoá “wordpress” vào thì nó sẽ hiển thị các bài viết có từ khoá “wordpress” trong tiêu đề.
Hướng dẫn block: Group
Group là một block vô cùng hiệu quả để bạn sử dụng cho mục đích tạo một khu vực thiết kế nào đó, nó sẽ tự gom nhóm lại và bạn có thể dễ dàng chọn kiểu dàn trang của các thành phần bên trong nó.
Ví dụ mình muốn tạo một khung hiển thị dạng lưới (grid) để hiển thị các chữ theo ô lưới, thì chỉ cần sử dụng Group để tạo ra một nhóm Grid và bắt đầu thiết kế thôi. Trong group, bạn muốn chuyển qua khu vực khác thì chỉ cần ấn phím enter là nó sẽ chuyển qua khu vực mới. Cái này bạn xem video của mình để rõ hơn nhé.
Một số plugin bổ sung block cho FSE
Khi cài một số block themes họ sẽ có gợi ý bạn cài thêm các plugin của họ, mục đích là mở rộng một số block hay ho khác để có nhiều công cụ thiết kế hơn. Dưới đây là một số plugin bạn có thể tham khảo một số plugin bạn có thể cài vào để mở rộng các block cho mình.
Tốt nhất bạn chỉ nên cài 1 hoặc tối đa là 2 plugin thôi nhé. Các plugin dưới đây đều miễn phí và luôn có tuỳ chọn trả phí để sử dụng một số block thiết kế sẵn đẹp hơn, nhiều tính năng hơn, nhưng tính năng miễn phí vẫn đủ dùng.
Bạn có thể tìm thêm plugin với từ khoá “Gutenberg blocks” hoặc “FSE blocks“, ở đây mình chỉ gợi ý 3 plugin mà mình đã cài vào và thử nghiệm rồi thôi.
KadenceWP không chỉ cung cấp một số block có thể sử dụng miễn phí, mà họ còn cung cấp thêm các block themes từ đơn giản đến chuyên nghiệp để bạn có được một thiết kế ưng ý.
Spectra (còn có một tên khác là Ultimate Addons for Gutenberg)
Spectra cung cấp hơn 30 blocks miễn phí khác nhau để bạn tuỳ biến website, đặc biệt là hỗ trợ các block liên quan đến WooCommerce nếu bạn có dự định thiết kế một giao diện tương thích với plugin WooCommerce để làm trang bán hàng.
Con plugin này cũng có nhiều block hay ho, ví dụ như block Off canvas. Mình cài theme Raft được gợi ý cài plugin này dùng thấy cũng ổn áp.
Block Themes Generator – Công cụ tạo Block Themes
Mặc dù bài này mình sẽ chưa nói qua về hướng dẫn chi tiết quá trình tự thiết kế một giao diện website với FSE, tuy nhiên nếu bạn có muốn tự tạo ra một block themes cơ bản mang tên của riêng bạn để bắt đầu thiết kế từ đầu thì có thể sử dụng công cụ Block Themes Generator của trang FullSiteEditing.Com.
Cách sử dụng cực đơn giản, bạn chỉ cần khai báo tên theme và tên tác giả cần tạo ra, chọn sẵn một số màu cơ bản và chọn loại theme (từ cơ bản đến nâng cao) và bấm nút generate là xong, nó sẽ tự tải về máy bạn một tập tin .zip của theme.
Sau đó bạn cài nó vào website và bắt đầu chỉnh sửa thôi. Giao diện mặc định của theme tự tạo này nó sẽ hiển thị đơn giản như bên dưới, việc của bạn còn lại là tự thiết kế nhé.
Kết bài
Ở trên là các thao tác sử dụng các tính năng Full Site Editing trong WordPress để tuỳ biến hoặc thiết kế lại giao diện website cho riêng mình, mà không cần phải biết lập trình.
Nếu bạn là một người sử dụng phổ thông, có thể nói rằng giao diện của bạn sẽ phụ thuộc vào block themes bạn chọn như thế nào. Do vậy, ở bước chọn block themes bạn lưu ý nên chọn các themes có nhiều tính năng đi kèm (giống như theme Raft mình đã sử dụng trong bài này).
Nếu bạn có muốn biết cách triển khai một giao diện tự thiết kế hoàn toàn với FSE như thế nào thì mình sẽ có bài viết này vào thời điểm khác.
