HomeHướng dẫn WordPress

17+ tip với WordPress Gutenberg Editor giúp bạn làm việc năng suất hơn

Like Tweet Pin it Share Share Email

Như bạn đã biết WordPress sắp sửa ra mắt một edtior hoàn toàn mới thay cho editor đang có. Tên gọi của editor này là Gutenberg

Hiện Gutenberg đang được phát hành dưới dạng plugin riêng. Nhưng trong bản WordPress 5.0 nó sẽ được đưa vào phần core và trở thành editor mặc định. 

Với những bạn đã từng làm việc với một WordPress page builder thì cách làm việc của Gutenberg không có gì quá xa lạ. 

Phương pháp của nó là dựa trên khối (block) để giúp bạn tạo ra nội dung và bố cục (layout) phức tạp hơn. 

Ví dụ bây giờ bạn sẽ có thể chèn nút ngay trong editor hay tạo một layout nhiều cột mà không cần cài plugin page builder. 

Nhưng rõ ràng với một số bạn Gutenberg vẫn là thứ gì đó khá xa lạ. Do vậy để giúp bạn sử dụng Gutenberg năng suất hơn, mình tổng hợp lại danh sách khoảng 17+ típ làm việc với editor mới này. 

17+ tip với WordPress Gutenberg giúp bạn làm việc năng suất hơn

1. Hiểu rõ giao diện làm việc của Gutenberg

Đây là không phải là tip thực sự. Nhưng đầu tiên bạn cần hiểu rõ mọi thứ có trong giao diện của Gutenberg. 

Đây là ảnh chụp giúp bạn làm quen với với giao diện của Gutenberg: 

tip làm việc với gutenberg

1. Những nút này để cho bạn thêm khối mới (block) vào Gutenberg. Chức này cho phép bạn nhìn thấy toàn bộ block có sẵn. Nhưng mình sẽ chỉ cho bạn một cách nhanh hơn để thêm block mới. 

2. Đây là phần thân của editor. Ở trên cùng bạn có tiêu đề của post/page. Và phía dưới, bạn có nội dung thực sự.

3. Khu vực này cho phép thực hiện nhiều hành động giống như phần sidebar của editor hiện tại. Có một sự khác biệt lớn là nếu bạn chọn một block, nó sẽ cung cấp nhiều tùy chọn cho phép bạn cấu hình block đó.

Ở hình dưới bạn sẽ nhìn thấy giao diện khi mình click vào block paragraph. Tab block của sidebar được chọn cho phép bạn thay đổi kích cỡ văn bản (text size), màu sắc (color), drop cap vân vân.  Để quay trở về thiết lập khác bạn hoặc click ra khỏi block hoặc thủ công chọn tab Document. ​

tip làm việc với gutenberg 1

2. Tận dụng các khối nội dung mới

Một điểm thuận lợi của Gutenberg chính là bạn có trong tay nhiều khối nội dung mới. Với TinyMCE Editor (editor hiện tại của WordPress) bạn sẽ không thể chèn được những kiểu nội dung này. Chỉ có một cách duy nhất là cài thêm plugin bên thứ ba hoặc tự code HTML.

Ở đây mình sẽ không đề cập quá kỹ nhưng mình khuyến khích bạn nên xem list các block mà Gutenberg cung cấp.

Một vài khối nội dung khá hay bạn có thể chèn vào tài liệu:

  • Button
  • File download
  • Cover image
  • vân vân
tip làm việc với gutenberg 2

Nếu bạn vẫn chưa thỏa mãn với những block mặc định này bạn có thể bổ sung thêm những block mới như mình đề cập trong bài viết này. 

3. ​Sử dụng "/" để chèn nhanh một khối

Như mình đã đề cập ở trên bạn có thể dùng nút + để duyệt các khối có sẵn và chọn khối bạn muốn.

Nhưng làm cách này thì hơi mất thời gian.

Do vậy nếu biết rõ khối nào bạn cần, có một cách nhanh hơn để chèn. Chỉ cần đánh "/" và bắt đầu nhập tên block bạn cần.

Khi bạn đánh Gutenberg sẽ gợi ý khối phù hợp. Lúc đó bạn chỉ cần gõ "Enter" để chèn block. ​

tip làm việc với gutenberg 4

4. Chèn ảnh bằng kéo thả chúng từ Desktop

Đây là một tính năng giúp bạn tiết kiệm thời gian.

Hơn là chèn ảnh thủ công bằng tạo một block image mới cho mỗi ảnh rồi tải ảnh vào trong Media Library, bạn có thể đơn giản kéo ảnh ngay từ desktop vào trong giao diện Gutenberg ở vị trí chính xác bạn bạn muốn xuất hiện. 

