Hướng dẫn sử dụng trình soạn thảo Gutenberg Editor chi tiết cho người mới

Photo of author
Written By Nam Nguyen

Mình là một du mục kỹ thuật số toàn thời gian, mình từng là một mọt sách WordPress và đây là nơi mình chia sẻ những kinh nghiệm WordPress hiệu quả nhất để bạn phát triển Online Business của mình một cách bền vững.

Vậy là từ khi phiên bản WordPress 5.0 chính thức phát hành vào ngày 6/12/2018, người dùng đã có thể trải nghiệm trình soạn thảo mới trên nền tảng này.

Nó được gọi với tên Gutenberg hoặc bạn có thể gọi là Block editor bởi vì mọi yếu tố nội dung đều được xây dựng bởi các khối cơ bản.

Điều này đã tạo ra một cuộc cải cách về soạn thảo nội dung cho các nhà quản trị WordPress, và hầu như mọi thứ đều được làm mới hoàn toàn về giao diện cũng như bổ sung khá nhiều tính năng.

Vì vậy nếu muốn xây dựng nội dung bằng Gutenberg bạn phải học lại cách sử dụng từ đầu.

Mình thấy rất nhiều bạn mới đã rất bỡ ngỡ khi bắt kịp sự thay đổi này.

Những không cần lo lắng!

Trong bài viết này mình sẽ hướng dẫn bạn cách sử dụng Gutenberg editor một cách chi tiết nhất 

Mình cũng cung cấp một số mẹo giúp bạn thao tác nhanh hơn và một vài tài nguyên để bạn khai phá sức mạnh của trình soạn thảo này.

Gutenberg là gì?

Nếu như bạn dùng WordPress từ phiên bản 4.9 trở về trước bạn sẽ xây dựng nội dung bằng một trình soạn thảo TinyMCE (hay classic editor). Nó có giao diện khá giống với Microsoft Word.

Classic Editor cho phép bạn tạo ra các dạng nội dung cơ bản như cách viết trên một trang giấy. Vì vậy đôi khi bạn rất dễ bị bó buộc trong sáng tạo nội dung cũng như trình bày.

Nhưng từ khi Gutenberg ra đời ở WordPress 5.0 bạn có thêm được nhiều lựa chọn hơn về xây dựng nội dung. Giao diện soạn thảo không còn là trang trắng cho phép bạn đánh văn bản, thay vào đó nó được tạo ra từ các Block.

Vậy Block là gì?

Block được hiểu đơn giản là các khối nội dung, nó có thể là hình ảnh, đoạn văn bản, mẫu trích dẫn (quote),..Tóm lại mỗi block tương ứng với 1 loại nội dung cụ thể.

Gutenberg vs Classic editor khác nhau như thế nào?

Trước khi nói về cách sử dụng Gutenberg Block Editor, chúng ra cần làm rõ nó khác nhau như thế nào so với Classic Editor trước đây.

Điều này đảm bảo giúp bạn đưa ra quyết định chọn cái nào phù hợp cho phát triển nội dung Website.

Đầu tiên chúng ta hãy nhìn một cách tổng quan về giao diện.

Classic Editor trước đây trông như một bản sao thu gọn của Microsoft Word, nó có một ô viết tiêu đề,  khu nội dung chính với thanh công cụ chưa vài lựa chọn, ngoài ra còn một thanh bên quản lý các tùy chọn bài viết.

giao-dien-tong-quan-cua-classic-editor

Gutenberg lại đem đến một sự khác biệt hoàn toàn, hầu như mọi thứ đều được dựng trên các Block.

Ngay cả ô tiêu đề cũng dựng sẵn trên một Block, và mọi nội dung khác như hình ảnh, đoạn văn bản,...đều được tạo dưới dạng này.

giao-dien-tong-quan-cua-gutenberg

Tiếp theo về chức năng soạn thảo.

Chắc chắn Gutenberg cả tiến vượt trội hơn rất nhiều, các chuyên gia WordPress đã thêm hàng loạt Block mới hỗ trợ việc xây dựng nội dung cho bạn.

block-gutenberg

