Hướng dẫn sử dụng Gutenberg

Mục lục

Trong phiên bản WordPress 5.0, trình biên tập nội dung cổ điển được thay thế bằng một trình soạn thảo dạng khối có tên là Gutenberg. Một số bạn cảm thấy lạ lẫm và than phiền Gutenberg khó sử dụng. Trong bài viết này tôi sẽ chia sẻ cách sử dụng và làm chủ Gutenberg để bạn có thể có được trải nghiệm tuyệt vời trong quá trình biên tập nội dung trong WordPress.

Sự khác nhau giữa trình biên tập cổ điển và Gutenberg

Trước khi đi sâu vào tìm hiểu trình biên tập mới, chúng ta hãy cùng tìm hiểu và so sánh giữa trình biên tập cổ điển và trình biên tập dạng khối Gutenberg.

Trình biên tập cổ điển trong WordPress giống như thế này

classic editor

Nếu bạn cập nhật lên phiên bản WordPress 5.0, nó sẽ trông như thế này

gutenberg editor

Như bạn có thể thấy, nó là hai trình biên tập hoàn toàn khác nhau để tạo nội dung trong WordPress.

Trình biên tập cổ điển là một trình soạn thảo văn bản với các nút định dạng giống như Microsoft Word.

Trình biên tập Gutenberg sử dụng cách tiếp cập hoàn toàn mới có tên gọi là “Blocks” (Các khối).

Một khối là một kiểu nội dung mà bạn dùng để thêm vào màn hình chỉnh sửa để tạo bố cục cho nội dung.

Bạn có thể thêm khối cho mỗi đoạn văn bản, hình ảnh, video, thư viện ảnh, audio và nhiều thứ khác nữa. Có những khối dành riêng cho các kiểu nội dung thường gặp và nhiều khối khác có thể được thêm vào bằng cách sử dụng plugin.

Trình biên tập mới có tốt hơn trình biên tập cổ điển?

Trình biên tập mới cung cấp cho bạn cách đơn giản để thêm các kiểu nội dung vào bài viết/trang trên website của bạn.

Ví dụ: trước đây nếu bạn muốn thêm bảng vào bài viết/trang, bạn cần sử dụng một plugin để chèn bản.

Với Gutenberg, bạn chỉ cần thêm một khối bảng, chọn số hàng, số cột sau đó bắt đầu thêm vào bài viết/trang.

table block

Bạn cũng có thể di chuyển các thành phần lên trên hoặc xuống dưới, chỉnh sửa chúng trong các khối riêng biệt. Vì thế bạn có thể dễ dàng tạo ra một bài viết chất lượng.

Nhưng quan trọng hơn cả là trình biên tập dạng khối rất dễ học và dễ dùng chứ nó không rối rắm và phức tạp như bạn nghĩ.

Nó mang lại sự tiện dụng cho tất cả những người mới sử dụng WordPress để tạo blog hoặc website kinh doanh.

Bạn đã sẵn sàng chưa? Chúng ta cùng tìm hiểu các sử dụng trình soạn thảo dạng khối để tạo ra các bài viết tuyệt vời cho blog/website của mình nào!

Sử dụng Gutenberg – Trình biên tập dạng khối kiểu mới của WordPress

Trình biên tập mới được thiết kế để có thể sử dụng một cách trực quan và linh hoạt. Trong khi nhìn nó có vẻ rất khác với trình biên tập cũ, nó vẫn có thể làm được tất cả những việc mà trước đây chúng ta đã thực hiện trong trình biên tập cổ điển.

Hãy bắt đầu với những thứ cơ bản mà bạn đã thực hiện trong trình biên tập cũ, sau đó tìm hiểu cách thức thực hiện nó trong trình biên tập mới.

Sử dụng Gutenberg để tạo một bài viết/trang mới

Việc tạo một bài viết/trang mới được thực hiện bình thường như trước giờ chúng ta vẫn hay làm. Chỉ cần nhấp vào menu Posts » Add New trong WordPress Dashboard. Nếu bạn muốn tạo trang mới thì nhấp vào menu Posts » Add New.

add new post use gutenberg

Thao tác này sẽ khởi chạy trình biên tập mới.

