Hướng dẫn trình soạn thảo Gutenberg trong WordPress.

Gutenberg là trình xây dựng thêm vào trong wordpress mà tôi đoán rằng bất cứ blogger hay những bạn chuyên về trang web đều biết đến. Thông tin sau đây của chúng tôi sẽ chỉ dẫn cách dùng blocks editor bên trên wordpress. Cùng xem nhé !

Gutenberg là gì ?

Gutenberg – blocks editor là trình biên tập thông tin ở dạng khối của wordpress, tính từ bản thay đổi wordpress 5. 0 đã là trình xây dựng wordpress mặc định. Tên gutenberg khởi phát từ johannes gutenberg, người đã tạo ra chiếc thiết bị in ấn di động hơn 500 năm trước đó. Cách dùng của dụng cụ này có phần giản dị và phát triển hơn không ít đối chiếu với tinymce – classic editor ( bản tiền nhiệm ). Khách hàng nhiều khả năng trải nghiệm nhiều dụng cụ quy chuẩn cho việc xây dựng và định dạng tài liệu. Với bản mới, trình xây dựng của wordpress được giản lược, đồng ý khách hàng dùng những dụng cụ trang bị sẵn thay vì làm nên html và shortcodes. điều đó hợp lý cho những người mới khởi đầu với nền móng trang web wordpress.

Hơn thế nữa, gutenberg không chỉ là phiên bản nâng cấp kết nối thông tin bình thường. Bản này đã được thay đổi hầu hết trình tạo nên, biên tập thông tin phê duyệt cách đến gần bằng block – cấu trúc khối.

ưu khuyết điểm của gutenberg là gì ?
Là một trình xây dựng wordpress quen thuộc nhất ở thời điểm hiện tại. Vậy nguyên nhân nào khiến gutenberg được ứng dụng nhiều đến vậy ? có ưu điểm nổi trội nào và còn những giới hạn nào không ? cùng chúng tôi tìm tòi sau đây: Mặt mạnh của trình xây dựng gutenberg. Hầu như, gutenberg là dụng cụ rất có lợi cho những người hoạt động tại nền móng trang web. Chưa kể, nó còn tùy chỉnh nhiều mục giúp thành viên mới thao tác đơn giản hơn.

Sau đây là chức năng được ghi nhận của block editor wordpress :

Góp phần giúp nhiều định dạng bố cục không giống nhau, khách hàng thuận lợi phá cách cách thức tài liệu. Mặc dù là dụng cụ đã cập nhật, tuy nhiên trình xây dựng này vẫn chưa bỏ đi các vai trò căn bản giúp khách hàng mới mau chóng làm thân.
Gutenberg làm việc phê duyệt các block kèm nhiều dụng cụ phiên bản cân chỉnh : thích đáng gần như tất cả các loại màn hình và kích cỡ phong phú. Khách hàng có thể sử dụng thiết bị di động ( phone, tablet, … ) để xây dựng như trên. Block editor wordpress có thể bổ sung thêm các khối khác phê duyệt plugin và đề tài – thích đáng cho nhà thiết kế giải pháp. Giản lược kết nối thông tin chính thông qua việc thêm vào chức năng lên thanh dụng cụ.

điểm yếu của trình xây dựng gutenberg:

Mặc dù được cho là cực kỳ cao trên nhiều mặt, tuy nhiên dụng cụ tài trợ xây dựng và định dạng thông tin mặc định của wordpress chưa hết mốt số giới hạn gồm : Gutenberg bây giờ chưa có tương trợ ngôn ngữ đánh không để lộ markdown.
Nhiều khối vẫn để lộ yếu điểm vì chưa thật sự điều chỉnh hợp lý còn khá sóng gió với khách hàng. Meta boxes của gutenberg vẫn là mối dõi theo cho các đơn vị phát hành. Bố cục cột responsive vẫn chưa được thêm vào ( hiện có bản beta ).
Khách hàng luôn phải dùng trình biên tập thông tin cũ do chưa được thêm vào kết nối thông tin trước đây và plugin.
Chức năng accessibility ( chuyên dùng cho người tật nguyền ) có khả năng gây khó với khách hàng thông thường.
Cho cho đến giờ này hầu hết khách hàng wordpress vẫn quen dùng plugin classic editor nhằm giúp đỡ trở lại trình xây dựng cũ. Tuy vậy, những khuyết điểm trên của gutenberg đã và đang từ từ được cải thiện và thêm vào nhiều chức năng cao cấp hơn quá nhiều. để làm cho bạn hiểu hơn về trình xây dựng này, vietnix sẽ chỉ dẫn cụ thể lắp đặt đồng thời áp dụng dưới đây.

