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

Huong dan su dung WordPress Gutenberg cho nguoi moi - Hướng dẫn sử dụng WordPress Gutenberg cho người mới

Source: 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 hàng sôi nổi nhất trong năm qua?

Đối với tôi và nhiều người đam mê WordPress khác, Gutenberg là câu trả lời.

Thật vậy, Gutenberg đã và sẽ tốn không ít giấy mực của các blogger viết về WordPress.

Ngay cả khi bạn đã biết một chút về Gutenberg và đang đứng về phía bức tường thành, có một sự thật mà tất cả chúng ta phải chấp nhận:

Gutenberg sẽ sớm trở thành một phần của lõi WordPress. Vấn đề duy nhất là thời gian. Nhiều khả năng là trong năm nay.

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

Được trang bị kiến ​​thức này từ sớm, bạn sẽ không ngạc nhiên trước một sự thay đổi mang tính cách mạng trong WordPress.

Gutenberg là gì?

Nói ngắn gọn:

Gutenberg là sự thay thế WordPress TinyMCE Editor (trình chỉnh sửa bạn đang sử dụng trong WordPress hiện tại).

Đây là giao diện của WordPress TinyMCE mà chúng ta đã quen thuộc bây giờ

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

Đây là giao diện của trình chỉnh sửa Gutenberg mới:

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

Vấn đề là:

Gutenberg không phải là một sự thay đổi giao diện đơn giản. Đó là về việc thay đổi cách bạn soạn nội dung trong WordPress. Điều này ảnh hưởng rất nhiều đến 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 (được giải thích thêm bên dưới). Mục tiêu của Gutenberg là cung cấp cho bạn một công cụ mạnh mẽ và linh hoạt để xây dựng toàn bộ trang web bao gồm các trang đích và nội dung quan trọng khác. Ý nghĩa: bạn không chỉ sử dụng Gutenberg để tạo nội dung đơn giản.

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

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

Vậy khi nào thì WordPress 5.0 sẽ được phát hành? Chúng tôi vẫn chưa biết thời gian chính xác. Nhiều khả năng là năm nay 2018.

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 đang trong giai đoạn thử nghiệm nên không sử dụng plugin này trên trang web của bạn. Mục đích của plugin Gutenberg là giúp bạn dễ dàng đánh giá. Nhờ đó, nhóm 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.

Gutenberg hoạt động như thế nào

Về cơ bản, Gutenberg là một trình soạn thảo làm việc dựa trên khối.

Nói cách khác, trước đây, bạn sẽ có một khung soạn thảo để nhập nội dung và soạn thảo 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 với trình chỉnh sửa WordPress hiện tại.

Vậy khối là gì?

Các khối ở 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
  • Nhúng video (khối nhúng video)
  • Cái nút
  • Widget (bạn có thể sử dụng widget như thanh bên trên)
  • Bảng

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

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

Ví dụ, đây là một bài viết có 2 khối: văn bản và hình ảnh. Bạn có thể sắp xếp hai khối bằng cách nhấp vào nút mũi tên.

cách sử dụng wordpress gutenberg 1

Vì vậy, Gutenberg là một trình xây dựng trang phải không?

Nếu bạn đã quen với trình tạo trang trong WordPress, bạn có thể nhận thấy rằng Gutenberg trông giống như một trình tạo trang.

Vậy Gutenberg có phải là một loại trình tạo trang không?

Không hoàn toàn. Ít nhất là trong thời gian này.

Gutenberg cho phép bạn dễ dàng tạo kiểu nội dung của một bài đăng hoặc trang tiêu chuẩn. Nhưng nó không phải là sự thay thế 1: 1 cho trình tạo trang.

Gutenberg vẫn còn thiếu hai điều cơ bản quan trọng:

Tuy nhiên, Gutenberg loại bỏ sự cần thiết của trình tạo trang 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ống nhất để tạo các bố cục phức tạp hơn một chút trong WordPress.

Nhưng nếu bạn cần xây dựng các trang có bố cục phức tạp, như trang đích, bạn vẫn cần một trình tạo trang. Gutenberg vẫn mất nhiều thời gian để thay thế trình tạo trang tốt nhất hiện có. Có lẽ nhiệm vụ này cũng có vẻ rất thách thức.

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

Like me Gutenberg hiện đang được phát hành dưới dạng plugin cho mọi người thử nghiệm. Tuy nhiên, nó vẫn đang trong giai đoạn thử nghiệm nên bạn chỉ đang làm lung tung. Không sử dụng nó trên trang web thực.

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