Ví dụ thay vì trước đây để tạo một quote bạn chỉ có lựa chọn định dạng trên thanh công cụ và hiển thị của nó phụ thuộc vào theme. Tuy nhiên với Gutenberg bạn có một block quote đẹp mắt và cho phép điển tên tác giả của trích dẫn.

Hoặc tính năng tạo bảng, trước đây bạn cần bổ sung một plugin chuyên dụng làm điều này như TablePress, Ninja Table,...Nhưng hiện tại bạn đã có một block tạo bảng, chỉ cần chọn nó sau đó điền số cột & hàng theo ý muốn.

Cuối cùng chúng ta phải nó tới khả năng tùy biến trên mỗi Block

Trước đây bạn chỉ có thể tùy biến nội dung bằng các công cụ định dạng, hoặc dùng HTML + CSS nếu bạn có kinh nghiệm lập trình. Điều này không hề khả thi cho người mới hoặc chưa có kinh nghiệm lập trình Web.

Vì vậy Gutenberg mở ra một số tùy chọn cho nội dung như Background, màu sắc, kích thước chữ, chữ to đầu đoạn,...

Điều này giúp nội dung của bạn chuyên nghiệp và bắt mắt hơn, tất nhiên ít nhiều nó cũng làm tăng trải nghiệm người dùng và tỷ lệ chuyển đổi.

Gutenberg có phải một trình tạo trang?

Có rất nhiều tranh cãi giữa các Blogger cho câu hỏi này. Một số cho rằng Gutenberg chỉ là một cải tiến mới trong soạn thảo nội dung. Một số lại nghĩ rằng nó là một Page Builder.

Với cá nhân mình, Gutenberg có thể coi như một Page Builder còn non.

Tại sao vậy?

Thực chất một Page Builder nghĩa là nó có khả năng tạo ra các trang với thiết kế độc đáo.

Và Gutenberg làm được điều này, nếu bạn đủ sáng tạo mình tin bạn có thể tạo được các trang không thua gì các Page Builder nổi tiếng. 

Hơn nữa nếu như bạn từng sử dụng các Page Builder nổi tiếng như WPBakery Page Builder,...thì nó có giao diện thiết kế không khác mấy Gutenberg. Ngoại trừ nhiều tính năng hơn và cho phép thiết kế ở giao diện Front-end (giao diện người dùng).

Nhưng như mình đã nói ở trên "Gutenberg vấn còn non"

So với một Page Builder thực sự nó có quá nhiều thiếu sót & kém cạnh, vì một trình tạo trang tốt cần có những yếu tố.

  • Thiết kế theo phong cách kéo thả Widget
  • Thư viện mẫu miễn phí cho bạn lựa chọn
  • Các tính năng tùy biến chuyên sâu
  • Thiết kế ở giao diện front-end
  • Xem trước các kích thước hiển thị

Nếu quan tâm đến một Page Builder tốt nhất thì hãy tham khảo các plugin Elementor, Divi, Beaver Builder.

Tạm thời Gutenberg chỉ nên sử dụng để tạo nội dung bài viết. Còn nếu như bạn muốn tạo các trang phức tạp trên Website như trang bán hàng, trang chủ, trang đích thì mình khuyên bạn nên sử dụng Page Builder.

Nó có nhiều tiện ích và dễ dàng hơn cho thiết kế của bạn, nhưng nếu như bạn muốn biến Gutenberg thành một Page Builder thì cuối bài viết mình sẽ chỉ cách cho bạn.

Hướng dẫn sử dụng Gutenberg cho Website WordPress

Bây giờ hãy sẵn sàng cho bài viết đầu tiên của bạn bằng cách sử dụng Gutenberg. Mình sẽ đưa ra các hướng dẫn chi tiết & các bước thực hành cho bạn.

Mình tin không đến 1h bạn có thể làm chủ được công cụ này.

Về cách đi đến giao diện bài viết chắc mình cũng không phải nhắc lại. Nó tương tự cách tạo bài viết thông thường.  

Trên Dashboard -> Posts -> Add new.

Giao diện tổng quan

Do Gutenberg đã đem lại một giao diện khác hoàn toàn so với trình tạo trang Classic Editor trước đó.

Vì vậy mình nghĩ chúng ta nên làm quen lại từ đầu.

tong-quan-gutenberg

(A) - Nút Plus (dấu cộng), cho phép bạn thêm một block mới.

(B) - Các nút undo, redo giúp bạn khôi phục lại các soạn thảo. Điều mà Classic Editor không có.

(C) - Nhấp vào để biết các thông số cấu tạo bài viết như số từ, số thẻ Heading, số Block, số đoạn.

(D) - Dùng để hiện ra danh sách các Block đang có.

(E) - Dùng để lưu bản nháp, Preview, Publish bài viết.

(F) - Các tùy chọn về xuất bản nội dung như định dạng, chèn Featured Image, gắn category,...

(G) - Hiển thị các tùy chọn cấu hình cho mỗi Block, nó sẽ tự động bật khi bạn nhấp vào một Block.

(H) - Nơi xây dựng nội dung chính bằng cách gõ tiêu đề, thêm các Block.

Tiếp theo hãy bắt đầu làm quen với các thao tác cơ bản..

Cách tạo một Block mới trên Gutenberg

Về phần viết tiêu đề chắc mình sẽ không nói lại, ô viết tiêu đề trước đây đã được thay thế bằng một Block ngay trên khu vực soạn thảo.

Theo mặc định Gutenberg có  sẵn một Block paragraph dưới tiêu đề cho phép bạn viết văn bản ngay lập tức. Chỉ cần nhấp vào và gõ văn bản.

Tuy nhiên với các loại nội dung khác bạn cần phải tạo Block mới.

Để tạo một Block mới bạn hãy click vào nút plus (dấu +) trên màn hình, hoặc bạn có thể chọn ở trên thanh công cụ hoặc bên dưới đều được.

them-block-moi

Sau đó sẽ có một bảng danh sách hiện ra, bạn chỉ việc kéo xuống và chọn block cần thiết. Nếu muốn nhanh bạn hãy gõ trên Block trong thanh search trong trường hợp bạn nhớ.

chon-block

Bên cạnh đó mỗi khi bạn rê chuột vào một Block sẽ có một bản preview bên cạnh giúp bạn hình nhìn thấy trước cách hiển thị của nó.

Khi đã chọn được block bạn chỉ việc thêm nội dung cho nó bằng cách gõ văn bản (với paragraph Block) hoặc thêm hình ảnh (Image Block),...

Tùy chỉnh Block

Với mỗi block của Gutenberg, khi nhấp vào bạn sẽ thấy một số định dạng cơ bản cho Block đó.

tuy-chinh-block

Ví dụ trong hình dưới khi nhấp vào Block paragraph nó cho phép bạn một số định dạng như căn lề, in đậm, in nghiêng, chèn link,...

Bên cạnh đó nhấp vào nút 3 chấm (more option) bạn sẽ có nhiều tính năng hơn.

Ngoài ra, ở tab Block bên phải còn thêm các tùy chỉnh nâng cao như màu sắc màu nền,...Số lượng tùy chỉnh có thể thay đổi vào loại Block.

tuy-chinh-nang-cao

Ví dụ như với Block paragraph nó có các tùy chọn chữ lớn đầu đoạn, kích thước chữ, màu sắc, màu nền.

Lưu các mẫu & tái sử dụng

Gutenberg mang một đặc trưng nổi bật của một trình tạo trang WordPress, cụ thể nó cho phép bạn lưu lại các mẫu có khả năng được lặp lại nhiều lần trong các bài viết.

Chẳng hạn như một câu trích dẫn.

Để lưu một mẫu trên Gutenberg bạn hãy chọn mẫu cần lưu, tiếp tục trên thanh công cụ nhấp vào nút 3 chấm (more option). 

Chọn Add Reusable Blocks, sau đó gõ tên & nhấn Save.

luu-block

Bây giờ bạn có thể tái sử dụng bằng cách nhấn vào nút add block & tìm trong mục Reusable

tim-block-da-luu

Hoặc nhấn vào Manage All Reusable Blocks để quản lý các Block đã lưu.

quan-ly-tat-ca-block-da-luu

Tất nhiên tại đây bạn có quyền chỉnh sửa hoặc xóa block khi cần thiết.

