Hướng Dẫn Sử Dụng Gutenberg Editor Trên WordPress

Gutenberg Editor là trình chỉnh sửa nội dung mặc định của WordPress, được giới thiệu từ phiên bản 5.0. Đây là một công cụ mạnh mẽ, linh hoạt, cho phép bạn thiết kế và trình bày nội dung một cách trực quan bằng cách sử dụng các “khối” (blocks). Với Gutenberg, việc tạo bài viết, trang, và thiết kế bố cục trở nên dễ dàng hơn bao giờ hết. Trong bài viết này, chúng ta sẽ tìm hiểu hướng dẫn sử dụng Gutenberg Editor trên WordPress một cách chi tiết.

1. Gutenberg Editor là gì? Hướng Dẫn Sử Dụng Gutenberg Editor Trên WordPress

Gutenberg Editor là trình chỉnh sửa dạng khối, thay thế cho Classic Editor trước đây. Nó cho phép người dùng xây dựng nội dung bằng cách thêm, sắp xếp, và chỉnh sửa các khối, như văn bản, hình ảnh, video, nút bấm, và nhiều loại nội dung khác.

Tại sao nên sử dụng Gutenberg Editor trên WordPress?

• Giao diện trực quan: Bạn có thể xem trước nội dung ngay trong quá trình chỉnh sửa.
• Tùy biến mạnh mẽ: Hỗ trợ nhiều loại khối để tạo nội dung phong phú.
• Tích hợp tốt: Hoạt động mượt mà với hầu hết các theme và plugin WordPress.

Thân thiện với lập trình viên: Dễ dàng mở rộng và tùy chỉnh thông qua các khối tùy chỉnh (custom blocks) khi sử dụng Gutenberg Editor trên WordPress.

2. Sử dụng Gutenberg Editor trên WordPress: Cách truy cập 

Truy cập từ Dashboard

1. Đăng nhập vào Dashboard WordPress.
2. Đi đến Posts > Add New (Bài viết > Thêm mới) hoặc Pages > Add New (Trang > Thêm mới).
3. Trình chỉnh sửa Gutenberg sẽ tự động mở.

Chuyển từ Classic Editor sang sử dụng Gutenberg Editor trên WordPress

Nếu bạn đang sử dụng Gutenberg Editor trên WordPress, hãy tắt plugin Classic Editor để quay lại sử dụng Gutenberg hoặc đảm bảo WordPress của bạn đang dùng phiên bản 5.0 trở lên.

3. Sử dụng Gutenberg Editor trên WordPress: Cách sử dụng các khối (Blocks)

Thêm khối mới để sử dụng Gutenberg Editor trên WordPress

1. Nhấn vào biểu tượng “+” ở góc trên bên trái hoặc tại vị trí muốn thêm khối.
2. Chọn loại khối từ danh sách xuất hiện, ví dụ: Paragraph (Đoạn văn), Image (Hình ảnh), Heading (Tiêu đề).

Các loại khối phổ biến khi sử dụng Gutenberg Editor trên WordPress

• Paragraph (Đoạn văn): Thêm văn bản thông thường.
• Heading (Tiêu đề): Tạo tiêu đề bài viết hoặc các phần nội dung. Các cấp độ từ H1 đến H6.
• Image (Hình ảnh): Thêm và chỉnh sửa hình ảnh từ thư viện hoặc tải lên.
• List (Danh sách): Tạo danh sách dạng gạch đầu dòng hoặc đánh số.
• Quote (Trích dẫn): Hiển thị trích dẫn nổi bật khi sử dụng Gutenberg Editor trên WordPress.
• Button (Nút): Tạo nút bấm với đường dẫn.
• Gallery (Thư viện): Hiển thị nhiều hình ảnh trong cùng một khối.

Video: Nhúng video từ máy chủ hoặc các nền tảng như YouTube.

4. Sử dụng Gutenberg Editor trên WordPress: Tùy chỉnh khối trong Gutenberg Editor

Thanh công cụ của khối

Mỗi khối có thanh công cụ riêng nằm phía trên, cho phép bạn:

• Di chuyển khối lên/xuống.
• Căn lề (trái, phải, giữa).
• Chỉnh sửa định dạng như in đậm, nghiêng, hoặc thêm liên kết.