Lúc này, Gutenberg sẽ tự động tải ảnh lên Media Library rồi chèn vào vị trí đó.

Nó khá đơn giản phải không nào? Bạn chỉ cần chắc chắn rằng bạn nhìn thấy đường màu xanh trong khi kéo thả để đảm bảo mọi thứ hoạt động như ý muốn. ​

tip làm việc với gutenberg 5

5. Học các phím tắt của Gutenberg

Nếu bạn muốn làm việc năng suất hơn bạn cần phải biết các phím tắt của Guteberg.

Trong khi đa số các phím tắt phổ biến sẽ làm việc trong Gutenberg ví dụ như Ctrl+B để in đậm, Gutenberg cũng bổ sung một số phím tắt chuyên dụng giúp bạn tiết kiệm thời gian.

Để xem danh sách các phím tắt, bạn có thể sử dụng phím tắt Shift + Alt + H:

tip làm việc với gutenberg 6

Mình khuyên bạn nên xem danh sách đầy đủ. Nhưng đây là 3 phím tắt mình thấy hữu ích nhất: 

  • ​Ctrl + Alt + Blackspace: xóa khối bạn chọn
  • Ctrl + Alt + T: chèn một khối mới trước khối bạn đã chọn. 
  • Ctrl + Alt + Y: chèn một khối mới sau khối bạn đã chọn

Ngoài những phím tắt trên bạn có thể sử dụng cú pháp markdown. Đây là một số cú pháp markdown làm việc được trong Gutenberg: 

  • ## để tạo một heading
  • 1. để tạo một ordered list
  • * để tạo mọt unordered list
  • > để tạo một quote​

Ví dụ để tạo một heading H2, bạn đánh "##" sau đó phím khoảng trắng. Lúc đó Gutenberg sẽ tự động kích hoạt block heading. 

Xem minh họa bên dưới: ​

tip làm việc với gutenberg 7

6. Biến một block thành block khác

Hơn là chèn một block cho mỗi kiểu nội dung khác nhau, bạn có thể tiết kiệm thời gian bằng cách chuyển một block thành một khác.

Tính năng này hữu ích với text. Ví dụ bạn có thể biến đổi block paragraph bình thường thành:

  • Heading
  • Quote
  • List
  • ​Preformatted Verse

Nhưng bạn cũng có thể thực hiện việc chuyển đổi này với những kiểu block khác: như chuyển một image bình thường thành cover image. 

Để truy cập tính năng biến đổi này bạn sử dụng toolbar: ​

tip làm việc với gutenberg 8

7. Bổ sung thanh toolbar cố định cho định dạng dễ dàng hơn

Nói về thanh toolbar..

Nhiều người không thích cách toolbar của Gutenberg cứ lúc ẩn lúc hiện khi họ di chuyển giữa các khối.

Nếu điều này làm bạn cảm thấy phiền toái, Gutenberg để cho phép bạn chuyển sang toolbar cố định. Nghĩa là bạn sẽ có một thanh toolbar cố định ở trên cùng của editor.

Bạn có thể bật chế độ này bằng cách sử dụng phần ba chấm ở góc trên bên phải và chọn Unified Toolbar: ​

tip làm việc với gutenberg 9

8. Sử dụng tính năng kéo thả để sắp xếp các block

Với editor cũ, bạn phải cắt và dán để sắp xếp nội dung. Trong khi bạn vẫn có thể làm được việc này nhưng với Gutenberg có một cách thuận tiện hơn. Đó là sử dụng layout control rê thả có sẵn của Gutenberg.

Để bật chế độ kéo thả, bạn chỉ cần rê chuột lên khối sau đó rê lên nút có sáu chấm ở bên trái. 

tip làm việc với gutenberg 10

Sau đó chỉ cần kéo thả vào vị trí bạn muốn

tip làm việc với gutenberg 11

9. Sử dụng Shift + Enter để ngắt dòng thay vì tạo một block mới

Bạn muốn tạo một dòng văn bản mới mà không muốn tạo một block paragraph mới? ​

Đơn giản chỉ cần sử Shift + Enter thay vì sử dụng Enter. ​

tip làm việc với gutenberg 12

10. Tạo column với block column

Ngoài việc tạo block nội dung, Gutenberg còn cho phép bạn sáng tạo hơn với bố cục nội dung của mình với block column.

Ngay khi bạn thêm block Columns bạn có thể bổ sung thêm một block khác bên trong nó để tận dụng một layout mới. Như bên dưới là layout 25% - 25% - 50%: ​

tip làm việc với gutenberg 12

Block Columns của Gutenberg cũng chỉ làm được những thứ cơ bản. Nếu bạn cần nhiều tính năng nâng cao hơn, bạn có thể xài plugin miễn phí Kadence Blocks

