Thông báo: Hotrowordpress sẽ tiến hành cập nhật lại toàn bộ plugin-themes hiện có trên blog. Thời gian hỗ trợ cập nhật từ ngày 30.03.2024, nếu cần gấp bản mới nhất vui lòng gửi mail về cho admin để nhận link download ưu tiên!

Hướng dẫn WordPress Gutenberg: Cách sử dụng Trình chỉnh sửa mới

0

Nếu bạn đã sử dụng WordPress được một vài năm, thì bạn còn nhớ khi những người ở WordPress tung ra trình chỉnh sửa Gutenberg trong WordPress 5.0 vào năm 2018.

Trình chỉnh sửa mặc định mới này là một cuộc đại tu lớn để chỉnh sửa cả bài đăng và trang trên trang web của bạn. Nó đã biến hộp văn bản lớn mà chủ sở hữu trang web đã quen thuộc thành một nền tảng chỉnh sửa dựa trên khối rất khác.

Một số chủ sở hữu trang web ghét nó đến mức họ tránh nâng cấp lên WordPress 5.0 và ở lại với trình chỉnh sửa mặc định cổ điển càng lâu càng tốt. Các chủ sở hữu trang web khác đã chấp nhận sự thay đổi này vì sự đơn giản và dễ sử dụng của nó.

Nếu bạn đang thực hiện chuyển đổi và tò mò điều gì sẽ xảy ra, hướng dẫn WordPress Gutenberg này sẽ hướng dẫn bạn qua các tính năng chính mà bạn cần biết và hiểu. Điều này sẽ giúp bạn chuyển đổi dễ dàng nhất có thể.

Điều gì sẽ xảy ra trong WordPress Gutenberg

Điều chính cần biết về trình soạn thảo Gutenberg là nó dựa trên khối. Điều này có nghĩa là bất kỳ thứ gì bạn cần thêm đều được quản lý thông qua các khối. Các khối trong Gutenberg bao gồm (nhưng không giới hạn):

  • Paragraph
  • Header
  • Image
  • List
  • Quote
  • Code
  • Preformatted
  • Pullquote
  • Table

Ngoài ra còn có một số khối nâng cao khác hiếm khi được sử dụng. Bạn có thể thấy các khối bổ sung nếu bạn cài đặt WordPress plugins mới cho người biên tập.

Thêm khối đơn giản bằng cách chọn biểu tượng + ở bên phải bên dưới khối gần đây nhất mà bạn đã thêm.

Hướng dẫn WordPress Gutenberg: Cách sử dụng Trình chỉnh sửa mới

Việc chọn bất kỳ khối nào từ cửa sổ bật lên sẽ thêm khối đó làm phần tiếp theo trong trang hoặc bài đăng của bạn.

Trước khi đến với các khối này, hãy bắt đầu lại từ đầu và tạo một bài đăng mới bằng Gutenberg trong WordPress.

Tạo bài đăng và thêm khối

Việc thêm một bài đăng vẫn không thay đổi so với phiên bản WordPress cuối cùng. Chỉ cần chọn Bài đăng (Posts) từ thanh điều hướng bên trái và chọn Thêm mới (Add New) bên dưới nó.

Hướng dẫn WordPress Gutenberg: Cách sử dụng Trình chỉnh sửa mới

Thao tác này sẽ mở cửa sổ chỉnh sửa bài đăng. Đây cũng là nơi mọi thứ trở nên khác biệt. Bạn sẽ thấy trình soạn thảo WordPress Gutenberg mặc định.

Thêm các mục khối trong Gutenberg Editor

Bạn có thể nhập tiêu đề cho bài đăng của mình trong trường tiêu đề. Sau đó chọn + biểu tượng ở bên phải để thêm khối đầu tiên.

Hướng dẫn WordPress Gutenberg: Cách sử dụng Trình chỉnh sửa mới

Khối đoạn văn

