Khám phá trình soạn thảo mới WordPress 5.0 (trình Soạn thảo Gutenberg)

Kể từ WordPress 5.0 trình soạn thảo nội dung truyền thống (classic content editor), đã được thay thể bởi trình soạn thảo mới có tên gọi là Gutenberg.

Trình soạn thảo mới này giúp người viết (publisher) tổ chức bài viết từ các khối nội dung trang bị sẵn vô cùng uyển chuyển, như khối nội dung hình ảnh, khối nội dung văn bản, khối nội dung video, khối nội dung bảng…

Trong bài biết hôm nay mình sẽ giúp bạn hiểu rõ hơn các khối nội dung của trình Soạn thảo Gutenberg, đồng thời giải thích thêm cách sử dụng các khối nội dung này để bạn tổ chức bài viết hợp lý và tốt hơn.

Nào chúng ta bắt đầu!

Sự khác nhau giữa trình soạn thảo truyền thống và trình soạn thảo mới Gutenberg.

Trước khi đi sâu vào tìm hiểu các khối nội dung của trình soạn thảo Gutenberg, mời bạn giành ít thời gian tìm hiểu sự khác nhau giữa trình soạn thảo truyền thống và trình soạn thảo mới Gutenberg.

Dưới đây là giao diện của 2 trình soạn thảo mời bạn xem qua!

Trình soạn thảo truyền thống từ WordPress 4 trở về trước:

01 trinh soan thao truyen thong Classic Editor

Trình soạn thảo mới Gutenberg từ WordPress 5 trở về sau, khi cài đặt mới hoặc nâng cấp lên WordPress 5 thì trình duyệt mới sẽ tự động có sẵn. Khi nâng cấp lên WordPress 5 mà bạn vẫn muốn sử dụng trình soạn thảo nội dung truyền thống thì bạn hãy cài đặt Plugin Classic Editor

02 trinh soan thao moi gutenberg

Như bạn thấy ở trên, có 2 trình soạn thảo nội dung đang tồn tại song song trên WordPress để cho bạn tạo nội dung.

Trình soạn thảo truyền thống giống với soạn thảo Word, rất đơn giản và dễ sử dụng, nếu những ai đã quen sử dụng trình soạn thảo này thì có phần bỡ ngỡ khi chuyển qua trình soạn thảo mới.

Trình soạn thảo mới Gutenberg có một sức mạnh uyển chuyển vô cùng lớn, bạn có thể tạo ra nhiều nội dung mới lạ, tất cả chỉ là kéo thả, thấy trực tiếp thành quả trong quá trình soạn thảo nội dung.

Tại sao nói trình soạn thảo mới tốt hơn hình soạn thảo truyền thống?

Trình duyệt mới, bạn thêm khối nội dung mới vào bài viết vô cùng dễ dàng như bảng, cột, ảnh kèm nội dung, ảnh cover…. đối với trình soạn thảo truyền thống để thêm được bảng vào bài viết bạn phải dùng plugin hoặc shortcode.

Còn đối với trình duyệt mới bạn chèn khối nội dung table, sau đó thêm cột, dòng và đưa nội dung vào, tất cả diễn ra gọn gàng nhanh chóng.

Chi tiết cách sử dụng trình soạn thảo mới Gutenberg

Có thể nói trình soạn thảo mới có sức mạnh vô cùng mạnh mẽ, cho người sử dụng cảm giác rất trực quan và linh hoạt, phong cách soạn thảo nội dung rất khác với trình soạn thảo tiền nhiệm, tuy nhiên nó kế thừa đầy đủ các chức năng của trình soạn thảo trước và hơn thế nữa.

Sau đây hãy cùng mình tìm hiểu cách sử dụng các khối nội dung trong trình soạn thảo mới này:

Tạo bài viết mới

Để tạo bài viết mới, cũng giống như thường lệ bạn hãy click vào Posts -> Add New trong trang quản trị WordPress. Nếu muốn tạo trang mới thì hãy click vào Pages -> Add New

03 them bai viet moi

Trình soạn thảo mới sẽ xuất hiện.

Thêm khối nội dung vào bài viết

