Bạn đang tìm hiểu về WordPress và bạn đã từng nghe đến Gutenberg nhưng chưa thực sự hiểu rõ về nó? Đừng lo lắng, bài viết này chính là dành cho bạn! Bài viết sẽ cung cấp cho bạn cái nhìn tổng quan và chi tiết nhất để giải đáp thắc mắc Gutenberg là gì, các tính năng của Gutenberg, ưu nhược điểm và đồng thời hướng dẫn từng bước cài đặt và sử dụng Gutenberg để bạn tự tin xây dựng website của mình.
Gutenberg là gì?
Gutenberg là trình soạn thảo nội dung mặc định của WordPress, được giới thiệu từ phiên bản 5.0 (tháng 12 năm 2018). Gutenberg thay thế hoàn toàn trình soạn thảo cũ (Classic Editor) với mục tiêu mang đến trải nghiệm soạn thảo nội dung trực quan, hiện đại và linh hoạt hơn cho người dùng.
Gutenberg được đặt theo tên của Johannes Gutenberg, người phát minh ra máy in với chữ xếp, với ý nghĩa tượng trưng cho cuộc cách mạng trong xuất bản, tương tự như cách Gutenberg đang cách mạng hóa việc xuất bản nội dung trên WordPress.
Thay vì cách tiếp cận soạn thảo văn bản truyền thống, trình soạn thảo Gutenberg sử dụng các “khối” (blocks) để xây dựng nội dung. Mỗi khối đại diện cho một loại nội dung cụ thể như đoạn văn, tiêu đề, hình ảnh, video,… Điều này giúp người dùng dễ dàng tạo và tùy chỉnh nội dung mà không cần phải biết code. Gutenberg giúp bạn tập trung vào việc sáng tạo nội dung, thay vì phải vật lộn với những đoạn mã HTML phức tạp.
Gutenberg hoạt động như thế nào?
Gutenberg hoạt động dựa trên việc sử dụng các khối (blocks) để xây dựng nội dung. Khi bạn tạo một trang hoặc bài viết mới, bạn sẽ bắt đầu với một trang trống và thêm các khối vào đó. Mỗi khối đại diện cho một loại nội dung, và bạn có thể tùy chỉnh từng khối riêng lẻ.
Để thêm một khối mới, bạn chỉ cần nhấp vào nút “+” (Add Block) và chọn loại khối bạn muốn thêm từ thư viện khối. Thư viện này chứa rất nhiều loại khối khác nhau, từ các khối cơ bản như đoạn văn, tiêu đề, hình ảnh, đến các khối nâng cao hơn như bảng biểu, cột, nút bấm, và thậm chí là các khối từ các plugin bên thứ ba.
Sau khi thêm khối, bạn có thể nhập nội dung vào khối đó và sử dụng thanh công cụ xuất hiện phía trên hoặc bên cạnh khối để tùy chỉnh các cài đặt của khối. Bạn có thể dễ dàng di chuyển các khối lên xuống, thay đổi thứ tự, hoặc xóa các khối không cần thiết. Gutenberg cung cấp một giao diện trực quan, kéo thả, giúp bạn dễ dàng sắp xếp và định dạng nội dung theo ý muốn.
Ưu và nhược điểm của Gutenberg
Như bất kỳ công cụ nào, trình soạn thảo Gutenberg cũng có những ưu điểm và nhược điểm riêng. Việc hiểu rõ những điểm mạnh và điểm yếu này sẽ giúp bạn đưa ra quyết định đúng đắn về việc có nên sử dụng Gutenberg hay không.
Ưu điểm của Gutenberg là gì?
Dưới đây là một số ưu điểm của Gutenberg bạn nên biết:
- Giao diện trực quan, dễ sử dụng: Gutenberg cung cấp giao diện kéo thả trực quan, giúp người dùng dễ dàng tạo và chỉnh sửa nội dung mà không cần biết code. Việc thêm, xóa, di chuyển và tùy chỉnh các khối đều rất đơn giản và dễ hiểu.
- Linh hoạt và tùy biến cao: Với Gutenberg, bạn có thể tùy chỉnh từng khối riêng lẻ, thay đổi màu sắc, font chữ, kích thước, căn lề, và nhiều cài đặt khác. Điều này mang lại sự linh hoạt cao trong thiết kế và cho phép bạn tạo ra những trang web độc đáo và mang đậm dấu ấn cá nhân.
- Tối ưu cho thiết bị di động: Gutenberg được thiết kế để hoạt động tốt trên mọi thiết bị, từ máy tính để bàn đến điện thoại di động. Các khối tự động điều chỉnh kích thước và bố cục để phù hợp với kích thước màn hình, đảm bảo trải nghiệm người dùng tốt nhất trên mọi thiết bị.
- Khả năng mở rộng: Gutenberg có một hệ sinh thái khối phong phú, không chỉ bao gồm các khối mặc định mà còn có rất nhiều khối từ các plugin bên thứ ba. Bạn có thể dễ dàng mở rộng chức năng của Gutenberg bằng cách cài đặt các plugin cung cấp thêm các loại khối mới, đáp ứng mọi nhu cầu thiết kế của bạn.
- Hỗ trợ Full Site Editing (FSE): Gutenberg là nền tảng cho Full Site Editing (FSE) trong tương lai, cho phép bạn chỉnh sửa toàn bộ website bằng block, bao gồm cả header, footer, sidebar,… Điều này mang lại sự linh hoạt và khả năng tùy biến cao chưa từng có.
- Cộng đồng hỗ trợ: Là trình soạn thảo mặc định của WordPress, Gutenberg nhận được sự hỗ trợ mạnh mẽ từ cộng đồng người dùng và nhà phát triển
- WordPress. Bạn có thể dễ dàng tìm thấy các tài nguyên học tập, hướng dẫn, và giải đáp thắc mắc liên quan đến Gutenberg.
Nhược điểm của Gutenberg là gì?
Đi kèm với nhiều ưu điểm, Gutenberg cũng tồn tại khá nhiều nhược điểm như:
- Đường cong học tập ban đầu: Đối với những người dùng đã quen với Classic Editor, việc chuyển sang sử dụng Gutenberg có thể mất một thời gian để làm quen với giao diện và cách thức hoạt động mới.
- Vấn đề tương thích: Mặc dù vấn đề này đang ngày càng được cải thiện, một số theme và plugin cũ vẫn có thể không tương thích hoàn toàn với Gutenberg. Bạn cần kiểm tra kỹ tính tương thích trước khi cập nhật lên phiên bản WordPress mới nhất.
- Hiệu năng trong một số trường hợp: Trong quá khứ, Gutenberg từng bị phàn nàn về hiệu năng chậm chạp, đặc biệt là với các trang web có nhiều nội dung phức tạp. Tuy nhiên, vấn đề này đã được đội ngũ phát triển WordPress quan tâm và cải thiện đáng kể trong các phiên bản gần đây.
- Thiếu một số tính năng nâng cao so với Page Builder: So với các page builder chuyên dụng như Elementor hay Beaver Builder, Gutenberg vẫn còn thiếu một số tính năng nâng cao về thiết kế và tùy chỉnh. Tuy nhiên, với sự phát triển của Full Site Editing, khoảng cách này đang dần được thu hẹp.
So sánh Gutenberg và Classic Editor
Gutenberg khác gì Classic Editor? Việc lựa chọn giữa trình soạn thảo Gutenberg và Classic Editor phụ thuộc vào nhu cầu và sở thích cá nhân của bạn. Dưới đây là bảng so sánh chi tiết giữa hai trình soạn thảo này:
| Tiêu chí | Gutenberg | Classic Editor |
|---|---|---|
| Giao diện | Trực quan, kéo thả, chỉnh sửa trực tiếp | Dựa trên văn bản, sử dụng shortcode và HTML |
| Cách thức hoạt động | Dựa trên block | Dựa trên văn bản thuần túy |
| Tính linh hoạt | Cao, tùy chỉnh từng block riêng lẻ | Thấp, khó tùy chỉnh giao diện |
| Khả năng mở rộng | Rất cao, thông qua các plugin block | Hạn chế, chủ yếu dựa vào plugin và shortcode |
| Tốc độ | Đã được cải thiện, nhưng vẫn có thể chậm hơn trong một số trường hợp | Thường nhanh hơn, đặc biệt với các trang web có cấu trúc đơn giản |
| Độ phức tạp | Có thể phức tạp hơn với người mới bắt đầu | Đơn giản hơn, dễ làm quen với người dùng đã quen với các trình soạn thảo văn bản truyền thống |
| Tương lai | Là tương lai của WordPress, hướng tới Full Site Editing (FSE) | Sẽ ngừng hỗ trợ trong tương lai |
Khi nào nên dùng Gutenberg?
Dùng Gutenberg khi:
- Bạn là người mới bắt đầu với WordPress và muốn có một trình soạn thảo trực quan, dễ sử dụng.
- Bạn muốn tạo ra những trang web có bố cục phức tạp và thiết kế độc đáo.
- Bạn muốn tận dụng các tính năng mới nhất của WordPress, bao gồm cả Full Site Editing.
- Bạn muốn tối ưu hóa website cho thiết bị di động.
Khi nào nên dùng Classic Editor (tạm thời)?
Dùng Classic Editor khi:
- Bạn đã quen thuộc với Classic Editor và không muốn mất thời gian học lại.
- Website của bạn sử dụng các theme hoặc plugin cũ không tương thích với Gutenberg.
- Bạn cần một trình soạn thảo đơn giản và nhanh chóng cho các trang web có cấu trúc đơn giản.
- Bạn gặp vấn đề về hiệu năng khi sử dụng Gutenberg (hiện tại đã được cải thiện đáng kể).
Lưu ý: Classic Editor sẽ không còn được hỗ trợ chính thức trong tương lai gần. Vì vậy, bạn nên cân nhắc chuyển sang Gutenberg để đảm bảo tính tương thích và bảo mật cho website của mình.
Bố cục giao diện của Blocks Editor WordPress – Gutenberg
Giao diện của Gutenberg được thiết kế trực quan và thân thiện với người dùng. Dưới đây là bố cục chính của trình soạn thảo này:
Thanh tiêu đề (Top Toolbar): Nằm ở trên cùng của trình soạn thảo, chứa các nút chức năng chung như:
- Add Block (+): Thêm khối mới.
- Undo/Redo: Hoàn tác/Làm lại thao tác.
- Tools: Chuyển đổi giữa chế độ Select và Edit
- Content Structure: Hiển thị cấu trúc nội dung của trang/bài viết.
- List View: Xem danh sách các block
- Save Draft/Preview/Publish: Lưu nháp, xem trước và xuất bản trang/bài viết.
Thanh công cụ của khối (Block Toolbar): Xuất hiện phía trên hoặc bên cạnh mỗi khối khi bạn nhấp vào khối đó. Thanh công cụ này chứa các nút chức năng để tùy chỉnh khối, chẳng hạn như thay đổi kiểu chữ, căn lề, thêm liên kết, thay đổi màu sắc,…
Cài đặt trang/bài viết (Post/Page Settings): Nằm ở cột bên phải của trình soạn thảo, cho phép bạn thay đổi các cài đặt của trang/bài viết như tiêu đề, đường dẫn tĩnh, danh mục, thẻ, ảnh đại diện,…
Cài đặt khối (Block Settings): Cũng nằm ở cột bên phải, hiển thị các cài đặt cụ thể cho khối đang được chọn. Các cài đặt này thay đổi tùy thuộc vào loại khối.
Vùng soạn thảo nội dung (Content Area): Là khu vực chính giữa màn hình, nơi bạn thêm và chỉnh sửa các khối.
Tính năng bổ sung của Gutenberg là gì?
Ngoài các tính năng cơ bản như thêm, xóa, di chuyển và tùy chỉnh các khối, trình soạn thảo Gutenberg còn cung cấp nhiều tính năng bổ sung hữu ích khác.
Mục lục
Gutenberg cho phép bạn tạo mục lục tự động cho trang/bài viết dựa trên các tiêu đề (heading). Điều này giúp người đọc dễ dàng theo dõi cấu trúc của bài viết và di chuyển đến các phần khác nhau một cách nhanh chóng. Tuy nhiên, để có một mục lục tự động, bạn có thể cài đặt thêm plugin hỗ trợ.
Anchors
Bạn có thể thêm các neo (anchors) vào các phần cụ thể trong bài viết và tạo liên kết đến các neo đó. Tính năng này rất hữu ích cho các bài viết dài, cho phép người đọc nhảy đến các phần mà họ quan tâm.
Các kiểu CSS bổ sung
Gutenberg cho phép bạn thêm các lớp CSS tùy chỉnh vào các khối, giúp bạn kiểm soát giao diện của từng khối một cách chi tiết hơn. Điều này rất hữu ích cho các nhà phát triển web muốn tùy chỉnh giao diện website vượt ra ngoài các cài đặt mặc định.
Gallery
Block “Gallery” cho phép bạn tạo các thư viện ảnh đẹp mắt một cách dễ dàng. Bạn có thể thêm nhiều hình ảnh vào một thư viện, chọn bố cục hiển thị, và tùy chỉnh các cài đặt khác như kích thước hình ảnh, số cột,…
Cover Image/Hero Image
Block “Cover” cho phép bạn tạo ra các hình ảnh tiêu đề (hero image) ấn tượng cho trang/bài viết. Bạn có thể thêm văn bản, nút bấm, và các yếu tố khác lên trên hình ảnh, tạo ra những lời kêu gọi hành động (call to action) hiệu quả.
Pull Quotes & Block Quotes
Block “Pull Quote” và “Blockquote” giúp bạn làm nổi bật các trích dẫn quan trọng trong bài viết. Pull quote thường được sử dụng để trích dẫn một phần nội dung từ chính bài viết, trong khi blockquote thường được sử dụng để trích dẫn từ nguồn bên ngoài.
Tùy chỉnh HTML
Trình soạn thảo Gutenberg cho phép bạn chỉnh sửa mã HTML của từng khối riêng lẻ. Điều này mang lại sự linh hoạt tối đa cho các nhà phát triển web, cho phép họ tùy chỉnh giao diện và hành vi của từng khối theo ý muốn.
Classic Text
Để tương thích với cách soạn thảo cũ, Gutenberg cung cấp cho bạn tính năng Classic Text. Đây là không gian soạn thảo tương tự như phiên bản Classic Editor, rất phù hợp với người dùng chưa quen với cách dùng Block.
Verse
Đây là tính năng cho phép chèn các đoạn thơ, ca dao, tục ngữ vào bài viết. Các đoạn thơ sẽ giữ nguyên định dạng ban đầu, tránh tình trạng bị lỗi font, lỗi xuống dòng.
Text Columns
Block “Columns” cho phép bạn chia nội dung thành nhiều cột khác nhau. Bạn có thể tùy chỉnh số cột, độ rộng của từng cột, và khoảng cách giữa các cột. Tính năng này rất hữu ích cho việc tạo ra các bố cục phức tạp và đẹp mắt.
Buttons
Block “Button” cho phép bạn thêm các nút bấm vào trang/bài viết. Bạn có thể tùy chỉnh văn bản, màu sắc, kích thước, và liên kết của nút bấm.
Widgets
Gutenberg cho phép bạn thêm các widget vào trang/bài viết, chẳng hạn như danh sách bài viết mới nhất, danh mục, lịch,… Điều này giúp bạn dễ dàng tích hợp các tính năng của WordPress vào nội dung trang/bài viết.
Latest Posts
Block “Latest Posts” hiển thị danh sách các bài viết mới nhất trên website của bạn. Bạn có thể tùy chỉnh số lượng bài viết hiển thị, cách thức hiển thị (danh sách, lưới), và các cài đặt khác.
Categories
Block “Categories” hiển thị danh sách các danh mục trên website của bạn. Người đọc có thể nhấp vào từng danh mục để xem các bài viết thuộc danh mục đó.
Shortcode
Block “Shortcode” cho phép bạn chèn các shortcode vào trang/bài viết. Shortcode là các mã ngắn dùng để thực thi các chức năng nhất định, thường được cung cấp bởi các plugin.
Hướng dẫn cách cài đặt Blocks Editor Gutenberg
Gutenberg là trình soạn thảo mặc định của WordPress kể từ phiên bản 5.0. Do đó, nếu bạn đang sử dụng phiên bản WordPress mới nhất, bạn không cần phải cài đặt Gutenberg nữa.
Tuy nhiên, nếu bạn đang sử dụng phiên bản WordPress cũ hơn 5.0 hoặc đã cài đặt plugin Classic Editor, bạn cần thực hiện các bước sau để cài đặt và kích hoạt Gutenberg:
Cách 1: Cập nhật WordPress lên phiên bản mới nhất
Bước 1: Đăng nhập vào trang quản trị WordPress của bạn.
Bước 2: Đi tới Bảng tin (Dashboard) -> Cập nhật (Updates).
Bước 3: Nếu có phiên bản WordPress mới, bạn sẽ thấy thông báo ở đây. Nhấp vào nút Cập nhật ngay bây giờ (Update Now) để cập nhật WordPress lên phiên bản mới nhất.
Bước 4: Sau khi cập nhật xong, Gutenberg sẽ tự động được kích hoạt.
Cách 2: Cài đặt plugin Gutenberg (cho phiên bản WordPress cũ hơn 5.0)
Bước 1: Đăng nhập vào trang quản trị WordPress của bạn.
Bước 2: Đi tới Plugins -> Cài mới (Add New).
Bước 3: Tìm kiếm plugin Gutenberg.
Bước 4: Nhấp vào nút Cài đặt (Install Now) bên cạnh plugin Gutenberg của tác giả WordPress.org.
Bước 5: Sau khi cài đặt xong, nhấp vào nút Kích hoạt (Activate).
Sau khi hoàn thành các bước trên, bạn có thể bắt đầu sử dụng Gutenberg để tạo và chỉnh sửa nội dung trên website của mình.
Hướng dẫn cách sử dụng Editor Gutenberg trên WordPress
Dưới đây là hướng dẫn chi tiết cách sử dụng Editor Gutenberg trên WordPress:
Thêm Blocks mới
Để thêm một khối mới, bạn có thể nhấp vào nút “+” (Add Block) ở góc trên bên trái của trình soạn thảo hoặc ở giữa các khối hiện có. Sau đó, bạn có thể chọn loại khối bạn muốn thêm từ thư viện khối.
Thêm các khối phi văn bản
Ngoài các khối văn bản như đoạn văn và tiêu đề, Gutenberg còn cung cấp nhiều khối phi văn bản khác như hình ảnh, video, âm thanh, thư viện ảnh,… Để thêm các khối này, bạn cũng sử dụng nút “+” (Add Block) và chọn loại khối tương ứng từ thư viện khối.
Ví dụ: Để thêm hình ảnh, bạn chọn khối “Image” và tải lên hình ảnh từ máy tính của bạn hoặc chọn từ thư viện phương tiện của WordPress. Để thêm video, bạn có thể chọn khối “Video” và dán liên kết video từ YouTube, Vimeo, hoặc các nền tảng khác.
Tạo các cột khác nhau
Để tạo các cột, bạn sử dụng khối “Columns“. Sau khi thêm khối này, bạn có thể chọn số lượng cột và độ rộng của từng cột. Sau đó, bạn có thể thêm các khối khác vào từng cột, tạo ra các bố cục phức tạp và đẹp mắt.
Cách tùy chỉnh các khối riêng lẻ
Mỗi khối trong Gutenberg đều có các cài đặt tùy chỉnh riêng. Khi bạn nhấp vào một khối, thanh công cụ của khối sẽ xuất hiện phía trên hoặc bên cạnh khối đó. Thanh công cụ này chứa các nút chức năng để tùy chỉnh khối, chẳng hạn như thay đổi kiểu chữ, căn lề, thêm liên kết, thay đổi màu sắc,…
Ngoài ra, bạn cũng có thể tùy chỉnh khối bằng cách sử dụng bảng điều khiển “Block Settings” ở cột bên phải của trình soạn thảo. Bảng điều khiển này hiển thị các cài đặt cụ thể cho khối đang được chọn, cho phép bạn tùy chỉnh chi tiết hơn giao diện và hành vi của khối.
Cách sắp xếp lại các khối riêng lẻ
Bạn có thể dễ dàng di chuyển các khối lên xuống để thay đổi thứ tự của chúng trong trình soạn thảo. Để di chuyển một khối, bạn nhấp vào khối đó để chọn nó, sau đó sử dụng các nút mũi tên lên xuống trên thanh công cụ của khối hoặc kéo thả khối đến vị trí mới.
Bạn có thể chuyển đổi giữa hai chế độ xem bằng cách nhấp vào biểu tượng dấu ba chấm dọc ở góc trên bên phải của trình soạn thảo và chọn Code Editor hoặc Visual Editor.
Với Gutenberg, bạn có thể dễ dàng tạo ra những trang web đẹp mắt và chuyên nghiệp mà không cần phải biết code. Hy vọng rằng bài viết này đã cung cấp cho bạn những thông tin hữu ích về Gutenberg là gì và giúp bạn tự tin hơn trong việc sử dụng trình soạn thảo này để xây dựng website của mình.
InterData, một đơn vị tiên phong trong lĩnh vực Công nghệ thông tin, chuyên cung cấp dịch vụ máy chủ ảo chất lượng giá rẻ chỉ từ 95K/tháng, dịch vụ Hosting tốc độ cao cấu hình linh hoạt đáp ứng mọi nhu cầu của khách hàng. Với nền tảng công nghệ tiên tiến cùng đội ngũ chuyên gia dày dặn kinh nghiệm, InterData tự hào mang đến cho khách hàng những giải pháp máy chủ ảo tối ưu nhất.
Ngoài ra, InterData còn cung cấp dịch vụ Cloud Server mạnh mẽ với khả năng mở rộng dễ dàng, lý tưởng cho các hệ thống lớn. Nếu bạn cần một giải pháp mạnh mẽ hơn, hiệu suất cao hơn, dịch vụ thuê Server vật lý cấu hình mạnh tại InterData là một giải pháp đáng cân nhắc, máy chủ vật lý mang lại hiệu suất vượt trội và mức độ bảo mật cao, đảm bảo doanh nghiệp vận hành hệ thống một cách an toàn và bền vững.
INTERDATA
- Website: Interdata.vn
- Phone: 1900.636822
- Email: [email protected]
- VPĐD: 240 Nguyễn Đình Chính, P.11. Q. Phú Nhuận, TP. Hồ Chí Minh
- VPGD: Số 211 Đường số 5, KĐT Lakeview City, P.An Phú, Tp.Thủ Đức, TP. Hồ Chí Minh
