Tôi nghĩ bạn sẽ đồng ý khi tôi nói: Toàn bộ hoạt động kinh doanh của Gutenberg này rất khó hiểu.

Thứ nhất, trình chỉnh sửa khối mới khó sử dụng hay sao? Ý tôi là, bạn không biết tất cả các công cụ yêu thích của bạn đã đi đâu. Bây giờ, bạn có thể mất nhiều thời gian hơn để tạo một bài viết, phải không?

Có thể việc thêm một liên kết (liên kết hoặc cách khác) đã ném cho bạn một đường cong và bạn cảm thấy thất vọng. Có lẽ bạn đã có vấn đề khi thêm một hình ảnh bên cạnh văn bản của bạn.

Có lẽ bạn đã thử thêm nhiều cột và mọi thứ không như mong đợi. Nếu đó không phải là trường hợp, có lẽ bạn không thể dễ dàng thêm các tệp PDF của mình hoặc bạn thấy thông báo Lỗi Cập nhật thất bại nghiêm trọng.

Chà, đừng lo lắng nữa; Tôi đã ở vị trí chính xác của bạn cách đây không lâu, nhưng bây giờ tôi thấy Gutenberg là một sự hồi hộp để sử dụng. Có một đường cong học tập, vâng, nhưng đến cuối bài hôm nay, bạn sẽ nghĩ về Gutenberg khác đi.

Gutenberg, trình chỉnh sửa khối mặc định của WordPress

Gutenberg, trình chỉnh sửa khối mặc định của WordPress

Trình biên tập Gutenberg là gì

Nếu bạn đang sử dụng WordPress 5.0 trở lên, bạn hẳn đã bắt gặp trình chỉnh sửa WordPress mới và sáng bóng, nổi tiếng là Gutenberg.

Và cũng giống như nhiều người dùng khác, bạn muốn sử dụng trình soạn thảo mang tính cách mạng, nhưng bạn lại do dự vì Gutenberg rất phức tạp .

Hoặc có lẽ khi bạn gặp Gutenberg lần đầu tiên, nhiều thứ không hoạt động. Rốt cuộc, các nhà phát triển đã và vẫn đang làm cho các chủ đề và plugin tương thích với trình chỉnh sửa khối.

Về chức năng, Classic Editor và Gutenberg làm điều tương tự; bạn biết đấy, cả hai công cụ đều giúp bạn tạo nội dung mà không cần mã hóa.

Tuy nhiên, chúng ta đã quá quen với trình soạn thảo  cũ đến nỗi chúng ta thấy việc thích nghi với giao diện người dùng Gutenberg mới hơi xa lạ, nếu không muốn nói là hoàn toàn khó hiểu. Ít nhất đó là những gì tôi nghĩ.

Chính xác thì Gutenberg là gì?

Gutenberg là trình soạn thảo mặc định mới của WordPress. Nó không giống như trình soạn thảo hình ảnh / văn bản truyền thống; Gutenberg sử dụng các khối nội dung giống như nhiều người xây dựng trang hiện đại.

Nó vận chuyển với các tính năng trực quan hơn so với Trình chỉnh sửa Cổ điển, nghĩa là bạn có thể tạo nội dung đa phương tiện một cách nhanh chóng. Giờ đây, bạn có thể nhanh chóng sắp xếp các bố cục đặc biệt cho dù bạn đang làm việc với các bài đăng hoặc trang WordPress.

Và với một vài tiện ích bổ sung, Gutenberg có thể cạnh tranh thuận lợi với các nhà xây dựng trang WordPress đã thành lập như Brizy, Elementor và Divi.

Hạn chế duy nhất là người xây dựng trang thường cung cấp nhiều tính năng hơn vì họ chủ yếu là người xây dựng trang! Đồng thời, Gutenberg vẫn còn khá trẻ và bạn chỉ có thể mong đợi trình chỉnh sửa khối sẽ phát triển theo những bước nhảy vọt.

Trong bài viết hôm nay, chúng ta sẽ có một thời gian thú vị khi tạo một bài đăng WordPress với trình soạn thảo Gutenberg. Tôi hướng đến việc bao gồm mọi chi tiết nhỏ và tính năng để bạn có thể sử dụng Gutenberg để tạo nội dung như các chuyên gia.

Bạn đã sẵn sàng chưa? Nếu vậy, hãy tạo bài đăng WordPress đó.

Cách tạo một bài đăng WordPress với Gutenberg

