Tin tức và phân tích của tất cả các thiết bị di động

Hướng dẫn của tôi về trình soạn thảo trực quan WordPress Gutenberg [WITH PICTURES]

Vậy bạn đã nghe nói về Gutenberg, trình soạn thảo trực quan WordPress mới cho trình soạn thảo HTML thông thường chưa?

Nếu không, bạn sẽ sớm có nó vì khi phiên bản được phát hành 5.0 WordPress, Gutenberg sẽ thay thế trình chỉnh sửa hiện tại.

Gutenberg không chỉ là một bản cập nhật thiết kế thẩm mỹ.

Trọng tâm hiện tại có thể là tạo nội dung, nhưng mục tiêu cuối cùng là để Gutenberg cung cấp tùy chỉnh trang web đầy đủ và cạnh tranh với các nhà xây dựng trang tuyệt vời.

Cuối cùng, bạn sẽ có thể xây dựng toàn bộ trang web của mình bằng Gutenberg.

Hướng dẫn Gutenberg của bạn

Gutenberg có tốt với bạn không?

Đây là những khoảng thời gian thực sự thú vị để trở thành một blogger WordPress.

Bài viết này sẽ cung cấp cho bạn một hướng dẫn Gutenberg rất đơn giản sẽ cung cấp cho bạn một số điều cơ bản để giúp bạn bắt đầu và cho bạn thấy những gì tốt và xấu hiện tại với trình soạn thảo mới.

Nếu bạn không thể đợi Gutenberg chặn ổ đĩa thử, bạn có thể tải xuống ngay bây giờ.

Cách tải xuống Gutenberg

Chuyển đến bảng điều khiển của bạn trong WordPress và sau đó đi đến

  1. Bổ sung
  2. Chọn "Thêm mới"
  3. Tìm kiếm Gutenberg Visual Editor
  4. Chọn "Tải xuống" và sau đó kích hoạt plugin.

Bây giờ bạn có Gutenberg

Vì vậy, hãy tập hợp một bài viết từ Hướng dẫn Gutenberg và cho bạn thấy những gì bạn có thể và không thể làm với Gutenberg và hy vọng tiết lộ một số mẹo và thủ thuật trên đường đi

Hướng dẫn bắt đầu Gutenberg của bạn – Giới thiệu khối

Gutenberg có một cảm giác rất xây dựng trang khi bạn lần đầu tiên bước vào sáng tạo nội dung.

Mỗi mục bạn thêm vào một trang hoặc bài đăng hiện được gọi là "Chặn"

Các khối Gutenberg cho phép bạn tạo các bố cục phức tạp hơn mức cho phép trong môi trường trình chỉnh sửa WordPress ngày nay

Bạn có thể có các khối để:

  • Văn bản
  • Hình ảnh
  • Video
  • Các widget (có, bạn có thể thêm cùng một tiện ích thanh bên trên các trang và bài đăng)
  • Bàn
  • V.v.

Đây là những gì bạn thấy khi bạn bắt đầu một bài viết hoặc trang mới.

Trình soạn thảo trực quan / HTML mà tất cả chúng ta đều quen thuộc giờ đây đã ưu ái cho giao diện rất tối giản.

Hướng dẫn bắt đầu đơn giản Gutenberg của tôi: cách bắt đầu

Vì vậy, hãy bắt đầu với hướng dẫn Gutenberg đơn giản của tôi

Tôi đã tạo hướng dẫn đầy đủ này mà bạn đang đọc bằng Gutenberg và như đã đề cập ở trên, đây là lần đầu tiên tôi sử dụng môi trường chỉnh sửa mới.

Sau đó, ngay lập tức bạn sẽ khám phá với tôi những gì tôi thích về các khối Gutenberg và những gì tôi ghét. Tôi cũng sẽ chuyển qua bất kỳ mẹo và thủ thuật nào bạn khám phá trên đường đi, vì vậy hãy chắc chắn làm theo.

Và tôi cũng sẽ cập nhật bài đăng này, vì vậy hãy chắc chắn đánh dấu hoặc liên kết với chúng tôi để bạn có thể dễ dàng tìm đường trở lại.

Hãy bắt đầu

Vì vậy, khi bạn được trình bày với màn hình tiêu đề ở trên, vui lòng thêm tiêu đề của bạn cho bài viết của bạn,

Tôi sẽ sử dụng tiêu đề tạm thời của "Hướng dẫn bắt đầu Gutenberg"

Sau đó thêm phần giới thiệu ban đầu của bạn vào bài viết của bạn trong một khối văn bản như trong ảnh chụp màn hình bên dưới.

Hướng dẫn bắt đầu đơn giản Gutenberg của tôi - Khối

Thêm hình ảnh vào Gutenberg

Sau khi viết phần giới thiệu, tôi muốn thêm một hình ảnh cho một hình ảnh, trong trường hợp này, ảnh chụp màn hình bạn nhìn thấy ở trên.

Có ba phương pháp để thêm một hình ảnh.

  1. Bạn có thể thêm hình ảnh của mình thông qua thanh công cụ được truy cập bằng cách nhấp vào nút dấu cộng + rồi chọn khối hình ảnh.
  2. Bạn cũng có thể thêm hình ảnh bằng nút tắt nằm bên dưới hộp văn bản của bạn.
  3. Và tất nhiên bạn có thể thêm mã nguồn. Bằng cách thay đổi trình chỉnh sửa khối thành mã.

Hướng dẫn bắt đầu đơn giản Gutenberg của tôi - Hình ảnh

Sau khi thêm hình ảnh của bạn, bạn có thể nhấp vào nó để hiển thị các tùy chọn căn chỉnh.

Bạn có thể căn trái, di chuyển hình ảnh đến trung tâm hoặc bên phải.

Ngoài ra còn có tùy chọn chỉnh sửa hình ảnh của bạn thông qua thư viện phương tiện và đây là lúc các vấn đề với Gutenberg bắt đầu.

Theo hiểu biết của tôi, khi bạn chỉnh sửa một hình ảnh thông qua thư viện phương tiện, bạn đang chỉnh sửa hình ảnh như nó xuất hiện trên trang đính kèm hoặc nói cách khác, nơi hình ảnh được lưu trữ. (Sửa tôi nếu tôi sai về điều này)

Trang đính kèm là một trang nội dung rất mỏng, về cơ bản nó chỉ là hình ảnh và không có gì khác, và vì lý do SEO, các trang đính kèm rất tệ cho SEO khi Google thông báo chúng.

SEO Yoast gần đây có vấn đề với file đính kèm Điều đó hóa ra là một vấn đề SEO lớn đối với một số người dùng.

Trong khi làm việc trong quá trình tạo một bài viết với Gutenberg, tôi vẫn không thể tìm cách thêm thuộc tính văn bản thay thế hoặc tiêu đề hình ảnh ngoài việc quay lại mã nguồn để thêm HTML cần thiết hoặc quay lại trình chỉnh sửa cổ điển.

Bạn bè của chúng tôi tại WPBeginner giải thích sự khác biệt giữa Image Alt Text và Image Title với một bài viết xuất sắc có tiêu đề:

Thêm mô tả và thẻ alt là một tính năng chỉnh sửa hình ảnh có sẵn khi nhấp vào nút trong trình chỉnh sửa hình ảnh gốc.

Đây không phải là tin tốt cho tối ưu hóa hình ảnh SEO.

Hiện tại cũng không có cách nào dễ dàng để bạn có thể tìm thấy để đính kèm một liên kết đến một hình ảnh, làm cho nó có thể nhấp được.

Ví dụ: nếu bạn muốn thêm một biểu ngữ, bạn sẽ cần thêm biểu ngữ dưới dạng một khối hình ảnh như được hiển thị ở trên, sau đó quay lại mã nguồn và thêm URL dưới dạng mã HTML.

Thêm dấu ngoặc kép và liên kết

Như bạn có thể thấy ở trên, tôi đã liên kết với một tài nguyên (WPBeginner) trong một trích dẫn khối.

Khối trích dẫn là tuyệt vời để phá vỡ các khối văn bản lớn làm cho một bài viết dễ đọc hơn.

Họ cung cấp một yếu tố hình ảnh tuyệt vời cho các bài viết.

Đây là cách tôi đã làm nó:

  1. Nhấp vào nút + để mở khu vực khối.
  2. Chọn một khối trích dẫn
  3. Thêm văn bản trích dẫn của bạn
  4. Thêm một liên kết nếu cần thiết

Thêm trích dẫn đơn giản của tôi Hướng dẫn bắt đầu Gutenberg

Bạn sẽ nhận thấy nếu bạn là người quan sát rằng ví dụ hình ảnh chụp màn hình blockquote ở trên khác với blockquote thực tế được hiển thị trong bài đăng này.

Trích dẫn cuối cùng có một văn bản neo có tiêu đề h3 được đính kèm vì lý do SEO.

Để thêm thẻ h3, bạn cần quay lại mã nguồn thô và áp dụng thẻ h3 cho văn bản neo của trích dẫn khối.

Như bạn có thể thấy trong ảnh chụp màn hình ở trên, có một nút nhãn phím tắt H (tiêu đề), nhưng nhấp vào đây sẽ mở một khối mới để áp dụng tiêu đề.

Hiện tại bạn không thể áp dụng một tiêu đề trong một khối ngân sách.

Nếu bạn tạo blog văn bản, bạn cũng không thể thêm tiêu đề vào giữa khối văn bản, bạn cần tạo một khối văn bản mới để bạn có thể thêm tiêu đề vào đầu khối mới và sau đó tiếp tục viết bài viết của mình.

Tất cả các liên kết bạn thêm theo mặc định là các liên kết kéo dài và hiện tại không có cách nào để ngăn chặn chúng tiếp tục mà không thêm thuộc tính không theo dõi dưới dạng mã.

Bạn được cung cấp tùy chọn để mở một liên kết trong một cửa sổ mới bằng cách thêm một liên kết.

Thêm các khối nội dung được nhúng vào Gutenberg

Để thêm nội dung được nhúng vào bài đăng, nhấp vào khu vực khối và cuộn xuống Nhúng. Sau đó, bạn sẽ thấy màn hình khối bên dưới

Hướng dẫn bắt đầu đơn giản Gutenberg của tôi - Tùy chọn chèn

Nhấp vào loại inlay bạn muốn sử dụng. Một hộp liên kết được cung cấp để thêm mã của bạn.

Tôi đã chọn tùy chọn YouTubeVì đó chủ yếu là những gì bạn sẽ sử dụng khi tạo nội dung chỉ để cho bạn thấy quá trình thêm video.

Thêm video Youtube Hướng dẫn bắt đầu đơn giản của tôi vào Gutenberg

Chỉ cần thêm URL vào video của bạn YouTube và bạn sẽ có chức năng video trong bài viết của bạn.

Vậy chúng ta nghĩ gì về WordPress Gutenberg?

Gutenberg sẽ khiến một số blogger sợ hãi trước ánh sáng ban ngày. Nhưng tôi càng sử dụng sistema của khối, tôi càng thích nó.

Gần đây tôi đã sử dụng trang web quản lý nội dung Wakelet để tạo các bài viết blog rất đơn giản để sao lưu trang Infobunny của tôi và điều bạn nhận thấy khi bạn sử dụng Wakelet là bạn có thể tạo blog theo cách rất giống với trang bạn tạo với các khối Gutenberg .