Khối đầu tiên phổ biến nhất mà mọi người thêm vào sau tiêu đề là khối đoạn văn. Để làm điều này, hãy chọn Paragraph từ cửa sổ bật lên.

Hướng dẫn WordPress Gutenberg: Cách sử dụng Trình chỉnh sửa mới

Thao tác này sẽ chèn một trường khối nơi bạn có thể bắt đầu nhập đoạn đầu tiên của bài đăng của mình. Định dạng cho khối Paragraph block tuân theo phông chữ mặc định cho Paragraph block trên trang web của bạn.

Hướng dẫn WordPress Gutenberg: Cách sử dụng Trình chỉnh sửa mới

Dưới đây là một số mẹo để thêm Paragraph block trong trình soạn thảo Gutenberg.

  • Đoạn văn của bạn có thể dài bao nhiêu tùy thích. Văn bản sẽ tự động chuyển sang dòng tiếp theo, giống như trong trình chỉnh sửa cổ điển.
  • Nếu bạn nhấn Enter, trình soạn thảo Gutenberg tự động tạo một khối đoạn văn mới, tuy nhiên nó chỉ giống như một đoạn văn thứ hai có ngắt đoạn.
  • Đánh dấu bất kỳ văn bản nào trong đoạn văn bản sẽ hiển thị một cửa sổ định dạng nơi bạn có thể thay đổi định dạng cho văn bản đó hoặc sửa đổi khối thành danh sách hoặc một số loại khối khác.
  • Chọn ba chấm và chọn Remove block để xóa một khối đoạn văn và thay thế nó bằng một khối khác.

Image Blocks

Nếu bạn chọn khối Hình ảnh, bạn sẽ thấy hộp Hình ảnh nơi bạn có thể chọn nút Tải lên để tải hình ảnh lên bài đăng từ máy tính của bạn. Chọn Thư viện phương tiện (Media Library) liên kết để sử dụng hình ảnh từ thư viện phương tiện hiện có của bạn, hoặc Chèn từ URL (Insert from URL) để liên kết đến một hình ảnh từ một trang web khác.

Hướng dẫn WordPress Gutenberg: Cách sử dụng Trình chỉnh sửa mới

Thao tác này sẽ chèn hình ảnh vào bài viết mà bạn đã thêm khối Hình ảnh mới. Bạn sẽ nhận thấy rằng bạn có thể nhập chú thích cho hình ảnh ngay dưới hình ảnh đó.

Hướng dẫn WordPress Gutenberg: Cách sử dụng Trình chỉnh sửa mới

Bạn có thể sử dụng các tùy chọn định dạng tương tự trên văn bản phụ đề giống như trên văn bản đoạn thông thường.

List Blocks

Khi bạn thêm một khối mới và chọn List, nó sẽ chèn khối danh sách vào thời điểm đó trong bài viết.

Hướng dẫn WordPress Gutenberg: Cách sử dụng Trình chỉnh sửa mới

Nó sẽ hiển thị một dấu đầu dòng, nhưng khi bạn nhập và nhấn Enter, mỗi dấu đầu dòng mới sẽ xuất hiện khi bạn cần.

Định dạng danh sách cũng tuân theo kiểu và kích thước phông chữ như được xác định bởi chủ đề của bạn, vì vậy đừng ngạc nhiên nếu phông chữ trong danh sách của bạn trông khác với các khối đoạn văn của bạn.

Bạn có thể đánh dấu văn bản trong khối danh sách và bạn sẽ thấy các tùy chọn định dạng cho văn bản này nếu bạn muốn thay đổi nó. Bạn không thể thay đổi kiểu phông chữ ở đây, nhưng bạn có thể in đậm, in nghiêng, thêm siêu liên kết hoặc thay đổi hoàn toàn kiểu khối.

Các Blocks khác

Nếu bạn muốn xem tất cả các khối có sẵn, hãy chọn + để thêm một khối, sau đó chọn Browse all để xem toàn bộ danh sách.

