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

6 tháng ago, Hướng dẫn người mới, Views
Hướng dẫn sử dụng Gutenberg

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

Gutenberg, trình soạn thảo khối (block editor) mới của WordPress, đã cách mạng hóa cách chúng ta tạo và quản lý nội dung trên trang web. Bài viết này sẽ cung cấp hướng dẫn chi tiết về cách sử dụng Gutenberg, từ những khái niệm cơ bản đến các kỹ thuật nâng cao, giúp bạn khai thác tối đa tiềm năng của trình soạn thảo mạnh mẽ này.

Gutenberg là gì?

Gutenberg là trình soạn thảo mặc định của WordPress kể từ phiên bản 5.0. Thay vì dựa vào trình soạn thảo văn bản truyền thống, Gutenberg sử dụng một hệ thống dựa trên các khối (blocks). Mỗi khối đại diện cho một thành phần nội dung riêng biệt, chẳng hạn như đoạn văn, tiêu đề, hình ảnh, video, hoặc danh sách. Cách tiếp cận này mang lại sự linh hoạt và kiểm soát cao hơn đối với bố cục trang và nội dung, cho phép bạn tạo ra các trang web độc đáo và hấp dẫn.

Các khối cơ bản trong Gutenberg

Gutenberg đi kèm với một bộ sưu tập lớn các khối dựng sẵn, bao gồm:

  • Khối Đoạn văn (Paragraph): Để viết nội dung văn bản thông thường.
  • Khối Tiêu đề (Heading): Để tạo các tiêu đề H1 đến H6.
  • Khối Hình ảnh (Image): Để chèn hình ảnh vào bài viết.
  • Khối Danh sách (List): Để tạo danh sách có thứ tự hoặc không có thứ tự.
  • Khối Trích dẫn (Quote): Để hiển thị các đoạn trích dẫn.
  • Khối Bìa (Cover): Để tạo các tiêu đề lớn với hình nền.
  • Khối Video (Video): Để nhúng video từ các nguồn như YouTube hoặc Vimeo.
  • Khối Cột (Columns): Để tạo bố cục nhiều cột.

Đây chỉ là một vài ví dụ. Gutenberg cũng hỗ trợ các khối nâng cao hơn như nút, media & text, và nhiều hơn nữa. Bạn cũng có thể cài đặt các plugin để thêm các khối tùy chỉnh vào trình soạn thảo.

Cách thêm và quản lý các khối

Để thêm một khối, bạn có thể nhấp vào biểu tượng dấu cộng (+) ở bất kỳ vị trí nào trong trình soạn thảo. Thao tác này sẽ mở ra một danh sách các khối có sẵn. Bạn có thể tìm kiếm khối bạn muốn sử dụng hoặc duyệt qua các danh mục khác nhau.

Sau khi bạn đã thêm một khối, bạn có thể chỉnh sửa nội dung của nó bằng cách nhấp vào khối đó. Mỗi khối có các tùy chọn riêng, cho phép bạn tùy chỉnh kiểu dáng, kích thước, màu sắc và các thuộc tính khác. Bạn cũng có thể di chuyển các khối bằng cách kéo và thả chúng vào các vị trí khác nhau trên trang.

Để xóa một khối, hãy nhấp vào ba dấu chấm dọc ở góc trên bên phải của khối và chọn “Xóa”.

Giao diện Gutenberg

Giao diện Gutenberg được chia thành các phần chính sau:

  • Thanh công cụ trên cùng: Chứa các nút để hoàn tác, làm lại, lưu bản nháp, xem trước bài viết, và truy cập cài đặt.
  • Khu vực soạn thảo: Nơi bạn thêm và chỉnh sửa các khối.
  • Thanh bên: Hiển thị các cài đặt cho khối hiện tại và các cài đặt chung cho bài viết hoặc trang.

Thanh bên có hai tab chính: “Khối” và “Tài liệu”. Tab “Khối” hiển thị các cài đặt cho khối bạn đã chọn. Tab “Tài liệu” hiển thị các cài đặt chung cho bài viết hoặc trang, chẳng hạn như tiêu đề, đường dẫn tĩnh (permalink), danh mục, thẻ, hình ảnh đại diện, và trạng thái xuất bản.

Sử dụng các khối nâng cao

