Hướng dẫn sử dụng WordPress Gutenberg cho người mới

Năm 2017 đã kết thúc.

Vậy sự kiện nào liên quan đến WordPress khiến mọi người bán tán sôi nổi nhất năm vừa qua?

Đối với mình cũng như nhiều blogger mê WordPress khác, Gutenberg chính là trả câu trả lời.

Thực sự, Gutenberg đã và sẽ tốn nhiều giấy mực của các blogger viết về WordPress.

Cho dù bạn đã biết một chút về Gutenberg và ở phe ném đá, thì một thực tế mà tất cả chúng ta đều phải chấp nhận:

Gutenberg sẽ sớm trở thành một phần của WordPress core. Vấn đề chỉ là thời gian. Rất có thể trong năm nay.

Còn nếu bạn không biết Gutenberg là cái quái gì, thì bài hướng dẫn sử dụng Gutenberg hôm nay sẽ giúp bạn hiểu được Gutenber và cách sử dụng nó.

Trang bị những kiến thức này sớm giúp bạn khỏi bỡ ngỡ với một sự thay đổi có tính cách mạng trong WordPress.

Gutenberg là gì?

Nói ngắn ngọn:

Gutenberg là sự thay thế WordPress TinyMCE Editor ( trình biên tập mà bạn đang sử dụng trong WordPress hiện tại).

Đây là giao diện của WordPress TinyMCE hiện tại đã quen thuộc với chúng ta

Đây là giao diện của trình soạn Gutenberg mới mẻ:

Vấn đề ở chỗ:

Gutenberg không phải là sự thay đổi đơn giản về giao diện. Mà nó là sự thay đổi cách thức bạn biên soạn nội dung trong WordPress. Điều này ảnh hưởng lớn tới các nhà phát triển theme và plugin.

Với Gutenberg, phương pháp tạo nội dung sẽ dựa trên các khối (giải thích thêm bên dưới). Mục tiêu của Gutenberg giúp bạn có được công cụ mạnh mẽ và linh hoạt để xây dựng toàn bộ website bao gồm landing page và những nội dung quan trọng khác. Nghĩa là: bạn không chỉ thuần tùy sử dụng Gutenberg để tạo nội dung đơn giản.

Khi nào Gutenberg trở thành một phần của WordPress?

Theo kế hoạch, Gutenberg sẽ trở thành một phần chính thức của WordPress core khi bản WordPress 5.0 được phát hành.

Vậy khi nào WordPress 5.0 được phát hành? Chúng ta vẫn chưa biết được thời gian chính xác. Rất có thể là trong năm 2018 này.

Tuy nhiên, bạn có thể cài đặt và sử dụng WordPress Gutenberg thông qua một plugin.

Bạn cần biết rằng:

Gutenberg vẫn ở trong giai đoạn beta nên đừng sử dụng plugin này trên website của mình. Mục địch của plugin Gutenberg để giúp cho nó dễ đàng được đánh giá. Nhờ đó đội phát triển có thể hoàn thiện sản phẩm từ trải nghiệm của người dùng.

Cách Gutenberg làm việc

Về cơ bản, Gutenberg là một trình biên tập làm việc dựa trên khối (block).

Nói cách khác, trước kia bạn sẽ có một khung soạn thảo để nhập vào nội dung và chỉnh sửa giống như Word. Nhưng với Gutenberg bạn sẽ làm việc với các khối riêng lẻ.

Các khối này cho phép bạn tạo ra các thiết kế phức tạp. Điều này bạn không thể làm được với trình biên tập WordPress hiện tại.

Vậy khối là gì?

Khối trong Gutenberg có thể là bất cứ thừ gì. Ví dụ bạn có thể có các khối sau:

Khối văn bản đơn giản.
Khối hình ảnh
Video embed (khối nhúng video)
Button
Widget (bạn có thể sử dụng widget như ở trên sidebar)
Bảng

Các nhà phát triển cũng có thể tạo thêm khối cho bạn sử dụng thông qua plugin.

Mỗi khối trong Gutenberg là một thực thể độc lập bạn có thể tùy chỉnh riêng rẽ.

Ví dụ đây là một bài post gồm 2 khối: text và image. Bạn có thể sắp xếp hai khối bằng click nút mũi tên.