Lưu ý: Khi xóa các Block trong mục quản lý thì các nội dung về block đã áp dụng trước đó cũng xóa bỏ. Vì vậy hãy cẩn thận nhé!

Tạo một bài viết với các Block cơ bản

Bây giờ để bạn dễ dàng làm quen với các thao tác xây dựng nội dung bằng Gutenberg hãy cùng mình tạo một bài viết mới. 

Nó bao gồm các Block sau:

  • Một vài đoạn văn
  • Một hình ảnh
  • Một thẻ heading
  • Một trích dẫn
  • Một video nhúng từ Youtube
muc-tieu-tao-bai-viet-bang-gutenberg

(Kết quả đạt được với phần thực hành này)

Về tiêu đề bạn hãy điền nội dung theo ý muốn.

Tiếp tục nhấp vào Block Paragraph và viết nội dung mở đầu. 

nhap-noi-dung-text

Tiếp tục nhấp vào nút dấu + sau đó gõ "im..." không cần gõ hết bạn cũng thấy đề xuất "Image" cho bạn lựa chọn.

them-block-hinh-anh

Nhấp vào upload để tải lên từ máy tính, hoặc Media Library để chọn hình ảnh đã có sẵn trong thư viện, hoặc dán URL hình ảnh cần chèn.

upload-hinh-anh-gutenberg

Tiếp tục bạn có thể tùy chỉnh cơ bản như căn lề trên thanh công cụ hoặc sử dụng tab block nâng cao để chọn kiểu hình ảnh, thêm thẻ alt, tùy chỉnh kích thước,..

tuy-chinh-chuyen-sau-hinh-anh

Bây giờ hãy thêm một thẻ heading để chia nhỏ nội dung của bạn. Nhấp vào block "Heading", sau đó gõ tên cho phù hợp.

tao-block-heading

Đừng quên chọn loại thẻ cho phù hợp, ở đây mình chọn heading 2, nếu một nội dung nhỏ hơn bạn có thể dùng heading 3, h4, h5 hoặc h6.

them-block-heading

Tiếp theo mình thêm một block "Paragraph" để viết nội dung. (Tự thêm nhé)

Sau đó mình sử dụng Block "Quote" để tạo trích dẫn.

them-block-quote

Viết nội dung cho trích dẫn & tên tác giả.

viet-noi-dung-cho-block-quote

Cuối cùng thêm một video từ youtube vào Gutenberg, hãy chọn block có biểu tượng youtube trong mục embeds.

block-nhung-video-tu-youtube

Sau đó dán url video của Youtube & nhấn Embed.

nhung-video-tu-youtube

Vậy là hoàn tất một bài viết cơ bản bằng cách sử dụng Gutenberg. Bạn có thể sắp xếp các block này bằng việc click vào nó, nhấp vài mũi tên di chuyển lên xuống hoặc dùng chuột kéo thả đến thứ tự mong muốn

di-chuyen-sap-xep-block

Quản lý tùy chọn bài viết

Về phần quản lý tùy chọn bài viết  trên Gutenberg cũng không có gì mới mẻ so với Classic editor. Nó vẫn bao gồm hiển thị tình trạng bài viết, định dạng bài viết, thêm hình ảnh đặc trưng, gắn category & tag,..

Tuy nhiên nó bổ sung thêm các mục mới gồm permalinks, excerpt, discussion. (Trước đây 3 mục này nằm ở dưới cùng của giao diện soạn thảo)

khu-vuc-tuy-chon-bai-viet

Ngoài ra, mình phát hiện một tính năng khá hay ho, chính là cho phép bạn ghim bài viết nằm ở vị trí đầu trên trang lưu trữ Blog (Stick to top of the blog). Điều mà trước đây classic editor cần phải thêm một plugin chuyên dụng.

Một số Block mới được nhiều người sử dụng

Trên Gutenberg có một số Block rất độc đáo giúp bạn xây dựng nội dung trở nên đẹp mắt và chuyên nghiệp.

Hãy cùng mình nói qua một số block được nhiều người thường dùng nhé!

Chèn một liên kết cho bài viết

Tưởng như đơn giản nhưng rất nhiều bạn mới thường gặp rắc rối với cách chèn liên kết. 