Cách thêm khối trong Gutenberg

Đố bạn biết khối đầu tiên cần phải có của mọi bài viết là gì? Vâng đó chính là khối tiêu đề.

Sau khi thêm tiêu đề cho bài viết, bạn có thể di chuyển xuống bên dưới để bắt đầu viết bài.

insert block in gutenberg

Theo mặc định, khối tiếp theo sẽ là khối Paragraph. Nó cho phép bạn bắt đầu viết một đoạn văn bản.

Tuy nhiên nếu bạn muốn thêm một khối khác, bạn có thể nhấp vào nút dấu cộng ở phía trên góc trái của trình biên tập; ngay bên dưới khối đã thêm hoặc phía bên trái của khối.

add new post use gutenberg

Khi bạn nhấp vào nút này, trình biên tập sẽ hiển thị menu thêm khối với một thanh tìm kiếm ở phía trên và các khối thường dùng ở bên dưới.

addingblock

Nếu bạn không muốn sử dụng chuột để nhấp vào các nút, bạn có thể sử dụng phím tắt bằng cách đánh / để tìm và thêm khối.

Làm việc với khối trong trình biên tập mới

Mỗi khối có chứa các thanh công cụ riêng của nó, các thanh công cụ này xuất hiện ở phía trên của khối. Các nút trong thanh công cụ sẽ khác nhau tùy theo khối mà bạn đang chỉnh sửa.

gutenberg toolbar

Một phần của thanh công cụ mà mà mỗi khối đều có là thiết lập khối. Nó nằm phía bên phải của màn hình chỉnh sửa nội dung.

block settings

Bạn có thể dễ dàng di chuyển các khối bằng cách nhấp và kéo rê hoặc sử dụng nút mũi tên lên xuống.

move block in gutenberg

Lưu và tái sử dụng các khối trong Gutenberg

Một tính năng tuyệt vời của khối đó là bạn có thể lưu lại một khối để sử dụng lại sau này. Tính năng này đặc biệt hữu dụng với các blog, những người thường xuyên thêm một kiểu nội dung đặc biệt nào đó trên blog/website của họ.

Chỉ cần nhấp vào nút menu ở góc phải trên thanh công cụ của khối. Một menu ngữ cảnh hiện ra, chọn “Add to reusable blocks” để thêm và tái sử dụng một khối.

add reuseable block in gutenberg

Bạn cần đặt tên cho khối mà mình muốn lưu để tái sử dụng. Nhấp tên cho khối sau đó nhấp vào nút Save để lưu lại.

dat ten cho khoi tai su dung

Bạn vừa lưu một khối. Chúng ta hãy tiếp tục tìm hiểu cách thêm khối đã lưu vào bài viết/trang trong WordPress.

Chỉ cần chỉnh sửa một bài viết/trang bạn muốn sử dụng khối đã lưu. Từ màn hình chỉnh sửa bài viết, nhấp vào nút thêm khối.

Bạn có thể rê chuột lên nó để xem nhanh kết quả khi thêm khối. Chỉ cần nhấp vào khối để chèn nó vào bài viết/trang.

Tất cả các khối bạn đã tạo đều được lưu trữ trong cơ sở dữ liệu của WordPress. Bạn có thể quản lý chúng bằng cách nhấp vào liên kết “Manage all reusable blocks”.

Thao tác này sẽ đưa bạn đến trang quản lý khối. Tại đây bạn có thể chỉnh sửa hoặc xóa bất kỳ khối nào mà bạn đã tạo.

manager block

Các tùy chọn xuất bản và quản lý của Gutenberg

Mỗi bài viết trong WordPress chứa rất nhiều siêu dữ liệu. Nó bao gồm các thông tin như ngày xuất bản, chuyên mục và thẻ, ảnh đại diện và nhiều thứ khác.

Tất cả các tùy chọn này được sắp xếp một cách ngăn nóc, gọn gàng ở phía bên phải của màn hình trình biên tập.

publish option

Thêm các khối thông dụng trong trình biên tập mới