Nếu bạn điều hành một trang web WordPress, bạn có thể tạo nhiều bài đăng hơn các trang. Trong phần sau, chúng tôi tạo một bài đăng WordPress trong Gutenberg từ đầu. Tôi hy vọng bạn sẽ có nhiều niềm vui như tôi đã làm khi thử nghiệm Gutenberg.

Dù vậy, hãy điều hướng đến Bài viết> Thêm mới khi chúng tôi tô sáng trong ảnh chụp màn hình bên dưới.

Làm như vậy sẽ dẫn bạn thẳng đến trình soạn thảo Gutenberg được hiển thị bên dưới.

Thêm một tiêu đề

Bạn không thể viết một bài mà không có tiêu đề vững chắc. Điều tốt là Gutenberg làm cho nó dễ dàng để thêm một tiêu đề.

Khối đầu tiên bạn nhìn thấy là Tiêu đề ở đầu tài liệu như chúng tôi trình bày chi tiết trong hình trên. Để tạo tiêu đề cho bài viết của bạn, hãy nhập vào bên trong khối. Đơn giản như A, B, C.

Cần chỉnh sửa permalink? Bạn có thể dễ dàng làm điều đó trong  khối Tiêu đề bằng cách nhấp vào  nút Chỉnh sửa như hiển thị bên dưới.

Sau khi thêm tiêu đề của bạn, nhấn  phím ENTER để bắt đầu một dòng mới. Ồ vâng, Gutenberg duy trì điều hướng riêng mà bạn yêu thích trong trình chỉnh sửa WordPress cổ điển.

Thêm một đoạn mới

Nhấn  phím ENTER sẽ tạo một khối Đoạn  mới , như được hiển thị ở trên. Trước khi bạn nhập bất kỳ văn bản nào, khối sẽ trình bày cho bạn một vài tùy chọn. Xem hình ảnh được đánh số dưới đây để biết thêm chi tiết.

Ghi chú. Bạn có thể:

  1. Chuyển đổi khối đoạn mới thành bất kỳ khối nào khác, ví dụ: hình ảnh, tiêu đề, bìa, thư viện, WooC Commerce, biểu mẫu, v.v.
  2. Sử dụng phím tắt để thay đổi khối đoạn văn thành một khối hình ảnh
  3. Thay đổi khối đoạn văn thành một khối tiêu đề, nghĩa là H2, H3 và H4
  4. Chuyển đổi khối đoạn văn thành một khối hình ảnh bìa

Đối với mục đích minh họa, tôi sẽ dành đoạn đầu tiên cho phần giới thiệu bài. Khi bạn thêm một số văn bản, một thanh công cụ định dạng xuất hiện như hình dưới đây.

Nhờ thanh công cụ định dạng, bạn có thể:

  • Chuyển đoạn văn thành một câu thơ, trích dẫn, tiêu đề, danh sách, mã và văn bản được định dạng trước
  • In đậm , in nghiêng ,tấn côngvà gạch chân nội dung
  • Căn chỉnh văn bản trái, phải, giữa và biện minh
  • Thêm một liên kết cũng có thể mở trong một tab mới
  • Chèn một hình ảnh nội tuyến (vâng, nó tồn tại!)
  • Ẩn cài đặt khối
  • Nhân đôi khối
  • Chèn một khối trước hoặc sau khối hiện tại (trong trường hợp của chúng tôi, đó là đoạn đầu tiên, vì vậy không được thêm bất cứ điều gì trước, chỉ sau.) Bạn có thể thêm một khối ảnh bìa trước đoạn đầu tiên nếu bạn muốn vì nó trông như vậy tốt
  • Chỉnh sửa khối dưới dạng HTML
  • Thêm khối hiện tại vào các khối có thể sử dụng lại để bạn có thể sử dụng nó trong các bài viết khác
  • Loại bỏ hoàn toàn khối

Bạn có thể tùy chỉnh thêm khối đoạn văn với các tùy chọn có sẵn trong tab Chặn được tìm thấy trong menu thanh bên như hiển thị bên dưới.

Một vài lưu ý về hình ảnh trên:

  1. Chọn  tab Chặn ở đây để xem tất cả các tùy chọn và cài đặt khối
  2. Chọn cỡ chữ và kích hoạt Drop Cap tại đây
  3. Thêm màu nền cho đoạn văn của bạn. Tôi đặt nó thành màu xanh cho mục đích minh họa. Bạn cũng có thể tùy chỉnh màu văn bản. Trong cả hai trường hợp, bạn có thể thêm màu tùy chỉnh không giới hạn
  4. Bạn có thể thêm một lớp CSS tùy chỉnh tại đây, nghĩa là bạn có thể thêm các kiểu CSS bổ sung vào khối của mình
  5. Nền màu xanh và Drop Cap đã được áp dụng trong trình chỉnh sửa Gutenberg