Để làm điều này hãy bôi đen cụ từ cần chèn liên kết, sau đó nhấn vào biểu tượng link trên thanh công cụ.

Dán url của bạn & nhấn vào nút apply (mũi tên quay ngược).

Nếu muốn liên kết đó mở sang một tab mới hãy chọn mũi tên xuống và gạt nút Open in New Tab.

chen-lien-ket-tren-gutenberg

Thêm nút (button)

Trong những Website hiện đại, các nút trở nên rất quan trọng đến hành vị nhấp chuột & mua hàng của người dùng.

Với trình soạn thảo cổ điển bạn cần phải bổ sung thêm một plugin tạo nút cho WordPress, nhưng với Gutenberg bạn đã có Block button làm điều này.

Để thêm một nút bạn hãy chọn block "Button" tiếp theo viết nội dung và liên kết cho nó trong các ô chỉ định.

viet-noi-dung-button

Bạn có thể thay đổi màu, sắc kiểu dáng nút bằng Tab Block bên phải màn hình. 

Chia cột (columns)

Columns được biết đến là dạng trình bày nội dung khá phổ biến để tạo ra các bố cục mới lạ. Nó có mặt ở hầu hết các Page Builder WordPress.

Vì vậy khi muốn tạo cột trên nội dung bài viết bạn hãy làm các thao tác sau.

Tìm đến block "Columns" trong mục Layout Element.

tao-block-columns

Tiếp tục chọn loại bố cục mong muốn (2 cột, 3 cột, cân bằng hoặc không).

chon-layout-columns

Tiếp theo nhấp vào nút dấu + để thêm block nội dung nhỏ hơn (ví dụ paragraph, hình ảnh, video,...)

Tạo bảng

Trước đây, với trình soạn thảo Classic việc tạo bảng dường như khá khó khăn, bạn cần có sự hỗ trợ của plugin table hoặc viêt mã HTML.

Rất may hiện tại Gutenberg đã được tích hợp tính năng tạo bảng một cách đơn giản.

Hãy chọn block "Table" trong mục Formatting.

tao-block-table

Sau đó gõ số cột (columns) và  số hàng (row) vào các ô tương ứng. Nhấn create table để kết thúc.

dien-so-o-cot-hang-tao-bang

Tạo lưới hình ảnh

Gutenberg cho phép bạn trình bày nhiều hình ảnh cùng một lúc, bạn chỉ việc chọn block "Gallery" sau đó thêm bao nhiêu ảnh tùy thích.

tao-block-luoi-hinh-anh

Chúng sẽ tự động gộp thành một lưới, tất nhiên bạn có thể sắp xếp bằng thao tác nhấp mũi tên. Hoặc kiểm soát số lượng hình ảnh trên một cột trong tab Block nâng cao.

kiem-soat-so-luong-hinh-anh-tren-mot-hang

Ảnh bìa

Ảnh bìa ngày càng được ưa chuộng trên các Website hiện đại, nó có thể thay thế hình ảnh đặc trưng của bài viết hoặc tạo ra khu vực độc đáo ngăn cách nội dung trên Website.

Đây có thể là một background chứa một đoạn văn bản bên trong hoặc cũng có thể là một hình ảnh chứa đoạn text bên trong.

Cách tạo ảnh bìa bằng Gutenberg sẽ như thế này. Trước tiên hãy chọn block "cover".

add-cover-block

Tiếp theo chọn loại cover hình ảnh hoặc chỉ mỗi background.

tai-hinh-anh-cover-hoac-chon-background

Tiếp tục thêm văn bản trong cover

nhap-van-ban-cover-block

Đừng bỏ qua tab Block để tùy chỉnh cover sao cho đẹp nhất. Bạn hãy nhấp vào Fixed Background để tạo hiệu ứng cuộn mượt hoặc thay đổi các chi tiết như màu nền, kích thước,...

tuy-chinh-nang-cao-cover-block

Thêm nội dung bên cạnh hình ảnh

Block này rất lý tưởng trong trường hợp bạn thêm một thẻ heading & chèn hình ảnh mô tả cho nội dung của nó.

Thực tế block này là sự kết hợp của columns + image + paragraph.

Hãy chọn Block Media & Text.

tao-block-media-&-text

