Gutenberg là gì? Cách Cài Đặt & Sử Dụng Block Editor Gutenberg

Gutenberg WordPress là công cụ được tích hợp sẵn trong phiên bản mới nhất của WordPress. Với sức mạnh của block-based, Gutenberg cung cấp cho người dùng khả năng tạo và quản lý nội dung trang web một cách dễ dàng và linh hoạt hơn bao giờ hết.

Gutenberg WordPress là gì?

Gutenberg là một trình soạn thảo nội dung trực quan được tích hợp sẵn trong WordPress. Gutenberg được giới thiệu từ phiên bản WordPress 5.0 và trở thành trình soạn thảo mặc định thay thế cho trình soạn thảo cũ của WordPress.

Gutenberg được thiết kế để cung cấp cho người dùng một trình soạn thảo nội dung trực quan và linh hoạt hơn, cho phép họ tạo ra các bài viết và trang web phong phú hơn với các khối nội dung khác nhau như văn bản, hình ảnh, video, biểu mẫu và nhiều loại khối khác nhau một cách dễ dàng, linh hoạt hơn so với trình soạn thảo cũ của WordPress.

Quan tâm: Thuê WordPress Hosting giá Rẻ tại LANIT

Đánh giá về Gutenberg

Nếu bạn đang sử dụng Classic Editor, có thể bạn đang tự hỏi liệu có nên chuyển sang Gutenberg hay không. Trong khi đó, nếu bạn mới bắt đầu sử dụng cả hai trình soạn thảo, bạn có thể muốn biết liệu Gutenberg có phải là tùy chọn tốt hơn hay không.

Hãy cùng xem xét các ưu và nhược điểm của Gutenberg!

Ưu điểm

Trình soạn thảo Gutenberg của WordPress có nhiều ưu điểm đáng chú ý.

• Giao diện người dùng trực quan: Gutenberg cung cấp một giao diện trực quan và dễ sử dụng cho việc tạo và chỉnh sửa nội dung trên WordPress. Nó sử dụng khối (blocks) để xây dựng cấu trúc trang, cho phép người dùng dễ dàng kéo và thả các phần tử để tạo nên trang web một cách linh hoạt.
• Kiểm soát bố cục linh hoạt: Gutenberg cho phép bạn tạo ra các bố cục phức tạp bằng cách sắp xếp các khối theo ý muốn. Bạn có thể tạo ra các bố cục đa cột, thay đổi kích thước và vị trí của các khối, và thậm chí tùy chỉnh các khối riêng lẻ.
• Tích hợp đa phương tiện tốt hơn: Gutenberg cung cấp tích hợp đa phương tiện tốt hơn, cho phép bạn dễ dàng chèn hình ảnh, video và các tệp đa phương tiện khác vào nội dung của bạn. Bạn có thể kéo và thả các tệp tin vào trình soạn thảo hoặc tải lên từ máy tính của mình.
• Mở rộng qua các khối bổ sung: Gutenberg có thể được mở rộng thông qua việc cài đặt các khối bổ sung. Cộng đồng WordPress đã phát triển nhiều khối bổ sung (block plugins) để bổ sung các tính năng và khả năng tùy chỉnh cho trình soạn thảo.

Nhược điểm

Tuy nhiên, trình soạn thảo Gutenberg cũng có một số nhược điểm.

• Đầu tiên là nó chưa có hỗ trợ ngôn ngữ đánh giấu Markdown.
• Với việc ra mắt một giao diện soạn thảo hoàn toàn mới, người dùng cần mất thời gian để làm quen và học cách sử dụng Gutenberg. Điều này có thể tạo ra một độ dốc học tập ban đầu và gây khó khăn cho những người không quen với trình soạn thảo mới.
• Bố cục responsive vẫn chưa được tích hợp và người dùng vẫn phải sử dụng trình soạn thảo văn bản cũ do chưa được tích hợp phần giao diện trước đó cũng như là plugin.
• Hạn chế tùy chỉnh: Mặc dù Gutenberg cung cấp một số tính năng tùy chỉnh, nhưng nó vẫn có hạn chế so với trình soạn thảo truyền thống. Điều này có thể khiến những người có nhu cầu tùy chỉnh phức tạp cảm thấy bị hạn chế.
• Tốc độ tải trang: Do tính linh hoạt và tích hợp đa phương tiện của Gutenberg, trang web sử dụng Gutenberg có thể có tốc độ tải trang chậm hơn so với trình soạn thảo truyền thống. Điều này gây ảnh hưởng lớn đến trải nghiệm người dùng và làm giảm sức mạnh SEO.