Cài đặt khối

Ở cột bên phải, bạn có thể tùy chỉnh cài đặt của khối:

• Kiểu dáng: Chọn kiểu hiển thị (ví dụ: danh sách gạch đầu dòng hoặc đánh số).
• Màu sắc: Thay đổi màu chữ và nền cho khối.
• Kích thước chữ: Tùy chỉnh kích thước văn bản khi sử dụng Gutenberg Editor trên WordPress.

Các tùy chọn nâng cao: Thêm CSS tùy chỉnh để thay đổi giao diện khối.

5. Sử dụng Gutenberg Editor trên WordPress: Cách làm việc với bố cục trong Gutenberg

Sắp xếp các khối

• Bạn có thể kéo thả các khối để thay đổi thứ tự.
• Sử dụng nút Move Up/Move Down trên thanh công cụ để di chuyển khối lên/xuống.

Tạo cột (Columns)

• Chọn khối Columns từ danh sách khối.
• Chọn số lượng cột bạn muốn (ví dụ: 2 hoặc 3 cột).
• Thêm nội dung vào từng cột bằng cách nhấp vào khu vực cột.

Tạo bố cục phức tạp

Kết hợp khối Group (Nhóm) hoặc Cover (Bìa) để nhóm các khối lại với nhau và tạo bố cục nổi bật.

6. Sử dụng Gutenberg Editor trên WordPress: Sử dụng các tính năng nâng cao 

Nhúng nội dung từ bên ngoài

• Gutenberg hỗ trợ nhúng nội dung từ các nền tảng như YouTube, Twitter, Spotify.
• Chọn khối Embed, sau đó dán liên kết (URL) cần nhúng.

Sử dụng mẫu (Reusable Blocks)

• Tạo các khối có thể tái sử dụng bằng cách:
  1. Chọn khối hoặc nhóm khối.
  2. Nhấp vào menu ba chấm trên thanh công cụ.
  3. Chọn Add to Reusable Blocks (Thêm vào Khối tái sử dụng).
• Bạn có thể tái sử dụng khối này ở các bài viết hoặc trang khác.

7. Sử dụng Gutenberg Editor trên WordPress: Tối ưu hóa nội dung

Tối ưu hóa SEO khi sử dụng Gutenberg Editor trên WordPress

• Sử dụng plugin Yoast SEO hoặc Rank Math để tối ưu tiêu đề, mô tả meta, và từ khóa trong bài viết.
• Thêm các tiêu đề phụ (H2, H3) để cải thiện cấu trúc nội dung.

Tăng tính tương tác khi 

• Thêm nút bấm (Button) để khuyến khích hành động như “Đăng ký ngay” hoặc “Liên hệ với chúng tôi”.
• Chèn video hoặc thư viện hình ảnh để làm nội dung phong phú hơn.

8. Mẹo và thủ thuật khi sử dụng Gutenberg Editor trên WordPress

Sử dụng phím tắt

• Enter: Thêm khối mới ngay bên dưới.
• Shift + Enter: Xuống dòng trong cùng một khối.
• Ctrl + Z: Hoàn tác.
• Ctrl + Shift + Z: Làm lại.

Xem trước nội dung

• Nhấn Preview để xem bài viết hoặc trang trên cả máy tính và thiết bị di động.

Sử dụng khối HTML

• Thêm khối Custom HTML để chèn mã HTML tùy chỉnh vào bài viết hoặc trang.

9. So sánh Gutenberg và Classic Editor

Gutenberg Editor là công cụ mạnh mẽ để tạo nội dung đẹp mắt và linh hoạt trên WordPress. Với khả năng sử dụng khối để xây dựng bài viết và trang, sử dụng Gutenberg Editor trên WordPress giúp bạn dễ dàng tùy chỉnh và tối ưu hóa nội dung mà không cần kỹ năng lập trình. Hãy bắt đầu làm quen với trình chỉnh sửa này để nâng cao chất lượng nội dung trên website của bạn!

Liên hệ Zalo 036 897 1050 của công ty ”Thiết Kế Web Chuyên” và ThietKeWebWio để “thiết kế logo giá rẻ” và Thiết kế website