Sau đó thêm hình ảnh và điển nội dung theo ý muốn của bạn.

Rất nhanh đúng không?

Đó là tất cả những Block hay ho của Gutenberg mình nghĩ bạn sẽ thường sử dụng để tạo ra nội dung có trải nghiệm tốt nhất.

5 mẹo giúp tiết kiệm thời gian và trở nên chuyên nghiệp khi sử dụng Gutenberg

Dưới đây là một số mẹo sử dụng Gutenberg mình cho rằng sẽ giúp bạn tiết kiệm thời gian cũng như quản trị chuyên nghiệp hơn.

Tạo Block bằng cách gọi /tenblock

Một sự thật là, theo thói quen đánh văn bản, sau khi gõ xong một đoạn bạn thường nhấn Enter để xuống dòng.

Với Gutenberg nó sẽ tự động phát sinh ra một Block Paragraph, và trong trường hợp bạn muốn thêm Block hình ảnh bạn cần phải xóa nó.

Tuy nhiên có một cách nhanh chóng giúp bạn không cần xóa block đã phát sinh nhưng vẫn có thể thay thế bằng block bạn mong muốn.

Chỉ cân gõ cú pháp /tenblockmuonthem thì hệ thống sẽ đưa ra đề xuất cho bạn lựa chọn.

goi-block-bang-cu-phap

Ví dụ bạn muốn gọi block hình ảnh thì gõ /image hoặc block bảng thì gõ /table.

Một khi đã quen với thao tác này mình đảm bảo nó sẽ nhanh & tiện lợi hơn rất nhiều so với cách nhấn vào nút add Block.

Kéo thả hình ảnh trực tiếp từ máy tính

Chắc hẳn rất ít bạn biết kỹ thuật thú vị này, trước đây khi muốn tải ảnh lên WordPress bạn cần phải thực hiện các bước chọn nút add media, sau đó chọn file trên máy tính, cuối cùng mới tải lên được.

Gutenberg có một cải tiến đáng khen ở điểm này khi bạn có thể tải ảnh lên bằng cách kéo các hình ảnh trên máy tính & vứt vào khu vực nội dung.

Sau đó nó sẽ tự phát sinh ra block cho bạn.

Tùy chỉnh chế độ xem trong quá trình tạo nội dung

Chế độ xem khá quan trọng khi giúp bạn có được góc nhìn phù hợp cho bản thân để có cảm giác mái nhất khi viết bài. Hãy cần nhắc chọn chế độ xem bằng cách dưới đây.

Nhấp vào nút 3 chấm bên góc phải màn hình và chú ý mục view. Lúc này bạn có 3 lựa chọn.

  • Top Toolbar: Nếu như không thích thanh công cụ xuất hiện sau mỗi lần click vào block thì hãy bật tính năng này. Nó sẽ đưa thanh công cụ lên trên cùng màn hình.
  • Spotlight Mode: Làm mờ các Block không được chọn, điều này giúp bạn tập trung hơn vào block đang làm việc.
  • Fullscreen Mode: Tắt hết mọi thứ làm xao nhãng như admin bar, menu quản trị. 
tuy-chinh-view

Sử dụng phím tắt

Nếu như bạn thường sử dụng phím tắt với các thao tác trên máy tính thì chắc chắn bạn sẽ thích sử dụng Gutenberg. Nó đi kèm với vài chục phím tắt nhanh hỗ trợ bạn làm việc.

Mặc dù yêu cầu bắt buộc bạn phải nhớ phím tắt.

Nhưng một khi đã quen bạn sẽ thao tác nhanh gấp nhiều lần so với việc click chuột. 

Để biết cách phím tắt hỗ trợ bạn hãy đi đến mục Keyboard Shortcode (hoặc nhấn tổ hợp Shift + Alt + H).

xem-phim-tat-ho-tro-su-dung-gutenberg

Ngoài ra có thể tham khảo các phìm tắt thường dùng dưới đây:

  • Ctrl + S: Lưu nội dung soạn thảo
  • Ctrl + Z: Quay lại thao tác trước đó
  • Ctrl + Shift + Z: Tiến tới thao tác trước đó
  • Ctrl + A: Chọn tất cả nội dung text trong một Block
  • Ctrl + B: In đậm khu vực bôi đen
  • Ctrl + I: In nghiêng khu vực bôi đen
  • Ctrl + U: Gạch chân chu vực bôi đen
  • Ctrl + K: Chèn link trong cụm từ đã chọn
  • Ctrl + Shift + K: Xóa link