Mặc dù có những nhược điểm, nhưng trình soạn thảo Gutenberg đang được cải tiến và bổ sung nhiều tính năng nâng cao hơn rất nhiều. Vì vậy, nó vẫn là một công cụ rất hữu ích cho những cá nhân hoạt động ở nền tảng website và đang được sử dụng rộng rãi.

Cách cài đặt Blocks Editor Gutenberg nhanh chóng

Gutenberg là trình soạn thảo mặc định của WordPress kể từ phiên bản cập nhật 5.0, vì vậy bạn chỉ cần cài đặt WordPress và bạn đã có thể tiếp cận và sử dụng Gutenberg một cách dễ dàng. Trong trường hợp WordPress của bạn không có Blocks Editor Gutenberg, bạn có thể thể cài đặt Blocks Editor Gutenberg theo các bước sau:

• Bước 1: Đăng nhập vào trang admin WordPress của bạn.
• Bước 2: Nhấp vào menu Plugins trên thanh điều hướng bên trái.
• Bước 3: Nhấp vào nút Add New để tìm kiếm plugin.

• Bước 4: Trong ô tìm kiếm, nhập từ khóa “Gutenberg” và nhấn Enter.

• Bước 5: Khi kết quả tìm kiếm xuất hiện, tìm và chọn Gutenberg.
• Bước 6: Nhấp vào nút Install Now để bắt đầu cài đặt.

• Bước 7: Sau khi hoàn tất cài đặt, nhấp vào nút Activate Plugin để kích hoạt Gutenberg.

• Bước 8: Bây giờ bạn đã có thể sử dụng Blocks Editor Gutenberg để tạo và chỉnh sửa bài viết trên trang web WordPress của bạn.

Lưu ý: Đảm bảo rằng phiên bản WordPress của bạn đang chạy là phiên bản mới nhất để đảm bảo tính tương thích tốt nhất với Blocks Editor Gutenberg.

Cách hoạt động của WordPress Editor – Gutenberg

WordPress Editor – Gutenberg hoạt động bằng cách sử dụng khái niệm “khối” (blocks) để xây dựng và tổ chức nội dung trên trang web. Mỗi khối là một thành phần độc lập mà người dùng có thể tùy chỉnh và điều khiển, cung cấp sự kiểm soát và linh hoạt sâu sắc.

Người dùng có thể tìm thấy tất cả các khối bằng cách nhấp vào biểu tượng Block Inserter +, và chúng được liệt kê trong một bảng có thể gập lại theo cấu trúc của chúng. Mỗi khối có một cấu hình và các công cụ thiết kế khác nhau, cho phép người dùng tùy chỉnh các thành phần khác nhau của bài viết hoặc trang web, chẳng hạn như màu sắc, kiểu chữ, kích thước hình ảnh và nhiều hơn nữa.

Với các bản cập nhật mới nhất của WordPress, trình soạn thảo Gutenberg cung cấp nhiều tính năng mới để hỗ trợ chỉnh sửa toàn bộ trang web, cho phép người dùng chỉnh sửa và điều hướng giữa các mẫu, các phần tử và tùy chọn kiểu dáng.

Chế độ chỉnh sửa mẫu cho phép người dùng trực tiếp chỉnh sửa, thay đổi và tạo mẫu cho bài viết hoặc trang. Người dùng cũng có thể xây dựng chủ đề WordPress bằng các khối tương thích với FSE và sửa đổi kiểu dáng ở ba cấp độ: sửa đổi toàn cục, khối cục bộ và mặc định của chủ đề. Ngoài ra, người dùng có thể tạo các mẫu truyền thống bằng cách sử dụng thẻ mẫu và chỉnh sửa cấu trúc và thiết kế của menu điều hướng trang web.

