Hướng Dẫn xài Block Editor Mới Của Wordpress (Gutenberg) chi tiết nhất

//

Gutenberg đã khiến rất nhiều anh em Blogger hay những ai đang sử dụng Wordpress cảm thấy khó chịu khi chuyển sang phiên bản mới này.

Thứ nhất, khối chỉnh sửa mới có khó sử dụng không?

Ý tôi là, bạn không biết tất cả những thứ bạn yêu thích, 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 báo, phải không?

Có thể thêm một liên kết (liên kết hoặc cách khác) là một chút khó khăn và bạn có thể đã gặp sự cố khi thêm hình ảnh bên trong văn bản cạnh tranh của mình.

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

Chà, đừng lo lắng nữa; Tài khoản của bạn đã được đặt cách đây không lâu, nhưng giờ đây, Gutenberg tài năng coi đó như một hộp khôi phục để sử dụng.

Đến cuối bài viết hôm nay, tôi nghĩ bạn cũng sẽ nghĩ khác về Gutenberg.


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 đã bắt đầu chỉnh sửa WordPress mới và sáng bóng, ngôn ngữ nổi tiếng là Gutenberg.

Và giống như nhiều người dùng khác, bạn muốn sử dụng mạng chỉnh sửa, nhưng bạn thực hiện dự án vì Gutenberg rất phức tạp.

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

Về mặt 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 viết mã.

Tuy nhiên, chúng tôi đã quá quen với việc chỉnh sửa cũ nên chúng tôi thấy công việc phù hợp với giao diện người dùng Gutenberg mới hơi lạ, nếu không muốn nói là hoàn toàn khó hiểu. Ít nhất thì đó là điều mà Tài nghĩ.

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

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

Nó có nhiều tính năng trực quan hơn Modified Classic, 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 khu vực 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 số 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 lâu đời như Brizy, Elementor và Divi.

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

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

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 đang chạy một trang web WordPress, bạn có thể tạo nhiều bài đăng hơn trang. Trong phần sau, Accounts tạo một bài đăng WordPress trong Gutenberg từ đầu. Tai hy vọng bạn sẽ có nhiều niềm vui như Tai đã làm khi thử nghiệm Gutenberg.

Tuy nhiên, điều hướng đến Đăng -> Thêm Mới làm Tài được đánh dấu trong ảnh chụp màn hình bên dưới.

Điều này sẽ hướng bạn đế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 báo mà không có một tiêu đề vững chắc. Điều tốt là Gutenberg giúp bạn dễ dàng thêm tiêu đề.

Đầu tiên bạn nhìn thấy là Tiêu đề ở đầu tài liệu như Chi tiết trong hình trên. Để đặt tiêu đề cho bài đăng của bạn, vui lòng nhập tiêu đề đó vào bên trong khối. Đơn giản như A, B, C.

Cần chỉnh sửa chỉnh sửa permalink Bạn có thể dễ dàng làm điều đó trong tiêu đề khối bằng cách vào nút Chỉnh sửa như hình dưới đây.

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

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

Nhấp vào ENTER sẽ tạo một khối Đoạn vă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ẽ hiển thị cho bạn một số tùy chọn. Xem hình ảnh đang được đánh số bên dưới để biết thêm chi tiết.

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

  • Chuyển đ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, WooCommerce, biểu mẫu, v.v.
  • Sử dụng phím tắt để thay đổi văn bản khối thành hình ảnh khối
  • Thay đổi văn bản thành tiêu đề khối, tức là H2, H3 và H4
  • Biến một khối văn bản thành một khối ảnh bìa đoạn văn

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

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

  • Biến văn bản thành một bài thơ, trích dẫn, tiêu đề, danh sách, mã và văn bản được định dạng sẵn

  • Nội dung in đậm, in nghiêng, gạch ngang và gạch chân

  • Chỉnh sửa trái văn, phải, giữa và vệ minh

  • Thêm một liên kết cũng có thể mở trong một tab mới

  • Chèn một tuyến nội dung hình ảnh (vâng, nó tồn tại!)

  • Ẩn cài đặt khối

  • Khối đô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 thể thêm gì trước, chỉ sau.) Bạn có thể thêm một khối bìa trước đoạn đầu tiên. nếu bạn muốn vì nó trông rất đẹp

  • Chỉnh sửa khối dưới định dạng HTML

  • Thêm khối hiện tại vào các khối có thể được sử dụng trở lại bạn có thể sử dụng nó trong các bài viết khác

  • Xóa toàn bộ khối

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

 

Một vài lưu ý về hình ảnh trên:
  • Chọn tab Chặn ở đây để xem tất cả các tùy chọn và khối cài đặt
  • Chọn kích thước phông chữ và bật Drop Cap tại đây
  • Thêm màu nền cho đoạn văn của bạn. Tai đặt nó thành màu xanh lam cho mục tiêu. Bạn cũng có thể chỉnh sửa văn bản màu. Trong cả hai trường hợp, bạn có thể thêm các tùy chỉnh không giới hạn
  • 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 loại CSS bổ sung vào khối của mình
  • Nền xanh lam và Drop Cap đã được áp dụng trong Gutenberg chỉnh sửa

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