Tab Tài liệu trong Thanh bên

Có một tab khác trong menu sidebar; các  tài liệu tab như hình dưới đây.

Ở đây, các ghi chú cho hình ảnh trên:

  1. Nhấn vào đây để chuyển sang  tab Tài liệu
  2. Tại đây, bạn có thể lên lịch đăng bài, đặt mức độ hiển thị thành  Riêng tư hoặc  Công khai , đặt bài đăng thành  trạng thái Đang chờ xem xét , chọn định dạng bài đăng và tạo một bài đăng dính
  3. Phần này cho phép bạn chỉnh sửa permalink của bạn
  4. Bạn có thể chọn hoặc tạo danh mục mới tại đây
  5. Thêm thẻ vào bài viết của bạn
  6. Đặt hình ảnh đặc trưng
  7. Tạo một đoạn trích thủ công
  8. Cho phép bình luận, pingback và trackbacks

Như bạn có thể thấy, bạn có rất nhiều tùy chọn để thiết kế một khối đoạn văn (và toàn bộ bài viết) theo bất kỳ cách nào bạn muốn. Nhân tiện, các khối khác nhau đi kèm với các cài đặt khác nhau khi chúng tôi tìm hiểu trong một phút.

Sau đoạn đầu tiên, nhấn  phím ENTER  lần nữa để tạo một dòng mới (hoặc khối đoạn văn). Bây giờ, chúng ta hãy thêm một hình ảnh bên dưới đoạn đầu tiên.

Thêm hình ảnh trong Gutenberg

Họ nói rằng một bức tranh nói một ngàn từ, và một bài đăng blog không có hình ảnh là tốt, buồn tẻ. Để thêm một hình ảnh trong bài đăng WordPress của bạn bằng Gutenberg, bạn có một vài tùy chọn.

Khi bạn nhấn  phím ENTER một vài phút trước, bạn đã kích hoạt một khối đoạn văn mới. Xem như Gutenberg là trực quan, bạn có thể thêm một hình ảnh bằng cách nhấp vào biểu tượng dấu cộng (+), hình ảnh hoặc bìa khi chúng tôi tô sáng trong hình ảnh bên dưới.

Một vài lưu ý:

  1. Bạn có thể thêm một hình ảnh thông qua các biểu tượng dấu cộng (+)
  2. Tại đây, bạn có thể thêm một hình ảnh dễ dàng
  3. Tùy chọn này cho phép bạn thêm ảnh bìa (Những ảnh này thường lớn hơn các ảnh khác. Ngoài ra, bạn có thể thêm văn bản trên ảnh bìa, BTW)

Đi trước và nhấp vào bất kỳ biểu tượng dấu cộng (+) nào. Tiếp theo, nhấp vào tab Hình ảnh , như hiển thị bên dưới.

Nhấp vào  tab Hình ảnh sẽ tải  khối Hình ảnh được hiển thị trong ảnh chụp màn hình bên dưới.

Các cài đặt phương tiện thông thường

… và  hình ảnh thiết lập khối.

Hôm nay bạn có học được gì không? Tôi cũng mong là như vậy. Tiếp tục nào.

Sau khi thêm hình ảnh của bạn, Gutenberg thêm một khối đoạn mới ngay bên dưới nó. Bạn có thể thêm bất cứ điều gì bạn muốn, nhưng với mục đích minh họa, tôi đã thêm một số văn bản và sau đó là một nút bên dưới đó.

Cách thêm tệp có thể tải xuống, ví dụ: PDF, hình ảnh, video, v.v.

Gutenberg giúp dễ dàng thêm các tệp có thể tải xuống vào bài đăng hoặc trang WordPress của bạn.

Trong khối Đoạn văn mới  , nhấp vào biểu tượng dấu cộng (+), điều hướng đến  Khối chung và nhấn vào  tab Tệp khi chúng tôi tô sáng bên dưới.

Làm như vậy sẽ khởi chạy khối sau:

Từ  khối Tệp , bạn có thể tải lên một tệp mới hoặc thêm một tệp từ thư viện phương tiện của mình. Sau khi thêm tệp của bạn, Gutenberg sẽ tự động thêm nút Tải xuống dễ thương  như trong hình bên dưới.

Bạn có thể chơi xung quanh với các tùy chọn. Chẳng hạn, bạn có thể chỉnh sửa / xóa tiêu đề Danh sách kiểm tra PDF miễn phí Gutenberg PDF cũng như  nút Tải xuống . Bạn có thể thêm một lớp CSS vào khối và định kiểu nó theo bất kỳ cách nào bạn muốn.