​11. Tạo Block Template để bạn tái sử dụng lại

Block template là một tính năng hay ho của Gutenberg để giúp bạn tiết kiệm nhiều thời gian trong việc tạo nội dung.

Đầu tiên bạn chỉ cần chọn tất cả block của bạn (chỉ cần và rê giống như bạn chọn văn bản trong editor hiện tại).

Sau click vào phần ba dấu chấm. Từ menu sổ xuống bạn chọn Add to Reusable Blocks: 

tip làm việc với gutenberg 13

Sau đó bạn nhập vào tên template: 

tip làm việc với gutenberg 14

Từ đây bạn sẽ chèn template giống như chèn một block Gutenberg. 

tip làm việc với gutenberg 15

Điểm tuyệt vời ở đây: 

Bạn có thể sụng tính năng import/export template như file JSON để sử dụng ở trên website khác.

Để truy cập tính năng này, bạn click vào nút ba chấm ở góc trên bên phải, chọn Manage All Reusable Blocks.

Bạn sẽ chuyển sang khu vực mà bạn có thể:

  • Import  block template từ file JSON.
  • Xóa ​block template
  • Export block template thành file JSON. 
tip làm việc với gutenberg 16

12. Chỉnh sửa Slug của Post (đường dẫn URL bài viết)

Ở giao diện Gutenber việc chỉnh sửa slug của Post không trực quan cho lắm.

Nếu bạn muốn chỉnh sửa URL đầu tiên bạn cần click vào tiêu đề bài viết. Sau đó bạn có thẻ chỉnh sửa URL:

tip làm việc với gutenberg 17

13. Tận dụng tính năng canh ảnh full-width

Nếu bạn sử dụng theme tương thích với Gutenberg, bạn có thể tạo một ảnh full-width kéo căng toàn bộ trang. 

Tất cả bạn chỉ cần chọn Full width (bạn chỉ nhìn thấy tùy chọn này nếu theme bạn tương thích Gutenberg). 

tip làm việc với gutenberg 17

14. Sử dụng Classic block nếu bạn quen với editor cũ

Nếu bạn không thích block paragraph mới​, Gutenberg vẫn có một block Classic nhúng TinyMCE editor như là một block. 

Thậm chí bạn còn có TinyMCE toolbar, bao gồm các nút mà plugin khác bổ sung vào toolbar: ​

tip làm việc với gutenberg 19

​15. Chuyển tất cả bài viết cũ thành thiết kế mới thân thiện Gutenberg

Một trong những lý do vì sao Gutenberg bổ sung block Classic chính là vấn đề tương thích.

Thử hình dung có hàng triệu bài viết được tạo ra với editor cũ. Nó sẽ là vấn đề lớn nếu Gutenberg tự động chuyển đổi tất cả post này thành những block.

Do vậy Gutenberg chỉ tự động đặt tất cả nội dung thành một block Classic duy nhất.

Ví dụ đây là một bài post được tạo ra sử dụng editor cũ: ​

tip làm việc với gutenberg 20

Và đây là bài post sau khi activate plugin Gutenberg: 

tip làm việc với gutenberg 21

Như bạn thấy tất cả chỉ là một block Class duy nhất thay vì mỗi khối riêng cho từng paragraph/image. 

Nếu bạn muốn sử dụng Gutenberg với nội dung cũ, tất cả thứ bạn cần chỉ là click vào ba chấm rồi chọn Convert to Blocks: ​

tip làm việc với gutenberg 22

Gutenberg sẽ tự động đặt mỗi phần tử vào block của nó. Bây giờ bạn có thể thao tác với nó như một bài post bạn tạo từ đầu với Gutenberg. 

16. ​Chỉnh sửa code HTML

Gutenberg vẫn cho phép sửa code HTML. Để làm được việc này, bạn hoặc sử dụng nút ba chấm ở góc trên bên phải hoặc sử dụng phím tắt Ctrl + Shift + Alt + M: ​

tip làm việc với gutenberg 25

17. Ẩn sidebar khi chỉnh sửa full màn hình

Để thực hiện điều này, bạn click vào nút Răng cưa, sau đó bạn chọn Fullscreen Mode để ẩn sidebar:​

tip làm việc với gutenberg 26

18. Deactive Gutenberg Editor

Cuối cùng nếu bạn không thích Gutenberg bạn muốn deactivate nó để sử dụng TinyMCE Editor, bạn chỉ cần cài đặt và activate plugin Classic Editor​

Nguồn WPLift

1
Để lại bình luận

1 Comment threads
0 Thread replies
1 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Recent comment authors
newest oldest
Guest

Hóng quá, cái này có vẻ tiện hơn cái cũ nhiều!!!

Scroll Up
Share This