Làm thế nào để lắp đặt gutenberg trên wordpress ?
Tuy rằng có vài ba giới hạn tuy nhiên các chức năng ưu việt của trình xây dựng gutenberg vẫn được nhiều khách hàng lắp đặt đồng thời áp dụng. Như đã đề cập bên trên, đây chính là trình xây dựng wordpress mặc định từ bản đổi mới 5. 0. Bạn chỉ việc lắp đặt wordpress là khả dụng gutenberg thông thường.

Blocks editor wordpress – gutenberg có bố cục kết nối thông tin như nào ?
Về chủ đạo, kết nối thông tin của gutenberg được xem xét là giản lược và nó chỉ quay quanh những khối tài trợ việc tạo tài liệu cho trang. đa số mọi cử chỉ đều giản dị, bạn chỉ việc kéo thả block tương xứng với mục tiêu định dạng. Do đó, mọi động tác khách hàng đều được tinh chỉnh tốt nhất rất tốt , hạn chế mọi bước thừa. Các bản khác , bạn có khả năng sẽ phải sử dụng tới html hoặc mã lệnh và mọi thứ rắc rối. Các bố cục trong kết nối thông tin của blocks editor wordpress :
Thêm blocks mới : tại góc trên bên tả ngoài cùng ( dấu cộng ).
Undo/re-undo ( hoàn tác/hoàn tác lại ) : tại góc trên bên tả màn hình.
Tin tức thông tin : ô document, địa điểm trên bên hữu.
điều chỉnh khối : ô block , kề bên ô document.
Bố cáo, nháp : địa điểm bên trên bên hữu ( biểu trưng con mắt và ô drop-down ).
địa phận biên tập thông tin : chỗ trống ở giữa màn hình.

Nhìn chung, Gutenberg sẽ được phân thành 4 nhóm chủ yếu, gồm:

Common Blocks: Gồm những blocks nội dung được sử dụng phổ biến hàng đầu.
Formatting Blocks: Gồm các blocks chứa chức năng định dạng văn bản.
Layout Blocks: Gồm những blocks các tác vụ định dạng bố cục của văn bản.
Widgets: Gồm các blocks tiện ích khác.

Cách dùng block editor trên wordpress

Lúc kết nối thông tin của trình xây dựng của bạn đã được đổi mới, bạn có khả năng mở đầu sử dụng các chức năng cùng kết nối thông tin mới. đối với bản mới có thể có một ít khác hẳn, bạn nên lắp đặt meta và blocks phê duyệt ô xây dựng. Dưới đây là chỉ dẫn cách dùng chi tiết của 6 cử chỉ chủ đạo trên block editor wordpress :

Cách sử dụng Block Editor trên WordPress

Trước tiên để tạo bài viết mới, tại giao diện Dashboard của WordPress bạn vào Bài viết > Viết bài mới để tạo bài viết và vào được giao diện Block Editor

Thêm Blocks mới

Đối với việc thêm nội dung hoặc tạo block mới, bạn chỉ cần click vào biểu tượng “+” tại vị trí phía dưới các khối đã tạo trước đó.

Ngoài ra, bạn có thể bấm và ô Chèn ở vị trí phía trên trong mỗi trang. Bên cạnh đó, menu điều hướng còn hiển thị 3 trang bổ trợ:

Recents: Bạn có thể thao tác tương tự như việc thêm nội dung hoặc block mới. Lúc này, hệ thống sẽ cho hiện lên 8 tác vụ được sử dụng gần đây.
Blocks: Với hạng mục này cung cấp cho bạn thông tin về 4 nhóm Widgets, Formatting, Layout, Common Blocks.
Embeds: Tại đây, bạn có thể đưa nội dung của những website hàng đầu vào bài viết (hoặc chỉ cần cung cấp URL và trình biên tập sẽ tổng hợp đồng thời thực hiện thêm thông tin).

Thêm các khối phi văn bản

Khi đã tạo được nội dung dạng chữ và phân chia thành từng khối riêng biệt trong Gutenberg, bạn được quyền chèn thêm các blocks phi văn bản. Để thực hiện, bạn lựa chọn khối và click 2 lần vào biểu tượng “+”, sau đó chọn hình ảnh, video, trích dẫn Quotes.

Tạo các cột khác nhau

