Trong bài viết trước mình đã tìm hiểu qua các thao tác căn bản cần biết để xuất bản một bài viết hoặc một trang lên website rồi. Giao diện soạn nội dung của WordPress thật đơn giản, dễ nhìn đúng không nào?
Tuy đơn giản là vậy, nhưng công cụ soạn nội dung của WordPress lại rất mạnh mẽ nhờ vào tính năng Block Editor (thuộc dự án dài hạn Gutenberg), không chỉ giúp bạn soạn thảo nội dung bài viết thông thường mà nó còn hỗ trợ các tính năng dàn trang, thay đổi bố cục rất độc đáo.
Ở bài viết này, mình sẽ nói kỹ hơn về Block Editor và hướng dẫn chi tiết công cụ này. Để tiếp theo và thực hành, bạn vào giao diện đăng một bài viết hoặc một trang mới nhé.
Fun fact: WordPress trước đây không có Block Editor mà sử dụng một trình soạn thảo bình thường (gọi là Classic Editor), rất nhiều người cố tình cài thêm plugin Classic Editor để quay trở lại trình soạn thảo cũ trên phiên bản WordPress mới để dùng cho quen. Tuy nhiên việc làm quen và sử dụng Block Editor sẽ có nhiều lợi thế hơn.
Block Editor hay Gutenberg?
Trước khi đi sâu vào nội dung bài viết, mình cần giải thích rõ ràng về cái tên Gutenberg có thể bạn đã nghe ở đâu đó khi nói về tính năng Block Editor, có nhiều người lại nói trình soạn thảo này là Gutenberg.
Thực ra Gutenberg là tên của một dự án dài hạn của đội ngũ phát triển WordPress, dự án này chia thành 4 giai đoạn được đặt tên như sau:
- Giai đoạn 1: Editing (hoàn tất) – Tập trung vào thay đổi nâng cấp tính năng chỉnh sửa nội dung, và Block Editor là một sản phẩm của giai đoạn này.
- Giai đoạn 2: Customzation (đang diễn ra tại thời điểm đăng bài này là tháng 10/2024) – Ra mắt các tính năng liên quan đến việc tuỳ biến cả trang, và Full Site Editing là tính năng chủ lực giúp tăng cường trải nghiệm liền mạch trên website để tuỳ biến website, thông qua việc mở rộng các tính năng của Block Editor và bổ sung tính năng Site Editor. Bài sau bạn sẽ tiếp xúc với tính năng này
- Giai đoạn 3: Collaboration – Tập trung phát triển các tính năng liên quan đến cộng tác, giúp nhiều người cùng tham gia chỉnh sửa website hiệu quả.
- Giai đoạn 4: Multilingual – Tập trung phát triển các tính năng hỗ trợ đa ngôn ngữ trên website. Lúc này việc hỗ trợ đa ngôn ngữ sẽ là tiêu chuẩn mặc định của WordPress
Do vậy, bạn không nên gọi trình soạn thảo này là Gutenberg mà nên gọi nó là Block Editor, đã đủ rõ ràng chưa nào 😊.
Vì sao gọi là Block Editor?
Các nhà phát triển gọi trình soạn thảo mới này với cái tên Block Editor để ám chỉ rằng mọi thành phần trong nội dung sẽ được gọi là một khối (block), các block sẽ cách nhau bằng một hàng và bạn có thể tuỳ chỉnh, trang trí cho từng khối riêng biệt.
Khi soạn nội dung, nếu văn bản của bạn có nhiều dòng giống bài viết này, thì mỗi dòng nó cũng là một block riêng biệt, bạn có thể tuỳ chỉnh màu chữ, màu nền, kích thước văn bản cho riêng từng block.
Bạn có biết đến phần mềm Notion không? Nó cũng là một ví dụ sử dụng trình soạn thảo theo kiểu khối và kéo thả như vậy đó.
Tổng quan về Block Editor
Thoạt đầu nhìn thì khung soạn thảo của WordPress sẽ có phần soạn thảo bên tay trái, và thanh công cụ bên tay phải. Thế nhưng nó còn một khung nữa gọi là khung chứa danh sách các block bạn có thể sử dụng, bạn có thể click vào dấu + ở bên trái phía trên của trang để kích hoạt.
Như vậy giao diện soạn thảo block editor sẽ bao gồm 3 khung như ảnh dưới (mượn tạm ảnh của WordPress Handbook):
- Mục 1: Danh sách các block được hỗ trợ.
- Mục 2: Khung soạn thảo nội dung và sẽ hiển thị ra bên ngoài website.
- Mục 3: Cột tuỳ chỉnh, bao gồm tuỳ chỉnh thông tin bài viết/trang hoặc tuỳ chỉnh cho block đang được chọn.
Tại đây các block sẽ được chia thành 3 mục bao gồm:
- Blocks: Danh sách các block được hỗ trợ để sử dụng, bao gồm các blocks mặc định trong WordPress, blocks riêng hỗ trợ bởi theme và của các plugin (nếu có).
- Patterns: Tập hợp các bản thiết kế sẵn sử dụng blocks, phần này rất hay mà mình sẽ nói chi tiết về Patterns ở dưới.
- Media: Tái sử dụng lại các block chèn ảnh/video bạn đã sử dụng trước đó, sử dụng ảnh có sẵn trong thư viện Openverse.
Để sử dụng một block nào đó, bạn cần chọn hàng cần chèn block và nhấp vào block ở khung tay trái để sử dụng, rất dễ dàng.
Ngoài ra, bạn có thể chèn block nhanh bằng cách gõ / và nhập một phần tên block, nó sẽ tự hiện ra để bạn chọn.
Trường hợp nếu bạn muốn bắt đầu một block mới bên dưới, chỉ cần nhấp chọn vào block nó và gõ Enter để xuống hàng là bạn đã tạo block mới.
Thông tin thêm: Ở khung soạn thảo Block Editor, bạn có thể soạn văn bản bằng cú pháp Markdown. Ví dụ bạn muốn bôi đậm một đoạn ngay trong lúc gõ thì viết **đoạn cần bôi đậm**. Tham khảo thêm về Markdown tại đây.
Bạn có thể nhân bản block trong nội dung bằng thao tác copy và paste thông thường.
Hướng dẫn sử dụng các block thông dụng
Dưới đây mình sẽ hướng dẫn về một số block thường dùng, các block khác ít dùng thì mình sẽ chỉ giải thích ngăn gọn bên dưới.
Thêm màu nền và màu chữ cho một đoạn văn bản
WordPress phân loại mỗi hàng chữ là một block, mỗi block bạn có thể tuỳ chọn thêm màu nền, màu chữ riêng cho nó, bây giờ bạn thử nhấp chuột vào một hàng bất kỳ, sau đó chọn Background (màu nền), Text (màu chữ), điều chỉnh kích cỡ cho chữ (Typography) bên tay phải nhé.
Thêm highlight, tô màu cho đoạn chữ
Khi cần highlight (thêm màu nền hoặc màu chữ cho một đoạn ngắn) thì có thể bôi đen đoạn cần highlight trong nội dung và chọn công cụ highlight như mô tả ảnh dưới.
Các tính năng inline text
Tính năng trang trí inline text nghĩa là giúp bạn thao tác vào một block văn bản mà không cần phải xuống hàng, giống như tính năng Highlight ở trên, ngoài nó ra thì còn có các tính năng khác mà mình sẽ không hướng dẫn ở đây (nhưng có nói trong video kèm theo):
- Footnote: Cước chú giống thế này1.
- Inline code: Biến một chữ hoặc một đoạn chữ trong block và đánh dấu nó là mã, giống như
<?php $color = 'red'; ?>mà không bị lỗi liên quan đến ký tự đặc biệt. - Inline Image: Giúp bạn chèn một bức ảnh (thường là ảnh nhỏ dạng icon) vào block văn bản giống thế này
mà không cần phải xuống hàng chèn vào. - Keyboard input: Đánh dấu một đoạn hoặc một chữ trong văn bản tượng trưng cho nút bàn phím trong văn bản. Cái này thường dùng ở các tài liệu hướng dẫn về kỹ thuật là chính, giống như mình nói bạn hãy ấn tổ hợp phím cmd + F để tìm kiếm, cái chữ cmd và F mình đang đánh dấu là nút bàn phím đó, để cho chuyên nghiệp và hợp lệ hơn thôi chứ không bắt buộc.
- Language: Đánh dấu mã ngôn ngữ cho một đoạn văn bản, cái này thích hợp nếu trong văn bản của bạn có nhiều ngôn ngữ khác nhau và đánh dấu cấu trúc HTML cho riêng từng ngôn ngữ. Cái này chỉ liên quan đến cấu trúc HTML của trang chứ không có sự khác biệt khi nhìn bên ngoài.
- Strikethrough: Gạch ngang chữ.
- Subscript: Đánh dấu một chữ hoặc số có vị trí thấp hơn chữ trước hoặc sau.
- Superscript: Ngược lại so với ở trên, nghĩa là nó nằm ở trên 🥸
mà không cần phải xuống hàng chèn vào.Thông tin thêm 💡: Bạn cũng có thể chèn Emoji vào bài viết bằng cách copy ảnh emoji vào. Nếu sử dụng trên máy macOS thì ấn tổ hợp phím cmd + alt + spacebar để mở cửa sổ Emoji. Trên Windows thì ấn tổ hợp phím Windows + ..
Thêm tiêu đề cho từng phần trong văn bản
Nếu trong văn bản có nhiều phần thì mỗi phần sẽ đều có tiêu đề, vì vậy bạn có thể sử dụng block Heading để thêm tiêu đề hoặc sử dụng cú pháp Markdown để thêm tiêu đề nhanh. Khi thêm tiêu đề xong, bạn có thể chọn phân cấp tiêu đề (heading level) mà WordPress hỗ trợ từ H1 đến H6.
Thêm danh sách (list) vào văn bản
Ta sẽ sử dụng block tên List để chèn một danh sách vào văn bản, hoặc có thể thêm nhanh bằng cách xuống hàng và bắt đầu list bằng cách gõ ký tự -. Để thoát ra list đang làm việc thì Enter 2 lần. Bạn cũng có thể thêm một danh sách con bên trong bằng cách gõ phím Tab trong lúc nhập.
Thêm nội dung ẩn với block Details
Nhấp vào đây để xem hướng dẫn về block Details
Block Details có tác dụng mà bạn vừa thao tác đó. Để làm nội dung ẩn ở trên, bạn có thể sử dụng block Details được tích hợp sẵn, khá thú vị đó. Ở đây bạn có thể tuỳ chỉnh nội dung ẩn hoặc hiển thị trong trạng thái mặc định, thêm màu sắc cho nội dung bên trong và lồng các block vào bên trong. Bạn xem kỹ video ở dưới để hiểu hơn về cách sử dụng nhé.
Chèn văn bản soạn bằng Classic Editor vào Block Editor
Nếu bạn muốn soạn văn bản bằng một trình soạn thảo trước đây của WordPress, thì có thể chèn block Classic vào và bắt đầu soạn thôi.
Chia cột trong nội dung
Một tính năng mà Classic Editor không làm được đó là Block Editor có thể giúp bạn thêm nhiều cột vào nội dung một cách nhanh chóng. Bạn chỉ cần đơn giản thêm block Column vào nội dung, chọn số cột muốn chèn và thực hiện thêm block khác vào mỗi cột. Mặc định các cột này sẽ xếp chồng lại trên giao diện điện thoại nên bạn không cần lo hiển thị trên điện thoại sẽ bị vỡ khung, hoặc có thể tắt tính năng này đi.
Các block chèn hình ảnh, video
Để chèn hình ảnh hay video thì chúng ta cũng sử dụng các block để thao tác. Do phần hình ảnh sẽ có nhiều thao tác liên quan nên mình sẽ tách nội dung hướng dẫn ra thành phần riêng cho nó thôi
Nguồn ảnh minh hoạ trong bài viết và video: Nikon Z8 Official Sample Photos (photographylife.com)
Chèn một hình ảnh/video dưới máy tính vào bài viết
Để đưa một tấm ảnh hoặc video đang để dưới máy tính lên website WordPress của bạn thì chỉ cần đơn giản là sử dụng block Image hoặc Video để chèn vào, hoặc có thể kéo tập tin từ máy tính vào thẳng khung soạn thảo thì nó cũng sẽ tự tải lên rất tiện lợi.
Đối với video từ Youtube thì bạn chỉ cần copy liên kết của video vào là nó sẽ tự hiển thị ra video, đây là tính năng oEmbed có trong WordPress giúp bạn chèn nhanh các nội dung từ nhiều trang khác nhau như Youtube, Spotify, Vimeo, Twitter, Slideshare, TED,…
Thông tin thêm: Với các ảnh đã tải lên, bạn có thể quản lý nó tại mục Media => Library trong trang quản trị. Tại đây bạn có thể sửa lại ảnh như crop, thay đổi kích thước, xoay ảnh.
Trước khi tải ảnh lên website, bạn nên giảm kích thước của ảnh về dưới 2000px chiều ngang (chiều rộng tương ứng với ảnh) hoặc mỗi tấm ảnh không nặng quá 5MB.
Tuỳ chỉnh hiển thị hình ảnh
Khi hình ảnh đã chèn vào nội dung rồi, bạn có thể thay đổi kiểu hiển thị của hình ảnh rất mạnh mẽ với Block Editor, chỉ với vài thao tác bạn có thể điều chỉnh kích thước ảnh hiển thị, thêm bộ lọc màu cho ảnh, thêm hiệu ứng màu nền viền, bo cong góc ảnh,…
Hiển thị ảnh dạng gallery
Nếu bạn muốn hiển thị nhiều hình ảnh nhưng với mục đích trưng bày thì có thể chèn vào với dạng Gallery để hiển thị đẹp mắt hơn, bằng cách sử dụng block Gallery. Lưu ý là khi chèn ảnh dạng gallery thì nên bật tính năng chèn liên kết của ảnh khi nhấp chuột vào để người dùng có thể xem kích thước ảnh gốc.
Mẹo thêm: Mặc định khi người dùng nhấp chuột vào link ảnh sẽ mở ra một tab trình duyệt mới để hiển thị ảnh. Bạn có thể cài plugin Firelight Lightbox để xem ảnh kích thước gốc mà không cần mở một tab mới.
Với các ảnh đã có sẵn ở thư viện mà muốn tạo gallery thì khi dùng block Gallery, bạn chọn Media Library thay vì Upload.
Giải thích về các block khác
Ngoài một số block thông dụng mình đã đề cập ở trên, để tiết kiệm một xíu dung lượng bài viết thì mình sẽ liệt kê ra ở dưới kèm theo giải thích và bạn có thể tự tìm hiểu thêm nhé.
Thông tin thêm: Các block hiển thị như thế nào sẽ do theme đang sử dụng quyết định, vì vậy các block này có thể hiển thị rất tốt trên theme mặc định của WordPress nhưng có thể nó sẽ hiển thị khác hoặc hiển thị không tốt trên những theme khác.
- Quote: Chèn một câu trích dẫn vào bài viết và được đánh dấu hiển thị riêng biệt. Trích dẫn này thuộc loại Blockquote, được sử dụng khi dẫn trích dẫn từ bên ngoài.
- Preformatted: Chèn một văn bản mà nó sẽ bỏ qua mọi định dạng, bỏ qua các ký tự đặc biệt. Phù hợp để chèn một đoạn code dài.
- Pullquote: Cũng là để chèn trích dẫn nhưng nó thuộc loại Pull quote, nghĩa là các trích dẫn được lấy từ bên trong nội dung muốn nhận được sự chú ý của người đọc. Nếu bạn có đọc tạp chí, thấy một cái chữ to to bên phải hoặc trái nội dung, thì đó là pull quote đó.
- Table: Chèn bảng vào nội dung, bạn có thể tuỳ chỉnh số lượng cột, hàng tuỳ ý.
- Verse: Một block riêng để chèn thơ vào nội dung cho nó độc đáo, bộ phận phát triển WordPress mê văn học dữ.
- Audio: Giống như chèn ảnh và video, nhưng cái này dùng để chèn tập tin âm thanh.
- Cover: Đây là một block chèn ảnh, nhưng cho phép bạn viết chữ lên trên ảnh và làm tối ảnh đi một tí.
- File: Chèn một tập tin từ thư viện Media nhưng cho phép người dùng tải về dễ dàng bằng cách hiển thị nút tải.
- Media & Text: Cũng là chèn ảnh nhưng block này sẽ chia nội dung ra hai cột, một để hiển thị ảnh và còn lại hiển thị chữ bên cạnh.
- Button: Chèn nút bấm.
- Group: Gộp nhiều block lại thành một group và cấu hình chung.
- Row: Tập hợp các block lại thành một hàng ngang.
- Stack: Tập hợp các block lại thành một hàng dọc.
- Grid: Tập hợp các block lại thành dạng lưới.
- More: Những nội dung mà hiển thị trên block này sẽ hiển thị ra bên ngoài trang chủ hoặc trang danh mục, thay vì hiển thị một đoạn nội dung tự động hoặc cả bài viết. Tuy nhiên bây giờ nhiều theme có thiên hướng tự động hoá phần này nên có lẽ không cần dùng đến.
- Page Break: Phân nội dung thành nhiều trang con, mỗi lần sử dụng block này trong nội dung thì các nội dung bên dưới nó sẽ tách ra một trang riêng biệt. Người đọc có thể chọn trang kế tiếp ở cuối nội dung để đọc tiếp.
- Seperator: Kẻ một đường thẳng ngắn trong nội dung để kết thúc một phần hoặc một ý tưởng nào đó. Giống như khi đọc sách mỗi cuối chương hoặc mỗi phần sẽ có một đường kẻ ngắn.
- Spacer: Block này sẽ không hiển thị gì cả, nó giúp bạn tạo khoảng đệm trống giữa các block.
- Các block trong mục Widget: Giúp bạn chèn thẳng một widget nào đó có hỗ trợ trong theme/plugin vào nội dung bài viết. Ở phần sử dụng theme chi tiết mình sẽ đề cập đến Widget rõ hơn.
- Các block trong mục Theme: Đây là các block đặc biệt mà theme bạn đang dùng có hỗ trợ. Các theme được quảng cáo là tương thích với Block Editor hoặc hỗ trợ Full-site editing thì sẽ có rất nhiều block kèm theo.
- Các block mục Embed: Chèn nội dung từ một website hay mạng xã hội khác vào bài viết.
Sử dụng Block Pattern
Pattern hay Block pattern là một tính năng cực kỳ hữu ích được bổ sung cho Block Editor của WordPress, giúp bạn lưu các thay đổi hoặc thiết kế của block (hoặc nhiều block) thành một pattern để tái sử dụng lại nhanh hơn. Ngoài ra, bạn có thể tận dụng các pattern thiết kế sẵn có của theme có hỗ trợ hoặc trên thư viện có sẵn của WordPress.
Một tính năng hay nữa của Pattern là bạn có thể tái sử dụng cả trên website khác, chỉ cần copy nó và paste một website khác thôi là nó sẽ hiển thị y chang, thấy ghê không.
Để xem các pattern mà bạn có thể sử dụng, bạn truy cập vào khu vực hiển thị block và chọn Pattern, sau đó chọn Pattern theo từng mục rồi chèn rồi sửa nội dung lại là hoàn tất.
Tự tạo Block Pattern riêng
Như mình đã nói, pattern là tập hợp của nhiều block nên nếu bạn có phần nào mong muốn tái sử dụng lại, dùng nhiều block khác nhau thì tạo nó thành một pattern để tái sử dụng lại. Còn lại nếu nội dung bạn tái sử dụng chỉ là một block riêng lẻ thì không cần thiết.
Giả sử mình có thiết kế một cái pattern hiển thị thông tin liên hệ như ảnh dưới. Trong pattern đó mình sẽ chia cột bằng block colume, hiển thị chữ với block Paragraph, hiển thị chữ kèm một icon với block Media & Text, hiển thị bản đồ Google Map với block HTML.
Cách thao tác chi tiết bạn có thể tham khảo video của bài này (khi đã được cập nhật xong), mình sẽ không mô tả chi tiết cách tạo các block này ra sao ở đây để tránh bài bị dài.
Sau khi các bước cần thiết để chèn block cần thiết, bạn truy cập vào chế độ List View của Block Editor theo ảnh chỉ dẫn bên dưới.
Sau đó tìm chọn block hoặc các block mà bạn cần tạo pattern, khi chọn tới đâu nó sẽ tô sáng lên ở khung soạn thảo để bạn biết đang chọn block nào. Giả dụ nếu bạn làm theo yêu cầu trên, thì mọi block sẽ đều nằm trong block Column nên mình chỉ cần chọn một block này là được, trường hợp bạn muốn chọn nhiều block khác thì giữ phím Shift và click chọn.
Sau khi click chọn, bạn nhấp chuột trái và chọn Create Pattern. Khi tạo Pattern, bạn sẽ chọn loại pattern có chế độ Synced hay không. Synced là chế độ đồng bộ nội dung bên trong pattern mà khi chỉnh sửa nội dung các block, thì các khu vực sử dụng pattern này sẽ thay đổi theo.
Khi tạo xong, các block đó sẽ hiển thị với dạng pattern kèm theo tên pattern. Nếu muốn thay đổi nội dung thì ấn nút Edit Original là được.
Để tái sử dụng pattern này, bạn cũng truy cập lại vào khu vực hiển thị Pattern, sẽ thấy mục My patterns sẽ lưu các pattern do bạn tự tạo ra ở đó.
Sử dụng pattern trên thư viện WordPress
WordPress có một trang để chia sẻ các pattern mà bạn có thể copy về sử dụng, mình không rõ là tương lai có cho người dùng đóng góp thiết kế pattern vào đây không, nhưng bạn cũng nên biết để có gì tham khảo nhé.
Bạn truy cập vào trang https://wordpress.org/patterns/, chọn pattern cần sử dụng rồi copy, sau đó paste lại vào khung soạn thảo của mình là được.
Bạn cũng có thể chia sẻ pattern của bạn với website khác bằng cách tương tự, đó là nhấp vào pattern rồi chọn Copy và Paste ở trang cần dùng thôi. Lưu ý, pattern dạng Synced không thể chia sẻ.
Kết bài
Bài này có vẻ hơi dài và nhiều video nhỏ kèm theo, nhưng mình nghĩ thật xứng đáng nếu có thể hướng dẫn chi tiết về Block Editor trong WordPress để bạn hiểu thêm tại sao WordPress lại chọn hướng phát triển này, nó giúp chúng ta thiết kế mọi thứ trong trang một cách dễ dàng và trực quan hơn, cũng như đó là tiền đề để bạn làm quen với các page builder sau này như Elementor chẳng hạn.
Ở bài kế tiếp, mình sẽ nói thêm một tính năng khác cũng liên quan đến việc đăng nội dung mà mình nghĩ bạn cũng cần nên biết để sử dụng, đó là lưu mẫu bài viết hoặc trang để tái sử dụng, được gọi là Post Template hoặc Page Template.
- Ví dụ về cước chú ↩︎