Với Wakelet Bạn có thể thêm văn bản, video, liên kết thẩm quyền để xếp hạng nội dung, hình ảnh và thậm chí các tệp PDF của bạn.

Chỉ cần thêm mọi thứ dưới dạng bài đăng riêng lẻ vào Wakelet và sau đó sắp xếp lại nếu cần để tạo bài viết hoàn chỉnh của bạn và về cơ bản đây là cách Guttenberg Lock hoạt động.

Đây là một ví dụ từ một trong những blog Wakelet của tôi: Những người theo dõi mạng xã hội quan trọng như thế nào?

Nếu bạn quen sử dụng người xây dựng trang Khi tạo bài viết và trang, bạn sẽ không gặp khó khăn khi sử dụng Gutenberg.

Gutenberg không thực sự trở thành một người xây dựng trang, vì nó không thể kéo và thả các khối cùng với các tính năng còn thiếu khác mà các nhà xây dựng trang chuyên nghiệp cung cấp.

Hướng dẫn của Gutenberg - Trình chỉnh sửa hình ảnh mới của Solitaireess (VỚI HÌNH ẢNH)

Thành thật mà nói, tôi thích trình soạn thảo HTML kiểu cũ, nhưng đó là vì tôi đã quen với nó.

Hy vọng, chúng tôi sẽ được cung cấp tùy chọn nhấp giữa Gutenberg và trình soạn thảo HTML hiện tại WYSIWYG và việc có thể truy cập cả hai hệ thống sẽ mang lại cho các quản trị viên web tốt nhất của cả hai thế giới.

Bằng cách đọc về Gutenberg, tôi hiểu rằng trình soạn thảo thông thường sẽ có sẵn dưới dạng tiện ích bổ sung.

Hướng dẫn Gutenberg này được tạo ra để cho tôi ý tưởng về cách Gutenberg hoạt động.

Tôi muốn sẵn sàng cho sự ra mắt không thể tránh khỏi của cái mới sistema khối khi WordPress hạ cánh 5.0.

Và đây là cách bạn học một cái mới sistema chỉ bằng cách nhảy đầu tiên.

Gutenberg được thiết kế để làm cho việc tạo nội dung dễ dàng.

Và tôi chắc chắn rằng nó sẽ dành cho những người tạo nội dung đơn giản. Nhưng đối với những người muốn làm nhiều hơn một chút, sẽ có một đường cong học tập lớn hơn và chắc chắn sẽ có một số cách giải quyết cho những người yêu thích SEO của họ.

Tối ưu hóa hình ảnh SEO hiện đang là một vấn đề.

Hy vọng khi Gutenberg đưa ra quy trình tối ưu hóa hình ảnh, nó sẽ dễ dàng hơn nhiều.

Và nếu nhóm phát triển Gutenberg không cung cấp giải pháp tốt hơn, thì tôi chắc chắn sẽ không có nhà phát triển bên thứ ba nào sẵn sàng cung cấp một số giải pháp tiện ích khối thực sự thú vị.

Một câu hỏi lớn tôi có là "Các trang và bài đăng của Gutenberg có tương thích với AMP – Trang di động được tăng tốc?

Hoặc chức năng phức tạp hơn sẽ được thêm vào có lợi cho tốc độ.

Đó là tất cả cho bây giờ.

Tôi hy vọng bạn thấy hướng dẫn Gutenberg đơn giản của tôi hữu ích và chọn một số mẹo trên đường đi.

Bạn đã sẵn sàng cho Gutengerg?

Bạn có bất cứ lời khuyên Gutenberg nào bạn muốn thêm vào bài đăng này hoặc đưa ra bất kỳ giải pháp nào cho các vấn đề được mô tả không?

Hãy cho tôi biết trong phần bình luận dưới đây.

Hãy chắc chắn đăng ký nhận xét để bạn sẽ được thông báo khi bạn trả lời

Trân trọng

BÀI VIẾT LIÊN QUAN

Mục lục