Tắt các Block không cần thiết

Thực tế trên Gutenberg có một số block không cần thiết cho nhu cầu soạn thảo nội dung của bạn.

Nếu như để đó thì cũng chỉ cản trở bạn lúc tìm kiếm. Vì vậy Block nào không cần dùng tới hãy tắt nó khỏi khu vực chọn.

Để làm điều này hãy click vào mục Block Management.

Sau đó tắt bằng cách hủy bỏ dấu tick của block cần tắt.

Mình nghĩ bạn nên tắt các nền tảng nhúng không dùng tới, hoặc archive, tag cloud, Calendar, More.

Mình muốn dùng trình soạn thảo HTML

Trong trường hợp bạn cần dùng mã HTML thì hãy mở nó bằng cách nhấp vào nút 3 chấm ở góc phải màn hình.

Tiếp tục click vào code editor (hoặc dùng tổ hợp Ctrl + Shift + Alt + M)

bat-code-editor

Làm sao để chuyển nội dung từ Classic editor sang Gutenberg mà không bị hỏng bố cục

Các chuyên gia WordPress đã sớm nhận ra vấn đề nên bạn không cần phải lo.

Nếu như bạn đang dùng Classic editor sau đó chuyển sang Gutenberg thì nội dung cũ sẽ được gộp vào một block.

Bây giờ bạn chỉ việc nhấp vào nó. 

Chọn nút more options trên thanh công cụ, click vào convert to Blocks thì nội dung sẽ được phân rã thành các Block tương ứng.

chuyen-doi-tu-classic-editor-sang-gutenberg

Mở rộng thêm Block cho Gutenberg

Bây giờ đến phần siêu thú vị nếu như bạn lựa chọn Gutenberg là trình soạn thảo nội dung cho Website WordPress của mình. Cũng như nếu bạn muốn nó thay thế một Page Builder Plugin WordPress.

Đó là bạn có thể mở rộng các Block với hiển thị đẹp hơn, nhiều tính năng hơn và chuyên nghiệp hơn.

Để làm điều này bạn chỉ cần thêm một plugin chuyên dụng cho Gutenberg và rất may bạn sắp thấy được các đề xuất tốt nhất dưới đây.

Ultimate Addons for Gutenberg

ultimate-addons-for-gutenberg

Plugin này được phát triển bởi Brainstorm Force - nhà cung cấp chủ đề WordPress hàng đầu thế giới với theme Astra siêu nhẹ và linh hoạt. Bên cạnh đó còn có ConvertPro và các addons cho các trình tạo trang Elementor, Beaver Builder,..,

Vì vậy Ultimate Addons for Gutenberg cũng coi như một addons bổ sung tính năng cho trình soạn thảo Gutenberg.

Và tin vui cho bạn, nó hoàn toàn miễn phí nhưng sở hữu rất nhiều tính năng cao cấp ở Page Builder.

Ví dụ như các block heading nâng cao, Marketing button, tạo lưới vài viết cho trang Blog, tạo bảng giá, nút chia sẻ, Google Map,....Mình đếm sơ sơ ở thời điểm này có đến hơn 20 Block.

Với mỗi Block bạn có vô vàn tính năng tùy chỉnh ở nhiều khía cạnh khác nhau.

Có thể nói khi cài đặt plugin này, Gutenberg của bạn sẽ trở thành một trình tạo trang thực thụ và không còn non kém như trước. 

Thậm chí bạn không cần cài thêm Plugin Page Builder thay thế việc tạo trang cho Website.

Advanced Gutenberg

advanced-gutenberg

Advanced Gutenberg mở ra rất nhiều Block hỗ trợ xây dựng nội dung trên WordPress. Nó có đến 27+ block khác nhau như tạo bảng nâng cao, tạo nút nâng cao. tạo biểu mẫu liên hệ,...