Về cơ bản, trình biên tập mới có thể làm được tất cả những điều mà trình biên tập cũ có thể thực hiện. Tuy nhiên bạn cần phải làm những điều này một cách nhanh chóng và khoa học hơn trước.

Thêm một ảnh trong trình biên tập mới

Bạn có thể dễ dàng chèn một khối ảnh trong trình biên tập mới của WordPress. Chỉ cần thêm một khối Image, sau đó tải tập tin ảnh lên hoặc chọn ảnh đã có từ thư viện.

add image block

Bạn cũng có thể kéo và thả ảnh từ máy tính của mình và trình biên tập sẽ tự động tạo khối ảnh cho bạn.

Khi bạn đã thêm một ảnh, bạn sẽ nhìn thấy các thiết lập để thêm siêu dữ liệu cho ảnh như Alt, kích cỡ, liên kết…

2. Thêm một liên kết mới trong trình soạn thảo mới

Gutenberg tích hợp một số khối giúp bạn có thể chèn và chỉnh sửa văn bản một cách dễ dàng. Một trong những tính năng thường sử dụng cho một khối văn bản là chèn liên kết. Bạn có thể dễ dàng nhìn thấy nút này trên thanh công cụ phía trên của một khối.

insert link block

Bạn cũng có thể sử dụng phím tắt trong WordPress để chèn một liên kết. Nếu bạn đang sử dụng hệ điều hành Windows, tổ hợp phím tắt để chèn liên kết là Ctrl + K, hệ điều hành Mac là Command + K.

3. Thêm Gallary ảnh trong Gutenberg

Khối Gallery hoạt động giống như khối Image. Bạn có thể thêm nó, sau đó upload hoặc chọn các tập tin ảnh có trong thư viện.

4. Thêm Shortcode vào bài viết trong Gutenberg

Tất cả các Shortcode của bạn sẽ hoạt động tốt giống như trong trình soạn thảo cũ. Bạn chỉ cần thêm chúng vào khối Paragraph hoặc bạn có thể dùng khối Shortcode.

Tìm hiểu các khối nội dung mới trong Gutenberg

Trình biên tập Gutenberg khắc phục các vấn đề tồn tại lâu nay của WordPress bằng cách bổ sung một số khối nội dung mới.

Và dưới đây là một số tính năng rất hữu ích mà bạn nên tìm hiểu để làm chủ Gutenberg, tạo ra những bài viết chất lượng.

1. Thêm ảnh bên cạnh một đoạn văn bản trong WordPress

Nếu sử dụng trình biên tập cũ, bạn sẽ không thể thêm hình ảnh nằm bên cạnh một đoạn văn bản được. Nhưng với trình biên tập mới, bạn có thể dễ dàng thực hiện điều này bằng cách sử dụng khối Media & Text.

media and text settings

Khối này bao gồm hai khối đặt cạnh nhau cho phép bạn dễ dàng thêm một ảnh bên cạnh một đoạn văn bản.

2. Thêm một nút trong bài viết/trang trong WordPress

Việc thêm một nút vào bài viết/trang trong trình biên tập cũ hơi khó khăn và phức tạp. Bạn phải sử dụng plugin hoặc dùng mã HTM và CSS mới có thể tạo được một nút bấm theo ý mình.

Tuy nhiên với trình biên tập Gutenberg, bạn có thể chèn một nút vào bài viết/trang một cách nhanh chóng và dễ dàng vì nó đã tích hợp một khối dùng để thực hiện việc này.

Bạn có thể thêm liên kết, màu sắc và kiểu cho nút trong bài viết/trang của mình.

insert button in gutenberg

3. Thêm Cover Image tuyệt đẹp cho bài viết và Landing page trong WordPress

Một tính năng tuyệt vời nữa mà có thể bạn muốn thử đó là khối Cover. Tính năng này cho phép bạn thêm Cover Image cho bài viết/trang trên blog/website của mình.

Cover Image (Ảnh bìa) là một ảnh lớn thường được dùng để làm bìa cho một phần mới trong trang hoặc phần đầu của một câu chuyện. Chúng nhìn rất đẹp mắt và cho phép bạn tạo bố cục hấp dẫn.

Bạn chỉ cần thêm một khối Cover sau đó upload tập tin ảnh mà mình muốn sử dụng là được. Bạn có thể chọn màu cho ảnh bìa, hoặc biến nó thành hình nền để tạo hiệu ứng Parallex khi người dùng cuộn trang.

insert cover block

4. Chèn bảng vào bài viết

Trình biên tập cũ không có nút để bạn thêm bảng vào bài viết. Nếu muốn thêm bảng, bạn cần sử dụng plugin hoặc mã HTML và CSS.

Trình biên tập Gutenberg tích hợp khối Table cho phép bạn tạo bảng một cách nhanh chóng và dễ dàng. Chỉ cần thêm một khối table sau đó chọn số cột, số hàng để thêm vào.

table block

Giờ bạn có thể bắt đầu thêm dữ liệu cho bảng. Bạn có thể chèn thêm hàng hoặc cột bất cứ khi nào mình cần. Tuy nhiên chỉ có hai tùy chọn kiểu cơ bản để bạn lựa chọn là Regular và Stripers.

5. Tạo nhiều cột nội dung

Tạo nhiều cột nội dung cũng là một vấn đề mà trình biên tập cũ không thể làm được. Trình biên tập mới cho phép bạn thêm khối Columns để bạn có thể thêm hai khối Paragraph.

insert column block

Khối Columns này thật sự rất linh hoạt. Bạn có thể thêm đến 6 cột trong một hàng và thậm chí là sử dụng một khối khác trong mỗi cột.

Các kỹ năng khác giúp bạn có thể sử dụng Gutenberg một cách chuyên nghiệp

Nhìn vào trình biên tập nội dung mới có thể bạn sẽ tự hỏi: “Liệu tôi có đang dành quá nhiều thời gian để thêm và chỉnh sửa các khối thay vì tập trung vào việc tạo nội dung?”.

Tuy nhiên, trình biên tập mới chạy rất nhanh và lại dễ sử dụng hơn bạn tưởng. Rồi bạn sẽ nhận ra với trình biên tập mới này, công việc biên tập nội dung sẽ nhanh hơn trước rất nhiều.

Dưới đây là một số mẹo giúp bạn sử dụng Gutenberg một cách nhanh chóng và chuyên nghiệp

1. Di chuyển thanh công cụ khối lên trên

Như bạn có thể thấy, thanh công cụ xuất hiện phía trên mỗi khối. Bạn có thể di chuyển thanh công cụ lên phía trên của màn hình trình biên tập.

top toolbar block

Chỉ cần nhấp vào nút ba chấm ở phía góc phải của màn hình và sau đó chọn tùy chọn Top Toolbar.

2. Sử dụng phím tắt

Gutenberg cho phép bạn sử dụng phím tắt để cải thiện tốc độ, hiệu quả công việc. Phím tắt đầu tiên bạn có thể sử dụng ngay là /.

Chỉ cần nhập / và bắt đầu nhập, nó sẽ hiển thị tên khối mà bạn muốn thêm.

Nếu bạn muốn có nhiều phím tắt hơn, nhấp vào menu 3 chấm ở góc phải phía trên của màn hình sau đó chọn ‘Keyboard Shortcuts’.

Một cửa số popup sẽ hiện ra với danh sách tất cả các phím tắt mà bạn có thể dùng. Danh sách các phím tắt sẽ khác nhau tùy theo bạn đang sử dụng máy Mac hay Windows.

keyboard shortcode in gutenberg

3. Kéo và thả tập tin đa phương tiện để tạo khối Media

Gutenberg cho phép bạn kéo và thả tập tin đa phương tiện để tự động tạo khối Media.

Bạn có thể kéo thả một ảnh hoặc video và nó sẽ tạo khối cho bạn. Bạn cũng có thể kéo thả nhiều ảnh để tạo khối Gallery.

4. Nhúng YouTube, Twitter, Facebook, Vimeo

Gutenberg cũng giới thiệu các khối dùng để nhúng các đối tượng vào bài viết. Các khối đó là YouTube, Twitter, Facebook, Vimeo và nhiều thứ khác.

embed block

Tuy nhiên bạn chỉ cần copy và dán URL là nó sẽ tự tạo khối cho bạn.