Để thêm block Cột vào bài viết, bạn chú ý đến phần Bố cục phần tử rồi thực hiện chèn thêm những khối khác.

Tạo các cột khác nhau

Trong phần nội dung, tất cả các khối đều được định dạng riêng lẻ. Nếu bạn muốn tạo kiểu và căn chỉnh cho văn bản, bạn hãy di chuột qua khối cần chỉnh sửa rồi sử dụng các công cụ trên thanh vừa xuất hiện.

Cách sắp xếp các khối riêng lẻ

Việc sắp xếp những blocks riêng lẻ có thể thực hiện theo 2 cách:

Cách 1: Khi bạn di chuột vào blocks sẽ xuất hiện mũi tên theo 2 chiều (lên – xuống). Bạn có thể sử dụng tính năng này để đổi vị trí khối.
Cách 2: Bạn sử dụng thao tác kéo thả khối đến vị trí mong muốn.

Visual Editor và Text Editor

Đối với Visual Editor – Chế độ trực quan, nó sẽ cung cấp cho người dùng thanh công cụ với những tính năng tiêu chuẩn có liên quan đến blocks mà bạn đã chọn. Ngoài ra, bạn có thể thêm hiệu ứng vào nội dung nâng cao nếu bạn có kiến thức về code bằng cách chuyển qua Text Editor – Chế độ sửa code.

Cách hoạt động của wordpress editor – gutenberg
Block editor wordpress là sự thế chỗ vượt bậc cho trình xây dựng tinymce trước đây. Nó đi vào hoạt động dựa theo rất nhiều các khối độc đáo, những blocks đồng thuận bạn xây dựng cách thức khó khăn và chuyên môn cao hơn. Hơn nữa, bạn còn được quyền định hình nên các khối mới và thuận lợi truy cập vào chúng từ những plugin lập ra sự nhạy bén. Do mỗi khối đều tùy chỉnh độc đáo bằng các cử chỉ cụ thể, bạn nhiều khả năng kiểm soát cụ thể hơn từng mục thông tin cách thức tài liệu.

Các chức năng được bổ sung của gutenberg là gì ?
đối với bản cải hành trình biên tập thông tin wordpress đã được bổ sung 15 chức năng chính tương trợ tùy chỉnh tiến trình tạo thông tin chữ cho khách hàng. Chúng tôi sẽ bước vào cụ thể từng chức năng mới trên gutenberg :

Mục lục

Ở phần mục lục (Table of content) sẽ liệt kê cho bạn tất tần tật các blocks heading (H1, H2, H3,…). Và nó được hiển thị ở dạng sidebar giúp bạn di chuyển dễ dàng trong một cú click và tránh mất thời gian cuộn trang.

Các tính năng được bổ sung của Gutenberg

Tuy nhiên, đối với tính năng này thì các plugin tạo mục lục cho WordPress khác đang làm tốt hơn.

Anchors HTML

Anchors được hiểu đơn giản là gắn tag cho bài viết cụ thể. Người dùng internet có thể tìm đến nội dung website của bạn thông quan Anchors tag.

Để sử dụng tính năng này, bạn đến mục HTML Anchor (Điểm neo HTML) và nhập tag (khoảng cách giữa các từ thay bằng “-”), sau đó bạn chọn ô Copy Link để có được liên kết. Ngoài ra, bạn có thể tùy chọn heading đồng thời gắn tag cho đề mục đó.

Các kiểu CSS bổ sung

Các CSS bổ sung cho phép bạn tùy biến và thay đổi kiểu của các khối. Tại phần Additional CSS Class (Lớp CSS bổ sung), bạn cần nhập những CSS Class để tùy biến các khối của mình. Người dùng sẽ được phép ghi đè hoặc thay đổi định dạng cho khối bằng các lựa chọn của Gutenberg.

Gallery

Gallery chỉ đơn giản là công cụ hỗ trợ người dùng thêm hình ảnh vào bài viết đồng thời lưu giữ chúng ngay trong thư viện phản hồi hình ảnh. Bạn sẽ được cung cấp liên kết để tải hình từ thiết bị hoặc người dùng lựa chọn ảnh có sẵn trên WordPress. Ngoài ra, bạn còn có thể điều chỉnh kích thước của ảnh theo mong muốn thông qua công cụ được hỗ trợ mặc định là Crop images.

Cover Image/Hero Image