Gutenberg cung cấp nhiều khối nâng cao cho phép bạn tạo các trang web phức tạp và đẹp mắt.

  • Khối Cột: Tạo bố cục nhiều cột để sắp xếp nội dung theo cách trực quan. Bạn có thể tùy chỉnh số lượng cột và tỷ lệ của chúng.
  • Khối Nút: Thêm các nút kêu gọi hành động (call to action) để khuyến khích người dùng tương tác. Bạn có thể tùy chỉnh văn bản, liên kết, và kiểu dáng của nút.
  • Khối Media & Text: Hiển thị hình ảnh hoặc video bên cạnh văn bản. Đây là một cách tuyệt vời để thu hút sự chú ý và truyền tải thông tin một cách hiệu quả.

Thêm khối tùy chỉnh với plugin

Ngoài các khối dựng sẵn, bạn có thể thêm các khối tùy chỉnh bằng cách cài đặt plugin. Có rất nhiều plugin Gutenberg miễn phí và trả phí có sẵn, cung cấp nhiều loại khối khác nhau, từ các khối đơn giản như biểu tượng đến các khối phức tạp như slider và bảng giá.

Một số plugin Gutenberg phổ biến bao gồm:

  • Ultimate Addons for Gutenberg: Cung cấp một bộ sưu tập lớn các khối sáng tạo và mạnh mẽ.
  • Kadence Blocks: Tập trung vào việc cung cấp các khối hữu ích và dễ sử dụng để xây dựng các trang web chuyên nghiệp.
  • GenerateBlocks: Nhấn mạnh vào hiệu suất và tính linh hoạt, cho phép bạn tạo các khối tùy chỉnh của riêng mình bằng cách sử dụng CSS.

Tối ưu hóa SEO với Gutenberg

Gutenberg có thể giúp bạn tối ưu hóa nội dung của mình cho công cụ tìm kiếm (SEO). Bạn có thể sử dụng các khối tiêu đề để tạo cấu trúc nội dung rõ ràng, sử dụng các từ khóa mục tiêu trong văn bản, và thêm văn bản thay thế (alt text) vào hình ảnh.

Bạn cũng có thể sử dụng các plugin SEO như Yoast SEO hoặc Rank Math để phân tích nội dung của mình và nhận các đề xuất về cách cải thiện SEO.

Mẹo và thủ thuật Gutenberg

Dưới đây là một số mẹo và thủ thuật giúp bạn sử dụng Gutenberg hiệu quả hơn:

  • Sử dụng phím tắt: Gutenberg hỗ trợ nhiều phím tắt giúp bạn làm việc nhanh hơn. Ví dụ, bạn có thể sử dụng / để mở danh sách các khối hoặc Ctrl+Shift+D (hoặc Cmd+Shift+D trên Mac) để nhân bản một khối.
  • Sử dụng chế độ “Tập trung”: Chế độ tập trung làm nổi bật khối bạn đang chỉnh sửa và làm mờ các khối khác, giúp bạn tập trung vào công việc của mình.
  • Sử dụng chế độ “Xem trước”: Thường xuyên xem trước bài viết hoặc trang của bạn để đảm bảo rằng nó trông đẹp mắt trên các thiết bị khác nhau.
  • Lưu bản nháp thường xuyên: Đừng quên lưu bản nháp thường xuyên để tránh mất dữ liệu nếu có sự cố xảy ra.

Khắc phục sự cố Gutenberg

Đôi khi, bạn có thể gặp phải các vấn đề khi sử dụng Gutenberg. Dưới đây là một số vấn đề thường gặp và cách khắc phục:

  • Trình soạn thảo không tải: Hãy thử xóa bộ nhớ cache của trình duyệt hoặc tắt các plugin có thể gây xung đột.
  • Khối không hoạt động như mong đợi: Đảm bảo rằng bạn đang sử dụng phiên bản WordPress và Gutenberg mới nhất. Nếu vấn đề vẫn tiếp diễn, hãy thử liên hệ với nhà phát triển plugin của khối đó.
  • Lỗi “Khối này đã gặp phải lỗi và không thể xem trước”: Thử xóa và thêm lại khối. Nếu vấn đề vẫn tiếp diễn, hãy thử tắt và bật lại plugin Gutenberg.

Kết luận

Gutenberg là một công cụ mạnh mẽ có thể giúp bạn tạo ra các trang web đẹp mắt và hấp dẫn. Mặc dù có thể mất một chút thời gian để làm quen với trình soạn thảo mới này, nhưng một khi bạn đã nắm vững các khái niệm cơ bản, bạn sẽ có thể tận hưởng sự linh hoạt và kiểm soát mà nó mang lại. Hy vọng hướng dẫn này đã giúp bạn hiểu rõ hơn về cách sử dụng Gutenberg và khai thác tối đa tiềm năng của nó. Chúc bạn thành công!