Gutenberg cũng bao gồm các mẫu khối được sắp xếp sẵn, chứa các bố cục nhiều cột, bố cục nút và bố cục hình ảnh. Nếu người dùng có kinh nghiệm với WordPress, họ có thể xây dựng các khối WordPress riêng và các mẫu khối và chia sẻ chúng với người khác thông qua các plugin. Tất cả những tính năng này đều giúp người dùng có thể tùy chỉnh và kiểm soát nội dung trang web của họ một cách chính xác và dễ dàng hơn.

Xem thêm: HTML là gì? Đặc Điểm Vai Trò Của HTML trong Lập Trình Web

Bố cục giao diện Blocks Editor WordPress – Gutenberg

Trong giao diện Editor Gutenberg của WordPress, người dùng cần lưu ý đến các điểm sau:

• Khu vực (A): Thêm Blocks mới
• Khu vực (B): Undo, Re-undo
• Khu vực (C): Thông tin bài viết
• Khu vực (D): Chỉnh sửa khối
• Khu vực (E): Công bố, nháp
• Khu vực (F): Khu vực soạn thảo

Bố cục cơ bản của Gutenberg được chia ra làm bốn nhóm chính gồm:

• Common Blocks
• Formatting Blocks
• Layout Blocks
• Widgets

Giao diện của Gutenberg khá đơn giản và dễ sử dụng, với các thao tác kéo thả các block để tạo nội dung bài viết thay vì sử dụng các code hay HTML cầu kỳ và phức tạp.

Hướng dẫn sử dụng Block Editor trên WordPress

Xây dựng và quản lý trang web WordPress bằng trình chỉnh sửa Gutenberg khá dễ dàng. Để giúp bạn bắt đầu chỉnh sửa toàn bộ trang web, các phần tiếp theo sẽ cung cấp hướng dẫn về cách tạo và chỉnh sửa khối.

Cách thêm một khối mới

Bước đầu tiên khi đăng bài là thêm một khối mới, điều này tương đối dễ dàng khi sử dụng trình chỉnh sửa Gutenberg WordPress. Hãy nhớ rằng khối đầu tiên của mỗi trang hoặc bài đăng là tiêu đề. Hãy làm theo các bước sau để thêm một khối mới:

• Chọn biểu tượng Block Inserter+ trên thanh công cụ trên cùng.

• Chọn loại khối bạn muốn. Trong ví dụ này, chúng tôi sẽ chọn Quote.

• Để thêm nhiều khối bên dưới Quote, chỉ cần nhấp vào biểu tượng +, như hình bên dưới. Hãy nhớ rằng bất cứ khi nào bạn nhấn Enter, trình chỉnh sửa khối WordPress sẽ tự động thêm một khối đoạn văn mới.

• Bạn sẽ thấy một bảng hiển thị các khối được sử dụng thường xuyên. Để tìm kiếm một khối cụ thể, hãy sử dụng thanh tìm kiếm hoặc nhấp vào Browse all.

Cách tùy chỉnh khối

Tùy chỉnh tất cả các khối bên trong trình chỉnh sửa khối WordPress sẽ được thực hiện như sau:

• Nhấp vào biểu tượng + trên thanh công cụ trên cùng để mở giao diện Block Inserter.
• Chọn một khối. Trong ví dụ này, chúng tôi sẽ chọn khối Buttons.

• Khi button được thêm vào, cài đặt khối sẽ xuất hiện. Ngoài ra, nhấp vào Cài đặt ở góc trên cùng bên phải của trình chỉnh sửa để mở bảng điều khiển Sidebar.

• Trên cài đặt Khối, có hai tab khác nhau. Trong tab cài đặt, bạn có thể điều chỉnh Width Settings, nằm trong khoảng từ 25% đến 100%.

• Ở bên dưới, bạn sẽ tìm thấy phần Advanced để thêm Liên kết rel, HTML anchor và (các) lớp CSS bổ sung.

• Bạn có thể thay đổi giao diện của button trong tab Styles. Điều chỉnh Fill hoặc Outline trong phần Color. Có thể thay đổi bảng màu của văn bản và nền của button.

• Trên cài đặt Typography, bạn có thể xác định kích thước nút bằng cách sử dụng tùy chọn mặc định hoặc kích thước tùy chỉnh.

• Trên cài đặt Border, điều chỉnh đường viền của nút bằng cách di chuyển, kéo dấu chấm.

Cách tùy chỉnh các khối thông qua Global Styles Settings

Các bước trên cho phép bạn thay đổi giao diện của các Khối riêng lẻ. Tuy nhiên, có một cách để áp dụng các thay đổi cho toàn bộ trang thông qua Global Styles Settings. Để thực hiện, hãy điều hướng đến Appearance => Editor. Thao tác này sẽ đưa bạn đến giao diện Trình chỉnh sửa trang web.

Tiếp theo, chọn một template để chỉnh sửa, chẳng hạn như trang chủ hoặc một trang bài đăng. Khi bạn chọn template, hãy nhấp vào nút Kiểu ở góc trên cùng bên phải.

Để thay đổi styles của các khối cụ thể cho toàn bộ trang web, hãy nhấp vào Khối và chọn khối bạn muốn điều chỉnh.

Bạn có thể thay đổi các thành phần trực quan của khối, bao gồm màu sắc, kiểu chữ và kiểu đường viền. Hãy nhớ rằng một số khối sẽ có nhiều yếu tố tùy chỉnh hạn chế hơn.

Cách thêm tiêu đề và văn bản

Bước tiếp theo khi xây dựng mộsite paget trang của site là thêm đầu đề và văn bản. Các tiêu đề xác định mức độ quan trọng của nội dung và cách các ý nhỏ được liên kết với nhau.

• Chọn biểu tượng + trên thanh công cụ trên cùng.
• Danh sách các khối WordPress có sẵn sẽ xuất hiện. Nhấp vào Heading (Tiêu đề).

• Bạn có thể tùy chỉnh giao diện của nó bằng block toolbar.

• Để thêm các thành phần văn bản khác, hãy chọn một tùy chọn từ phần Text trong các khối có sẵn. Chúng tôi sẽ chọn Paragraph (Đoạn văn).

• Nó sẽ trông như thế này:

Cách thêm hình ảnh và media

Trình chỉnh sửa khối cung cấp hai cách để thêm hình ảnh vàmediaa vào trang web của bạn, thông qua Block Inserter hoặc biểu tượng + bên trong giao diện nội dung.

• Nhấp vào nút Block Inserter trên thanh công cụ trên cùng.
• Danh sách các khối có sẵn sẽ xuất hiện. Ta sẽ chọn khối hình ảnh.

• Ba tùy chọn tải lên sẽ xuất hiện: Upload (tải lên từ máy tính), Media Library (tải từ thư viện) và chèn từ URL.

• Chọn tùy chọn Tải lên từ máy tính, bạn sẽ phải chọn một tệp hình ảnh và nhấp vào Mở. Hoặc bạn có thể kéo và thả nhiều tệp hình ảnh cùng một lúc.

• Điều chỉnh hình ảnh bằng cách sử dụng bảng Settings Sidebar bên ở phía bên phải của trình chỉnh sửa.

Cách sắp xếp các khối

Gutenberg cung cấp hai cách để sắp xếp lại các khối bằng thanh công cụ nổi. Biểu tượng sáu dấu chấm, bạn có thể chọn nhiều khối và kéo và thả chúng vào bất kỳ đâu.

Mặt khác, mũi tên lên và xuống cho phép bạn di chuyển một khối lên hoặc xuống.

Cách nhúng video

Khi nói đến việc nhúng nội dung từ các nền tảng khác, trình chỉnh sửa khối WordPress sẽ có một phần riêng để nhúng các tệp phương tiện và cung cấp nhiều nguồn để lựa chọn.

• Nhấn vào biểu tượng + trên thanh công cụ.
• Cuộn xuống để tìm phần Embeds (Nhúng).
• Chọn video bạn muốn thêm. Trong ví dụ này, chúng tôi sẽ nhúng video YouTube vào nội dung của mình.

• Dán URL của video và nhấp vào Embed.

• Video sẽ được hiển thị trên bài đăng hoặc trang của bạn.

Cách tạo Reusable Blocks

Reusable Blocks là tập hợp các đoạn nội dung mà bạn có thể sử dụng ở bất kỳ đâu trên trang web của mình, giúp bạn làm việc hiệu quả hơn.

Chúng hoạt động giống như các templates, vì vậy, nếu bạn cập nhật một templates, những thay đổi đó sẽ áp dụng cho tất cả các trang và bài đăng sử dụng khối.

• Chọn một phần mà bạn muốn lưu dưới dạng một khối có thể sử dụng lại.
• Chọn biểu tượng ba chấm từ thanh công cụ của khối và nhấp vào Add to Reusable blocks.

• Đặt tên cho khối và chọn Lưu.
• Bây giờ bạn có thể đặt khối ở bất kỳ đâu trên trang web.

Để sử dụng nó, hãy tìm kiếm nó từ danh sách các khối có sẵn bằng cách nhấp vào biểu tượng +.

Hoặc bạn có thể nhập “/” (dấu gạch chéo lên) và tên của khối sẽ xuất hiện.

Cách sử dụng phím tắt Gutenberg

Trình chỉnh sửa khối WordPress có nhiều phím tắt để giúp bạn làm việc hiệu quả và điều hướng xung quanh giao diện của nó một cách mượt mà.

Nếu dùng MAC, bạn chỉ cần chuyển Ctrl bằng Command.

Bạn cũng có thể tìm thấy danh sách này bằng cách nhấp vào biểu tượng ba chấm ở góc trên bên phải của trình chỉnh sửa và chọn Phím tắt.

Cách sử dụng Chế độ xem danh sách các khối

Bạn có thể nhấp vào biểu tượng Block Inserter để tìm kiếm các khối khác. Tuy nhiên, nếu bạn đang sử dụng các khối lồng nhau, việc tìm kiếm một khối cụ thể có thể là một thách thức.

Ngoài ra, khi bạn có nhiều khối khác nhau trên trình chỉnh sửa khối WordPress của mình, sẽ rất khó để duyệt qua tất cả chúng.

Để đơn giản hóa quy trình này, trình chỉnh sửa Gutenberg WordPress có tùy chọn xem danh sách khối cho phép bạn xem mọi khối đơn lẻ trong thiết kế, bao gồm các khối lồng nhau được thụt lề. Chỉ cần nhấp vào nút Chế độ xem danh sách trên thanh công cụ trên cùng.

Bạn có thể chọn hoặc mở rộng một khối bằng cách nhấp vào danh sách. Đồng thời, trình chỉnh sửa sẽ đánh dấu khối nếu bạn di chuột qua nó.

Blocks và Widgets

Widget là một trong những tính năng lâu đời nhất của WordPress. Ban đầu, chúng được tạo ra để dễ dàng xây dựng và quản lý nội dung của trang web mà không cần viết code.

Tuy nhiên, các Widget cổ điển có giới hạn về tùy chỉnh định dạng và yêu cầu phải thực hiện nhiều công việc thủ công. Thậm chí, chúng còn yêu cầu các plugin bổ sung để sử dụng các tính năng nâng cao.

Kể từ phiên bản WordPress 5.8, trình chỉnh sửa tiện widgets trên blocks đã thay thế widget cổ điển. Tính năng mới này đi kèm với nhiều cải tiến, cho phép người dùng tùy chỉnh trang của họ một cách dễ dàng hơn.

Hơn nữa, có nhiều widgets dựa trên blocks được cài đặt sẵn trong WordPress mà bạn có thể sử dụng không cần các plugin hay code, chẳng hạn như HTML tùy chỉnh, lịch, danh sách trang, bài viết mới nhất, biểu tượng mạng xã hội và thẻ đám mây.

Kết luận

Trên đây, LANIT đã chia sẻ đến bạn các thông tin về trình soạn thảo gutenberg wordpress là gì. Tóm lại, Gutenberg WordPress là một cải tiến đáng kể trong trải nghiệm soạn thảo nội dung của WordPress. Với khả năng tạo và tùy chỉnh các khối nội dung độc lập, người dùng có thể tạo ra các trang web chuyên nghiệp và độc đáo một cách dễ dàng và nhanh chóng.

Việc sử dụng Gutenberg WordPress cũng đem đến cho người dùng sự tiện lợi và linh hoạt trong việc quản lý nội dung trang web của mình. Nếu bạn đang sử dụng WordPress, hãy thử sử dụng Gutenberg và trải nghiệm những tiện ích mà nó mang lại.

Chúc bạn thành công!