Khối đầu tiên trong mỗi bài viết chính là tiêu đề của bài viết.

Tiếp theo, để viết nội dung bạn hãy di chuyển con trỏ chuột đến cuối dòng của tiêu đề, sau đó nhấn phím Enter (Return) trên bàn phím, con trỏ sẽ xuống dòng, khối nội dung văn bản xuất hiện, từ đây bạn có thể bắt đầu soạn thảo văn bản.

Theo mặc định, mỗi khi bạn nhấn phiếm Enter xuống dòng là khối văn bản (paragraph Block) xuất hiện để bản nhập nội dung văn bản vào, tuy nhiên, nếu bạn muốn thêm nội dung khác thì chỉ cần click vào dấu cộng phía trước để thêm các khối nội dung khác.

04 nhan dau cong them noi dung

Khi bạn click vào dấu cộng để thêm mới khối nội dung thì một cửa sổ sẽ hiện ra, tại đây bạn có thêm tìm khối nội dung mong muốn tại ô tìm kiếm nằm ở phía trên cùng của cửa sổ, hoặc bạn có thể sử dụng một số khối nội dung thông dụng đã trưng bày sẵn trong của sổ, muốn khối nội dung nào thì click chọn khối nội dung đó để thêm vào bài viết.

Bạn cũng có thể chọn nhanh thể loại của các khối nội dung để giúp bạn tìm kiếm nội dung mình cần nhanh hơn.

05 tim kiem them moi cac khoi noi dung vao bai viet

Mẹo: Tại khối nội dung văn bản, bạn có thể gõ vào dấu /, tức thì bảng danh sách khối nội dung hiện ra, bạn chọn dễ dàng các khối nội dung tại đây.

06 chon cac khoi noi dung tu phim tat

Làm việc với các Khối nội dung

Mỗi khối nội dung sẽ có thanh toolbar riêng xuất hiện ở phía trên mỗi khối nội dung. Các nút trên toolbar sẽ thay đổi tuỳ vào khối nội dung bạn đang làm việc là gì.

Ví dụ: ở màn hình bên dưới bạn đang làm việc với khối nội dung văn bản, trên thanh toolbar xuất hiện các nút cơ bản để làm việc với băn bản như in đậm, in nghiêng, chèn link, canh chữ….

07 toolbar cac khoi noi dung

Bên cạnh Toolbar, mỗi khối nội dung còn có phần thiết lập riêng cho khối nội dung đó, các thiết lập riêng của từng khối nội dung nằm ở bên phải của màn hình soạn thảo.

08 thiet lap cac thuoc tinh cho phoi van ban

 

Bạn có thể di chuyển các khối nội dung lên xuống bằng cách kép thả hoặc click vào nút lên xuống ở góc trên bên trái của mỗi khối nội dung.

09 chuyen khoi noi dung len xuong

Lưu và sử dụng lại các khối nội dung

Trong quá trình soạn thảo, một số khối nội dung sau khi tinh chỉnh phù hợp với nhu cầu, muốn sử dụng lại cho các bài viết sau, bạn thực hiện dễ dàng tại đây.

Hãy click vào nút có 3 dấu chấm nằm dọc, nằm ở vị trí cuối cùng bên phải của toolbar mỗi Block, sau đó click vào chức năng ‘Add to reusable blocks’ để lưu lại.

10 su dung lai khoi noi dung

Bạn sẽ được hỏi tên của khối nội dung lưu lại này, hãy nhập tên và click nút Save để lưu lại.

11 nhan ten va nhan nut save de luu lai

Khối nội dung bạn lưu sẽ được lưu lại tại cửa sổ thêm mới khối nội dung, có tên thể loại là Reusable.

Muốn thêm khối nội dung này vào bài viết thì cũng làm theo cách tương tự như thêm nội dung Block mới, sau đó tìm tên khối nội dung mà bạn đã đặt tên ở bước trên, hoặc bạn có thể vào thể loại Reusable để thêm vào nội dung bài viết. Rất đơn giản và dễ dàng.

12 su dung lai khoi noi dung da luu

