Kể từ khi phát hành WordPress 5.0 vào ngày 6 tháng 12 năm 2018, WordPress có một trình chỉnh sửa nội dung mặc định mới. Được gọi là trình chỉnh sửa WordPress Gutenberg khi đang trong quá trình phát triển, “Gutenberg” giờ chỉ là “trình chỉnh sửa WordPress” hoặc “trình chỉnh sửa khối” nếu bạn muốn cụ thể hơn.
Trình chỉnh sửa khối mang đến một cách tiếp cận hoàn toàn khác để tạo nội dung dưới dạng khối (do đó có tên là…). Và trong bài đăng này, bạn sẽ tìm hiểu chính xác cách tạo một trang web WordPress bằng cách sử dụng các khối đó và các tính năng khác của trình chỉnh sửa để tạo nội dung trên trang web của bạn.
Cho dù bạn đã cập nhật trang web của mình lên WordPress 5.0 hay chưa, hãy tiếp tục đọc để tìm hiểu cách sử dụng trình chỉnh sửa khối Gutenberg để xây dựng nội dung và bố cục trên trang web của bạn.
Gutenberg là gì?
Gutenberg là tên dự án cho trình chỉnh sửa khối WordPress, đã thay thế trình chỉnh sửa WordPress TinyMCE làm trình chỉnh sửa WordPress mặc định trong WordPress 5.0.
Mặc dù Gutenberg là tên chính thức trong khi trình chỉnh sửa đang được phát triển, nhưng giờ đây nó chỉ là “trình chỉnh sửa khối WordPress” hoặc “trình chỉnh sửa WordPress” vì nó chính thức là một phần của phần mềm cốt lõi. Do đó, bạn sẽ thường thấy tôi gọi nó là “trình chỉnh sửa khối” trong bài đăng này, thay vì “Gutenberg”.
Như một bản cập nhật nhanh, đây là giao diện của trình chỉnh sửa WordPress TinyMCE cũ. Trình chỉnh sửa này hiện được gọi là trình chỉnh sửa cổ điển:
Và đây là những thứ trông như thế nào trong trình chỉnh sửa khối WordPress, AKA Gutenberg:
Tuy nhiên, nó không chỉ là một bản cập nhật thẩm mỹ. Gutenberg thay đổi hoàn toàn trải nghiệm chỉnh sửa bằng cách chuyển sang cách tiếp cận dựa trên khối đối với nội dung (tìm hiểu thêm về chính xác khối là gì trong một giây!).
Mặc dù trọng tâm hiện tại là sáng tạo nội dung, nhưng mục tiêu cuối cùng là để trình chỉnh sửa khối Gutenberg “vượt ra ngoài bài đăng thành các mẫu trang và cuối cùng là tùy chỉnh toàn bộ trang web”. Tên chính thức của thay đổi này là chỉnh sửa toàn trang.
Điều đó có nghĩa là, ở một nơi nào đó trong tương lai gần, bạn sẽ có thể xây dựng toàn bộ trang web của mình bằng cách sử dụng các khối, bao gồm các trang đích và nội dung quan trọng khác. Thậm chí có một số chủ đề đã bắt đầu cung cấp kiểu chỉnh sửa toàn trang này, mặc dù những chủ đề này hiện đang ở giai đoạn “bằng chứng về khái niệm” hơn là chủ đề.
Các bài viết liên quan:
Tại sao nên sử dụng Gutenberg trong wordpress
Sử dụng Gutenberg trong việc quản lý và tạo nội dung cho trang web của bạn mang lại nhiều lợi ích quan trọng. Dưới đây là một số lý do tại sao bạn nên sử dụng Gutenberg:
1. Giao diện đồ họa trực quan: Gutenberg cung cấp một giao diện trực quan và dễ sử dụng cho việc tạo nội dung. Bạn có thể sắp xếp và thay đổi các phần của bài viết chỉ bằng cách kéo và thả các khối nội dung. Điều này giúp bạn tạo nội dung một cách linh hoạt và không cần phải thao tác mã hoá phức tạp.
2. Tích hợp sẵn với WordPress: Gutenberg được tích hợp sẵn trong phiên bản WordPress 5.0 trở lên, do đó bạn không cần phải cài đặt các plugin hoặc công cụ bổ sung. Điều này giúp giảm tải và tối ưu hóa hiệu suất trang web của bạn.
3. Quản lý nội dung dễ dàng: Với Gutenberg, bạn có thể tạo các khối nội dung khác nhau cho tiêu đề, đoạn văn bản, hình ảnh, video, danh sách, tiêu đề phụ và nhiều khối khác. Điều này giúp bạn quản lý và định dạng nội dung một cách trực quan và hiệu quả hơn.
4. Tùy chỉnh linh hoạt: Gutenberg cho phép bạn tùy chỉnh các khối nội dung một cách linh hoạt. Bạn có thể thay đổi kiểu chữ, kích thước hình ảnh, màu sắc nền và nhiều thuộc tính khác mà không cần phải thay đổi mã nguồn.
5. Hỗ trợ tốt cho đa phương tiện: Gutenberg hỗ trợ tốt cho việc chèn và quản lý đa phương tiện như hình ảnh, video và âm thanh. Bạn có thể chèn các đa phương tiện này một cách dễ dàng và định dạng chúng theo ý muốn.
6. Cải thiện trải nghiệm di động: Gutenberg được thiết kế để tương thích với các thiết bị di động, giúp cải thiện trải nghiệm của người dùng trên điện thoại di động và máy tính bảng.
7. Hỗ trợ khả năng mở rộng: Cộng đồng WordPress đang phát triển nhiều plugin và khối tùy chỉnh dành riêng cho Gutenberg, giúp bạn mở rộng chức năng và tùy chỉnh nội dung của mình theo ý muốn.
Tổng cộng, việc sử dụng Gutenberg giúp bạn tạo và quản lý nội dung trang web một cách dễ dàng, trực quan và hiệu quả hơn, giúp cải thiện trải nghiệm người dùng và tối ưu hóa hiệu suất trang web.
Gutenberg có phải là một phần của WordPress không?
Gutenberg đã chính thức ra mắt như một thành phần của phiên bản WordPress 5.0 vào ngày 6 tháng 12 năm 2018. Nếu bạn đã nâng cấp trang web của mình lên phiên bản WordPress 5.0, bạn sẽ thấy trình chỉnh sửa khối xuất hiện như giao diện mặc định.
Tuy nhiên, do quy mô lớn của phiên bản phát hành, một số máy chủ lưu trữ WordPress do bên quản lý đã quyết định không tự động cập nhật trang web của người dùng. Do đó, có khả năng trang web của bạn chưa chạy phiên bản WordPress 5.0. Trong trường hợp này, việc cập nhật là quyết định của bạn (tuy nhiên, nên cập nhật ngay để đảm bảo hiệu suất và bảo mật tốt nhất).
Lập tức trước đây, tôi đã nêu rõ rằng Gutenberg là một trình soạn thảo dựa trên khối. Tuy nhiên, có thể hơi thô lỗ khi để bạn bị lạc hướng, vì nếu bạn giống như hầu hết mọi người, bạn có thể không biết ý nghĩa của điều này.
Dưới đây là định nghĩa của chỉnh sửa dựa trên khối:
Về cơ bản, Gutenberg thay thế trình soạn thảo văn bản duy nhất trong trình soạn thảo TinyMCE hiện tại của WordPress bằng nhiều “khối” riêng lẻ.
Nhờ đó, các khối này cho phép bạn xây dựng cấu trúc phức tạp hơn so với việc chỉnh sửa trong trình soạn thảo văn bản cổ điển của WordPress.
Nhưng điều gì làm thành một khối?
Các khối (blocks) trong WordPress là các đơn vị xây dựng cơ bản và linh hoạt, cho phép bạn tạo và tổ chức nội dung trên trang web của mình một cách dễ dàng. Chúng cung cấp các công cụ cho việc định dạng, thiết kế và thêm nhiều loại nội dung khác nhau. Dưới đây là một số loại khối phổ biến có sẵn trong WordPress:
- Paragraph Block (Khối Đoạn Văn): Đây là khối cơ bản để thêm văn bản thông thường.
- Heading Block (Khối Đề Mục): Cho phép bạn thêm các tiêu đề với các cấp độ khác nhau (H1, H2, H3,…).
- Image Block (Khối Hình Ảnh): Dùng để chèn hình ảnh vào trang.
- Video Block (Khối Video): Cho phép bạn nhúng video từ các dịch vụ như YouTube hoặc Vimeo.
- List Block (Khối Danh Sách): Cho phép tạo danh sách có thứ tự hoặc không có thứ tự.
- Quote Block (Khối Trích Dẫn): Cho phép bạn tạo một phần trích dẫn nổi bật trong văn bản.
- Audio Block (Khối Âm Thanh): Cho phép bạn nhúng tệp âm thanh, chẳng hạn như podcast.
- Cover Block (Khối Bìa): Cho phép bạn thêm hình ảnh hoặc video với phần chữ lớn ở trên.
- Button Block (Khối Nút): Cho phép bạn thêm nút với liên kết tới trang khác.
- Separator Block (Khối Dấu Phân Cách): Dùng để tạo các dấu phân cách hoặc đường kẻ.
- Spacer Block (Khối Khoảng Trống): Dùng để tạo khoảng trống giữa các phần nội dung.
- Columns Block (Khối Cột): Cho phép bạn tạo cột và thêm nhiều khối vào mỗi cột.
- Table Block (Khối Bảng): Cho phép tạo và quản lý bảng dữ liệu.
- Embeds Block (Khối Nhúng): Cho phép bạn nhúng nội dung từ các dịch vụ như Twitter, Instagram, Facebook và nhiều nền tảng khác.
- Widgets Block (Khối Tiện Ích): Cho phép bạn thêm tiện ích cố định (widget) vào nội dung.
- Gallery Block (Khối Bộ Sưu Tập Ảnh): Cho phép bạn tạo bộ sưu tập hình ảnh.
- Pullquote Block (Khối Trích Dẫn Nổi Bật): Tạo một phần trích dẫn nổi bật với hình nền nổi bật.
- File Block (Khối Tệp): Cho phép bạn chia sẻ và tải lên các tệp dữ liệu.
- Code Block (Khối Mã): Dùng để hiển thị mã nguồn với định dạng riêng.
- Verse Block (Khối Thơ): Cho phép bạn hiển thị đoạn thơ theo định dạng đặc biệt.
Và còn nhiều khối khác nữa. Sự kết hợp của các khối này giúp bạn tạo ra các trang web đa dạng về cả nội dung và thiết kế mà không cần phải biết lập trình.
Thêm vào đó, các nhà phát triển có thể tạo các khối bổ sung của riêng họ thông qua các plugin để tăng tính linh hoạt.
Mỗi khối tồn tại như một thực thể riêng biệt mà bạn có thể tùy chỉnh độc lập. Chẳng hạn, dưới đây là một ví dụ về một bài đăng nhanh trong Gutenberg chứa ba khối:
- 2 khối văn bản
- 1 khối hình ảnh
Bạn có thể dễ dàng sắp xếp lại các khối này bằng cách kéo và thả
Và vì mỗi khối là “độc lập”, bạn cũng có thể thêm những thứ như hình nền tùy chỉnh cho từng khối cụ thể.
Tóm lại, Gutenberg mang đến khả năng kiểm soát linh hoạt và chi tiết hơn cho việc xây dựng nội dung.
Vậy, liệu Gutenberg có phải là một trình tạo trang không?
Eh, không hoàn toàn. Ít nhất trong tình hình hiện tại.
Gutenberg sẽ giúp việc tạo kiểu cho nội dung thông thường như các bài viết trên blog hoặc các trang tiêu chuẩn trở nên dễ dàng hơn nhiều, nhưng nó không phải là sự thay thế 1:1 cho các trình tạo trang hiện tại.
Tại mức độ cơ bản, Gutenberg vẫn thiếu hai yếu tố quan trọng:
- Khả năng tạo cột linh hoạt, mặc dù có một khối cột cơ bản và một số plugin bên thứ ba đã tạo ra khối cột khác nhau.
- Khả năng kéo và thả thực sự – phiên bản mới của Gutenberg cho phép bạn sắp xếp lại các khối bằng cách kéo và thả, nhưng vẫn không linh hoạt như hầu hết các trình tạo trang.
Tóm lại, trình soạn thảo khối Gutenberg sẵn sàng loại bỏ nhu cầu sử dụng trình tạo trang cho hầu hết nội dung “thông thường”, đồng thời cung cấp cách thức thống nhất để tạo cấu trúc bài viết phức tạp hơn trong WordPress.
Tuy nhiên, khi đề cập đến việc xây dựng các trang phức tạp hơn, chẳng hạn như trang đích, bạn có thể đánh giá cao tính linh hoạt của các trình tạo trang hàng đầu (ít nhất là trong phiên bản ban đầu của Gutenberg).
Ví dụ, khi so sánh giữa Elementor vs Divi Builder và Beaver Builder, bạn sẽ thấy cách các trình tạo trang hàng đầu cung cấp các tính năng như:
- Chỉnh sửa kéo và thả tự do
- Hỗ trợ nhiều cột thực sự, cho phép bạn tạo bất kỳ số lượng cột nào và kéo các phần tử riêng lẻ vào
- Nhiều mẫu sẵn có
- Các tùy chọn tạo kiểu nâng cao với điểm điều chỉnh lề/đệm tùy chỉnh và nhiều hơn nữa
- Cài đặt thiết kế đáp ứng
Trình soạn thảo khối Gutenberg có thể phát triển thêm trong tương lai. Nhưng ít nhất trong phiên bản ban đầu, các trình tạo trang vẫn cung cấp tính linh hoạt cho việc thiết kế các trang phức tạp hơn độc lập.
Liệu bạn phải sử dụng trình soạn thảo khối không? Bạn hoàn toàn có thể tiếp tục sử dụng trình soạn thảo WordPress hiện tại. Để vô hiệu hóa trình soạn thảo khối Gutenberg và chuyển trang web của bạn trở lại trình soạn thảo cổ điển sau khi nâng cấp lên phiên bản WordPress 5.0, bạn có thể sử dụng plugin Trình soạn thảo cổ điển chính thức.
Liệu bạn cần một chủ đề cụ thể để sử dụng trình soạn thảo khối Gutenberg không?
Bởi vì trình soạn thảo khối đã trở thành giao diện mặc định của WordPress, nó đã được phát triển để tương thích với bất kỳ chủ đề WordPress nào. Tuy nhiên, việc chọn một chủ đề tương thích với Gutenberg vẫn mang lại nhiều lợi ích thực tế.
Một chủ đề tương thích với Gutenberg có thể cung cấp kiểu dáng tích hợp cho tất cả các khối mới. Đặc biệt, các chủ đề có thể tải các kiểu dáng này vào trình soạn thảo, cho phép bạn thấy mẫu tương ứng khi bạn xây dựng nội dung, mang lại trải nghiệm WYSIWYG tốt hơn.
Các chủ đề của Gutenberg cũng có thể cung cấp các mẫu tạo sẵn chứa các khối khác nhau, giúp bạn chỉ việc chèn nội dung vào các khối hiện có và nhấn Xuất bản.
Ngoài ra, có những lợi ích nhỏ khác như tùy chỉnh hình ảnh chiều rộng đầy đủ. Vậy, bạn có thể sử dụng bất kỳ chủ đề nào bạn muốn, nhưng cần kiểm tra cẩn thận để đảm bảo nhà phát triển chủ đề đang hỗ trợ tích hợp tốt với Gutenberg.
Các khối Gutenberg có thể tái sử dụng
Một trong những điều thú vị nhất về trình chỉnh sửa WordPress mới là các khối có thể tái sử dụng. Hãy coi đây là một khối đã hoàn chỉnh mà bạn có thể lưu cùng với cài đặt của nó. Ví dụ: nếu bạn đã tạo một bố cục đẹp mắt cho phần giới thiệu các bài viết blog của mình, Bạn có thể lưu khối này dưới dạng một khối có thể tái sử dụng. Sau đó, bạn chỉ cần đi tới Thêm khối-> Có thể sử dụng lại để chọn khối giới thiệu có thể sử dụng lại của mình. Thật tuyệt làm sao!
Đây là một ví dụ cực kỳ cơ bản, nhưng bạn có thể nghĩ ra nhiều cách sử dụng phức tạp hơn cho việc này! Còn về một mẫu bài viết nhiều cột với kiểu chữ tuyệt vời cho các bài đăng trên blog tuyệt vời. Hoặc có thể là một bài viết hoàn chỉnh thư viện nơi bạn chỉ phải thả hình ảnh vào. Và nếu bạn muốn thay đổi một trong những hình ảnh, bạn sẽ phải thực hiện một lần vì mọi phiên bản sẽ được cập nhật khi bạn nhấn nút Lưu.
Tất nhiên, các nhà phát triển cũng có thể tham gia vào điều này, vì vậy nhất định phải đến một số khối tuyệt vời sẽ giúp cuộc sống của chúng ta dễ dàng hơn rất nhiều. Không có giới hạn cho điều này. Tất cả đều có thể thực hiện được vì trình chỉnh sửa khối mới trong WordPress 5.0 cung cấp cho chúng tôi toàn quyền kiểm soát đối với tất cả các khối riêng lẻ.
Xem thêm bảo mật wordpress cho người mới
Xây dựng bố cục đầu tiên với trình chỉnh sửa khối WordPress Gutenberg
Hãy giả định rằng bạn đang dùng phiên bản WordPress 5.0 và sử dụng trình soạn thảo khối. Bạn đã sẵn sàng khám phá nội dung của bài viết này. Dưới đây, tôi sẽ hướng dẫn bạn cách thực hiện thực tế với trình soạn thảo khối WordPress Gutenberg để xây dựng cấu trúc trang hoàn chỉnh.
Khám phá Trình Soạn Thảo Lần Đầu
Khi bạn mở trình soạn thảo WordPress lần đầu, có thể bạn sẽ cảm thấy bất ngờ bởi giao diện mới, khác biệt so với thứ mà chúng ta đã quen thuộc. Tuy nhiên, điều này đã mang lại sự thay đổi tích cực. Giao diện viết trở nên gọn gàng hơn, phông chữ hoàn hảo và tạo ra một không gian rộng rãi. Ở phía bên phải, bạn có thể mở cài đặt – trên từng tài liệu hoặc từng khối – bằng cách nhấp vào biểu tượng bánh răng.
Nhấp vào ba dấu chấm bên cạnh biểu tượng bánh răng cho phép bạn chuyển sang trình soạn thảo mã để bạn có thể thực hiện chỉnh sửa trực tiếp trên mã. Màn hình như thế này có thể gây ra sự phức tạp ban đầu, nhưng không cần phải lo lắng. Chúng ta đều biết mọi người thường gặp khó khăn khi chuyển từ thứ mà họ đã quen thuộc sang một thứ mới. Cả Marieke và Willemien đều đã đặt trước vấn đề này khi liên quan đến việc viết và chỉnh sửa trong Gutenberg. Chúng tôi thậm chí đã thu thập một số câu hỏi cấp bách về trình soạn thảo mới trong WordPress 5.0 để giúp bạn vượt qua những khó khăn đó.
Sự khó chấp nhận sự thay đổi thường xảy ra khi người ta không hiểu lý do tại sao cần phải thay đổi một cái gì đó đang hoạt động tốt. Trong trường hợp này, sự thay đổi rất dễ hiểu: để chuẩn bị cho tương lai, WordPress cần phải thích nghi. Gutenberg giới thiệu các khái niệm và công nghệ để xây dựng cơ sở cho tương lai của WordPress. Bạn có thể thấy điều này rõ ràng ngay bây giờ? Chúng tôi sẽ thảo luận về khái niệm về khối.
Tham quan nhanh giao diện trình chỉnh sửa khối WordPress
Trước khi bạn bắt đầu thêm một số khối, hãy xem nhanh các phần tử của giao diện trình chỉnh sửa khối chính:
- (A) – cho phép bạn thêm các khối mới.
- (B) – nút hoàn tác / làm lại
- (C) – xem dạng xem danh sách (phác thảo) của tất cả các khối của bạn – hữu ích để điều hướng nhanh chóng giữa các khối
- (D) – cung cấp cho bạn quyền truy cập vào cài đặt tài liệu, bao gồm những thứ như danh mục & thẻ, hình ảnh nổi bật, v.v. Điều này tương tự như thanh bên hiện tại trong trình chỉnh sửa WordPress
- (E) – khi bạn đã chọn một khối riêng lẻ, điều này cho phép bạn truy cập vào các cài đặt dành riêng cho khối đó
- (F) – cho phép bạn truy cập bản xem trước trực tiếp của bài đăng của bạn hoặc xuất bản / cập nhật bài đăng của bạn
- (G) – sau khi bạn thêm một số khối, đây là nơi bạn sẽ thực sự làm việc với nội dung bài đăng của mình
Thêm block mới
Như tôi đã thảo luận trong phần giới thiệu, bạn sẽ sử dụng các “khối” riêng biệt để xây dựng bố cục của mình bằng trình chỉnh sửa.
Để thêm một khối mới, tất cả những gì bạn cần làm là nhấp vào biểu tượng + Dấu cộng và chọn loại nội dung bạn muốn thêm:
Trong ví dụ trên, tôi đã hướng dẫn bạn cách thêm một khối đoạn văn bản cơ bản. Nhưng Gutenberg thực sự bao gồm rất nhiều khối khác nhau, được chia thành các phần khác nhau:
- Văn bản – những thứ như đoạn văn, tiêu đề, danh sách, dấu ngoặc kép, v.v.
- Phương tiện – chèn hình ảnh, thư viện, video, tệp âm thanh và các phương tiện khác.
- Thiết kế – thêm các nút, cột, phần, dấu cách và hơn thế nữa.
- Widget – chèn các widget WordPress, chẳng hạn như danh sách các danh mục hoặc các bài đăng mới nhất của bạn.
- Nhúng – nhúng nội dung từ các nguồn của bên thứ ba như Twitter, YouTube, Spotify, Vimeo và các nguồn khác.
Xây dựng bố cục cơ bản với Gutenberg
Hãy bắt đầu đơn giản. Giả sử bạn chỉ muốn xây dựng bố cục bài đăng trên blog cơ bản bao gồm:
- Văn bản thông thường
- Một tấm ảnh
- Một câu trích dẫn
- Một video YouTube được nhúng
Đây là cách bạn sẽ làm điều đó với Gutenberg:
Trước tiên, bạn sẽ viết toàn bộ bài đăng của mình trong trình chỉnh sửa. Hoặc, nếu bạn giống tôi và thích viết trong Google Tài liệu, bạn có thể dán tất cả vào và sau đó Gutenberg sẽ tự động chuyển nó thành các khối.
Thêm các khối không phải văn bản
Giờ đây, nội dung của bạn đã được chia thành các khối, bạn có thể di chuột qua vị trí bạn muốn chèn hình ảnh đầu tiên của mình và nhấp vào biểu tượng dấu cộng. Điều đó sẽ tạo ra sự phá vỡ. Sau đó, nhấp lại vào biểu tượng dấu cộng để chèn khối hình ảnh:
Điều này sẽ cho phép bạn chèn một khối hình ảnh, từ đó bạn có thể tải lên hoặc chọn hình ảnh theo cách tương tự như trình chỉnh sửa WordPress hiện tại:
Khi bạn chọn hình ảnh của mình, bạn sẽ thấy nó ngay tại đó trong bố cục trang của bạn:
Tiếp theo, di chuột qua vị trí bạn muốn chèn dấu ngoặc kép và sử dụng cách tiếp cận tương tự để chèn một khối khác. Bạn có thể tìm kiếm “trích dẫn” hoặc nhấp để mở rộng trình chèn khối đầy đủ và tìm kiếm nó trong phần Văn bản:
Sau đó, bạn sẽ thấy khối báo giá kéo mới của mình. Để tạo báo giá của bạn, tất cả những gì bạn cần làm là nhấp vào khối và nhập:
Để chèn video YouTube, bạn có thể thêm một khối YouTube mới từ phần Nhúng (hoặc bạn chỉ có thể tìm kiếm trên YouTube). Để chèn video, tất cả những gì bạn cần làm là nhập URL và nhấp vào Nhúng:
Tùy chọn – tạo column
Bạn muốn sáng tạo hơn nữa? Gutenberg bao gồm một khối Cột tích hợp cho phép bạn nhanh chóng tạo nhiều cột. Tất cả những gì bạn cần làm là thêm khối Cột từ phần Thiết kế. Sau đó, bạn có thể chèn các khối khác vào bên trong nó. Nếu bạn muốn các cột linh hoạt hơn nữa, bạn cũng có thể tìm thấy các plugin Gutenberg của bên thứ ba bổ sung những thứ đó – nhiều hơn nữa trên các plugin khối sau này.
Sau khi hoàn tất, tất cả những gì bạn cần làm là nhấp vào nút Xuất bản:
Và bạn sẽ có bài đăng trên blog được định dạng của mình trên giao diện người dùng.
Phương pháp điều chỉnh những khối lẻ
Vì trình chỉnh sửa Gutenberg của WordPress bao gồm rất nhiều khối khác nhau, nên tôi không thể chỉ cho bạn cách sử dụng từng khối riêng lẻ.
Nhưng tôi có thể cung cấp cho bạn một khuôn khổ cơ bản áp dụng cho tất cả các khối.
Về cơ bản, bạn kiểm soát nội dung trong phần thân thực của trình chỉnh sửa:
Để căn chỉnh và tạo kiểu văn bản cơ bản, bạn có thể sử dụng thanh menu xuất hiện khi bạn di chuột qua một khối:
Và để tạo kiểu nâng cao hơn, bạn thường sẽ tạo kiểu cho khối trong tab Cài đặt chặn.Để truy cập tab đó, hãy chọn khối bạn muốn chỉnh sửa và duyệt đến tab Chặn:
Cách sắp xếp lại các khối riêng lẻ
Để sắp xếp lại các khối, bạn có hai tùy chọn. Bạn có thể sử dụng mũi tên Lên hoặc Xuống khi di chuột qua một khối để di chuyển khối theo hướng tương ứng:
Hoặc, bạn có thể kéo và thả các khối. Để kích hoạt chức năng kéo và thả, bạn cần di chuột qua sáu dấu chấm giữa mũi tên lên và xuống
Để tất cả chúng cùng nhau
Khi bạn nắm bắt được quy trình hoạt động của mọi thứ với trình chỉnh sửa khối, việc này khá dễ dàng và trực quan.
Lúc đầu, bạn có thể gặp một số khó khăn ngày càng tăng và khó thực hiện các hành động cơ bản mà bạn đã cho là đương nhiên.
Nhưng một khi bạn nắm bắt được mọi thứ – bạn nên lướt qua các bố cục của tòa nhà. Và với các khối nâng cao hơn mà Gutenberg đi kèm, bạn sẽ linh hoạt hơn so với TinyMCE WordPress Editor.
Một số thủ thuật Gutenberg gọn gàng nhưng nâng cao hơn
Khi bạn trở nên quen thuộc hơn với trình chỉnh sửa khối WordPress Gutenberg, bạn có thể thấy một số thủ thuật này giúp tiết kiệm thời gian.
Chèn một khối thông qua phương pháp nhập
Trên đây mình đã hướng dẫn các bạn cách tạo khối bằng nút insert. Nhưng để tiết kiệm thời gian, bạn thực sự có thể tạo khối bằng cách gõ cú pháp sau:
/ BLOCK-NAME
Một hộp gợi ý tự động sẽ xuất hiện để giúp bạn tìm khối có liên quan.
Ví dụ: đây là cách tạo khối hình ảnh chỉ bằng bàn phím của bạn:
Khá tiện lợi và tiết kiệm thời gian!
Edit mã nguồn
Click vào ba chấm trên cùng để tiến hành chỉnh sửa bất cứ lúc nào
Kích hoạt chế độ toàn màn hình, thanh công cụ cố định, v.v.
Trình chỉnh sửa khối bao gồm một số chế độ khác nhau cho phép bạn thay đổi trải nghiệm chỉnh sửa. Bạn có thể:
- Thêm một thanh công cụ cố định như trình soạn thảo TinyMCE
- Đi toàn màn hình
- Đặt một “tiêu điểm” vào khối đang hoạt động
Để sử dụng các “Chế độ xem” này, hãy nhấp vào biểu tượng ba chấm ở góc trên cùng bên phải.
Tiết kiệm thời gian thông qua việc dùng hot keys Gutenberg
Ngoài các phím tắt định dạng tiêu chuẩn, trình chỉnh sửa khối có một số phím tắt chuyên dụng có thể giúp bạn.
Để mở danh sách phím tắt đầy đủ, hãy sử dụng phím tắt Shift + Alt + H.
Gutenberg cung cấp một số phím tắt hữu ích giúp bạn làm việc nhanh chóng và tiết kiệm thời gian trong quá trình chỉnh sửa nội dung trang web của mình. Dưới đây là một số phím tắt phổ biến trong Gutenberg:
- Ctrl + Alt + Shift + M (hoặc Cmd + Alt + Shift + M trên Mac): Mở thanh điều khiển để thêm khối mới.
- Ctrl + S (hoặc Cmd + S trên Mac): Lưu bài viết hiện tại.
- Ctrl + Z (hoặc Cmd + Z trên Mac): Hoàn tác hành động gần nhất.
- Ctrl + Y (hoặc Cmd + Y trên Mac): Làm lại hành động đã hoàn tác.
- Ctrl + X (hoặc Cmd + X trên Mac): Cắt khối hoặc nội dung được chọn.
- Ctrl + C (hoặc Cmd + C trên Mac): Sao chép khối hoặc nội dung được chọn.
- Ctrl + V (hoặc Cmd + V trên Mac): Dán nội dung đã sao chép hoặc cắt vào khối.
- Ctrl + D (hoặc Cmd + D trên Mac): Sao chép khối đang được chọn.
- Ctrl + Shift + Z (hoặc Cmd + Shift + Z trên Mac): Mở lịch sử chỉnh sửa để xem và khôi phục các phiên bản trước đó của bài viết.
- Ctrl + / (hoặc Cmd + / trên Mac): Hiển thị danh sách các phím tắt khả dụng trong Gutenberg.
Nhớ rằng phím tắt có thể thay đổi tùy theo phiên bản của Gutenberg và cài đặt cá nhân của bạn. Bạn có thể tìm hiểu thêm về các phím tắt cụ thể cho phiên bản cụ thể của Gutenberg bạn đang sử dụng.
Sử dụng đường viền để nhanh chóng điều hướng đến các khối cụ thể
Đường viền khối cung cấp cho bạn cái nhìn cấp cao về tất cả các khối trong thiết kế của bạn và cho phép bạn nhanh chóng chọn cài đặt của một khối cụ thể bằng cách nhấp vào nó trong chế độ xem danh sách. Nó đặc biệt hữu ích khi bạn có nhiều khối được lồng vào nhau, chẳng hạn như các khối nội dung bên trong một cột.
Để mở đường viền khối, hãy nhấp vào biểu tượng trên thanh công cụ trên cùng. Sau đó, nhấp vào khối mà bạn muốn chuyển đến.
Sử dụng các mẫu khối làm mẫu
“Mẫu khối” về cơ bản là một mẫu mà bạn có thể sử dụng làm điểm bắt đầu cho các thiết kế của mình. Theo mặc định, WordPress đi kèm với các mẫu được tạo sẵn cho những thứ như bố cục nhiều cột, tiêu đề, v.v. Nhưng các plugin cũng có thể thêm các mẫu khối của riêng chúng.
Để chèn một mẫu khối:
- Nhấp vào trình chèn khối chính ở góc trên cùng bên trái (biểu tượng dấu cộng).
- Chọn tab Mẫu.
- Chọn mẫu mà bạn muốn chèn
Tạo các mẫu khối có thể sử dụng lại
Nếu bạn có một bộ sưu tập / sắp xếp các khối cụ thể mà bạn cần sử dụng lại ở nhiều vị trí, bạn có thể lưu một nhóm khối làm mẫu có thể sử dụng lại. Bạn sẽ có thể đặt tên cho mẫu của mình. Sau đó, bạn có thể chèn nó giống như bạn làm với một khối thông thường.
Để tạo mẫu của bạn:
- Chọn các khối mà bạn muốn bao gồm
- Nhấp vào biểu tượng ba chấm
- Chọn Thêm vào khối có thể tái sử dụng
Chỉnh sửa nội dung block có thể sử dụng lại
Ngoài việc giúp bạn dễ dàng nhanh chóng chèn nội dung đã định dạng, các khối có thể tái sử dụng còn cho phép bạn cập nhật nhanh chóng tất cả các phiên bản của khối có thể tái sử dụng đó.
Có nghĩa là, một khi bạn chỉnh sửa nội dung khối có thể sử dụng lại, mọi bài đăng sử dụng khối có thể tái sử dụng đó cũng sẽ nhận được nội dung mới.
Để chỉnh sửa khối có thể tái sử dụng, hãy cuộn đến phần Có thể sử dụng lại trong trình chèn khối và nhấp vào nút Quản lý tất cả các khối có thể tái sử dụng. Hoặc, bạn có thể truy cập trang web của bạn.com/wp-admin/edit.php?post_type=wp_block (đảm bảo thay thế trang web của bạn bằng URL thực của bạn).
Mở rộng trình chỉnh sửa khối với các plugin
Nếu bạn muốn trở nên lạ mắt, bây giờ bạn có thể tìm thấy rất nhiều plugin mở rộng Gutenberg có thêm các khối riêng của chúng.
Otter Blocks là một lựa chọn tốt để giúp bạn bắt đầu. Nó cung cấp cho bạn các khối bổ sung cho những thứ như giá cả, lời chứng thực, Google Maps, biểu tượng chia sẻ, nút “nhấp để tweet” và hơn thế nữa.
Kiểm soát sự lộn xộn với Trình quản lý khối
Trình chỉnh sửa thêm rất nhiều khối, đặc biệt nếu bạn đang sử dụng một số plugin chặn mà chúng tôi đã đề cập ở trên. Điều này có thể khiến mọi thứ trở nên lộn xộn và khiến bạn chậm lại. Nếu có một số khối mà bạn không bao giờ định sử dụng, bạn có thể sử dụng Trình quản lý khối để vô hiệu hóa chúng.
Để sử dụng Trình quản lý khối:
- Nhấp vào biểu tượng ba chấm ở góc trên bên phải
- Chọn Trình quản lý khối
- Sử dụng các hộp kiểm để vô hiệu hóa các khối nếu cần
Sử dụng Điều hướng khối để nhanh chóng điều hướng nội dung
Đối với nội dung dài hoặc nội dung mà bạn sử dụng nhiều khối lồng nhau, có thể khó tìm nhanh khối mà bạn đang tìm kiếm.
Để trợ giúp, trình chỉnh sửa khối bao gồm công cụ Điều hướng khối, bạn có thể mở công cụ này bằng cách nhấp vào thanh công cụ hoặc sử dụng phím tắt Shift + Alt + O.
Nếu bạn đang ở bên trong một khối lồng nhau (chẳng hạn như cột), công cụ Điều hướng khối sẽ hiển thị tất cả các khối lồng nhau. Để chọn một khối cụ thể, bạn có thể nhấp vào khối đó trong danh sách.
Chuyển đổi giữa các chế độ Chỉnh sửa và Chọn
Với WordPress 5.4, bạn có quyền truy cập vào hai chế độ khác nhau, bạn có thể chuyển đổi giữa các chế độ này bằng cách sử dụng thanh công cụ trên cùng:
- Chỉnh sửa – đây là những gì bạn sẽ làm trong hầu hết thời gian. Nó cho phép bạn chỉnh sửa nội dung của tất cả các khối của bạn. Đây là chế độ soạn thảo mặc định.
- Chọn – điều này giúp bạn dễ dàng chọn các khối cụ thể hơn, đặc biệt khi làm việc với các khối lồng nhau (ví dụ: các khối bên trong một cột). Khi bạn nhấp vào một khối, bạn sẽ tự động chuyển về chế độ Chỉnh sửa.
Thử nghiệm với các tính năng của trình chỉnh sửa khối mới
Kể từ khi trình chỉnh sửa khối được hợp nhất vào lõi, thực tế có hai phiên bản của trình chỉnh sửa khối:
- Phiên bản gốc trong phần mềm WordPress cốt lõi (đây có thể là những gì bạn đang sử dụng)
- Plugin Gutenberg
Phiên bản plugin Gutenberg về cơ bản là nền tảng thử nghiệm cho trình soạn thảo cốt lõi. Phiên bản plugin chứa các tính năng mới đang được phát triển. Cuối cùng, những tính năng đó sẽ được hợp nhất thành cốt lõi. Nhưng nếu bạn muốn chơi với họ sớm, tất cả những gì bạn cần làm là cài đặt plugin Gutenberg từ WordPress.org.
Điều gì xảy ra với tất cả nội dung cũ của bạn?
Trước khi hoàn thành mọi việc, hãy để tôi trình bày nhanh những gì sẽ xảy ra với tất cả nội dung cũ của bạn sau khi bạn cập nhật lên WordPress 5.0 (nếu bạn chưa cập nhật).
Đừng lo lắng – nó sẽ không biến mất! Nhưng trải nghiệm hơi khác một chút:
Khi bạn cập nhật trang web của mình lên WordPress 5.0 và bạn có nội dung hiện có được xây dựng bằng trình chỉnh sửa TinyMCE ban đầu, trình chỉnh sửa khối sẽ đặt tất cả nội dung cũ của bạn vào một khối Cổ điển duy nhất. Khối Cổ điển này về cơ bản là trình soạn thảo TinyMCE… nhưng được nhúng bên trong trình chỉnh sửa khối.
Để làm việc với nội dung cũ của mình, bạn có thể:
- Để nó trong khối Cổ điển và chỉnh sửa nó giống như bạn làm với trình chỉnh sửa WordPress cũ
- Sử dụng biểu tượng ba chấm và chọn Chuyển đổi thành Khối. Điều đó sẽ phá vỡ mọi thứ thành các khối riêng lẻ. Sau đó, bạn có thể làm việc với nội dung của mình giống như thể bạn đã tạo nó ban đầu bằng trình chỉnh sửa khối Gutenberg.
Điều gì tiếp theo cho trình chỉnh sửa khối Gutenberg?
Mặc dù trình chỉnh sửa khối hiện đã chính thức là một phần cốt lõi (nhờ vào việc phát hành WordPress 5.0), nhưng nhóm WordPress vẫn chưa hoàn thành dự án Gutenberg.
Hiện tại, nhóm cốt lõi đang làm việc để có trình chỉnh sửa khối thay thế các tiện ích WordPress, cũng như cho phép bạn tạo menu điều hướng với các khối.
Mặc dù các tính năng này vẫn chưa có ở đây, nhưng chúng đang được phát triển. Vì lý do đó, bạn sẽ phải trả tiền để bắt đầu học giao diện trình chỉnh sửa khối càng sớm càng tốt!
Đối với hầu hết người dùng thông thường, sau một số khó khăn ngày càng tăng, nó sẽ mang lại trải nghiệm tạo nội dung linh hoạt hơn.
Những người không phải là nhà phát triển sẽ có thể tạo các bố cục phức tạp hơn một cách trực quan với các yếu tố bổ sung như nút, nhúng nội dung và nhiều thứ khác. Và điều đó hy vọng sẽ giúp WordPress tiếp tục phát triển.
Kết luận cho Gutenberg là gì?
Không có gì đánh bại xung quanh bụi rậm: một trình chỉnh sửa WordPress mới đã đến. Chúng tôi đã sẵn sàng cho nó và bạn cũng nên như vậy. Trình chỉnh sửa khối mới có thể sẽ làm quen và nó có thể phá vỡ một số thứ, nhưng cuối cùng, Chúng tôi sẽ có được một môi trường được sắp xếp hợp lý hơn với nhiều khả năng thú vị. Đọc thêm về cách chuyển sang trình chỉnh sửa khối từ trình chỉnh sửa cổ điển.
Bạn chưa sẵn sàng cài đặt WordPress 5.0? Hoặc bạn muốn có WordPress 5.0 nhưng không phải là trình chỉnh sửa khối mới cho đến khi nó ổn định hơn? Không sao, hãy cài đặt plugin Classic Editor. Nhưng hãy bắt đầu với WordPress 5.0 khi cài đặt thử nghiệm – đây là cách kiểm tra WordPress. Chơi với nó, xem trang web của bạn hoạt động như thế nào. Thêm mọi vấn đề bạn tìm thấy vào GitHub của Gutenberg: những thứ không hoạt động hoặc sẽ hoạt động tốt hơn. Cảm ơn bạn đã đóng góp!
Xem thêm sử dụng blocks cho seo
