Cách sử dụng WordPress Gutenberg, trình chỉnh sửa khối mặc định của WordPress (Gutenberg editor Tutorial)
Bạn có muốn học cách sử dụng trình chỉnh sửa khối WordPress (WordPress Gutenberg) không?
Khi WordPress 5.0 được phát hành vào năm 2019, nó đã thay thế trình chỉnh sửa cổ điển cũ bằng trình chỉnh sửa khối hoàn toàn mới có biệt danh là “Gutenberg”. Trình chỉnh sửa khối đã giới thiệu một cách không thể khác hơn khác để tạo nội dung trong WordPress.
Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách sử dụng trình chỉnh sửa khối WordPress và thành thạo nó để tạo các trang và bài đăng web trực quan tuyệt đẹp.
Sự khác biệt giữa Block Editor (WordPress Gutenberg) và Classic Editor là gì?
Trước khi chúng ta đi sâu vào trình chỉnh sửa khối, trước tiên chúng ta hãy so sánh và hiểu sự khác biệt giữa trình chỉnh sửa khối Gutenberg và trình chỉnh sửa cổ điển cũ.
Đây là giao diện của trình soạn thảo cổ điển trong WordPress:
Và đây là trình chỉnh sửa khối WordPress hiện đại
Như bạn có thể thấy, chúng là hai trình soạn thảo hoàn toàn khác nhau để tạo nội dung trong WordPress.
Trình soạn thảo cổ điển cũ 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à ‘Khối (Block)’, do đó, nó tên là trình chỉnh sửa khối (Block editor).
Khối là các phần tử nội dung mà bạn thêm vào màn hình chỉnh sửa để tạo bố cục nội dung. Mỗi mục bạn thêm vào bài đăng hoặc trang của mình là một khối.
Bạn có thể thêm khối cho từng đoạn văn, hình ảnh, video, thư viện, âm thanh, danh sách, v.v. Có các khối cho tất cả các yếu tố nội dung phổ biến và nhiều khối khác có thể được bổ sung bằng các plugin WordPress.
Trình chỉnh sửa khối WordPress Gutenberg tốt hơn trình chỉnh sửa cổ điển như thế nào?
Trình chỉnh sửa khối WordPress cung cấp một cách đơn giản để thêm các loại nội dung khác nhau vào các bài đăng và trang của bạ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ì bạn cần một plugin bảng riêng biệt.
Với trình chỉnh sửa khối, bạn có thể chỉ cần thêm một khối bảng, chọn cột và hàng của mình và bắt đầu thêm nội dung.
Bạn có thể di chuyển các phần tử nội dung lên và xuống, chỉnh sửa chúng dưới dạng các khối riêng lẻ và dễ dàng tạo nội dung đa phương tiện.
Quan trọng nhất, trình chỉnh sửa khối WordPress rất dễ sử dụng và dễ học.
Điều này mang lại một lợi thế to lớn cho tất cả những người mới bắt đầu sử dụng WordPress, những người mới bắt đầu viết trang blog đầu tiên của họ hoặc xây dựng một trang web kinh doanh.
Nói như vậy, hãy cùng xem cách sử dụng trình chỉnh sửa khối WordPress như một người chuyên nghiệp để tạo ra nội dung tuyệt vời.
Để xem tổng quát những gì chúng tôi sẽ đề cập trong hướng dẫn WordPress Gutenberg này, vui lòng xem phần mục lục.
Bạn đã sẵn sàng chưa? Hãy đi sâu vào chi tiết nào.
Sử dụng Gutenberg – Trình chỉnh sửa khối WordPress
Trình chỉnh sửa khối được thiết kế trực quan và linh hoạt. Mặc dù nó trông khác so với trình chỉnh sửa WordPress cũ, nhưng nó vẫn thực hiện được tất cả những điều mà bạn có thể làm trong trình chỉnh sửa cổ điển.
Hãy bắt đầu với việc trình bày những điều cơ bản mà bạn đã làm trong trình chỉnh sửa cổ điển và cách chúng được thực hiện trong trình chỉnh sửa khối.
Tạo một bài đăng hoặc trang blog mới bằng trình chỉnh sửa khối WordPress Gutenberg
Bạn sẽ bắt đầu tạo một bài đăng hoặc trang blog mới như bình thường. Chỉ cần nhấp vào Posts » Add New menu trong quản trị viên WordPress của bạn. Nếu bạn đang tạo một trang, hãy truy cập Pages » Add New menu.
Thao tác này sẽ khởi chạy trình chỉnh sửa khối.
Cách thêm khối trong Gutenberg
Khối đầu tiên của mỗi bài đăng hoặc trang là tiêu đề.
Bạn có thể sử dụng chuột để di chuyển bên dưới tiêu đề hoặc nhấn phím tab trên bàn phím để di chuyển con trỏ xuống và bắt đầu viết.
Theo mặc định, khối tiếp theo là khối đoạn văn. Điều này cho phép người dùng bắt đầu viết ngay lập tức.
Tuy nhiên, nếu bạn muốn thêm thứ gì đó khác, thì bạn có thể nhấp vào nút thêm khối mới (+) ở góc trên cùng bên trái của trình chỉnh sửa, bên dưới khối hiện có hoặc ở bên phải khối.
Nhấp vào nút sẽ hiển thị menu thêm khối với thanh tìm kiếm ở trên cùng 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 qua các danh mục khối hoặc nhập một 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ì bạn có thể sử dụng phím tắt bằng cách nhập / để 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 đoạn vă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, nghiêng, chèn liên kết và hơn thế nữa.
Ngoài thanh công cụ, mỗi khối cũng có thể có cài đặt khối riêng sẽ xuất hiện trong cột bên phải của màn hình chỉnh sửa của bạn.
Bạn có thể di chuyển các khối lên và xuống bằng cách kéo chúng hoặc nhấp vào nút lên và xuống bên cạnh mỗi khối.
Tổ chức các khối theo nhóm và cột
Trình chỉnh sửa khối đi kèm với các công cụ tiện dụng để quản lý và sắp xếp bố cục nội dung của bạn.
Bạn có thể chọn nhiều khối bằng cách nhấp vào chúng trong khi nhấn phím SHIFT trên bàn phím.
Sau đó, nhấp vào nút loại khối trên thanh công cụ để chuyển các khối đã chọn thành Nhóm hoặc Cột.
Sau đó, bạn có thể áp dụng các kiểu cho toàn bộ khối nhóm chẳng hạn như thay đổi căn chỉnh hoặc khoảng cách của chúng.
Trình chỉnh sửa khối cũng cho phép bạn thêm một khối Nhóm hoặc Cột trống. Sau đó, bạn có thể lấp đầy chúng bằng các khối khác.
Sau đó, bạn có thể thêm vào mỗi cột với bất kỳ loại khối nào để tạo bố cục theo ý của bạn.
Lưu và sử dụng lại các khối trong Gutenberg
Một trong những điều tốt nhất về khối là chúng có thể được lưu và tái sử dụng lại. Điều này đặc biệt hữu ích cho chủ sở hữu trang web và người viết blog, những người thường xuyên cần thêm các đoạn nội dung cụ thể vào các bài viết hoặc trang 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. Từ menu, chọn tùy chọn ‘Add to Reusable blocks‘.
Bạn sẽ cần đặt tên cho khối có thể sử dụng lại của mình để bạn có thể xác định và sử dụng lại sau này.
Trình chỉnh sửa khối bây giờ sẽ lưu khối dưới dạng một khối có thể sử dụng lại.
Chỉ cần chỉnh sửa bài đăng hoặc trang mà bạn muốn thêm khối có thể sử dụng lại. Từ màn hình chỉnh sửa bài đăng, nhấp vào nút thêm khối.
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 thấy nó bằng cách gõ tên của nó vào thanh tìm kiếm.
Bạn có thể di chuột qua nó để xem bản xem trước nhanh về khối. Chỉ cần nhấp vào khối để chèn nó vào bài đăng hoặc trang của bạn.
Tất cả các khối có thể tái sử dụng được lưu trữ trong cơ sở dữ liệu WordPress của bạn và bạn có thể quản lý chúng bằng cách nhấp vào liên kết ‘Manage Reusable blocks’.
Thao tác này sẽ đưa bạn đến trang trình quản lý khối. Từ đây, bạn có thể chỉnh sửa hoặc xóa bất kỳ khối có thể sử dụng lại nào của mình. Bạn cũng có thể xuất các khối có thể tái sử dụng và sử dụng chúng trên bất kỳ trang web WordPress nào khác.
Lưu ý: Bạn cũng có thể sử dụng toàn bộ nhóm và cột làm khối có thể sử dụng lại. Điều này cho phép bạn lưu toàn bộ phần và sử dụng chúng bất cứ khi nào cần.
Tùy chọn xuất bản và quản lý trong Gutenberg Block Editor
Mỗi bài đăng trên WordPress chứa rất nhiều siêu dữ liệu. Điều này bao gồm thông tin như ngày xuất bản, danh mục và thẻ bài viết, hình ảnh nổi bật, v.v.
Tất cả các tùy chọn này được đặt gọn gàng trong cột bên phải trên màn hình trình soạn thảo.
Tùy chọn plugin trong Gutenberg
Các plugin WordPress có thể tận dụng API của trình chỉnh sửa khối để tích hợp cài đặt của riêng chúng trong màn hình chỉnh sửa.
Một số plugin phổ biến đi kèm với các khối riêng của chúng. Ví dụ: WPForms, plugin trình tạo biểu mẫu WordPress tốt nhất cho phép bạn thêm biểu mẫu vào nội dung của mình bằng cách sử dụng một khối.
Đây là cách plugin ‘All In One Seo’ cho phép bạn chỉnh sửa cài đặt SEO của mình trong trình chỉnh sửa khối:
WooCommerce cũng đi kèm với các khối mà bạn có thể dễ dàng thêm vào bất kỳ bài đăng và trang nào của bạn.
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 chỉnh sửa khối có thể làm mọi thứ mà trình chỉnh sửa cổ điển đã làm. Tuy nhiên, bạn sẽ làm mọi việc nhanh chóng và thanh lịch hơn trước.
1. Thêm hình ảnh trong trình chỉnh sửa khối WordPress
Có một khối hình ảnh sẵn sàng sử dụng trong trình chỉnh sửa khối WordPress. Chỉ cần thêm khối và sau đó tải lên tệp hình ảnh hoặc chọn từ thư viện phương tiện.
Bạn cũng có thể kéo và thả hình ảnh từ máy tính của mình và trình chỉnh sửa sẽ tự động tạo một khối hình ảnh cho nó.
Khi bạn đã thêm hình ảnh, bạn sẽ có thể thấy cài đặt khối nơi bạn có thể thêm siêu dữ liệu cho hình ảnh như văn bản thay thế, kích thước và thêm liên kết vào hình ảnh.
2. Thêm một liên kết trong trình chỉnh sửa khối
Trình chỉnh sửa khối đi kèm với một số khối để bạn có thể thêm văn bản. Cách thường được sử dụng nhất là khối đoạn văn đi kèm với nút chèn liên kết trên thanh công cụ.
Tất cả các khối văn bản thường được sử 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 liên kết bằng phím tắt, đó là Command + K cho Mac và CTRL + K trên máy tính Windows.
3. Thêm thư viện hình ảnh trong Gutenberg
Khối thư viện hoạt động giống như khối hình ảnh. Bạn thêm nó và sau đó tải lên hoặc chọn các tệp hình ảnh.
4. Thêm shortcode trong bài đăng WordPress bằng Gutenberg
Tất cả các mã ngắn của bạn sẽ hoạt động giống như chúng đã làm trong trình chỉnh sửa cổ điển. Bạn có thể chỉ cần thêm chúng vào một khối đoạn văn hoặc bạn có thể sử dụng khối mã ngắn.
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à chúng tôi 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
Sử dụng trình chỉnh sửa cũ, nhiều người dùng của chúng tôi không thể đặt hình ảnh bên cạnh văn bản. Bạn có thể thực hiện việc này ngay bây giờ với khối Phương tiện & Văn bản.
Khối đơn giản này đi kèm với hai khối được đặt cạnh nhau cho phép bạn dễ dàng thêm một hình ảnh với một số văn bản bên cạnh nó.
2. Thêm một nút trong các bài đăng và trang WordPress
Thêm một nút vào các bài đăng hoặc trang blog của bạn là một điều khó chịu khác trong trình chỉnh sửa cũ. Bạn phải sử dụng một plugin tạo mã ngắn cho nút hoặc bạn phải chuyển sang chế độ HTML và viết mã.
Gutenberg đi kèm với một khối nút cho phép bạn nhanh chóng 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 liên kết cho nút của mình, thay đổi màu sắc và hơn thế nữa. Để biết chi tiết, hãy xem bài viết của chúng tôi về cách dễ dàng thêm các nút trong WordPress.
3. Thêm hình ảnh bìa đẹp trong các bài đăng blog và trang đích
Một tính năng thú vị khác mà bạn có thể muốn thử là khối ‘Cover’, cho phép bạn thêm ảnh bìa hoặc ảnh nền màu vào bài viết và trang của mình.
Ảnh bìa là một hình ảnh rộng hơn thường được sử dụng làm ảnh bìa cho một phần mới trong một trang hoặc phần đầu của một câu chuyện. Chúng trông đẹp và cho phép bạn tạo bố cục nội dung hấp dẫn.
Chỉ cần thêm một khối bìa và sau đó tải lên hình ảnh bạn muốn sử dụng. Bạn có thể chọn màu phủ cho bìa hoặc làm ảnh nền cố định để tạo hiệu ứng parallax khi người dùng cuộn trang xuống.
4. Tạo 1 bảng(Table) bên trong bài viết
Trình chỉnh sửa cổ điển không có nút để thêm bảng vào bài đăng WordPress của bạn. 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 đi kèm với khối Table mặc định, giúp bạn dễ dàng thêm các bảng vào các bài đăng và trang của mình. Chỉ cần thêm khối và sau đó chọn số 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 trong bảng. Bạn luô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 phong cách 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 chỉnh sửa cổ điển hoàn toàn không xử lý được. Trình chỉnh sửa khối cho phép bạn thêm khối Cột, về cơ bản sẽ thêm hai cột của khối đoạn văn.
Khối cột này khá linh hoạt. Bạn có thể thêm tối đa 6 cột trong một hàng và thậm chí sử dụng các khối khác bên trong mỗi cột.
Mẹo bổ sung để sử dụng Gutenberg như một chuyên gia
Nhìn vào trình chỉnh sửa khối, bạn có thể tự hỏi liệu mình có dành nhiều thời gian để thêm và điều chỉnh các khối hơn là tạo nội dung thực tế không?
Chà, trình chỉnh sửa khối cực kỳ nhanh và thậm chí cách sử dụng rất cơ bản trong vài phút sẽ cho phép bạn thêm khối ngay lập tức mà không cần suy nghĩ.
Bạn sẽ sớm nhận ra quy trình làm việc của mình sẽ trở nên nhanh hơn như thế nào với cách tiếp cận này.
Đối với người dùng thành thạo, đây là một số mẹo bổ sung để giúp bạn làm việc nhanh hơn với trình chỉnh sửa khối WordPress.
1. Di chuyển thanh công cụ khối lên trên cùng.
Bạn có thể nhận thấy trong ảnh chụp màn hình ở trên rằng có 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 chỉnh sửa.
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 sẽ giúp quy trình làm việc của bạn trở nên tốt hơn. Cái đầu tiên bạn nên bắt đầu sử dụng ngay là dấu /.
Chỉ cần nhập / và sau đó bắt đầu nhập và nó sẽ hiển thị cho bạn các khối phù hợp mà bạn có thể thêm ngay lập tức.
Để biết thêm các phím tắt, hãy nhấp vào menu ba chấm ở góc trên bên phải của màn hình, sau đó chọn ‘Keyboard shortcuts‘.
Thao tác này sẽ hiển thị một cửa sổ bật lên với danh sách tất cả các phím tắt mà bạn có thể sử dụng. Danh sách sẽ có các phím tắt khác nhau cho người dùng Windows và Mac.
3. Kéo và 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 và thả tệp vào bất kỳ đâu trên màn hình và nó sẽ tự động tạo một khối cho bạn.
Bạn có thể thả một tệp hình ảnh hoặc video và nó sẽ tạo khối cho bạn. Bạn cũng có thể thả nhiều tệp hình ảnh để tạo một khối thư viện.
4. Thêm YouTube, Twitter, Vimeo và các nhúng khác
Trình chỉnh sửa khối giúp bạn dễ dàng nhúng nội dung của bên thứ ba vào nội dung bài viết của mình.
Bạn có thể dễ dàng sao chép và dán URL nhúng vào bất kỳ lúc nào và nó sẽ tự động tạo một khối cho bạn.
Ví dụ: nếu bạn đã thêm URL video YouTube, thì URL đó sẽ tự động tạo khối nhúng YouTube 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 khối trong WordPress cho phép các nhà phát triển tạo khối của riêng họ. Có một số plugin WordPress tuyệt vời cung cấp thêm rất nhiều khối mới cho trình chỉnh sửa.
Dưới đây là một vài plugin nổi bật:
1. Ultimate Addons for Gutenberg
Ultimate Addons for Gutenberg là một thư viện khối đi kèm với nhiều khối nâng cao giúp bạn thêm nhiều yếu tố thiết kế vào nội dung của mình.
Được tạo ra bởi những người đứng sau sự phổ biến của Astra WordPress theme, Ultimate Addons giúp bạn tạo các thiết kế đẹp mắt mà không cần viết bất kỳ mã nào.
2. PublishPress Blocks
PublishPress Blocks là một thư viện khối mạnh mẽ khác đi kèm với các khối bổ sung để mở rộng trình chỉnh sửa khối Gutenberg.
Nó bao gồm các tùy chọn bố cục đẹp, thanh trượt, nút, biểu tượng, thư viện hình ảnh, bản đồ, tab, lời chứng thực, đàn accordion, v.v.
3. 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 mà bạn có thể sử dụng trên trang web của mình. Nó bao gồm các khối như bài đăng, tab, danh sách biểu tượng, lời kêu gọi hành động, v.v.
Câu hỏi thường gặp về Gutenberg – Trình chỉnh sửa khối trong WordPress
Kể từ khi Gutenberg trở thành trình soạn thảo WordPress mặc định, chúng tôi đã nhận được rất nhiều câu hỏi. Dưới đây là câu trả lời cho một số câu hỏi thường gặp nhất 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 chúng?
Các bài viết và trang cũ của bạn hoàn toàn an toàn và không bị ảnh hưởng bởi trình chỉnh sửa khối. Bạn vẫn có thể chỉnh sửa chúng và trình chỉnh sửa sẽ tự động mở chúng trong một khối chứa trình chỉnh sửa cổ điển.
Bạn có thể chỉnh sửa chúng bên trong trình chỉnh sửa cũ hoặc bạn có thể chuyển đổi các bài viết cũ hơn thành các khối và sử dụng trình chỉnh sửa khố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 Classic Editor plugin.
Sau khi kích hoạt, nó sẽ tắt trình chỉnh sửa khối và bạn sẽ có thể tiếp tục sử dụng trình chỉnh sửa cổ điển.
Xin lưu ý rằng Trình chỉnh sửa cổ điển sẽ được hỗ trợ cho đến năm 2022. Tốt hơn là bạn nên bắt đầu sử dụng trình chỉnh sửa khối để bạn làm quen với nó.
3. Phải làm gì nếu trình chỉnh sửa khối không hoạt động với plugin hoặc chủ đề tôi đang sử dụng?
Dự án Gutenberg đã được phát triển trong một thời gian dài. Điều này đã cho các tác giả plugin và chủ đề nhiều thời gian để kiểm tra mã của họ về khả năng tương thích.
Tuy nhiên, vẫn có khả năng một số plugin và chủ đề có thể hoạt động không tốt với trình chỉnh sửa khối. Trong trường hợp đó, bạn có thể cài đặt plugin trình chỉnh sửa cổ điển, 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 chủ đề thay thế.
4. Làm thế nào để tìm hiểu thêm các mẹo và thủ thuật của Gutenberg?
Chúng tôi sẽ xuất bản các bài viết mới và cập nhật các tài nguyên cũ của chúng tôi để giúp bạn thành thạo trình chỉnh sửa khối.
Chúng tôi hy vọng bài viết này giúp ích được gì đó cho bạn.
Nếu bạn nghĩ rằng bài viết này cũng có thể giúp ích cho những người khác, xin hãy chia sẻ nó.