Bạn muốn xem trước khối nội dung, hãy rê chuột lên khối nội dung cần xem, muốn thêm block vào khối nội dung, đơn giản click vào đó.

Tất cả các khối nội dung lưu để sử dụng lại, đều được lưu vào cơ sở dữ liệu của WordPress nên bạn dễ dàng quản lý thêm xoá sửa bằng cách click vào link ‘manage all reusable blocks’ ở phía dưới cửa sổ thêm mới.

13 quan ly các khoi noi dung da luu

Khi bạn click vào thì trang quản lý khối nội dung sử dụng lại hiện ra, tại đây, bạn có thể sửa xoá bất cứ khối nội dung nào bạn muốn. Bạn cũng có thể Export ra tập tin JSON để có thể sử dụng lại các khối nội dung này trong các website WordPress khác.

14 quan ly khoi noi dung xoa sua xuat ra

 

Quản lý đăng bài trong trình soạn thảo mới Gutenberg.

Bạn dễ dàng quản lý việc đăng bài bằng cách chọn tab Document bên phải màn hình soạn thảo, tại đây bạn có thể làm được nhiều thứ như đăng bài, đặt lịch đăng bài, gán thể loại cho bài viết, gán ảnh đại diện cho bài viết, lưu lại bản thảo…

15 quan ly dang bai viet

Các chức năng cộng thêm vào trình soạn thảo Gutenberg

WordPress cho phép người sử dụng thêm các khối nội dung vào trình soạn thảo Gutenberg bằng cách cài các Plugin.

Một vài Plugin quen thuộc đã được tích hợp vào trình soạn thảo mới này như WPForms, WordPress form builder plugin, Yoast SEO, WooCommerce.

Tìm hiểu một số khối nội dung quen thuộc trên trình duyệt mới

Về cơ bản, trình soạn thảo mới có thể làm được tất cả những gì trình soạn thảo truyền thống trước đây đã làm, tuy nhiên bạn làm theo cách nhanh hơn, linh hoạt hơn và hiệu quả hơn nhiều.

Thêm khối nội dung hình ảnh vào bài viết

Sau khi thêm khối nội dung hình ảnh (image block) vào bài viết, bạn có vài lựa chọn, thứ nhất là upload trực tiếp hình từ máy tính vào bài viết, thứ 2 là thêm link hình ảnh vào bài viết, thứ ba là thêm hình ảnh vào bài viết giống như cách thêm từ trình soạn thảo truyền thống. Nói chung sẽ làm cho công việc chúng ta nhanh hơn, linh hoạt hơn.

16 them khoi noi dung hinh anh vao bai viet 

Bạn cũng có thể kéo thả hình ảnh từ máy tính vào bài viết, trình soạn thảo sẽ tự động tạo khối nội dung hình ảnh cho nó. Hay không nào.

Sau khi thêm hình ảnh vào bài viết bạn hãy nhìn qua phía bên phải màn hình, các thiết lập cho hình ảnh nằm ở đây, bạn có thể thay đổi hoặc điều chỉnh thẻ Alt, Caption, size, Link cho bức ảnh…

17 cac thay doi cac thuoc tinh cua anh

Chèn Link vào bài viết

Tất cả các khối nội dung văn bản đều có nút thêm link vào bài viết xuất hiện trên toolbar, bạn chỉ cần chọn văn bản sau đó click vào nút Link để chèn vào liên kết bạn muốn.

18 chen link vao bai viet

Bạn có thể chèn link bằng cách sử dụng phím tắt trên bàn phím máy tính như Command + K trên máy tính MAC và tổ hợp phím CTRL + K trên máy tính Windows.

Thêm album ảnh hoặc gallery vào bài viết

Để thêm album hoặc gallery ảnh vào bài viết, bạn hãy chèn khối nội dung hình ảnh gallery (gallery block). Sau đó tải hình ảnh lên, cách làm cũng giống như cách thêm hình ảnh vào bài viết.

19 chen gallery vao bai viet

Thêm shortcodes vào bài viết với trình soạn thảo Gutenberg

Tất cả shortcode về cơ bản làm việc giống như trên trình soạn thảo truyền thống, Bạn đơn giản chèn shortcode vào khối văn bản hoặc sử dụng khối shortcode để thêm vào.