Hơn hết nó còn một block khá hay với tên newsletter, giúp bạn thu thập các Email người dùng và phục vụ Email Marketing. Giải pháp này rất tốt khi bạn chưa có nhiều kinh phí trang bị các opt-in Email plugin chuyên dụng.

Advanced hoạt động tốt với Woocommerce trong trường hợp bạn đang điều hành một Website bán hàng. Nó có hẳn một block chuyên dụng để hiển thị danh sách sản phẩm.

Nếu bạn muốn mở rộng thêm nhiều tùy chọn trên mỗi Block mình tin đây là plugin tốt nhất dành cho bạn.

Atomic Blocks

atomic-blocks-gutenberg

Atomic Blocks không có quá nhiều Block như 2 cái tên trên, tuy nhiên nó lại đem đến các block thông dụng nhất trên WordPress.

Một vài trong số đó có thể kể tới Block tạo lời kêu gọi hành động (CTA), block hiện danh sách bài viết, block tạo biểu mẫu thu thập email, block chứng thực khách hàng.

Đặc biệt mình đánh giá cao Atomic Blocks ở chỗ nó có một thư viện với các layout được thiết kế sẵn. Một điều bạn chỉ thường bắt gặp ở các trình tạo trang WordPress chuyên nghiệp.

Với các layout này sẽ giúp bạn tiết kiệm thời gian thiết kế cũng như dễ dàng có được các mẫu ưng ý nhất.

Stackable

Stackable-for-gutenberg

Có thể nói đây là plugin tốt nhất dành riêng cho Gutenberg. Nó có đến 24+ block khác nhau và hoạt động tương tự như các Widget của page Builder Plugin với hàng trăm tùy chỉnh nâng cao.

Vì vậy mà Stackable dư khả năng tạo ra những trang có giao diện phức tạp cũng như hỗ trợ trình bày nội dung chuyên nghiệp dưới góc nhìn người dùng.

Đặc biệt, lý do chính mình đánh giá cao Stackable vì nó có một thư viện dựng  sẵn cho Gutenberg rất đồ sộ. Những bạn lười thiết kế hoặc ít kinh nghiệm chắc chắn sẽ phát cuồng với thư viện này.

Chúng được xây dựng đẹp mắt và cực kỳ chuyên nghiệp, nhiệm vụ khó nhất bạn cần làm là chọn một cái yêu thích và nhập với một cú click. Cuối cùng điền nội dung theo công việc.

Lời kết

Hy vọng qua bài viết này bạn đã học được cách sử dụng Gutenberg để phục vụ xây dựng nội dung cho Website WordPress.

Mặc dù mình biết, ở thời điểm này Gutenberg chưa thực sự phổ biến vì nhiều tính năng mới mẻ. Tuy nhiên là một người dùng WordPress ít nhiều bạn cũng phải biết sử dụng Gutenberg.

Nó sẽ giúp bạn xây dựng nội dung độc đáo và chuyên nghiệp hơn so với trình soạn thảo Classic truyền thống trước đây. Điều này cũng cải thiện đáng kể trải nghiệm người dùng và chuyển đổi trên Website của bạn.

Nếu như bạn muốn tạo các trang có giao diện phức tạp thì Gutenberg cũng có thể thay thế Page Builder Plugin.

Đừng quên sử dụng các plugin addons cho Gutenberg mà mình gọi ý trên để nhận được nhiều block với tính năng tốt nhất.

Bạn đã biết cách dùng Gutenberg rồi chứ? Cho mình biết câu trả lời trong phần comment bên dưới cũng như bất kỳ câu hỏi nào khác. Mình sẽ phản hồi sớm nhất cho bạn.

Đôi chút về Nam Nguyen

Mình là một cựu quân nhân Hải Quân đã xuất ngũ, Blog này là một trong những doanh nghiệp trực tuyến của mình. Nơi mình chia sẻ những kinh nghiệm thiết thực nhất về WordPress có thể áp dụng để xây dựng và phát triển Online Business của bạn một cách bền vững. Bạn có thể kết nối với mình trên Facebook, Twitter, Linkedin.

4 thoughts on “Hướng dẫn sử dụng trình soạn thảo Gutenberg Editor chi tiết cho người mới”

Leave a Comment