Thêm một trích dẫn trong Gutenberg

Tiếp theo, hãy thêm một trích dẫn bởi vì chúng quyến rũ, lôi cuốn và giúp bạn lái xe về nhà. Trong một dòng mới, nhấp vào dấu cộng (+), điều hướng đến Khối chung và nhấn vào  tab Trích dẫn như bên dưới.

Thêm một trích dẫn trong Gutenberg

Thêm một trích dẫn trong Gutenberg

Làm như vậy sẽ thêm  khối Trích dẫn trong bài đăng của bạn khi chúng tôi nhấn mạnh trong đoạn ghi hình bên dưới.

Lưu ý các cài đặt khối trích dẫn trong thanh bên phải ở trên?

Để thêm trích dẫn của bạn, nhập bên trong khối. Đây là kết quả của tôi.

Thêm phương tiện truyền thông nhúng trong Gutenberg

Gutenberg đi kèm với một số khối để nhúng video và phương tiện khác từ hơn 30 trang web như YouTube, Vimeo, Facebook, SoundCloud, WordPress, Sl slideshoware, v.v.

Để nhúng nội dung, nhấp vào biểu tượng dấu cộng (+), điều hướng đến Nhúng và chọn trang web. Chẳng hạn, tôi muốn YouTube, như hình bên dưới.

Tiếp theo, sao chép-dán URL video YouTube và nhấp vào nút Nhúng như trong hình bên dưới.

Ngay khi bạn nhấn  nút Nhúng , Gutenberg sẽ tự động che liên kết thành video khi chúng tôi nhấn mạnh bên dưới.

Cách thêm nút trong Gutenberg

Bạn không nên có một thời gian khó khăn để thêm các khối tại thời điểm này. Chỉ cần nhấp vào dấu cộng (+) và chọn khối của bạn. Nó không thể dễ dàng hơn thế.

Vì vậy, làm thế nào để chúng ta thêm một nút?

Trong một dòng mới (hoặc khối), nhấp vào biểu tượng dấu cộng (+), điều hướng đến  Thành phần bố cục và nhấp vào  tab Nút như hiển thị bên dưới.

Làm như vậy sẽ dẫn bạn đến  khối Nút như chúng tôi chi tiết bên dưới.

Như bạn có thể thấy từ hình ảnh trên, bạn có thể chỉnh sửa văn bản nút và thêm một liên kết. Ngoài ra, bạn có thể tùy chỉnh nút thông qua menu thanh bên bên phải màn hình.

Nhân tiện, nếu bạn sử dụng các kết hợp màu khó đọc trên các nút của mình, Gutenberg sẽ nhanh chóng cho bạn biết . Làm thế nào tốt đẹp?

Cách thêm cột trong Gutenberg

Với một nút đẹp, hãy thêm một số cột. Tôi sẽ thêm hai cột, vì vậy hãy theo dõi cẩn thận.

Đây là những gì để làm. Nhấp vào biểu tượng dấu cộng (+), điều hướng đến  Bố cục bố cục và nhấp vào tab Cột như trong hình bên dưới.

Gutenberg thêm hai cột theo mặc định. Xem hình ảnh bên dưới, và hãy nhớ rằng, tôi đã thêm nội dung vào các cột rồi.

Không tệ trong vài giây làm việc. Nhưng có lẽ bạn không muốn tạo cột. Có lẽ bạn muốn hiển thị một hình ảnh bên cạnh một số văn bản.

Có một khối cho điều đó? Có, có!

Cách thêm hình ảnh bên cạnh văn bản trong Gutenberg

Bạn đang tìm cách để thêm một hình ảnh bên cạnh một số văn bản? Nếu vậy, bạn sẽ thích phần sau.

Như thường lệ, nhấp vào biểu tượng dấu cộng (+), điều hướng đến  Bố cục bố cục và nhấp vào  Phương tiện & Văn bản như được hiển thị bên dưới.

Bạn sẽ thấy khối  Media & Text , như hiển thị bên dưới.

Tiếp theo, tải lên hình ảnh / video / phương tiện của bạn hoặc thêm một từ thư viện phương tiện. Sau đó, thêm văn bản của bạn bên cạnh phương tiện truyền thông, như thể hiện trong hình ảnh dưới đây.

Tôi đã chơi xung quanh với khối Truyền thông & Văn bản , và tôi đã đưa ra những điều sau đây. Tâm trí bạn; Tôi cũng cố gắng bóp một nút trong đó