Có một tab khác trong thanh bên menu; Tab tài liệu như hình bên dưới.

Đây, chú thích cho hình ảnh trên:

  • Nhấp vào đây để chuyển sang tab tài liệu
  • Tại đây, bạn có thể lên lịch bài đăng, đặt chế độ hiển thị thành Riêng tư hoặc Công khai, đặt bài đăng thành Chế độ xem đang chờ xử lý, chọn định dạng bài đăng và tạo bài đăng trực tiếp
  • Phần này cho phép bạn sửa đổi liên kết cố định của mình
  • Bạn có thể chọn hoặc tạo mục mới tại đây
  • Thêm thẻ vào bài đăng của bạn
  • Đặt hình ảnh tính năng
  • Tạo công cụ trích dẫn
  • Cho phép nhận xét, pingback và theo dõi

Như bạn thấy, bạn có rất nhiều lựa 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. Các widget, các khối khác nhau đi kèm với các cài đặt khác nhau khi Tài khoản được tìm hiểu trong một phút.

Sau khi bắt đầu đoạn văn, nhấn phím ENTER vài lần để 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 phần đầu tiên.

Thêm hình ảnh trong Gutenberg

Họ nói rằng bức ảnh nói lên một ngàn lời nói, và một bài đăng trên blog mà không có hình ảnh là điều tốt, thật đáng buồn. Để thêm hình ảnh vào bài đăng WordPress của bạn bằng Gutenberg, bạn có một số tùy chọn.

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

Một số lưu ý:

  • Bạn có thể thêm thông tin hình ảnh thông qua biểu tượng dấu (+)
  • Tại đây bạn có thể thêm hình ảnh một cách dễ dàng
  • 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 những ảnh khác. Ngoài ra, bạn có thể thêm văn bản trên ảnh bìa, BTW)

Hãy tiếp tục và sử dụng bất kỳ biểu tượng dấu cộng (+) nào. Tiếp theo, đến tab Hình ảnh, như hình dưới đây.

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

Phương tiện cài đặt 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 khoản cũng hy vọng như vậy. Tiếp tục bất kỳ.

Sau khi thêm hình ảnh của bạn, Gutenberg thêm một đoạn mới ngay bên dưới nó. Bạn có thể thêm bất cứ thứ gì bạn muốn, nhưng đối với hình minh họa mục tiêu, Tai đã 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 bạn dễ dàng thêm các tệp có thể tải xuống vào các bài đăng hoặc trang WordPress của mình.

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

Thao tác này sẽ khởi chạy khối sau:

Chặn tệp từ, bạn có thể tải lên tệp mới hoặc thêm tệp từ phương tiện thư viện của bạn. 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ư hình bên dưới.

Bạn có thể chơi xung quanh với các tùy chọn. Hạn chế, bạn có thể chỉnh sửa / xóa tiêu đề Danh sách kiểm tra PDF miễn phí của 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 dạng 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 câu trích dẫn vì chúng hấp dẫn, lôi cuốn và đưa bạn về nhà. Ở một dòng mới, bạn tìm đến dấu cộng (+), tìm đến khối chung và bấm vào tab Trích dẫn như hình bên dưới.

Điều này sẽ thêm một khối trích dẫn trong bài đăng của bạn khi Tài nhấn mạnh trong video bên dưới.

Lưu báo giá khối cài đặt trong thanh bên phải ở trên?

Để thêm báo giá của bạn, hãy nhập khối bên trong. Đâ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à các phương tiện khác từ hơn 30 trang web như YouTube, Vimeo, Facebook, SoundCloud, WordPress, Slideshare, v.v.

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

Tiếp theo, sao chép-dán URL video YouTube và chuyển đến nút Nhúng như thể hiện trong hình dưới đây.

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

Cách thêm nút trong Gutenberg

Bạn không gặp khó khăn khi thêm khối vào thời điểm này. Chỉ là 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 tôi thêm một nút?

In một dòng (hoặc khối) mới, tới biểu tượng (+), hướng của phần cục bộ và lên đến nút Tab như hiển thị bên dưới.

Điều này sẽ dẫn bạn đến nút chặn như Tài khoản được nêu chi tiết bên dưới.

Như bạn có thể thấy từ hình trên, bạn có thể chỉnh sửa văn bản nút và thêm liên kết. Ngoài ra, bạn có thể tùy chỉnh nút thông qua thanh menu 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 sắc khó đọc trên các nút của mình, Gutenberg sẽ cho bạn biết nhanh chóng. Tốt như thế nào?

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 khoản sẽ thêm hai cột, vì vậy hãy theo dõi cẩn thận.

Đây là những gì cần làm. Thêm vào biểu tượng điểm đánh dấu (+), hướng của bố cục và Tab của Cột như trong hình dưới đây.

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

Không tệ cho một vài giây làm việc. Nhưng có thể 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 đó? Vâng vâng!

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

Bạn đang muốn 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 những điều sau đây.

Bình thường, điểm đánh dấu hiện tại (+), hướng của bố cục và Sự thuận tiện & Văn bản được hiển thị bên dưới.

