Kể từ phiên bản WordPress 5.0, trình chỉnh sửa nội dung classic editor đã được thay thế bằng trình chỉnh sửa block editor mới được gọi là Gutenberg.
Gutenberg là một trình chỉnh sửa hoàn toàn mới và khác biệt để tạo nội dung trong WordPress. Trong bài viết này, CunghocWP sẽ hướng dẫn bạn cách sử dụng trình chỉnh sửa block editor mới để tạo các bài đăng và trang blog trực quan tuyệt đẹp.
Sự khác biệt giữa Trình chỉnh sửa Block Editor (Gutenberg) và Classic Editor là gì?
Trước khi tìm hiểu sâu về trình chỉnh sửa mới, chúng ta hãy so sánh và tìm hiểu sự khác biệt giữa Gutenberg Block Editor và Classic Editor.
Trình soạn thảo classic editor trong WordPress trông như sau:
Nếu bạn nâng cấp lên phiên bản WordPress 5.0 thì đây là giao diện của trình chỉnh sửa block editor mới:
Như bạn có thể thấy, đây là hai trình soạn thảo tạo nội dung trong WordPress hoàn toàn khác nhau.
Classic editor là trình soạn thảo văn bản với các nút định dạng rất giống với Microsoft Word.
Trình chỉnh sửa mới sử dụng một cách tiếp cận hoàn toàn khác, được gọi là ‘Blocks’ (khối), do đó có tên là Block Editor.
Khối là các phần tử nội dung được thêm vào màn hình chỉnh sửa để tạo các layout nội dung. Mỗi mục được thêm vào bài viết hoặc trang là một khối.
Bạn có thể thêm các khối cho từng paragraph, hình ảnh, video, thư viện, âm thanh, danh sách, vv… Có các khối cho tất cả các thành phần nội dung phổ biến và có thể thêm nhiều plugin khác.
Trình chỉnh sửa block editor WordPress mới tốt hơn trình chỉnh sửa classic editor như thế nào?
Trình chỉnh sửa block editor WordPress mới giúp thêm các loại nội dung khác nhau vào bài đăng và trang của bạn một cách đơn giản.
Ví dụ: trước đây nếu bạn muốn thêm một bảng trong nội dung của mình thì cần một plugin bảng riêng.
Với trình chỉnh sửa block editor mới, bạn chỉ cần thêm một khối bảng, chọn các cột và hàng rồi bắt đầu thêm nội dung.
Bạn có thể di chuyển các thành phần nội dung lên và xuống, chỉnh sửa thành các khối riêng lẻ và tạo nội dung đa phương tiện.
Quan trọng nhất, trình chỉnh sửa block editor WordPress mới rất dễ sử dụng và học hỏi.
Điều này mang lại một lợi thế to lớn cho những người mới bắt đầu với WordPress, những người mới bắt đầu viết blog đầu tiên hoặc xây dựng một trang web kinh doanh DIY .
Bây giờ, hãy cùng xem cách sử dụng trình chỉnh sửa block editor WordPress mới.
Dưới đây là những nội dung CunghocWP sẽ hướng dẫn về Gutenberg:
- Sử dụng Gutenberg – Trình chỉnh sửa block editor WordPress mới
- Tạo một bài đăng blog hoặc trang mới
- Cách thêm một khối trong Gutenberg
- Làm việc với các khối trong trình chỉnh sửa mới
- Lưu và tái sử dụng các khối trong Gutenberg
- Publish và cài đặt bài đăng trong Gutenberg
- Cài đặt plugin trong trình chỉnh sửa mới
- Thêm một số khối phổ biến trong Gutenberg
- Khám phá một số khối nội dung mới trong Gutenberg
- Lời khuyên về việc sử dụng Gutenberg
- Thêm nhiều khối hơn vào Trình chỉnh sửa Block Editor Gutenberg
- Câu hỏi thường gặp về Gutenberg
Sử dụng Gutenberg – Trình chỉnh sửa block editor WordPress mới
Trình chỉnh sửa block editor được thiết kế trực quan và linh hoạt. Mặc dù giao diện khác với trình soạn thảo WordPress cũ nhưng vẫn có đủ các tính năng như trong trình chỉnh sửa classic editor.
Hãy bắt đầu với việc trình bày những điều cơ bản trong trình chỉnh sửa classic editor và cách thực hiện trong trình chỉnh sửa block editor.
Tạo một bài đăng blog hoặc trang mới bằng cách sử dụng Trình chỉnh sửa Block Editor
Bạn cần tạo một bài đăng blog hoặc trang mới như bình thường. Chỉ cần nhấp vào Posts » Add New trong phần quản trị WordPress. Nếu bạn đang tạo một trang, hãy truy cập vào Pages » Add New.
Thao tác này sẽ khởi chạy trình chỉnh sửa block editor mới.
Cách thêm một khối trong Gutenberg
Khối đầu tiên của mỗi bài viết hoặc trang là tiêu đề.
Sau đó, bạn có thể sử dụng chuột để di chuyển xuống dưới tiêu đề hoặc nhấn phím tab trên bàn phím để di chuyển xuống và bắt đầu viết.
Theo mặc định, khối kế tiếp là một văn bản. Người dùng có thể bắt đầu viết ngay lập tức.
Tuy nhiên, nếu bạn muốn thêm một nội dung khác thì nhấp vào nút Add new block ở góc trên cùng bên trái của trình chỉnh sửa, bên dưới một khối hiện có hoặc ở bên trái của một khối.
Nhấp vào nút sẽ hiển thị menu Add block với thanh tìm kiếm ở trên và các khối thường được sử dụng bên dưới.
Bạn có thể nhấp vào các tab để duyệt các danh mục khối hoặc nhập từ khóa để nhanh chóng tìm kiếm một khối.
Nếu bạn không muốn sử dụng chuột để nhấp vào nút thì có thể sử dụng phím tắt bằng cách gõ/tìm kiếm và thêm một khối.
Làm việc với các khối trong Trình chỉnh sửa mới
Mỗi khối đi kèm với thanh công cụ riêng xuất hiện trên đầu khối. Các nút trên thanh công cụ sẽ thay đổi tùy thuộc vào khối bạn đang chỉnh sửa.
Ví dụ: trong ảnh chụp màn hình này, chúng tôi đang làm việc trong một khối văn bản hiển thị các nút định dạng cơ bản như: căn chỉnh văn bản, in đậm, in nghiêng, chèn liên kết và các nút gạch ngang.
Ngoài thanh công cụ, mỗi khối cũng có thể có các cài đặt khối riêng xuất hiện ở cột bên phải màn hình chỉnh sửa.
Bạn có thể di chuyển các khối lên và xuống bằng cách kéo & thả đơn giản hoặc nhấp vào nút Up and down bên cạnh mỗi khối.
Lưu và tái sử dụng các khối (reusable block) trong Gutenberg
Một trong những điều hay nhất là các khối có thể được lưu và tái sử dụng riêng lẻ. Điều này đặc biệt hữu ích cho các blogger thường xuyên cần thêm đoạn nội dung cụ thể vào bài viết của họ.
Chỉ cần nhấp vào nút menu nằm ở góc bên phải của thanh công cụ của mỗi khối, chọn tùy chọn ‘Add to reusable blocks’.
Bạn cần nhập tên cho khối tái sử dụng này, sau đó nhấp vào Save.
Trình chỉnh sửa block editor sẽ lưu khối dưới dạng reusable block.
Bây giờ bạn đã lưu một khối, hãy xem cách thêm khối reusable block vào các bài đăng và trang WordPress khác trên trang web.
Chỉ cần chỉnh sửa bài đăng hoặc trang bạn muốn thêm khối reusable block. Từ màn hình chỉnh sửa bài đăng, hãy nhấp vào Add block.
Bạn sẽ tìm thấy khối đã lưu của mình trong tab ‘Reusable’. Bạn cũng có thể tìm bằng cách gõ tên của khối trong thanh tìm kiếm.
Bạn có thể di chuột đến khối để xem bản xem trước của khối. Chỉ cần nhấp vào khối để chèn vào bài viết hoặc trang của bạn.
Tất cả các khối reusable block được lưu trữ trong cơ sở dữ liệu WordPress và quản lý bằng cách nhấp vào liên kết ‘manage all reusable blocks’.
Thao tác này sẽ đưa bạn đến trang quản lý khối. Từ đây, bạn có thể chỉnh sửa hoặc xóa bất kỳ khối reusable block nào. Bạn cũng có thể xuất các khối reusable block và sử dụng trên các trang web WordPress khác.
Publish và quản lý bài đăng trong Gutenberg
Mỗi bài đăng WordPress chứa rất nhiều metadata. Điều này bao gồm các thông tin như ngày publish, danh mục và thẻ, hình ảnh nổi bật, vv…
Tất cả các tùy chọn này được đặt trong cột bên phải trên màn hình soạn thảo.
Cài đặt plugin trong Gutenberg
Các plugin WordPress có thể tận dụng API của trình chỉnh sửa block editor để tích hợp các cài đặt riêng trong màn hình chỉnh sửa.
Một số plugin phổ biến đã có sẵn dưới dạng khối. Ví dụ: WPForms , plugin xây dựng form WordPress tốt nhất cho phép bạn thêm form vào nội dung bằng cách sử dụng khối widget.
Dưới đây là cách Yoast SEO cho phép bạn chỉnh sửa cài đặt SEO trong trình chỉnh sửa mới:
WooCommerce cũng đi kèm với các khối widget có thể thêm vào bất kỳ bài đăng và trang WordPress nào.
Thêm một số khối phổ biến trong trình chỉnh sửa mới
Về cơ bản, trình soạn thảo mới có thể làm mọi thứ như trình soạn thảo classic editor. Tuy nhiên, bạn sẽ làm mọi thứ nhanh chóng và thanh lịch hơn trước.
1. Thêm một hình ảnh trong trình chỉnh sửa WordPress mới
Có một khối hình ảnh sẵn sàng để sử dụng trong trình chỉnh sửa WordPress mới. Chỉ cần nhấp vào Add the block và sau đó upload file hình ảnh hoặc chọn từ thư viện ảnh.
Bạn cũng có thể kéo & thả hình ảnh từ máy tính, trình chỉnh sửa sẽ tự động tạo một khối hình ảnh cho nó.
Sau khi thêm một hình ảnh, các cài đặt khối sẽ hiển thị để thêm metadata cho hình ảnh như văn bản thay thế, kích thước và thêm một liên kết đến hình ảnh.
2. Thêm một liên kết trong Trình chỉnh sửa Block Editor mới
Trình chỉnh sửa block editor đi kèm với một số khối để thêm văn bản. Phổ biến nhất là khối paragraph đi kèm với một nút liên kết chèn trong thanh công cụ.
Tất cả các khối văn bản thường dùng khác cũng bao gồm một nút liên kết trong thanh công cụ.
Bạn cũng có thể chèn một liên kết bằng phím tắt bằng cách sử dụng tổ hợp phím Command + K nếu dùng Mac và CTRL + K trên máy tính Windows.
3. Thêm một bộ sưu tập hình ảnh trong Gutenberg
Khối thư viện (gallery) hoạt động giống như khối hình ảnh. Bạn thêm và upload hoặc chọn file hình ảnh.
4. Thêm shortcodes trong các bài đăng WordPress bằng Gutenberg
Tất cả các shortcode hoạt động giống như trong trình chỉnh sửa classic editor. Bạn chỉ cần thêm shortcode vào một khối paragraph hoặc có thể sử dụng khối shortcode.
Khám phá một số khối nội dung mới trong Gutenberg
Trình chỉnh sửa Gutenberg hứa hẹn sẽ giải quyết một số vấn đề về khả năng sử dụng lâu dài trong WordPress bằng cách giới thiệu một số khối mới.
Sau đây là một số mục yêu thích mà CunghocWP tin rằng người dùng sẽ thấy vô cùng hữu ích.
1. Thêm hình ảnh bên cạnh một số văn bản trong WordPress
Trình chỉnh sửa cũ không có chức năng đặt hình ảnh bên cạnh văn bản. Bạn có thể làm điều này ngay bây giờ với khối Media & Text .
Khối này đi kèm với hai khối được đặt cạnh nhau để thêm một hình ảnh và thêm một số văn bản bên cạnh.
2. Thêm một nút trong bài viết và trang WordPress
Trong trình chỉnh sửa classic editor, thêm một nút vào bài đăng trên blog hoặc trang là một phiền toái khác. Bạn phải sử dụng một plugin tạo shortcode cho nút hoặc chuyển sang chế độ HTML và viết code.
Gutenberg đi kèm với một khối button cho phép bạn thêm một nút vào bất kỳ bài đăng hoặc trang nào.
Bạn có thể thêm một liên kết cho nút của mình, thay đổi màu sắc và chọn từ ba kiểu nút.
3. Thêm ảnh bìa đẹp trong bài đăng trên blog và trang landing page
Một tính năng thú vị khác là khối ‘Cover’ thêm ảnh bìa vào bài đăng và trang.
Ảnh bìa là một hình ảnh rộng được sử dụng làm bìa cho một phần mới trong trang hoặc phần đầu của câu chuyện. Ảnh bìa thường khá đẹp mắt và cho phép bạn tạo layout nội dung hấp dẫn.
Bạn cần chọn Add a cover block, sau đó upload hình ảnh muốn sử dụng. Bạn có thể chọn overlay cho trang bìa hoặc sử dụng làm hình nền cố định để tạo hiệu ứng parallax khi người dùng cuộn xuống trang.
4. Tạo bảng bên trong bài viết
Trình chỉnh sửa classic editor không có nút để thêm bảng vào bài đăng WordPress. Bạn phải sử dụng một plugin hoặc tạo một bảng viết CSS và HTML tùy chỉnh.
Trình chỉnh sửa Gutenberg mới đi kèm với khối Table mặc định để các bảng vào bài đăng và trang. Chỉ cần nhấp vào Add the block, sau đó chọn số lượng cột và hàng bạn muốn chèn.
Bây giờ bạn có thể tiếp tục và bắt đầu thêm dữ liệu vào các hàng của bảng. Bạn có thể thêm nhiều hàng và cột nếu cần. Ngoài ra còn có hai tùy chọn style cơ bản có sẵn.
5. Tạo nội dung nhiều cột
Tạo nội dung nhiều cột là một vấn đề khác mà trình soạn thảo classic editor không xử lý được. Trong trình chỉnh sửa block editor có khối Columns để thêm hai cột của khối văn bản.
Khối columns này khá linh hoạt. Bạn có thể thêm tối đa 6 cột trong một hàng và sử dụng các khối khác bên trong mỗi cột.
Các tip để sử dụng Gutenberg như một chuyên gia
Trình chỉnh sửa block editor mới cực kỳ nhanh và cho phép bạn thêm các khối mà không cần suy nghĩ.
Hiệu quả công việc của bạn sẽ nhanh hơn rất nhiều khi áp dụng phương pháp mới này.
Dưới đây là một số mẹo để giúp bạn làm việc nhanh hơn với trình chỉnh sửa WordPress mới.
1. Di chuyển thanh công cụ khối lên trên cùng
Như bạn có thể thấy trong các ảnh chụp màn hình, một thanh công cụ xuất hiện trên đầu mỗi khối. Bạn có thể di chuyển thanh công cụ này lên đầu trình soạn thảo.
Chỉ cần nhấp vào nút ba chấm ở góc trên cùng bên phải của màn hình và sau đó chọn tùy chọn Top Toolbar.
2. Sử dụng phím tắt
Gutenberg đi kèm với một số phím tắt tiện dụng giúp công việc của bạn trở nên dễ dàng hơn. Điều đầu tiên bạn nên bắt đầu sử dụng ngay là /.
Chỉ cần nhập /, sau đó bắt đầu nhập, bạn sẽ tìm thấy các khối phù hợp để thêm ngay lập tức.
Để biết thêm các phím tắt, nhấp vào menu ba chấm ở góc trên bên phải màn hình và chọn ‘Keyboard Shortcuts’.
Thao tác này sẽ bật lên một cửa sổ popup với danh sách tất cả các phím tắt. Danh sách này sẽ có các phím tắt khác nhau cho người dùng Windows và Mac.
3. Kéo & thả phương tiện để tự động tạo khối phương tiện
Gutenberg cho phép bạn chỉ cần kéo & thả các file ở bất kỳ đâu trên màn hình để tự động tạo một khối.
Bạn có thể thả một file hình ảnh hoặc video để tạo khối. Bạn cũng có thể thả nhiều file hình ảnh để tạo một khối thư viện.
4. Thêm YouTube, Twitter, Facebook, Vimeo và các nội dung nhúng khác
Gutenberg giới thiệu các khối nhúng mới cho trình chỉnh sửa block editor. Có một khối cho tất cả các loại nhúng được hỗ trợ bao gồm YouTube, Twitter, Facebook, vv…
Bạn có thể sao chép và dán URL nhúng vào bất kỳ điểm nào để tự động tạo một khối.
Ví dụ: nếu bạn đã thêm URL video YouTube thì khối nhúng YouTube sẽ được tạo tự động và hiển thị video.
Thêm nhiều khối hơn vào Gutenberg Block Editor trong WordPress
Trình chỉnh sửa block editor mới trong WordPress cho phép các nhà phát triển tạo các khối riêng của họ. Có một số plugin WordPress tuyệt vời cung cấp các gói khối cho trình chỉnh sửa mới.
1. Advanced Gutenberg
Advanced Gutenberg đi kèm với một số khối cho các thành phần nội dung phổ biến như slider sản phẩm WooCommerce, testimonials, bản đồ, bộ đếm, tab, accordion, vv…
Công cụ này cũng cung cấp cho bạn quyền kiểm soát nâng cao để người dùng có thể truy cập các khối dựa trên vai trò người dùng của họ. Bạn có thể tạo hồ sơ người dùng và chọn khối nào họ có thể thêm.
2. Stackable – Gutenberg Blocks
Stackable – Gutenberg Blocks là một bộ sưu tập các khối Gutenberg được thiết kế đẹp mắt. Đó là các khối cho container, bài đăng, feature grid, accordion, box ảnh, danh sách icon, call to action, vv…
3. Editor Blocks
Editor Blocks là một bộ sưu tập các khối Gutenberg khác. Các khối hữu ích như hồ sơ tác giả, hình ảnh người dùng, bảng giá, brands, tính năng, vv…
Câu hỏi thường gặp về Gutenberg – Trình chỉnh sửa Block Editor mới trong WordPress
Kể từ khi Gutenberg trở thành biên tập WordPress mới, CunghocWP đã nhận được rất nhiều câu hỏi về Gutenberg.
1. Điều gì xảy ra với các bài viết và trang cũ của tôi? Tôi vẫn có thể chỉnh sửa các bài viết và trang đó chứ?
Các bài đăng và trang cũ của bạn hoàn toàn an toàn và không bị ảnh hưởng bởi Gutenberg. Bạn vẫn có thể chỉnh sửa và Gutenberg sẽ tự động mở trong một khối chứa trình soạn thảo classic editor.
Bạn có thể chỉnh sửa bên trong trình chỉnh sửa cũ hoặc chuyển đổi các bài viết cũ thành các khối và sử dụng trình chỉnh sửa block editor mới.
2. Tôi vẫn có thể tiếp tục sử dụng trình chỉnh sửa cũ chứ?
Có, bạn vẫn có thể tiếp tục sử dụng trình chỉnh sửa cũ. Chỉ cần cài đặt và kích hoạt plugin Classic Editor.
Sau khi kích hoạt, trình chỉnh sửa block editor sẽ bị vô hiệu hóa, bạn có thể tiếp tục sử dụng trình chỉnh sửa classic editor.
Classic Editor sẽ được hỗ trợ cho đến năm 2022.
3. Tôi phải làm gì nếu trình chỉnh sửa mới không hoạt động với plugin hoặc theme tôi đang sử dụng?
Dự án Gutenberg đã được phát triển trong một thời gian dài. Do đó, các tác giả plugin và theme có nhiều thời gian để kiểm tra các mã code của họ có tương thích hay không.
Tuy nhiên, vẫn có khả năng một số plugin và theme có thể không hoạt động tốt với trình chỉnh sửa mới. Trong trường hợp đó, bạn có thể cài đặt plugin classic editor, yêu cầu nhà phát triển thêm hỗ trợ Gutenberg hoặc chỉ cần tìm một plugin hoặc theme thay thế.
4. Làm thế nào để tìm hiểu thêm các tip và thủ thuật Gutenberg?
CunghocWP là nơi tốt nhất để tìm hiểu về trình chỉnh sửa block editor mới trong WordPress. Chúng tôi là trang web tài nguyên WordPress phong phú nhất hiện nay.
CunghocWP publish các bài viết mới và cập nhật các tài nguyên cũ để giúp bạn sử dụng thành thạo trình chỉnh sửa block editor mới.
Nếu bạn có bất kỳ câu hỏi nào, hãy liên hệ với CunghocWP bằng cách để lại nhận xét hoặc sử dụng form liên hệ trên trang web của chúng tôi.
CunghocWP hi vọng hướng dẫn về Gutenberg này sẽ giúp bạn tìm hiểu cách sử dụng trình chỉnh sửa block editor WordPress mới. Bạn cũng có thể muốn xem hướng dẫn hiệu suất WordPress hoàn chỉnh của chúng tôi để cải thiện tốc độ trang web của bạn.
Nếu thích bài viết này, hãy theo dõi YouTube Channel để xem thêm các video hướng dẫn về WordPress. Bạn cũng có thể tìm kiếm chúng tôi trên Twitter hoặc Facebook.