HomeHướng dẫn WordPress

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

Like Tweet Pin it Share Share Email

kiếm tiền thụ động với civi

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

hướng dẫn sử dụng Gutenberg 1

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

hướng dẫn sử dụng Gutenberg 2

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. ​

hướng dẫn sử dụng wordpress gutenberg 1

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: ​

hướng dẫn sử dụng Gutenberg 3

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: 

hướng dẫn sử dụng Gutenberg 4
  • (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: 

hướng dẫn sử dụng wordpress gutenberg 2

Ở 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: 

hướng dẫn sử dụng Gutenberg 5

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: 

  • Youtube
  • Facebook
  • Twitter
  • Instagram​

Xây dựng layout cơ bản với Gutenberg

Ở đây chúng ta thử xây dựng một layout cơ bản bao gồm:

  • Text cơ bản
  • Hình ảnh
  • Pull quote
  • Nhúng video từ Youtube​

Mặc định khối text đã được bổ sung. Chúng ta xem cách bổ sung khối không phải là text. 

Thêm block không phải là text

Bây giờ bạn click vào nút dấu cộng và thêm khối Image:

hướng dẫn sử dụng wordpress gutenberg 3

Bây giờ bạn chỉ cần upload ảnh từ máy hoặc chèn một ảnh có sẵn từ Media Library: 

hướng dẫn sử dụng Gutenberg 6

Khối ảnh sẽ hiển thị như bên dưới: 

hướng dẫn sử dụng Gutenberg 7

Bây giờ bạn sẽ chèn tiếp khối Pull Quote như dưới: 

​Nhập vào nội dung cho Pull Quote: 

hướng dẫn sử dụng wordpress gutenberg 5

Click vào tab Embeds để chèn Youtube video: 

hướng dẫn sử dụng wordpress gutenberg 6

Cuối cùng xuất bản bài viết: 

hướng dẫn sử dụng Gutenberg 8

Lời kết

​Hiện tại Gutenberg vẫn đang bị ném đá không thương tiếc, nhưng nó vẫn sớm có mặt trong WordPress 5.0

Trong bài viết này, bạn đã biết sơ qua về Gutenberg. Bạn đã biết cách thức làm việc cơ bản với Gutenberg.

Với hướng dẫn sử dụng Gutenberg cơ bản này chắc chắn bạn không còn bỡ ngỡ với một trình biên tập mới tinh trong WordPress. ​

Nguồn: CodeInWP

Hướng dẫn sử dụng WordPress Gutenberg cho người mới
5 (100%) 1 vote

3
Để lại bình luận

2 Comment threads
1 Thread replies
1 Followers
 
Most reacted comment
Hottest comment thread
3 Comment authors
Recent comment authors
mới nhất cũ nhất
Guest

Nhìn tổng quan chưa được mê cho lắm, nhưng hi vọng 1 ngày nào đó thay đổi ae sẽ thay đổi cách nhìn và lựa chọn Gutenberg thay cho TinyMCE 😀

Guest
Tân

Riêng mình thấy Gutenberg chỉ nên là một tùy chọn trình biên tập sẽ tốt hơn, vẫn để TinyMCE làm trình biên tập mặc định. Hiện mình vẫn có dùng plugin Element để tạo các page riêng, mình thấy khá giống Gutenberg như chủ thớt đã đề cập, đánh giá theo ý kiến của mình thì Element vẫn tốt hơn Gutenberg. Vì vậy trình biên tập Gutenberg còn một chặng đường rất dài để mà được sự đánh giá cao từ phần đông Blogger dùng WordPress.

Scroll Up
Share This