Bạn sẽ thấy Media & Text Block, như hình dưới đây.

Tiếp theo, tải lên ảnh / video / phương tiện của bạn hoặc thêm 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, như thể hiện trong hình ảnh bên dưới.

Các tài khoản đã chơi xung quanh khối Phương tiện & Văn bản, và các tài khoản đã được cung cấp những điều sau đây. Bạn phiền; Tài khoản cũng cố gắng nhấn một nút trong đó

Nhìn rất sai chuyên nghiệp? Bạn chắc chắn rằng bạn có thể làm được điều mà bạn có thể đạt được với việc chỉnh sửa 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 WooCommerce, Jetpack và Yoast SEO.

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

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

Bạn có biết ý nghĩa của nó? 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

Tài đã có hơn 2.000 từ và nếu Tài tiếp tục, 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 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 số hack và phím tắt giúp việc này trở nên dễ dàng hơn. Hạn chế, nếu bạn nhập “/” vào một đoạn văn bản, nó sẽ hiển thị danh sách các khối.

Tạp chí, bạn có thể chọn một khối cụ thể bằng cách gõ tiêu đề của khối sau dấu gạch chéo ngược (/), ví dụ nhập vào ảnh / ảnh sẽ hiển thị khối ảnh trong số liên kết khối ảnh khác. Xem hình ảnh bên dưới để 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ể xem cấu trúc của tài liệu bằng biểu tượng (i), như được hiển thị bên dưới.

Xinh đẹp. Trơn trượt.

Ồ, và nhân viên, lỗi cập nhật không thành công.

Giữa bạn và tôi, Gutenberg là một phần nội dung biên tập tuyệt vời. Miễn là bạn sẵn sàng tìm hiểu điều này; bạn có thể xem thêm từ trình chỉnh sửa WordPress trong tương lai.

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

Tai hy vọng hướng dẫn từng bước về trình soạn thảo Gutenberg đã giúp bạn đưa mọi thứ vào đúng vị trí. Bây giờ bạn có thể sử dụng khối chỉnh sửa để tạo nội dung như một người chuyên nghiệp.

Vui lòng chia sẻ mối quan tâm, suy nghĩ và câu hỏi của bạn trong phần nhận xét bên dưới nếu bạn cũng đang gặp sự cố khi chỉnh sửa Gutenberg.

Hướng dẫn sử dụng Gutenberg – Block Editor

Nếu bạn đã sẵn sàng sử dụng Gutenberg mới. Sau đó, đây sẽ là một phần dành cho bạn.

Tôi sẽ chỉ cho bạn cách sử dụng trình chỉnh sửa khối mới.

Giúp bạn tận dụng các tính năng mới trong WordPress 5.0

Khám phá nhanh giao diện trình chỉnh sửa khối

Trước khi bắt đầu thêm các khối, chúng ta hãy xem giao diện mới với Hawk!

giao diện gutenberg

  • A, C: Cho phép bạn add block mới
  • B: Nút undo/redo
  • D: Xem trước bài viết, bên cạnh là nút đăng bài
  • E: Sẽ xuất hiện các setting cho bài viết như: category, tag, permalink, featured image…
  • F: Sau khi bạn chọn bất kỳ block nào, nút này cho bạn nhiều tùy chỉnh sâu hơn trên block đó.
  • G: Ở đây bạn sẽ chỉnh được các chế độ view trên trình soạn thảo này

Thêm Block mới

Click và biểu tưởng [mks_icon icon=”fa-plus-circle” color=”#000000″ type=”fa”], và chọn loại nội dung bạn muốn

Tôi sẽ giới thiệu đến bạn một vài block cơ bản, được sử dụng nhiều nhất.

Như ở trên bạn có thấy chữ Most Used:

Gồm các dạng như:

  • paragraph
  • image
  • heading
  • gallery
  • list
  • quoute

các loại block

Gutenberg có rất nhiều các block, và được chia thành từng phần:

  • Inline elements: ở đây chỉ có inline image
  • Common blocks: giống như most use vậy, đây là nhưng block thường dùng
  • Formatting: các loại block cho các định dạng khác (HTML, quote, table, code)
  • Layout elements: cho phép bạn chia layout thành 2 cột 3 cột, phân chia bài viết.
  • Widgets: các loại shortcode, latest post hay category, thậm chí hiển thị các widget ngay trong gutenberg
  • Embeds: nhúng các lọa nội dung từ bên ngoài như: Facebook, Youtube…

Từ khóa:

block editor

plugin soạn thảo văn bản trong wordpress

block editor wordpress

block trong wordpress

Cover block wordpress

WordPress add block

Embed wordpress

gutenberg – block editor

0 0 votes
Article Rating
Xem thêm bài viết thuộc chuyên mục: Thủ Thuật Wordpress
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Kami
Kami
1 year ago

cho mình hỏi làm thế nào để xuống dòng nhưng ko tạo block mới vậy??
và khi có 2 block text gần nhau thì làm sao để ghép chúng thành 1 đc??
cám ơn ad nhiều ah!!