Sau khi cài đặt, bạn có thể thấy giao diện Gutenberg bằng cách truy cập Bài đăng -> Thêm mới:

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

Gutenberg được thiết kế để hoạt động với bất kỳ chủ đề WordPress nào. Tuy nhiên, tại thời điểm này việc lựa chọn một chủ đề tương thích với Gutenberg sẽ giúp bạn có trải nghiệm tốt nhất.

Đầu tiên, các chủ đề này cung cấp kiểu dáng tích hợp sẵn cho các khối của Gutenberg. Hơn nữa, chủ đề cũng tải kiểu trong trình chỉnh sửa. Vì vậy, bạn có thể xem kết quả định dạng khối của mình khi bạn xây dựng nội dung của mình mà không cần nhấp vào Xem trước. (Như WYSIWYG)

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

Xây dựng bố cục đầu tiên của bạn bằng trình chỉnh sửa Gutenberg

Trước khi bắt đầu thêm một vài khối, hãy xem chi tiết giao diện của Gutenberg:

Gutenberg 4. hướng dẫn sử dụng
  • (A): cho phép bạn thêm các khối mới
  • (B): hoàn tác / làm lại
  • (C): truy cập vào phần cài đặt tài liệu bao gồm danh mục và thẻ, ảnh đại diện giống như thanh bên trong trình soạn thảo WordPress hiện tại.
  • (D): khi bạn chọn một khối, phần này cho phép truy cập vào cài đặt cho khối đang được chọn.
  • (E): cho phép truy cập để xem trước bài đăng / trang đang được chỉnh sửa.
  • (F): Ngay sau khi bạn thêm khối, đây là nơi bạn thực sự làm việc với nội dung của bài đăng.

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

Để thêm một khối mới, chỉ cần nhấp vào biểu tượng 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 đã thấy cách thêm một khối đoạn văn bản 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 các phần khác nhau:

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

Phần Gần đây và Đã lưu độc đáo giúp bạn dễ dàng truy cập các khối mà bạn sử dụng thường xuyên nhất.

Để truy cập tất cả các khối, hãy nhấp vào tab Khối và Nhúng.

Trong tab Khối bạn sẽ có:

  • khối ommon: chứa các khối cơ bản như Image, Paragraph, Heading, Quote …
  • Định dạng: cho phép bạn thêm nội dung được định dạng trước như Pullquote, Table, Classic ..
  • Khối bố cục: bao gồm các Cột Văn bản (tạo văn bản thành 2 cột), Nút, Dấu phân cách, Thêm ..
  • Vật dụng: cho phép bạn thêm shortcode, bài viết mới nhất (mới nhất), danh mục.

Trong tab Nhúng, 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 bố cục cơ bản với Gutenberg

Ở đây chúng tôi cố gắng xây dựng một bố cục cơ bản bao gồm:

  • Văn bản cơ bản
  • Hình ảnh
  • Kéo báo giá
  • Nhúng video từ Youtube

Theo mặc định, khối văn bản đã được thêm vào. Hãy xem làm thế nào để thêm các khối khác ngoài văn bản.

Thêm khối không phải là văn bản

Bây giờ hãy nhấp vào nút dấu cộng và thêm khối Hình ảnh:

cách sử dụng wordpress gutenberg 3

Bây giờ bạn chỉ cần tải lên hình ảnh từ thiết bị của mình hoặc chèn hình ảnh hiện có từ Thư viện phương tiện:

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

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

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

Bây giờ bạn sẽ chèn khối Pull Quote như hình dưới đây:

1638431161 231 Huong dan su dung WordPress Gutenberg cho nguoi moi - Hướng dẫn sử dụng WordPress Gutenberg cho người mới

Nhập nội dung cho Trích dẫn kéo:

cách sử dụng wordpress gutenberg 5

Nhấp vào tab Nhúng để chèn video Youtube:

cách sử dụng wordpress gutenberg 6

Cuối cùng là xuất bản bài báo:

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

Phần kết

Gutenberg hiện tại vẫn đang bị ném đá không thương tiếc, nhưng nó vẫn sắp ra 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 những điều cơ bản khi làm việc với Gutenberg.

Với hướng dẫn sử dụng Gutenberg cơ bản này, bạn sẽ không còn bối rối với một trình soạn thảo hoàn toàn mới trong WordPress.

Nguồn: CodeInWP

Via: sieucoder.com



from sieucoder.com https://ift.tt/3ru2o6s
via Sieucoder.com

Nhận xét