Trông rất chuyên nghiệp đúng không? Bạn chắc chắn có thể tưởng tượng bạn có thể đạt được bao nhiêu với trình soạn thảo Gutenberg.

Khối Gutenberg của bên thứ ba

Các nhà phát triển WordPress rất quan tâm đến việc làm cho các chủ đề và plugin tương thích với trình soạn thảo Gutenberg. Một vài ví dụ bao gồm WooC Commerce, Jetpack và Yoast SEO.

Chẳng hạn, bạn có thể thêm các khối WooC Commerce vào bài đăng WordPress của mình. Đầu tiên, bạn phải cài đặt và kích hoạt WooC Commerce.

Tiếp theo, trong một dòng mới, nhấp vào biểu tượng dấu cộng (+), điều hướng đến  WooC Commerce và chọn bất kỳ khối nào bạn muốn như hiển thị bên dưới.

Bạn có biết nó có nghĩa là gì không? Nó có nghĩa là bạn có thể tạo đa phương tiện và các bài đăng và trang tuyệt vời trong vài phút.

Các khối đáng chú ý khác

Chúng tôi đã có hơn 2.000 từ và nếu chúng tôi tiếp tục, chúng tôi sẽ viết toàn bộ Sách điện tử. Lời cầu nguyện của tôi là bây giờ bạn có thể sử dụng Gutenberg mà không có bất kỳ trục trặc nào.

Đây là một danh sách các khối có sẵn khác.

  • Widgets – Bạn có thể thêm nội dung từ widget vào bài đăng trên blog
  • Shortcodes – Bạn vẫn có thể sử dụng shortcodes WordPress gốc
  • Cổ điển – Một khối tuyệt vời chứa nội dung cũ của bạn
  • Thêm – Khối trước đây được gọi là  thẻ Đọc thêm
  • Trang Break, Dấu phân cách, Miếng đệm
  • HTML tùy chỉnh, Pullquote, Bảng
  • Thư viện  và âm thanh / video HTML5
  • Và nhiều hơn nữa tùy thuộc vào chủ đề và plugin bạn sử dụng

Ngoài ra : Tạo một trang WordPress tương tự như tạo một bài đăng tiết kiệm cho một vài phút khác biệt, vì vậy chúng tôi sẽ không đi sâu vào vấn đề đó ngày hôm nay.

Phím tắt Gutenberg & Phím tắt nhanh

Gutenberg đi kèm với một vài hack và phím tắt giúp dễ dàng hơn. Chẳng hạn, nếu bạn gõ Cấm / Hồi trong một khối đoạn văn, nó sẽ hiển thị một danh sách các khối.

Thậm chí, bạn có thể chọn một khối cụ thể bằng cách nhập tiêu đề của khối sau dấu gạch chéo ngược (/), ví dụ: gõ vào bộ ảnh / hình ảnh sẽ hiển thị khối hình ảnh trong số các khối liên quan đến hình ảnh khác. Xem hình ảnh dưới đây để biết thêm chi tiết.

Phím tắt trên bàn phím: Để xem tất cả các phím tắt khả dụng, nhấn  SHIFT + ALT + H trong Windows và OPT + CTRL + H trong Mac.

Ở đầu tài liệu, bạn có thể thấy cấu trúc tài liệu bằng cách nhấp vào biểu tượng (i), như hiển thị bên dưới.

Đẹp. Cực kỳ trơn tru.

Ồ, và nhân tiện, lỗi Cập nhật không thành công của Cập nhật thường xảy ra do kết nối internet bị rung


Giữa bạn và tôi, Gutenberg là một biên tập viên nội dung tuyệt vời. Miễn là bạn sẵn sàng học các sợi dây; bạn có thể gặt hái được nhiều thứ từ trình soạn thảo WordPress trong tương lai.

Gutenberg vẫn còn tương đối trẻ, và bạn có thể hy vọng nó sẽ phát triển về khả năng sử dụng và chức năng. Nó sẽ là một lực lượng nghiêm trọng để tính toán trong những ngày tới. Những người xây dựng trang tốt hơn nên coi chừng, nếu không họ sẽ hết việc

Chúng tôi hy vọng hướng dẫn từng bước của chúng tôi để biên tập viên Gutenberg đã giúp bạn đưa mọi thứ vào quan điểm. Chúng tôi tin rằng bây giờ bạn có thể sử dụng trình chỉnh sửa khối để tạo nội dung như một chuyên gia.

Hãy chia sẻ mối quan tâm, suy nghĩ và câu hỏi của bạn trong phần bình luận bên dưới.

Pin It on Pinterest

Share This