Thêm các khối vào Gutenberg

Trình biên tập mới cho phép các nhà phát triển tạo ra các khối của riêng mình. Có một số plugin tuyệt vời cung cấp các khối cho trình biên tập mới.

Và bên dưới là một trong số chúng:

1. Advanced Gutenberg

advanced gutenberg

Advanced Gutenberg tích hợp các khối nội dung phổ biến cho các đối tượng như khối trượt sản phẩm WooCommerce, bản đồ, tab, chứng thực…

Nó cũng cho phép bạn kiểm soát các khối dựa trên phân quyền người dùng trong WordPress. Bạn có thể tạo người dùng và chỉ định các khối mà họ có quyền sử dụng.

2. Stackable – Gutenberg Blocks

stackble

Stackable – Gutenberg Blocks là tập hợp các khối với thiết kế đẹp mắt mà bạn có thể sử dụng trên website của mình. Nó bao gồm các khối: Container, posts, Feature grid, Accordion, Image box, icon list, Call to action và nhiều thứ khác.

3. Editor Blocks

Editor Blocks là một plugin khác với các khối được thiết kế gọn gàng mà bạn có thể dùng để thêm vào bài viết/trang. Nó có các khối hữu dụng như: Bảng giá, thông tin tác giả…

Các câu hỏi thường gặp về trình soạn thảo Gutenberg

Kể từ khi Gutenberg trở thành trình biên tập mới trong WordPress, tôi đã nhận được một số phản hồi cũng như các câu hỏi. Và dưới đây là một số cầu hỏi thường gặp đối với trình biên tập Gutenberg.

1. Tôi có thể chỉnh sửa các bài viết cũ trên blog/website của mình?

Những bài viết/trang cũ trên blog/website của bạn hoàn toàn không bị ảnh hưởng gì bởi Gutenberg. Bạn vẫn có thể chỉnh sửa chúng, và Gutenberg sẽ tự động mở chúng trong một khối chứa trình biên tập cũ.

Bạn có thể chỉnh sửa chúng trong trình biên tập cũ hoặc bạn có thể chuyển đổi các bài viết cũ sang dạng khối và sử dụng trình biên tập mới để chỉnh sửa.

2. Tôi có thể sử dụng trình biên tập cũ được không?

Câu trả lời là được. Bạn chỉ cần cài đặt và kích hoạt plugin Classic Editor.

Sau khi kích hoạt, nó sẽ tắt Gutenberg và bạn sẽ có thể tiếp tục sử dụng trình soạn thảo cũ.

Xin lưu ý là Classic Editor sẽ được hỗ trợ đến năm 2022.

Để tìm hiểu thêm chi tiết bạn có thể đọc lại bài viết này.

3. Gutenberg có tương thích với Theme và Plugin mà tôi đang dùng?

Dự án Gutenberg đã được phát triển trong một thời gian dài. Vì vậy các nhà phát triển có đủ thời gian để kiểm tra và đảm bảo tính tương thích giữa Gutenberg và WordPress Theme, Plugin.

Tuy nhiên cũng có một số trường hợp WordPress Plugin và Theme không hoạt động tốt. Trong trường hợp này bạn có thể sử dụng trình biên tập cũ, gửi yêu cầu đề nghị tác giả của các plugin, theme đó cập nhật để nó được tương thích với Gutenberg, hoặc sử dụng các plugin khác để thay thế.

Lời kết

Hy vọng bài viết này sẽ giúp bạn học được cách sử dụng Gutenberg và làm chủ nó. Gutenberg sẽ là một trải nghiệm tuyệt vời trong quá trình biên tập nội dung trên blog/website của bạn.

Nếu bạn thấy thích bài viết này, đừng quên Like và Share.

Trong quá trình sử dụng nếu có thắc mắc gì, hãy để lại bình luận bên dưới bài viết. Tôi sẽ trả lời bạn trong thời gian sớm nhất.

Hẹn gặp lại bạn trong các bài viết tiếp theo./.

 

 

Đăng ký nhận bài viết mới nhất

Hãy đăng ký nhận tin để nhận được những nội dung thú vị và tuyệt vời!

Để lại bình luận