20 chen shortcode vao bai viet

Thêm YouTube, Facebook, Vimeo… vào bài viết

Trên trình soạn thảo mới, bạn có thể thêm hầu hết tất cả nội dung có thể nhúng vào bài viết bao gồm YouTube, Twitter, Facebook, Instagram, Spotify, Flickr…

Bạn chỉ cần chọn khối nội dung tương ứng để chèn vào bài viết. Chậm chí bạn chỉ cần copy link bỏ vào, trình soạn thảo sẽ tự động tạo khối nội dung cho bạn.

21 chen youtube twitter vao bai viet

 

Khám phá một vài Khối nội dung mới chỉ có trên trình soạn thảo mới Gutenberg

Với trình soạn thảo mới này, ngoài việc bạn có thể làm được tất cả những gì mà ở trình soạn thảo truyền thống đã làm, bạn còn có thể làm được nhiều hơn nữa như sắp xếp, bố cục nội dung độc đáo hơn, trình soạn thảo trước không thể làm được, chúng ta cùng tìm hiểu ngay sau đây.

Thêm hình ảnh và văn bản bên cạnh. (Media & TextBlog)

Với khối nội dung Media & Text cho phép bạn chèn hình ảnh một bên và văn bản một bên để mô tả cho hình ảnh đó.

22 chen image va text vao bai viet

 

Ngoài việc sắp đặt bố cục nội dung hình ảnh và bài viết, trong phần cài đặt bạn có thể thiết lập nhiều thông tin trang trí cho khối nội dung như màu sắc, thẻ alt và ngay cả thêm vào CSS để tinh chỉnh nội dung.

Thêm nút hành động vào bài viết (button block)

Với trình soạn thảo tuyền thống muốn thêm nút hành động vào bài biết bạn phải cài đặt Plugin hoặc sử dụng Shortcode, nói chung là hơi rắc rối.

Còn đối với trình soạn thảo mới này, bạn dễ dàng thêm vào các nút hành động bằng cách thêm khối nút hành động (button block) vào là xong.

23 chen nut hanh dong vao bai viet

Sau khi thêm vào nút hành động, bạn có thể chèn link, chỉnh sửa kích thứuc, màu sắc cho nút. Vô cùng đơn giản và nhanh chóng.

Thêm ảnh Cover vào bài viết hoặc landing pages (Cover block)

Bạn hãy thử trải nghiệm khối nội dung ảnh cover (Cover block), cho phép bạn thêm ảnh cover vào trong bài viết.

Ảnh cover là ảnh rộng, thường thêm vào đầu của bài viết hoặc phần nội dung mới trong một trang, hoặc bắt đầu câu chuyện. Cho phép bạn sáng tạo nội dung có tính tương tác cao.

Điểm khác của ảnh cover so với ảnh thường là bạn có thể điều chỉnh cho văn bản nằm trên hình ảnh một cách dễ dàng. Bạn cũng thể tạo hiệu ứng parallax (parallax effect) cho việc trình bày ảnh.

24 chen anh cover 

Thêm bảng vào bài viết (Table block)

Đối với trình duyệt truyền thống bạn không thể chèn bảng vào bài viết, muốn làm vậy bạn phải cài đặt Plugin, tuy nhiên đối mới trình soạn thảo mới bạn làm việc này vô cùng dễ dàng, chỉ cần chèn khối nội dung bảng (Table block), sau đó tinh chỉnh, số dòng số cột, và kiểu bảng mong muốn.

25 them table bao bai viet

Sắp xếp nội dung dạng cột (Columns block)

Bạn dễ dàng sắp xếp nội dung dạng cột như xem trên báo giấy, với khối nội dung cột (Columns block), theo mặc định nó sẽ sắp xếp 2 cột, muốn nhiều cột hơn bạn có thể thiết lập ở bên phải màn hình soạn thảo.

26 bo cuc cot cho bai viet

Bổ sung thêm các khối nội dung cho trình soạn thảo mới Gutenberg 