Hiểu đơn giản thì đây là phần ảnh đại diện của mỗi bài viết. Có thể nói, cover images là yếu tố gây chú ý hàng đầu cho độc giả của bạn đối với dạng văn bản điện tử. Hình ảnh sẽ được Block Editor WordPress hiển thị ở dạng hộp định dạng chiều dọc hoặc chiều ngang. Điều này sẽ phụ thuộc phần lớn vào kích thước màn hình thiết bị và Gutenberg sẽ tối ưu.

Pull Quotes & Block Quotes

Pull Quotes có thể hiểu như đoạn văn bản hấp dẫn, có thể là nội dung trong bài viết. Mục đích của nó là giúp thu hút người xem click vào bài viết trên website của bạn. Người dùng có thể thực hiện tùy chỉnh định dạng cho đoạn trích Pull Quotes thông qua Block Quotes. Để thực hiện, bạn bấm vào ô Quote Style ngay trên thanh công cụ.

Tùy chỉnh HTML

Nếu muốn thêm các đoạn code HTML vào khối, bạn có thể sử dụng tính năng block HTML. Khi đã hoàn thành việc thêm HTML, bạn vẫn được phép di chuyển chúng tương tự các khối khác.

Bên cạnh đó, tab Preview cũng được xem là tính năng khá thú vị trong phần này. Bạn có thể click vào nó để tham khảo văn bản trước khi đăng trực tiếp lên trang của mình.

Classic Text

Tại Classic Text, bạn có thể tìm thấy toàn bộ các công cụ đã có trước đó ở phiên bản TinyMCE. Nhìn chung, điểm cập nhật mới nhất có lẽ chỉ đến từ việc thêm mục Additional CSS Class. Tuy vậy, nếu người dùng muốn xóa khối hoặc di chuyển chúng vẫn phải cần đến công cụ tích hợp trong Gutenberg. Khi bạn chuyển về trạng thái soạn thảo văn bản, các tùy chỉnh được thay đổi lại thành dạng HTML.

Verse

Verse block hỗ trợ bạn chuyển đổi bố cục cho các loại văn bản dạng đoạn thơ hay đoạn văn. Chức năng của nó là ngắt dòng cho đoạn đồng thời điều chỉnh khoảng cách giữa các ký tự và căn chỉnh lề nhỏ phía trái văn bản tạo tính thẩm mỹ cho bài viết.

Text Columns

Text Columns giúp người dùng có thể thêm các khối nội tuyến vào bài viết. Các blocks văn bản này được thêm bằng cách viết HTML hay CSS trên trình soạn thảo được tích hợp mặc định hoặc khối HTML.

Buttons

Người dùng được quyền thêm các nút (buttons) với vô vàn kiểu cách và tùy chỉnh, nó thông qua những kiểu text yêu thích cũng như lựa chọn màu nền phù hợp. Hiện nay, người dùng chưa thể tùy chỉnh màu chữ từ màu trắng nhưng CSS style sẽ hỗ trợ định nghĩa lại màu.

Widgets

Widgets sẽ có 3 loại rất hữu ích thuộc bài viết mới nhất (latest posts). Tuy vậy, các category hay tùy biến shortcodes hầu như không khả dụng đối với những khối Gutenberg.

Latest Posts

Người dùng có thể lựa chọn giữa hai hình thức hiển thị bài viết mới nhất (latest Posts) gồm: Dạng lưới (Grid View) và dạng list tiêu chuẩn (List View). Đặc biệt, đối với Grid View, bạn được phép tùy chỉnh số lượng cột hiển thị theo nhu cầu. Bên cạnh đó, bạn nên chú ý đến việc chọn xem ngày đăng tải bài viết để giúp tiêu đề nội dung được hiển thị bao gồm thời gian xuất bản. Việc này sẽ tăng khả năng truy cập của người xem.

Tùy chỉnh Latest Post theo nhu cầu và sở thích

Categories

Bạn có thể thay đổi hiển thị danh sách các hạng mục theo dạng list tiêu chuẩn hoặc dạng drop-down thông qua Categories.

Shortcode

Với phiên bản WordPress 5.0 đã hỗ trợ người dùng tính năng Shortcode. Vì thế, ở hiện tại, bạn chỉ việc nhập Shortcode và Blocks Editor WordPress sẽ cho ra kết quả.

Các thủ thuật giúp sửa chửa blocks editor – gutenberg là gì ?
Với việc ứng dụng biên tập thông tin mặc định mới này đã có rất nhiều các nâng tầm khác. Vì vậy, khá nhiều khách hàng có vẻ như tốn nhiều thời gian trong lĩnh vực đăng thông tin. Sau đây, là 7 thủ thuật tùy chỉnh block editor.

