Chào các bạn,
Như vậy là WordPress 5.0 đã chính thức phát hành vào ngày 6/12/2018 với trình soạn thảo mới Gutenberg.
Khi đăng nhập vào trang Dashboard, bạn sẽ thấy thông báo để update phiên bản 5.0.
Nếu bạn chưa sẵn sàng thì có thể tiếp tục dùng WordPress 4.9.8 như cũ.
Để update lên 5.0, bạn chỉ cần nhấn update, nhưng nhớ:
- Hãy backup dữ liệu và database website trước khi nâng cấp
- Kiểm tra và cập nhật tất cả plugin lên phiên bản mới nhất
- Nếu có lỗi xảy ra, hãy trở về phiên bản 4.9.8
Trong bài viết này, mình sẽ chia sẻ bạn một số mẹo sử dụng Gutenberg Editor vì có thể nhiều bạn cảm thấy khá bỡ ngỡ với trình soạn thảo mới này.
20 MẸO DÙNG WORDPRESS GUTENBERG EDITOR
1. Thay đổi option của View
Bạn có thể thiết lập option của View tại phần Show more tools & options góc trên bên phải:
- Top Toolbar: thường thanh toolbar chứa các thao tác khi soạn thảo như: align, blod, italic, chèn link, thêm xóa block…sẽ hiển thị cùng block khi bạn thao tác độc lập. Tuy nhiên, nó lúc ẩn lúc hiện nên bạn có thể tích chọn để đưa nó lên vị trí cố định trên cùng thao tác cho dễ.
- Spotlight Mode: khi tích chọn, nó sẽ highlight khối block mà bạn đang thao tác và làm mờ các block khác giúp bạn dễ dàng tập trung hơn.
- Fullscreen Mode: mở rộng full màn hình trình soạn thảo và sẽ remove các menu WordPress dashboard phía trên và phía trái.
2. Chèn nhanh block bằng “/”
Bạn có thể chèn nhanh 1 block bằng cách gõ “/” và tên của block hoặc Gutenberg nó sẽ gợi ý các khối cho bạn lựa chọn.
Mặc định thì tất cả các block đều là Paragraph nên bạn không tìm thấy khối này khi gõ “/“.
Khi dùng quen cách này thì bạn sẽ thấy rất tiện lợi khi thêm block.
9. Dùng “Shift + Enter” để xuống dòng
Khi bạn gõ văn bản trong block Paragraph, nếu bạn nhấn Enter để xuống dòng thì nó sẽ tạo 1 block mới, khá bất tiện.
Để xuống dòng bình thường, bạn cần nhấn tổ hợp Shift + Enter.
4. Di chuyển block
Bạn có thể dễ dàng di chuyển các block tới bất cứ vị trí nào trong bài.
Hãy nhớ tắt Spotlight Mode trong View, sau đó rê qua block bạn sẽ thấy biểu tượng để di chuyển lên xuống Move up/ Move down và icon 6 chấm để kéo thả.
Bạn có thể click vào icon 6 chấm và kéo thả block tới bất cứ vị trí nào.
5. Thay đổi loại block
Tính năng Change block type này rất tiện dụng.
Bạn chỉ cần chọn icon của block nó sẽ hiện 2 dấu tên vòng tròn Change block type tại thanh Toolbar để bạn thay đổi sang block khác.
Mỗi loại block chỉ có thể thay đổi tới một số loại block nhất định.
Ví dụ: bạn có thể biến đổi block Paragraph thành:
- Heading
- List
- Quote
- Preformatted
- Verse
Hoặc thay đổi block Image thành:
- Cover
- Media & Text
- Gallery
- File
6. Thêm block hoặc nhúng nội dung mới
Để thêm block hoặc nhúng nội dung mới, sẽ có một biểu tượng (+) Add block bên dưới block hiện tại hoặc bạn di chuột lên phía trên góc trái sẽ thấy.
Ngoài ra, bạn có thể sử dụng tổ hợp phím tắt để thêm block vào các vị trí mong muốn:
- Ctrl + Alt + T: chèn một khối mới trên khối bạn đã chọn.
- Ctrl + Alt + Y: chèn một khối mới dưới khối bạn đã chọn
Đây chính là các lệnh Insert Before/ Insert After ở More options tại thanh Toolbar.
7. Xóa block, nội dung
Cũng tương tự thêm block, để xóa block bạn nhấn tổ hợp phím:
- Shift + Alt + Z: xóa khối bạn chọn
Hoặc vào Toolbar => Remove Block
8. Cấu trúc bài viết
Gutenberg giúp bạn hiển thị tất cả thống kê của bài viết gồm số lượng:
- Từ
- Thẻ
- Block
- Đoạn văn
Và hiển thị cấu trúc các block Heading (H1, H2, H3…) theo dạng cây giúp bạn theo dõi, soạn thảo dễ dàng hơn.
Bạn có thể chọn và di chuyển tới phần heading thật dễ dàng.
Tại phần Block Navigation (Shift + Alt + O) sẽ giúp bạn biết các block và vị trí từ trên xuống dưới, để tới nhanh block nào chỉ cần nhấp chuột là xong.
9. Chèn ảnh bằng kéo thả từ Desktop
Đây là một tính năng giúp bạn tiết kiệm thời gian.
Bạn chỉ cần kéo thả ảnh trực tiếp từ máy tính vào bất cứ vị trí nào trong bài viết mà không cần tạo mới block Image và insert ảnh thông thường.
Gutenberg sẽ tự động tải ảnh lên Media Library rồi chèn vào vị trí đó.
Tuy vậy, ảnh sau khi chèn vào sẽ là 1 block Image mới chứ không nằm ở trong Paragraph.
10. Chèn ảnh vào vị trí của đoạn văn bản Paragraph
Với Editor cũ, việc bạn chèn 1 bức ảnh vào trái, phải, trên, dưới văn bản là rất dễ dàng.
Nhưng Gutenberg thì khi bạn chèn ảnh nó sẽ là 1 block và bạn chỉ có thể di chuyển lên xuống.
Để chèn ảnh vào trái, phải của Paragraph, bạn hãy di chuyển block ảnh lên trên block Paragraph => nhấn Align Left/ Right.
Ví dụ:
11. Visual Editor và Code Editor
Gutenberg cho phép sửa code HTML giống như trình soạn thảo văn bản cũ.
Bạn chọn phần Editor từ 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
Hoặc để chỉnh sửa code HTML cho từng block, bạn chọn Edit as HTML
12. Phím tắt của Gutenberg
Bạn có thể sử dụng hệ thống phím tắt rất đa dạng của Gutenberg sẽ giúp bạn soạn thảo hiệu quả hơn.
Để xem danh sách phím tắt, bạn nhấn Shift + Alt + H hoặc phần Keyboard Shortcuts trong More tools & options
Ngoài ra bạn có thể sử dụng cú pháp markdown bằng cách gõ các phím sau và phím cách để tạo nhanh:
- ##: 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 quote, bạn gõ “>” và phím cách, Gutenberg sẽ tự động kích hoạt block Quote.
13. Chỉnh sửa URL bài viết
Bạn có thể chỉnh sửa URL bài viết tại phần Permalink hoặc click vào tiêu đề bài viết.
14. Tạo Block Template theo ý muốn
Reusable Block là một tính năng khá hay của Gutenberg giúp bạn có thể lưu lại các block để dùng lần sau, tiết kiệm thời gian khi soạn thảo.
Bạn chỉ cần chọn 1 block hoặc các block bạn muốn => chọn dấu 3 chấm => Add to Reusable Blocks => đặt tên cho block mới.
Vậy là bạn đã có block mới, từ giờ bạn có thể chèn block này vào bất cứ bài viết nào rất tiện.
Bạn có thể xem toàn bộ các reusable block đã tạo tại Manage All Reusable Blocks
15. Hiển thị Class WYSIWYG chỉnh sửa cũ
Nếu bạn muốn dùng các tính năng chỉnh sửa vốn rất quen thuộc của khung soạn thảo cũ, bạn có thể tạo 1 block mới và gõ “/class” hoặc thêm block Class trong Formatting.
Nó sẽ xuất hiện thanh toolbar editor cũ chính là thanh công cụ TinyMCE.
16. Tạo Button
Đây là tính năng mình khá thích vì rất tiện lợi so với Editor cũ.
Bạn chỉ cần chèn block Button trong Layout Elements và thoải mái tùy biến về style, màu sắc, kích cỡ, chèn link…
Điểm khá hay khi bạn lựa chọn Background Color và Text Color là nó sẽ nhắc bạn về sự hòa hợp màu sắc hiển thị tốt nhất cho người đọc.
17. Thêm CSS cho block
Hầu hết các block đều có tùy chọn để thêm các đoạn CSS bổ sung tại phần Block => Advanced => Additional CSS Class.
18. Bookmark/ HTML Anchor
Các tag HTML Anchor cho phép bạn di chuyển nhanh tới đoạn văn bản trong bài viết.
Đây chính là tính năng giống như bạn tạo mục lục (Table Of Contents) bằng cách bạn gán các tag anchor cho các Heading hay chính là thêm thuộc tính ID.
Mình nhớ trước đây nó có nút Copy Link ngay bên dưới nhưng hình như đã bỏ.
Vì vậy, link anchor dùng để trỏ đến heading sẽ dạng: link bài viết#anchor-text
Ví dụ: như trên link anchor của mình để chèn truy cập nhanh tới thẻ H2 Hướng dẫn Gutenberg mình sẽ thêm #huong-dan-gutenberg phía sau URL bài viết đó.
19. Deactive Gutenberg Editor
Một khi bạn update lên WordPress 5.0, trình soạn thảo Gutenberg sẽ tự động được cài đặt.
Nếu vẫn muốn sử dụng trình soạn thảo cũ, bạn chỉ cần cài đặt plugin Class Editor
20. Đang cập nhật…
Ngoài các tip ở trên thì bạn có thể tự khám phá thêm các block, các nội dung nhúng và cách dùng chúng.
Một số block khác như Table, Column, Shortcode…cũng khá hữu ích trong Gutenberg.
Nếu bạn quan tâm hơn về Gutenberg, bạn có thể theo dõi thêm tại các blog sau:
Lời kết
Mặc dù bạn có thích hay chê Gutenberg Editor thì nó cũng đã trở thành một phần của WordPress 5.0.
Hy vọng là bài viết giúp ích cho bạn sử dụng Gutenberg khi soạn thảo bài viết hiệu quả hơn.
Nếu bạn biết thêm bất cứ tip dùng Gutenberg nào thì comment để chia sẻ cho mọi người biết thêm nhé.
Chúc bạn vui vẻ.
Cảm ơn bạn, bài viết rất hữi ích. Mình đang dùng thử cái này, thấy cũng hay nhưng khá rườm rà nếu chưa quen.
Cho mình hỏi sao khi chuyển sang phiên bản này mình không thể căn lề 2 bên cho văn bản. Thực sự văn bản xuất ra nhìn rất xấu. Sử dụng thấy bất tiện hơn nhiều so với trình cũ. Haizz
vẫn có phần căn lề mà bạn, nếu k thì dùng trình văn bản cũ cũng được, cái nào tiện thì nên dùng
Mình cũng có chung thắc mắc, nếu dùng trình soạn thảo cũ thì ok nhưng có cách nào dùng trình soạn thảo mới mà vẫn căn đều hai bên được không nhỉ?
Anh cho em hỏi đc k?
Việc “từ khóa” trong tất cả thẻ H2 (hoặc H3) nhiều lần thì có bị tính là SPAM ko nhỉ?
Vd như: Bài viết của em có 6 thẻ H2, thì em chèn từ khóa cần SEO ở trong H2 là 5 lần, nhiều trường hợp còn chèn hết luôn.
Em chèn như vậy, nhưg vẫn đảm bảo ko vượt mức 2,5% do Yoast Seo quy định. Ko biết là có ảnh hưởng gì ko anh?
việc bạn chèn từ khóa trong thẻ heading tất nhiên không ảnh hưởng gì đến spam, tuy nhiên bạn nên tìm hiểu ý nghĩa của các thẻ heading và không nên spam từ khóa trong thẻ quá nhiều, hãy phân bổ và đặt tiêu đề có từ khóa 1 cách khéo léo và hợp lý nhất, giúp tóm tắt và làm nổi bật phần nội dung bên dưới thẻ.