Với những khối nội dung trình soạn thảo mới đã trang bị sẵn, hầu như đủ sài cho tất cả người dùng, tuy nhiên, trong trường hợp do đặc thù công việc, bạn cần nhiều hơn các khối nội dung sẵn có, bạn có thể cài đặt thêm các Plugin, sau đây là các Plugin thêm khối nội dung cho trình soạn thảo mới, bạn hãy xem và chọn Plugin phù hợp để sử dụng:

Advanced Gutenberg

Với Plugin in này sẽ trang bị thêm cho trình soạn thảo mới nhiều khối nội dung như testimonials, WooCommerce product slider, maps, counter, tabs, accordions… ngoài ra còn cho phép truy cập các khối nội dung dựa vào vai trò và quyền sử dụng. Bạn có thể tạo người dùng và thêm vào các khối nội dung mà người dùng này có thể truy cập sử dụng được.

Stackable – Gutenberg Blocks

Có rất nhiều khối nội dung vô vùng độc đáo để bạn có thể sử dụng với Plugin này, hãy khám phá và tận hưởng nhé: Container Block, Separator Block, Posts Block, Feature Grid Block, Accordion Block, Image Box Block, Feature Block, Icon List Block, Call to Action Block, Card Block, Header Block, Count Up Block, Video Popup Block, Pricing Box Block, Testimonial Block, Team Members Block, Notification Block, Number Box Block, Expand / Show More Block, Button Block, Blockquote Block, Divider Block, Spacer Block.

Một số câu hỏi thường gặp với trình soạn thảo mới.

Câu hỏi 1: Tôi có thể chỉnh sửa bài viết đã viết trên trình soạn thảo cũ trên trình soạn thảo mới hay không?

Bạn vẫn có thể chỉnh sửa bài viết cũ, Trình soạn thảo mới sẽ mở nội dung của bạn trong một khối nội dung, khối nối dung này thực chất là trình soạn thảo cũ, bạn tha hồ mà chỉnh sửa, xong rồi lưu lại, không ảnh hưởng gì cả.

Tại đây, bạn cũng có thể chuyển nội dung bài viết này sang các khối nội dung của trình soạn thảo mới để cho thể sử dụng dễ dàng về sau.

Câu hỏi 2: Tôi không muốn sử dụng trình soạn thảo mới, tôi vẫn muốn sử dụng trình soạn thảo truyền thống sau khi nâng cấp lên WordPress 5.0?

Bạn hoàn toàn có thể sử dụng trình soạn thảo cũ bằng cách cài đặt Plugin Classic Editor.

Trình soạn thảo truyền thống này được WordPress hỗ trợ cho đến năm 2022 hoặc hơn, nên bạn cứ tha hồ mà sử dụng.

Câu hỏi 3: Tôi sẽ làm gì khi cài đặt Theme mới cho WordPress thì không sử dụng được trình soạn thảo mới?

Bạn có 2 cách để giải quyết, mặc dù trước khi đưa vào sử dụng chính thức trình soạn thảo mới này, cộng đồng WordPress đã test rất kỹ, tuy nhiên vẫn không tránh khỏi trường hợp đáng tiếc như câu hỏi trên, lúc này bạn có thể cài đạt Plugin Classic Editor

Để tiếp tục sử dụng trình soạn thảo truyền thống, hoặc đơn giản hơn là cài đặt theme giao diện khác.

Vài lời Kết

Mình đã trình bày khá chi tiết các khối nội dụng để soạn thảo, bố cục nội dung bài viết trên trình soạn thảo mới Gutenberg. Hi vọng bạn tiếp cận, sử dụng và sáng tạo nhiều nội dung hữu ích cho website của Bạn.

Cảm ơn bạn đã ghé Blog của mình.

Toàn Lê.

Gravatar Image
Chào Bạn! mình tên Lê Quốc Toàn, tốt nghiệp thạc sỹ công nghệ thông tin (CNTT) trường KHTN, có thời gian làm việc trong lĩnh vực này trên 20 năm, mình rất thích viết Blog và kiếm tiền online. Rất vui khi được chia sẻ và kết nối với bạn qua Blog này.  

Leave a Reply

Your email address will not be published. Required fields are marked *

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