Tôi nghĩ bạn sẽ đồng ý khi bạn nói: Toàn bộ hoạt động kinh doanh của Gutenberg này rất khó hiểu.
Trước hết, có khó sử dụng trình chỉnh sửa khối mới hay không? Ý tôi là, bạn không biết tất cả các công cụ yêu thích của bạn đã đi đâu. Bây giờ, có lẽ bạn mất nhiều thời gian hơn để tạo một bài viết, phải không?
Có thể thêm một liên kết (liên kết hoặc cách khác) đã ném cho anh ta một đường cong lớn và anh ta đã thất vọng. Có lẽ bạn đã gặp khó khăn khi thêm một hình ảnh bên cạnh văn bản của bạn.
Có thể bạn đã thử thêm nhiều cột và mọi thứ không hoạt động như mong đợi. Nếu đó không phải là trường hợp, bạn có thể không dễ dàng thêm các tệp PDF của mình hoặc xem thông báo "Cập nhật thất bại" đáng sợ.
Chà, đừng lo lắng nữa; Nó đã ở vị trí chính xác của nó cách đây không lâu, nhưng bây giờ tôi thấy Gutenberg rất thú vị khi sử dụng. Có một đường cong học tập, vâng, nhưng vào cuối bài hôm nay, bạn sẽ nghĩ về Gutenberg khác.
Biên tập viên Gutenberg là gì?
Bạn đang xem Gutenberg, trình chỉnh sửa khối mặc định của WordPress.
Nếu bạn đang sử dụng WordPress 5.0 và ở trên, bạn phải bắt gặp trình soạn thảo WordPress mới tuyệt vời được gọi là Gutenberg.
Và giống như nhiều người dùng khác, bạn muốn sử dụng trình soạn thảo mang tính cách mạng, nhưng bạn nghi ngờ nếu Gutenberg phức tạp.
Hoặc có thể khi bạn gặp Gutenberg, một số thứ không hoạt động. Rốt cuộc, các nhà phát triển đã thực hiện và tiếp tục làm cho các chủ đề và plugin tương thích với trình chỉnh sửa khối.
Vì vậy, bạn đã nhanh chóng quay trở lại Trình chỉnh sửa cổ điển, nhân tiện, điều đó tốt với chúng tôi. Chỉ cần lưu ý rằng WordPress sẽ không hỗ trợ Trình chỉnh sửa cổ điển sau năm 2022. Ngoài ra, bạn đang bỏ lỡ tất cả các đặc quyền bổ sung mà Gutenberg cung cấp.
Về chức năng, Classic Editor và Gutenberg cũng làm như vậy; Bạn biết đấy, cả hai công cụ đều giúp bạn tạo nội dung mà không cần mã hóa.
Tuy nhiên, chúng tôi đã quá quen với trình soạn thảo WYSIWYG cũ đến nỗi chúng tôi thấy hơi lạ khi thích nghi với giao diện người dùng mới của Gutenberg, nếu không hoàn toàn khó hiểu. Ít nhất đó là những gì tôi nghĩ.
Nhưng chính xác thì Gutenberg là gì?
Gutenberg là trình soạn thảo mặc định mới của WordPress. Nó khác với trình soạn thảo hình ảnh / văn bản truyền thống; Gutenberg sử dụng các khối nội dung giống như nhiều người xây dựng trang hiện nay.
Nó được phân phối với nhiều tính năng trực quan hơn so với Trình chỉnh sửa cổ điển, có nghĩa là bạn có thể tạo nội dung đa phương tiện khi đang di chuyển. Giờ đây, bạn có thể nhanh chóng tạo bố cục đặc biệt nếu bạn đang làm việc với các bài đăng hoặc trang WordPress.
Và với một vài plugin, Gutenberg có thể cạnh tranh thuận lợi với các nhà xây dựng trang WordPress đã thành lập như Brizy, Elementor và Divi.
Nhược điểm duy nhất là người xây dựng trang thường cung cấp nhiều tính năng hơn vì họ chủ yếu là người xây dựng trang! Đồng thời, Gutenberg vẫn còn khá trẻ, và anh chỉ có thể hy vọng rằng trình chỉnh sửa khối sẽ phát triển nhờ những bước nhảy vọt.
Trong bài viết hôm nay, chúng ta sẽ vui vẻ tạo một bài đăng WordPress với trình soạn thảo Gutenberg. Mục tiêu của tôi là bao gồm mọi chi tiết và tính năng nhỏ để bạn có thể sử dụng Gutenberg để tạo nội dung như ưu.
Bạn đã sẵn sàng chưa? Nếu vậy, hãy tạo bài đăng WordPress đó.
Cách tạo một bài đăng WordPress với Gutenberg
Nếu bạn điều hành một trang web WordPress, bạn có thể tạo nhiều bài đăng hơn các trang. Trong phần tiếp theo, chúng tôi đã tạo một bài đăng WordPress trên Gutenberg từ đầu. Tôi hy vọng bạn có nhiều niềm vui như tôi đã làm khi tôi thử Gutenberg.
Hãy để nó ra khỏi đường, điều hướng đến Ấn phẩm> Thêm mới như chúng tôi nhấn mạnh trong ảnh chụp màn hình dưới đây.
Làm như vậy sẽ đưa bạn trực tiếp đến trình soạn thảo Gutenberg được hiển thị bên dưới.
Khá gọn gàng hả? Bây giờ, hãy xắn tay áo lên và bắt đầu làm việc.
Thêm tiêu đề
Bạn không thể viết một bài mà không có tiêu đề vững chắc. Điều tốt là Gutenberg làm cho nó dễ dàng để thêm một tiêu đề.
Khối đầu tiên bạn nhìn thấy là Tiêu đề ở đầu tài liệu như chi tiết trong hình trên. Để tạo tiêu đề cho bài viết của bạn, hãy nhập vào bên trong khối. Đơn giản như A, B, C.
Cần chỉnh sửa permalink? Bạn có thể dễ dàng làm điều đó trong Tiêu đề khóa bằng cách nhấp vào Chỉnh sửa nút như hình dưới đây.
Sau khi thêm tiêu đề của bạn, nhấn ĐI VÀO chìa khóa để bắt đầu một dòng mới. Ồ vâng, Gutenberg giữ lại điều hướng gốc mà bạn yêu thích trong trình chỉnh sửa WordPress cổ điển.
Thêm một đoạn mới
Lượt ĐI VÀO chìa khóa tạo ra một cái mới Đoạn văn khối, như hình trên. Trước khi viết bất kỳ văn bản nào, khối trình bày cho bạn một vài tùy chọn. Xem hình ảnh được đánh số dưới đây để biết thêm chi tiết.
Ghi chú Bạn có thể:
- Chuyển đổi khối đoạn mới sang bất kỳ khối nào khác, ví dụ: hình ảnh, tiêu đề, bìa, thư viện, WooC Commerce, biểu mẫu, v.v.
- Sử dụng phím tắt để thay đổi khối đoạn văn thành khối hình ảnh
- Thay đổi khối đoạn văn thành một khối tiêu đề, tức là H2, H3 và H4
- Chuyển đổi khối đoạn văn thành một khối hình ảnh bìa
Đối với mục đích minh họa, tôi sẽ dành đoạn đầu tiên để giới thiệu sau. Khi bạn thêm văn bản, một thanh công cụ định dạng sẽ xuất hiện như hình bên dưới.
Nhờ thanh công cụ định dạng, bạn có thể:
- Chuyển đoạn văn thành câu thơ, trích dẫn, tiêu đề, danh sách, mã và văn bản được định dạng trước
- Kiểu chữ in đậm, Chữ nghiêng, gạch ngang và gạch chân nội dung
- Căn chỉnh văn bản trái, phải, giữa và biện minh
- Thêm một liên kết cũng có thể được mở trong một tab mới
- Chèn một hình ảnh trực tuyến (vâng, nó tồn tại!)
- Ẩn cài đặt khối
- Nhân đôi khối
- Chèn một khối trước hoặc sau khối hiện tại (trong trường hợp của chúng tôi, đó là đoạn đầu tiên, vì vậy chúng tôi không thêm bất cứ điều gì trước, chỉ sau). Nếu bạn muốn, bạn có thể thêm một khối ảnh bìa trước đoạn đầu tiên vì điều đó nghe có vẻ tốt
- Chỉnh sửa khối dưới dạng HTML
- Thêm khối hiện tại vào các khối có thể sử dụng lại để bạn có thể sử dụng nó trong các bài viết khác
- Xóa toàn bộ khối
Bạn có thể tùy chỉnh thêm khối đoạn văn với các tùy chọn có sẵn trong Để ngăn chặn tab được tìm thấy trong menu sidebar như dưới đây.
Một số lưu ý về hình ảnh trên:
- Chọn Để ngăn chặn tab ở đây để xem tất cả các tùy chọn và cài đặt khóa
- Chọn cỡ chữ và kích hoạt Drop Cap tại đây
- Thêm màu nền cho đoạn văn của bạn. Tôi đặt nó thành màu xanh cho mục đích minh họa. Bạn cũng có thể tùy chỉnh màu sắc của văn bản. Trong cả hai trường hợp, bạn có thể thêm màu tùy chỉnh không giới hạn
- Bạn có thể thêm một lớp CSS tùy chỉnh tại đây, điều đó có nghĩa là bạn có thể thêm các kiểu CSS bổ sung vào khối của mình
- Nền màu xanh và Drop Cap đã được áp dụng trong trình chỉnh sửa Gutenberg
Tab tài liệu trong thanh bên
Có một tab khác trong menu sidebar; anh ấy Tài liệu tab như hình dưới đây.
Ở đây, các ghi chú cho hình ảnh trên:
- Nhấn vào đây để chuyển sang Tài liệu lưỡi
- Tại đây bạn có thể lên lịch đăng bài, đặt mức độ hiển thị cho Riêng tư hoặc Công cộng, thiết lập một ấn phẩm trong Đang chờ xem xét trạng thái, chọn định dạng bài và tạo một bài cố định
- Phần này cho phép bạn chỉnh sửa liên kết vĩnh viễn của bạn
- Bạn có thể chọn hoặc tạo danh mục mới tại đây
- Thêm thẻ vào bài viết của bạn
- Đặt hình ảnh nổi bật
- Tạo một trích xuất thủ công
- Cho phép bình luận, pingback và trackbacks
Như bạn có thể thấy, bạn có rất nhiều tùy chọn để thiết kế một khối đoạn văn (và toàn bộ bài viết) theo cách bạn muốn. Nhân tiện, các khối khác nhau đi kèm với các cài đặt khác nhau mà chúng ta sẽ tìm hiểu trong một phút.
Sau đoạn đầu tiên, nhấn ĐI VÀO phím một lần nữa để tạo một dòng mới (hoặc khối đoạn văn). Bây giờ, hãy thêm một hình ảnh bên dưới đoạn đầu tiên.
Thêm hình ảnh trong Gutenberg
Họ nói rằng một hình ảnh nói hơn một ngàn từ, và một bài đăng blog không có hình ảnh là tốt, buồn tẻ. Để thêm một hình ảnh vào bài đăng WordPress của bạn bằng Gutenberg, bạn có một vài tùy chọn.
Khi bạn nhấn ĐI VÀO một vài phút trước, kích hoạt một khối đoạn mới. Vì Gutenberg là trực quan, bạn có thể thêm hình ảnh bằng cách nhấp vào biểu tượng dấu cộng (+), hình ảnh hoặc bìa khi chúng tôi tô sáng trong hình ảnh bên dưới.
Một vài lưu ý:
- Bạn có thể thêm một hình ảnh thông qua các biểu tượng dấu cộng (+)
- Tại đây, bạn có thể dễ dàng thêm một hình ảnh
- Tùy chọn này cho phép bạn thêm một che hình ảnh (chúng thường lớn hơn các ảnh khác. Ngoài ra, bạn có thể thêm văn bản trên ảnh bìa)
Đi trước và nhấp vào bất kỳ biểu tượng dấu cộng (+) nào. Sau đó bấm vào Hình ảnh tab, như hiển thị bên dưới.
Nhấp vào Hình ảnh tab tải Hình ảnh khối hiển thị trong ảnh chụp màn hình dưới đây.
các Hình ảnh Khối cho phép bạn tải lên một hình ảnh hoặc thêm một hình ảnh từ một URL hoặc thư viện phương tiện. Trong quá trình này, bạn có thể thêm văn bản thay thế (quan trọng đối với SEO), chú thích và mô tả thông qua cài đặt màn hình phương tiện hoặc Để ngăn chặn thanh bên như thể hiện trong các hình ảnh sau đây.
Các cài đặt phương tiện thông thường …
…và Hình ảnh Khóa cài đặt.
Hôm nay bạn có học được gì không? Tôi cũng mong là như vậy. Đi thôi
Sau khi thêm hình ảnh của mình, Gutenberg thêm một khối đoạn mới ngay bên dưới nó. Bạn có thể thêm bất cứ điều gì bạn muốn, nhưng với mục đích minh họa, tôi đã thêm một văn bản và sau đó là một nút bên dưới.
Làm thế nào để thêm các tập tin tải về, p. PDF, hình ảnh, video, vv
Gutenberg giúp dễ dàng thêm các tệp có thể tải xuống vào bài đăng hoặc trang WordPress của bạn.
Trong một cái mới Đoạn văn chặn, nhấp vào biểu tượng dấu cộng (+), điều hướng đến Khối chung và đánh Lưu trữ tab như chúng tôi nhấn mạnh dưới đây.
Làm như vậy sẽ bắt đầu khối sau:
Từ Lưu trữ chặn, bạn có thể tải lên một tệp mới hoặc thêm một tệp từ thư viện phương tiện của bạn. Sau khi thêm tập tin của mình, Gutenberg thêm dễ thương Tải xuống nút tự động như nhìn thấy trong hình dưới đây.
Bạn có thể chơi với các tùy chọn. Ví dụ: bạn có thể chỉnh sửa / xóa "Danh sách kiểm tra PDF miễn phí của Gutenberg"Tiêu đề cũng như Tải xuống nút. Bạn có thể thêm một lớp CSS vào khối và định kiểu nó theo ý muốn.
Thêm một trích dẫn trên Gutenberg
Tiếp theo, hãy thêm một trích dẫn vì chúng dễ thương, lôi cuốn và chúng giúp bạn lấy điểm về nhà. Trên một dòng mới, nhấp vào dấu cộng (+), điều hướng đến Khối chung và đánh Trích dẫn tab như hình dưới đây.
Làm như vậy thêm Trích dẫn chặn bài viết của bạn khi chúng tôi nhấn mạnh trong ảnh chụp màn hình bên dưới.
Lưu ý cài đặt khối trích dẫn trong thanh bên phải ở trên?
Để thêm ngân sách của bạn, hãy viết bên trong khối. Đây là kết quả của tôi.
Trông thật tuyệt vời đúng không?
Thêm các phương tiện truyền thông vào Gutenberg
Gutenberg đi kèm với các khối khác nhau để chèn video và phương tiện khác từ hơn 30 trang web như YouTube, Vimeo, Facebook, SoundCloud, WordPress, Sl slideshoware, v.v.
Để chèn nội dung, nhấp vào biểu tượng dấu cộng (+), đi đến Nhúng, và chọn trang web. Ví dụ, tôi muốn YouTube, như được hiển thị trong phần sau.
Sau đó sao chép và dán URL của video từ YouTube và bấm vào Nhúng nút như trong hình dưới đây.
Ngay khi tôi đến Nhúng nút, Gutenberg tự động chuyển đổi liên kết thành video như được tô sáng bên dưới.
Điều hướng trơn tru đến cuối cùng. Bây giờ, hãy thêm một nút riêng hoàn hảo để tạo lời kêu gọi hành động (CTA).
Cách thêm nút trong Gutenberg
Bạn sẽ không gặp khó khăn khi thêm các khối tại thời điểm này. Chỉ cần nhấp vào dấu cộng (+) và chọn khối của bạn. Nó không thể dễ dàng hơn thế.
Vậy làm thế nào để chúng ta thêm một nút?
Trong một dòng mới (hoặc khối), nhấp vào biểu tượng dấu cộng (+), điều hướng đến Yếu tố thiết kế và bấm vào Nút tab như hình dưới đây.
Làm như vậy dẫn bạn đến Nút khối như chi tiết dưới đây.
Như bạn có thể thấy trong hình trên, bạn có thể chỉnh sửa văn bản nút và thêm một liên kết. Ngoài ra, bạn có thể tùy chỉnh nút thông qua menu thanh bên bên phải màn hình.
Sau một vài lần nhấp, đây là những gì tôi nhận được.
BTW, nếu bạn sử dụng kết hợp màu khó đọc trên các nút của mình, Gutenberg sẽ thông báo cho bạn ngay lập tức. Làm thế nào tốt đẹp?
Cách thêm cột trong Gutenberg
Với một nút đẹp, hãy thêm một số cột. Tôi sẽ thêm hai cột, vì vậy hãy cẩn thận.
Đây là những gì bạn nên làm. Nhấp vào biểu tượng dấu cộng (+), điều hướng đến Yếu tố thiết kế và bấm vào Cột tab như nhìn thấy trong hình dưới đây.
Gutenberg thêm hai cột theo mặc định. Xem hình ảnh bên dưới và nhớ rằng tôi đã thêm nội dung vào các cột.
Điều gì thu hút tôi:
Không tệ trong vài giây làm việc. Nhưng bạn có thể không muốn tạo cột. Bạn có thể muốn hiển thị một hình ảnh cùng với một số văn bản.
Có một khối cho điều đó? Có đấy!
Cách thêm hình ảnh bên cạnh văn bản trong Gutenberg
Bạn đang tìm cách để thêm một hình ảnh bên cạnh một số văn bản? Nếu vậy, bạn sẽ thích phần tiếp theo.
Như thường lệ, nhấp vào biểu tượng dấu cộng (+), điều hướng đến Yếu tố thiết kế và bấm vào Phương tiện và văn bản Như hình dưới đây.
Bạn sẽ thấy Phương tiện và văn bản khối, như hình dưới đây.
Sau đó tải lên hình ảnh / video / phương tiện của bạn hoặc thêm một từ thư viện phương tiện. Sau đó, thêm văn bản của bạn bên cạnh phương tiện truyền thông, như được hiển thị trong hình dưới đây.
Tôi đã chơi với anh ấy Phương tiện và văn bản chặn, và sau đây xảy ra với tôi. Cẩn thận tôi cũng cố gắng nhấn nút ở đó
Oh đó là kết thúc! Hãy để tôi chỉ cho bạn kết thúc trước. Đây:
Trông rất chuyên nghiệp phải không? Bạn chắc chắn có thể tưởng tượng bạn có thể đạt được bao nhiêu với trình soạn thảo Gutenberg.
Khối Gutenberg của bên thứ ba
Các nhà phát triển WordPress quan tâm đến việc làm cho các chủ đề và plugin tương thích với trình soạn thảo Gutenberg. Một số ví dụ bao gồm WooC Commerce, Jetpack và Yoast SEO.
Ví dụ: bạn có thể thêm các khối WooC Commerce trong bài đăng WordPress của mình. Trước hết, bạn cần cài đặt và kích hoạt WooC Commerce.
Sau đó, trên một dòng mới, nhấp vào biểu tượng dấu cộng (+), điều hướng đến Thương mại điện tử và chọn khối bạn muốn như hình dưới đây.
Bạn có biết nó có nghĩa là gì không? Nó có nghĩa là bạn có thể tạo đa phương tiện và các bài đăng và trang tuyệt vời trong vài phút.
Các khối đáng chú ý khác
Chúng tôi đã có nhiều hơn 2.000 từ và nếu chúng ta tiếp tục như vậy, cuối cùng chúng ta sẽ viết một cuốn sách điện tử hoàn chỉnh. Lời cầu nguyện của tôi là bây giờ bạn có thể sử dụng Gutenberg mà không gặp vấn đề gì.
Ngoài ra, đây là danh sách các khối khác có sẵn.
- Widgets – Bạn có thể thêm nội dung từ các widget của bạn trong bài viết trên blog
- Mã ngắn – Bạn vẫn có thể sử dụng mã ngắn WordPress gốc
- Cổ điển – Một khối lớn chứa nội dung trước đó của bạn
- Thêm – Khối trước đây được gọi là Đọc thêm nhãn
- Ngắt trang, chia, miếng đệm
- HTML tùy chỉnh, Pullquote, Bảng
- Thư viện ảnh y Âm thanh / video HTML5
- Và nhiều hơn nữa tùy thuộc vào chủ đề và phụ kiện bạn sử dụng
Bên cạnh đó: Tạo một trang WordPress tương tự như tạo một bài đăng đã lưu cho một vài phút khác biệt, vì vậy chúng tôi sẽ không đi sâu vào vấn đề đó ngày hôm nay.
Gutenberg hack nhanh và phím tắt
Gutenberg đi kèm với một vài thủ thuật và phím tắt giúp việc này trở nên dễ dàng hơn. Ví dụ: nếu bạn nhập "/" bên trong khối đoạn văn, một danh sách các khối sẽ xuất hiện.
Bạn thậm chí có thể chọn một khối cụ thể bằng cách nhập tiêu đề khối sau dấu gạch chéo ngược (/), ví dụ: gõ "/ hình ảnh" hiển thị khối hình ảnh trong số các khối liên quan đến hình ảnh khác. Xem hình ảnh dưới đây để biết thêm chi tiết.
Các phím tắt bàn phím: Để xem tất cả các phím tắt có sẵn, nhấn Shift + ALT + H trong Windows y CHỌN + CTRL + H trên máy Mac
Ở đầu tài liệu, bạn có thể thấy cấu trúc của tài liệu bằng cách nhấp vào biểu tượng (i), như hiển thị bên dưới.
Đẹp. Cực kỳ trơn tru.
Ồ, và nhân tiện, lỗi "Cập nhật thất bại" thường xảy ra do kết nối internet không ổn định
Giữa bạn và tôi, Gutenberg là một biên tập viên nội dung tuyệt vời. Miễn là bạn sẵn sàng học các sợi dây; bạn có thể gặt hái được nhiều thứ từ trình soạn thảo WordPress trong tương lai.
Gutenberg vẫn còn tương đối trẻ, và có thể hy vọng nó sẽ phát triển về khả năng sử dụng và chức năng. Nó sẽ là một lực lượng nghiêm trọng sẽ được tính toán trong những ngày tới. Người xây dựng trang phải cẩn thận, nếu không họ sẽ hết việc
Chúng tôi hy vọng hướng dẫn từng bước của chúng tôi từ biên tập viên Gutenberg đã giúp bạn đặt mọi thứ vào quan điểm. Chúng tôi tin rằng bây giờ bạn có thể sử dụng trình chỉnh sửa khối để tạo nội dung như một chuyên gia.
Chia sẻ mối quan tâm, suy nghĩ và câu hỏi của bạn trong phần bình luận bên dưới.