Vậy Gutenberg là một page builder có đúng không?

Nếu bạn đã làm quen với page builder trong WordPress, bạn có thể nhận thấy Gutenberg có vẻ giống như page builder.

Vậy Gutenberg có phải là một kiểu page builder hay không?

Không hoàn toàn. Ít nhất ở thời điểm hiện tại.

Gutenberg cho phép bạn dễ dàng định kiểu nội dung thông thường bài post hay page chuẩn. Nhưng nó không phải là sự thay thế 1:1 cho page builder.

Gutenberg vẫn thiếu 2 thứ cơ bản quan trọng:

Cột
Kéo thả

Tuy nhiên, Gutenberg loại bỏ nhu cầu page builder nếu bạn muốn xây dựng nội dung đơn giản. Nó tạo ra một cách thức thống nhất để tạo layout phức tạp hơn một chút trong WordPress.

Nhưng nếu bạn cần xây dựng page với bố cục phức tạp, như landing page, bạn vẫn cần tới page builder. Gutenberg vẫn cần nhiều thời gian mới có thể thay thế được page builder tốt nhất ngoài kia. Có lẽ nhiệm vụ này xem chừng cũng rất thách thức.

Cách cài đặt và sử dụng Gutenberg

Như mình Gutenberg hiện được phát hành như làm một plugin cho mọi người test thử. Tuy nhiên, nó vẫn đang là phiên bản beta nên bạn chỉ nghịch ngợm thôi. Đừng dùng trên website thật nhé.

Cách cài đặt plugin này giống như cài plugin khác trên WordPress Repository.

Ngay khi sau khi cài đặt, bạn có thể nhìn thấy giao diện Gutenberg bằng việc đi tới Posts -> Add New:

Gutenberg được thiết kế để làm việc với bất cứ theme WordPress. Tuy nhiên ở thời điểm này chọn một theme tương thích với Gutenberg giúp bạn có trải nghiệm tốt nhất.

Thứ nhất, những theme này cung cấp định kiểu có sẵn cho các khối của Gutenberg. Hơn thế theme còn tải style trong editor. Do vậy bạn có nhìn thấy kết quả định dạng khối của mình khi bạn xây dựng nội dung mà không cần click vào Preview. (Kiểu như WYSIWYG)

Bởi vì Gutenberg vẫn chưa phát hành chính thức nên chưa có nhiều theme hỗ trợ nó. Bạn có thể tham khảo theme này từ Tammie Lister.

Xây dựng layout đầu tiên sử dụng Gutenberg editor

Trước khi bắt tay vào việc bổ sung một vài khối, chúng ta cùng xem chi tiết giao diện của Gutenberg:

(A): cho phép bạn bổ sung khối mới
(B): undo/redo
(C): truy cập phần document setting bao gồm category và tag, ảnh đại diện giống như phần sidebar trong WordPress editor hiện tại.
(D): khi bạn chọn một khối, phần này cho phép truy cập setting cho khối đang chọn.
(E): cho phép truy cập preview bài post/page đang soạn thảo.
(F): Ngay khi bạn bổ sung khối, đây là nơi bạn thực sự làm việc với nội dung của post.

Cách làm việc với khối trong Gutenberg

Để bổ sung một khối mới bạn chỉ cần click vào icon có dấu cộng và chọn khối bạn muốn:

Ở trên bạn đã nhìn thấy cách thêm một khối paragraph cơ bản. Nhưng Gutenberg cung cấp cho bạn rất nhiều khối khác nhau được nhóm thành những phần khác nhau:

Phần Recent và Saved duy nhất giúp bạn dễ dàng truy cập những khối bạn hay dùng.

Để truy cập tới tất cả các khối, bạn click vào tab Blocks và Embeds.

Ở tab Blocks bạn sẽ có:

Common Blocks: chứa các khối cơ bản như Image, Paragraph, Heading, Quote...
Formating: cho bạn thêm vào nội dung đã được định dạng sẵn như Pullquote, Table, Classic..
Layout Blocks: bao gồm Text Columns (tác text thành 2 cột), Button, Separator, More..
Widget: cho phép bạn thêm shortcode, bài viết mới nhất (latest posts), category.

Trong tab Embed, bạn có thể nhúng nội dung từ các nguồn bên ngoài, bao gồm: