Hướng dẫn wordpress gutenberg blocks - khối wordpress gutenberg
Gutenberg là gì?Gutenberg là trình soạn thảo văn bản mới ở dạng khối của WordPress và trở thành Editor mặc định từ phiên bản WordPress 5.0. Nguồn gốc tên của Editor WordPress – Gutenberg là gì? Tên Gutenberh được bắt nguồn bởi Johannes Gutenberg, “cha đẻ” của máy in di động hơn 500 năm trước. Cùng Mắt Bão tìm hiểu thêm các thông tin cũng như cách sử dụng cơ bản của Gutenberg nhé!. Nguồn gốc tên của Editor WordPress – Gutenberg là gì? Tên Gutenberh được bắt nguồn bởi Johannes Gutenberg, “cha đẻ” của máy in di động hơn 500 năm trước. Cùng Mắt Bão tìm hiểu thêm các thông tin cũng như cách sử dụng cơ bản của Gutenberg nhé! Show
Tiến bộ hơn trình soạn thảo TinyMCE được sử dụng trước đó, Gutenberg cho người dùng nhiều trải nghiệm thú vị và phong phú hơn khi soạn thảo văn bản.TinyMCE được sử dụng trước đó, Gutenberg cho người dùng nhiều trải nghiệm thú vị và phong phú hơn khi soạn thảo văn bản. Trình soạn thảo GutenbergCụ thể, nó không tạo ra các shortcodes và HTML mà tất cả được đơn giản hóa thành sử dụng một số công cụ có sẵn, rất phù hợp cho người mới bắt đầu sử dụng WordPress. Gợi ý tìm hiểu thêm thông tin:
Ngoài ra, Gutenberg không chỉ là một giao diện được cập nhập mới mà nó còn nâng cấp trình xây dựng nội dung văn bản bằng cách tiếp cận dựa trên mô hình khối (block). Gutenberg không chỉ là một giao diện được cập nhập mới mà nó còn nâng cấp trình xây dựng nội dung văn bản bằng cách tiếp cận dựa trên mô hình khối (block). Ưu điểm và nhược điểm của Gutenberg là gì?Tương tự như bất kỳ trình soạn thảo nào, Gutenberg cũng có những ưu và khuyết điểm nhất địnhƯu điểm của Blocks Editor WordPress – Gutenberg là gì?Gutenberg là công cụ hữu ích cho mọi đối tượng từ người mới bắt đầu cho đến các lập trình viên chuyên nghiệp. Chúng bao gồm nhiều tính năng ưu việt, dễ dàng thao tác để có được hàng loạt văn bản bố cục đẹp mắt, có sức thu hút mạnh mẽ với người truy cập. Những tính năng này bao gồm:
Nhược điểm của Blocks Editor WordPress – Gutenberg là gì?Tuy nhiên, bên cạnh những tính năng vượt trội, người dùng vẫn còn bối rối trước một vài khuyết điểm khiến họ gặp khó khăn khi sử dụng Gutenberg như:
Cách cài đặt Blocks Editor GutenbergCách cài đặt Gutenberg tương tự như các trình soạn thảo cũMặc dù có một số hạn chế nhưng các tính năng hấp dẫn của trình soạn thảoGutenberg luôn được tin cậy cài đặt và sử dụng. Đây là trình soạn thảo WordPress mặc định từ phiên bản 5.0, tuy nhiên vẫn có thể cài đặt như thao tác cài đặt plugins thông thường trong thư viện WordPress. Bạn có thể tìm hiểu thêm về cách cài đặt Plugin trong bài viết: Gutenberg luôn được tin cậy cài đặt và sử dụng. Đây là trình soạn thảo WordPress mặc định từ phiên bản 5.0, tuy nhiên vẫn có thể cài đặt như thao tác cài đặt plugins thông thường trong thư viện WordPress. Bạn có thể tìm hiểu thêm về cách cài đặt Plugin trong bài viết:
Hoặc bạn có thể Download Plugin Gutenberg trực tiếp.Download Plugin Gutenberg trực tiếp. Lời khuyên từ Mắt Bão: Gutenberg là Editor mặc định từ WordPress 5.0 trở đi. Bạn vẫn chưa thấy trình soạn thảo này khi soạn bài viết mới? Hãy cập nhật ngay phiên bản mới nhất WordPress của bạn. Nếu đang thuê Hosting WordPress hay Managed WordPress Hosting, hãy liên hệ với nhà cung cấp đảm bảo rằng WordPress trên website của bạn luôn được cập nhật.thuê Hosting WordPress hay Managed WordPress Hosting, hãy liên hệ với nhà cung cấp đảm bảo rằng WordPress trên website của bạn luôn được cập nhật. WordPress Editor – Gutenberg hoạt động như thế nào?Trình soạn thảo Gutenberg hoạt động dưới dạng các blocks riêng lẻVề cơ bản, sự xuất hiện của Gutenberg là sự thay thế trình soạn thảo mặc định WordPress TinyMCE. Chúng hoạt động bằng nhiều blocks riêng lẻ, các blocks này cho phép người dùng thiết kế phức tạp hơn trong trình chỉnh sửa cũ. Đặc biệt, bạn có thể tạo thêm block mới có thể dễ dàng truy cập thông qua các plugin để được linh hoạt hơn. Gutenberg là sự thay thế trình soạn thảo mặc định WordPress TinyMCE. Chúng hoạt động bằng nhiều blocks riêng lẻ, các blocks này cho phép người dùng thiết kế phức tạp hơn trong trình chỉnh sửa cũ. Đặc biệt, bạn có thể tạo thêm block mới có thể dễ dàng truy cập thông qua các plugin để được linh hoạt hơn. Bên cạnh đó, vì mỗi block đều có thể tùy chỉnh riêng lẻ nên qua các thao tác cụ thể, bạn có thể kiểm soát sâu hơn với từng mục nội dung được trình bày trong văn bản. Bố cục giao diện của Blocks Editor WordPress – GutenbergGiao diện thân thiện của GutenbergCác điểm cần lưu ý trong giao diện Editor Gutenberg là gì? Giao diện Gutenberg khá đơn giản: xoay quanh các blocks được sử dụng để tạo nội dung bài viết trên mỗi trang. Các thao tác sử dụng các block này cũng rất tiện lợi và dễ dàng, phù hợp với nhiều người dùng. Theo đó, bạn chỉ cần kéo thả block để đạt được mục đích trình bày thay vì sử dụng các code hay HTML cầu kỳ và phức tạp khác.Gutenberg khá đơn giản: xoay quanh các blocks được sử dụng để tạo nội dung bài viết trên mỗi trang. Các thao tác sử dụng các block này cũng rất tiện lợi và dễ dàng, phù hợp với nhiều người dùng. Theo đó, bạn chỉ cần kéo thả block để đạt được mục đích trình bày thay vì sử dụng các code hay HTML cầu kỳ và phức tạp khác. Cụ thể như sau:
Bố cục cơ bản của Gutenberg là các blocks được sắp xếp độc lập và chia ra làm bốn nhóm chính gồm:
Tính năng bổ sung của Gutenberg là gì?Gutenberg có nhiều tính năng bổ sung khác bên cạnh các chức năng cơ bảnSau khi đã thành thạo các thao tác sử dụng Gutenberg, để có những trải nghiệm thú vị và sáng tạo ra nhiều văn bảo độc đáo hơn, bạn có thể tham khảo thêm những tính năng bổ sung sau đây: Mục lụcGiờ đây bạn có thể chọn và di chuyển tới phần heading thật dễ dàng. Gutenberg sẽ xác định tất cả các blocks heading (,,…) trong bài viết và hiển thị một mục lục ở sidebar để liệt kê tất cả. Nó thật sự rất hữu ích cho những người dùng điện thoại và soạn lập các văn bản dài mà không tốn nhiều thời gian cuộn trang.Gutenberg sẽ xác định tất cả các blocks heading ( Anchors là một kiểu gắn tag cho bài viết, người truy cập web sẽ đến được với nội dung khi tìm kiếm bằng các Anchors Tag này. Để sử dụng nó, khi chọn một heading trong block, bạn hãy gõ tag và chọn “Copy Link” trong HTML Anchor để lấy liên kết. Bạn có thể đặt các heading và gán các tag anchors cho các heading này. là một kiểu gắn tag cho bài viết, người truy cập web sẽ đến được với nội dung khi tìm kiếm bằng các Anchors Tag này. Để sử dụng nó, khi chọn một heading trong block, bạn hãy gõ tag và chọn “Copy Link” trong HTML Anchor để lấy liên kết. Bạn có thể đặt các heading và gán các tag anchors cho các heading này. Các kiểu CSS bổ sungBạn có thể tùy chỉnh/biến đổi style của các block qua các đoạn CSS bổ sung. Trong phần “Additional CSS Class”, bạn phải nhập và các CSS Class để thay đổi style cho các blocks của mình. Tại đây, người dùng có thể ghi đè hoặc thay đổi block thành các kiểu dáng mặc định sẵn có trong Gutenberg.Additional CSS Class”, bạn phải nhập và các CSS Class để thay đổi style cho các blocks của mình. Tại đây, người dùng có thể ghi đè hoặc thay đổi block thành các kiểu dáng mặc định sẵn có trong Gutenberg. GalleryGallery là công cụ giúp người dùng thêm hình ảnh vào bài đăng và lưu trữ chúng trong một thư viện hình feedback. Để tải ảnh từ máy lên, Gallery sẽ hiển thị cho bạn một liên kết hoặc, người dùng có thể chọn từ tài nguyên có sẵn trong Media của WordPress. Bên cạnh đó, tính năng “crop images” sẽ giúp bạn điều chỉnh kích thước hình ảnh về cùng một kiểu trước khi tải lên. Cover Image/Hero ImageCover images (hero images) là phần ảnh đại diện lớn ở đầu văn bản. Đây là một trong những yếu tố được chú ý nhất ở nhiều văn bản điện tử. Để thêm Cover images, Gutenberg hiển thị hình ảnh dưới dạng hộp (nhiều tấm ảnh tập trung lại) theo chiều ngang hoặc dọc, tuỳ kích thước màn ảnh. Pull Quotes & Block QuotesPull quote là một đoạn văn hấp dẫn nhất được trích ra từ bài viết, có nhiệm vụ thu hút người đọc. Với Block quotes, bạn có thể tuỳ chỉnh định dạng cho đoạn trích này bằng cách nhấp vào nút “Quote Style” trên thanh công cụ.Quote Style” trên thanh công cụ. Tùy chỉnh HTMLBạn muốn thêm các đoạn mã HTML vào block? Hãy sử dụng block HTML! Sau khi thêm vào các đoạn mã HTML, bạn vẫn có thể di chuyển nó đi như những block khác. Tùy chỉnh cũng có một tính năng hết sức thú vị là tab Preview – khi click vào đây, bạn có thể xem xét văn bản trước khi nó được xuất bản. Classic TextBlock classic text hiển thị toàn bộ các công cụ tuỳ chỉnh cơ bản của TinyMCE, điểm khác duy nhất là xuất hiện thêm mục Additional CSS Class. Tuy nhiên, người dùng vẫn phải di chuyển và xóa block bằng công cụ của Gutenberg. Các tuỳ chỉnh này sẽ trở về dạng HTML khi bạn quay lại giao diện soạn thảo văn bản.Gutenberg. Các tuỳ chỉnh này sẽ trở về dạng HTML khi bạn quay lại giao diện soạn thảo văn bản. VerseVới những đoạn thơ hoặc đoạn văn, bạn có thể tùy chỉnh bố cục với Verse block. Nhiệm vụ của nó là ngắt dòng một cách chính xác và thiết lập khoảng cách giữa các ký tự sao cho phù hợp. Ngoài ra, Verse block cũng căn chỉnh một lề nhỏ ở bên trái của văn bản. Text ColumnsĐể thêm các block nội tuyến, người dùng phải sử dụng Text Columns. Những khối văn bản được thêm vào này sẽ được viết bằng HTML hoặc CSS qua trình soạn thảo văn bản có sẵn hoặc HTML block. ButtonsBạn có thể dễ dàng thêm các nút bấm với nhiều kiểu khác nhau cũng như định dạng nó với các kiểu text mong muốn cũng như đổi màu nền. Tuy nhiên ở hiện tại, người dùng không thể thay đổi màu chữ từ màu trắng nhưng công cụ “Additional CSS Class” sẽ hỗ trợ bạn định nghĩ lại màu sắc bằng CSS style.Additional CSS Class” sẽ hỗ trợ bạn định nghĩ lại màu sắc bằng CSS style. WidgetsGutenberg Widgets bao gồm 3 loại rất đáng giá thuộc latest posts ( bài viết mới nhất). Tuy nhiên, mọi category và tùy chỉnh shortcodes đều không khả dụng với các block Gutenberg. Latest PostsCó hai hình thức để lựa chọn hiển thị danh sách Latest Posts – các bài viết mới nhất là: List View (dạng list cơ bản) và Grid View (dạng dưới). Nếu chọn cách bố trí theo dạng lưới, bạn có thể tuỳ chỉnh số cột để hiển thị bài viết. Và đừng quên, hãy chọn xem ngày xuất bản để tiêu đề bài viết được hiển thị với thời gian xuất bản nhé. Việc này sẽ khiến người truy cập dễ dàng chọn xem nội dung hơn. CategoriesVới Categories, bạn có thể tuỳ chỉnh danh sách các mục theo kiểu list thông thường hoặc danh sách cuộn. ShortcodeGutenberg đã bổ sung chức năng thêm Shortcode cho người dùng. Giờ đây, bạn chỉ cần nhập Shortcode để Gutenberg hiển thị kết quả. Cách sử dụng Editor Gutenberg trên WordPressBạn sẽ có trải nghiệm soạn thảo rất thú vị với tính năng Visual Editor và Text Editor của GutenbergSau khi đã nắm bắt được thông tin “Gutenberg là gì?“. cùng đến cách sử dụng nhé! Khi mới bắt đầu dùng Blocks Editor WordPress – Gutenberg, chắc chắn người dùng sẽ gặp khó khăn hơn so với giao diện mặc định cũ TinyMCE. Theo đó, thay vì tất cả các thanh công cụ gần như chiếm hết diện tích phần mềm, người dùng cần phải thao tác kéo lên xuống thì với trình soạn thảo Gutenberg, các thiết lập meta và blocks đã được ẩn bớt, chỉ xuất hiện khi bạn click vào nút “Thiết lập”. Gutenberg là gì?“. cùng đến cách sử dụng nhé! Khi mới bắt đầu dùng Blocks Editor WordPress – Gutenberg, chắc chắn người dùng sẽ gặp khó khăn hơn so với giao diện mặc định cũ TinyMCE. Theo đó, thay vì tất cả các thanh công cụ gần như chiếm hết diện tích phần mềm, người dùng cần phải thao tác kéo lên xuống thì với trình soạn thảo Gutenberg, các thiết lập meta và blocks đã được ẩn bớt, chỉ xuất hiện khi bạn click vào nút “Thiết lập”. Để người dùng nắm rõ hơn về cách sử dụng của trình soạn thảo này, sau đây là một vài thao tác sử dụng Gutenberg cụ thể:
Hãy cùng tìm hiểu chi tiết! Thêm Blocks mớiThêm các khối phi văn bảnTạo các cột khác nhauChèn” ở phần trên của mỗi trang. Ngoài ra, trên menu điều hướng còn có các trang:
Thêm các khối phi văn bảnTạo các cột khác nhau Cách tùy chỉnh các khối riêng lẻCách sắp xếp lại các khối riêng lẻVisual Editor và Text EditorTạo các cột khác nhauCách tùy chỉnh các khối riêng lẻCột” từ phần “Bố cục phần tử”, sau đó chèn thêm các khối khác. Cách sắp xếp lại các khối riêng lẻCách tùy chỉnh các khối riêng lẻCách sắp xếp lại các khối riêng lẻ Visual Editor và Text EditorHãy cùng tìm hiểu chi tiết!Cách sắp xếp lại các khối riêng lẻCách sắp xếp lại các khối riêng lẻVisual Editor và Text Editor Visual Editor và Text EditorVisual Editor và Text EditorHãy cùng tìm hiểu chi tiết! có thanh công cụ hiển thị các tính năng liên quan tới khối được chọn. Khi chuyển qua công cụ Text Editor, màn hình sẽ hiển thị các cách tạo ra hiệu ứng cho nội dung. Cách thêm khối mớiĐể thêm một block mới hoặc nội dung khác, bạn phải click chọn biểu tượng “+” bên dưới tất cả các blocks đã được tạo hoặc nhấn vào nút “Chèn” ở phần trên của mỗi trang. Ngoài ra, trên menu điều hướng còn có các trang:Recents: Nhấp vào nút “+” hoặc nút “Chèn”, màn hình sẽ hiển thị danh sách 8 tác vụ gần nhất được sử dụng trong blocks và nội dung.
Cách tạo cột các khối khác nhau Blocks: Đây là danh sách các blocks được chia thành bốn headings chính gồm Common Blocks, Formatting, Layout, Widgets.Blocks: Đây là danh sách các blocks được chia thành bốn headings chính gồm Common Blocks, Formatting, Layout, Widgets.Embeds: Ở đây, bạn có thể thêm nội dung từ các trang web phổ biến hoặc chỉ cần nhập URL thì trình biên tập sẽ tự động phát hiện và thêm vào. Kích hoạt chế độ toàn màn hình EditorVới Gutenberg, bạn có thể chọn nhiều chế độ chỉnh sửa khác nhau. Ví dụ như:
Để sử dụng các tiện ích này, nhấp vào biểu tượng ba chấm ở góc trên bên phải. Tạo các khối mẫu để tái sử dụngTạo các khối mẫu để tái sử dụngVới Gutenberg, ngoài soạn thảo, bạn còn có thể tạo khối mẫu để tái sử dụng. Sau đó bạn chỉ việc chèn nó như các khối thông thường. Chỉnh sửa mã nguồn trực tiếpTại bất kỳ thời điểm nào, bạn có thể chỉnh sửa mã nguồn của toàn bộ bài đăng bằng cách nhấp vào ba dấu chấm ở góc trên bên phải và chọn “Code editor”. Code editor”. Sử dụng phím tắt Gutenberg để tiết kiệm thời gianSử dụng phím tắt Gutenberg để tiết kiệm thời gianNgoài các phím tắt định dạng tiêu chuẩn, trình chỉnh sửa block có một số phím tắt chuyên dụng giúp bạn:
Để mở danh sách đầy đủ các phím tắt, hãy sử dụng tổ hợp phím Shift + Alt + H. Mở rộng trình chỉnh sửa khối bằng các pluginOtter Blocks là một lựa chọn tốt để giúp bạn bắt đầu chỉnh sửa các khối nội dung. Nó cung cấp cho bạn các block bổ sung yếu tố giá cả, Google Maps, biểu tượng chia sẻ, nhấp chuột vào nút tweet,… và nhiều hơn thế nữa. Cách chuyển đổi nội dung cũ thành BlocksChuyển đổi từ khối cũ TinyMCE sang blocksGiờ đây bạn không cần lo lắng nội dung cũ của mình biến mất nữa. Hãy để nó trong khối Classic và chỉnh sửa giống như bạn làm với trình soạn thảo cũ của WordPress – sử dụng biểu tượng dấu ba chấm và chọn “convert to block”. Nó sẽ phá vỡ nội dung thành các khối riêng lẻ để sau đó, bạn có thể sắp xếp lại. convert to block”. Nó sẽ phá vỡ nội dung thành các khối riêng lẻ để sau đó, bạn có thể sắp xếp lại. Đánh giá trình soạn thảo Gutenberg trên Desktop và MobileGutenberg hoạt động tốt trên cả nền tảng Desktop và MobileVới Desktop, những trình soạn thảo bình thường chạy rất “mượt”, kể cả với Gutenberg. Theo phản hồi từ những người đang sử dụng, họ không nhận thấy sự chậm trễ nào từ nó trong quá trình soạn văn bản hay tuỳ chỉnh – thêm, xoá các block. Gutenberg. Theo phản hồi từ những người đang sử dụng, họ không nhận thấy sự chậm trễ nào từ nó trong quá trình soạn văn bản hay tuỳ chỉnh – thêm, xoá các block. Mặt khác, dù không tập trung phát triển trên mobile nhưng theo thử nghiệm, Gutenberg vẫn cho trải nghiệm phản hồi nhanh, dù là với một nội dung khá nặng. Các chức năng xóa block hay đổi màu font chữ vẫn diễn ra suôn sẻ và nhanh chóng trên nền tảng di động. Mặc dù còn vài khuyết điểm nhưng đội ngũ phát hành Gutenberg tin rằng, trình soạn thảo này sẽ rất phát triển trên thiết bị di động. Trên đây là toàn bộ những thông tin về trình soạn thảo văn bản Gutenberg của WordPress. Hy vọng bạn đã có cái nhìn khái quát về công cụ này và có thể cài đặt sử dụng chúng một cách thuận lợi. Gutenberg của WordPress. Hy vọng bạn đã có cái nhìn khái quát về công cụ này và có thể cài đặt sử dụng chúng một cách thuận lợi. |