Hướng dẫn WordPress Gutenberg: Cách sử dụng Trình chỉnh sửa mới

Danh sách này thực sự khá dài. Mọi thứ bạn nhớ có sẵn trong trình chỉnh sửa cổ điển thông qua hệ thống menu của nó sẽ được đưa vào đây. Chúng bao gồm các khối thường được sử dụng khác như:

  • Những cái bàn
  • Tệp và phương tiện
  • Video
  • Các “More” nhãn
  • Ngắt trang và dấu phân cách
  • Các tiện ích như biểu tượng xã hội, đám mây thẻ, lịch và các tiện ích plugin WordPress
  • Nhúng mã cho các trang web xã hội, trang web truyền thông như YouTube và Spotify, v.v.

Các tính năng khác của Gutenberg

Bạn không cần phải gắn bó với các khối bạn đã thêm vào bất cứ nơi nào bạn thêm chúng. Bạn có thể cuộn lên trong bài đăng của mình và chọn + biểu tượng giữa bất kỳ khối hiện có. Điều này sẽ cho phép bạn chèn các khối mới vào giữa các khối hiện có.

Hướng dẫn WordPress Gutenberg: Cách sử dụng Trình chỉnh sửa mới

Bạn cũng không bị mắc kẹt với vị trí các khối của mình. Trong trình chỉnh sửa WordPress cổ điển, không phải lúc nào cũng dễ dàng di chuyển những thứ như hình ảnh sang các phần khác của bài đăng của bạn mà đôi khi làm rối loạn mã nền.

Ở Gutenberg, di chuyển elements như hình ảnh cũng đơn giản như chọn khối và sau đó chọn mũi tên lên hoặc xuống trong thanh menu bật lên để di chuyển khối lên hoặc xuống trong bài đăng.

Hướng dẫn WordPress Gutenberg: Cách sử dụng Trình chỉnh sửa mới

Mỗi lần bạn chọn mũi tên, nó sẽ trượt vị trí đó theo bất kỳ hướng nào bạn đã chọn.

Sử dụng Trình chỉnh sửa Glutenberg Editor trong WordPress

Khu vực đăng bài không phải là nơi duy nhất để thêm các khối mới. Bạn sẽ nhận thấy có một menu biểu tượng rất đơn giản ở đầu trình chỉnh sửa, nơi bạn có thể sử dụng + biểu tượng để thêm các khối.

Hướng dẫn WordPress Gutenberg: Cách sử dụng Trình chỉnh sửa mới

Các biểu tượng khác trong menu này cho phép bạn truy cập nhanh vào các tính năng khác của Gutenberg.

  • Cây bút Edit biểu tượng cho phép bạn chuyển sang chế độ chọn để chọn các khối dễ dàng hơn. Bấm đúp vào một khối để quay lại chế độ Chỉnh sửa.
  • Undo hoặc là Redo biểu tượng (mũi tên cong trái và phải) sẽ hoàn tác hoặc thực hiện lại lần chỉnh sửa cuối cùng của bạn.
  • Biểu tượng  i  (Chi tiết) hiển thị cho bạn số lượng ký tự, từ, tiêu đề, đoạn văn và khối trong bài đăng của bạn.
  • Các Outline biểu tượng cho phép bạn nhanh chóng điều hướng đến các khối trong bài đăng của mình dựa trên thứ tự của chúng trong dàn bài đăng của bạn.

Đối với nhiều người, trình soạn thảo Gutenberg trong WordPress phải làm quen. Nhưng sau khi trải nghiệm việc tạo, chỉnh sửa và thao tác các khối elements trong bài đăng của mình, bạn sẽ thấy rằng quá trình tạo bài đăng và trang của mình nhanh hơn và hiệu quả hơn.

Để lại bình luận

Địa chỉ email của bạn sẽ được chúng tôi bảo mật thông tin.