Tạo khối mới nhanh chóng
đối với bản trình xây dựng mới, bạn chỉ việc gõ khối cần tìm và gutenberg sẽ tự động lọc và hiển thị khiến bạn. Không những vậy, nó sẽ xuất hiện một hộp gồm các đề xuất liên can giúp khách hàng dành dụm hầu hết thì giờ.

Mở chế độ toàn màn hình trong blocks editor
Với blocks editor, bạn có không ít tùy biến điều chỉnh sự khác nhau, như : Toàn màn hình ( fullscreen mode ). Thêm thanh dụng cụ bất di bất dịch tương đồng với bản tinymce ( unified toolbar ). Trên khối vận hành có khả năng đặt một bài điển hình ( spotlight mode ).

Để sử dụng các tùy chỉnh trên, người dùng chọn vào biểu tượng ba chấm phía trên ở giữa thanh công cụ tiêu chuẩn.

Tạo khối mẫu – Block tái sử dụng

Việc tạo mẫu các khối sẽ giúp bạn tiết kiệm thời gian trong trường hợp cần tái sử dụng. Bạn chọn vào biểu tượng ba chấm rồi vào mục Add to Reusable Blocks. Khi cần dùng đến, bạn chỉ việc chèn nó vào nội dung như những khối thông thường.

Chỉnh sửa mã nguồn trực tiếp

Bạn nhấp vào dấu ba chấm rồi bấm vào mục Code editor để tùy chỉnh mã nguồn cho tổng thể bài viết tại mọi thời điểm.

Tối ưu thời gian bằng phím tắt

Bên cạnh các phím tắt cơ bản thì Gutenberg còn hỗ trợ người dùng hàng loạt các tổ hợp phím chuyên dụng tối ưu thời gian soạn nội dung cho bạn, như:

Chèn thêm khối mới vào vị trí trên hoặc dưới khối đã được chọn.
Nhân đôi một khối.
Xóa một khối.

Bạn có thể truy cập đến danh sách các phím tắt bằng cách ấn tổ hợp Shift + Alt + H.

Sử dụng tổ hợp Shift + Alt + H để mở bảng phím tắt

Dùng Plugin để mở rộng trình chỉnh sửa khối

Có lẽ, Otter Blocks là công cụ hỗ trợ khá tốt cho người dùng mới bắt đầu việc tùy chỉnh những blocks nội dung. Công cụ này sẽ mang đến bạn các khối bổ sung thêm danh mục Google Maps, giá cả, nhấp chuột vào nút tweet, chia sẻ,…

Biến thông tin cũ thành blocks
Với chức năng này, bạn không phải sợ sệt các thông tin cũ sẽ mất tích. Bạn có khả năng để nó vào những blocks classic và tùy biến giông giống như bạn động tác với trình xây dựng cũ của wordpress. để làm, chúng ta lựa chọn vào dấu ba chấm, kế đó là mục convert to block. Chuỗi sẽ tách thông tin thành khối riêng lẻ rồi bạn có khả năng tự sắp xếp sao cho thõa đáng.

đánh giá về trình xây dựng gutenberg trên desktop và mobile

Gần như tất cả các trình xây dựng gồm có gutenberg đều vận hành ổn định trên desktop. Theo các đánh giá từ những người đang dùng trình xây dựng mới của wordpress, họ đều đem ra nhận định ít tiêu cực. Thực tế, blocks editor không được gia tăng để đầu tư cho nền móng điện thoại. Tuy nhiên theo các thí nghiệm thì nó vẫn cho ra công suất làm việc bền vững dù đối với việc điều chỉnh thông tin dài và nặng. Có thể thấy rằng, những tác dụng tiêu chí như đổi phông chữ, xóa khối, … Vẫn rất mượt mà trên đôi bên cơ sở. Tùy còn số ít nhược điểm tuy nhiên nhóm nhân viên kỹ thuật của gutenberg sẽ cải thiện và cập nhật trong khoảng thời gian ngắn nhất.

Kết luận:
Kể trên, chúng tôi đã chia sẻ đến bạn mọi dữ liệu hiển nhiên về trình xây dựng gutenberg. Triển vọng, bạn đã biết thêm về trình xây dựng này. Nếu còn mở miệng hỏi nào khác , bạn hãy lưu lại phản hồi và chúng tôi sẽ trả lời.

Xem thêm: