Cách tạo sản phẩm trong WooCommerce bằng Gutenberg

Chào các bạn mình đang mầy mò để tự làm cho mình 1 trang web, mình đã tham khảo Gutenberg WordPress Editor là trình biên tập, soạn thảo mới của WordPress và thấy nó rất tối ưu, dễ sử dụng ( mình thề là chỉ xem youtube 15p là master luôn, tối ưu và thân thiện vãi chưởng :D). Ngoài sự thân thiện thì mình còn đỡ phải cài mấy cái plugin soạn thảo cũ như Classic Editor hay cái TinyMCE Editor nặng cả web.

Nhưng có một vấn đề là khi mình xóa 2 plugin Classic Editor và TinyMCE Editor thì chỉ phần Bài Viết có trình biên tập mới Gutenberg còn phần Thêm sản phẩm của WooCommerce thì không có Gutenberg WordPress Editor và mình đã mất khá nhiều time để làm sao có thể tạo sản phẩm trong WooCommerce bằng Guntenberg. Thực ra nó cũng khá đơn giản nhưng mình seach không tìm thấy và nghĩ có nhiều bạn cũng như mình nên mình viết bài này chia sẻ cho bạn nào cần để đỡ mất time như mình 😀

Sau khi vào function.php ta sẽ có giao diện như sau

Các bạn coppy and paste đoạn code dưới đây vào:

// enable gutenberg for woocommerce
 function activate_gutenberg_product( $can_edit, $post_type ) {
  if ( $post_type == 'product' ) {
         $can_edit = true;
     }
     return $can_edit;
 }
 add_filter( 'use_block_editor_for_post_type', 'activate_gutenberg_product', 10, 2 );
 // enable taxonomy fields for woocommerce with gutenberg on
 function enable_taxonomy_rest( $args ) {
     $args['show_in_rest'] = true;
     return $args;
 }
 add_filter( 'woocommerce_taxonomy_args_product_cat', 'enable_taxonomy_rest' );
 add_filter( 'woocommerce_taxonomy_args_product_tag', 'enable_taxonomy_rest' );

Ta sẽ được như này

Đã xong! Các bạn vào Thêm mới Bài Viết hoặc Sản Phẩm để kiểm tra thành quả nhé.

Lưu ý là nếu cài Classic Editor và TinyMCE Editor thì ngừng kích hoạt đi thì mới trở về trình soạn thảo văn bản Gutenberg WordPress Editor mặc định của WordPress nhé.

Các bạn cũng có thể xem hướng dẫn trực tiếp của mình lại kênh Youtube: https://studio.youtube.com/channel/cach-tao-san-pham-trong-woocommerce-bang-gutenberg

Chúc các bạn thành công! À quên không cần chúc vì chắc chắn sẽ thành công nếu bạn làm như mình 😀

Hướng dẫn cơ bản Gutenberg

Sau khi xem video hướng dẫn sử dụng Gutenberg dưới đây mất 15 phút quý giá của cuộc đời mình cam đoan chắc chắn các bạn sẽ thích mê luôn. Mình cũng học ở đây https://www.youtube.com/watch?v=c_r90QRc2rI chứ không phải quảng cáo kênh youtube cho ai đâu nhé 😀

Gutenberg là gì? Cách sử dụng Gutenberg WordPress Editor trên WordPress

Gutenberg là gì?

Gutenberg WordPress Editor là trình biên tập, 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 vào những ngày cuối năm 2018, và chắc chắn có nhiều người sẽ vô cùng bỡ ngỡ vì trình soạn thảo WordPress quen thuộc có quá nhiều thay đổi. Bây giờ trình soạn thảo Gutenberg không còn là plugin nữa; mà được tích hợp làm trình soạn thảo mặc định của WordPress, nghĩa là Gutenberg sẽ thay thế WordPress TinyMCE Editor (trình biên tập chúng ta đang sử dụng trong WordPress hiện tại)

Trọng tâm của Gutenberg là thể hiện tất cả các nội dung như các blocks và xác định layouts bài viết trực tiếp trong trình soạn thảo.

Gutenberg Editor được phát triển dựa trên khái niệm block. Do vậy, mọi thứ trong Gutenberg sẽ xoay quanh block. Các block trong trình soạn thảo Gutenberg cho phép bạn thêm mọi loại nội dung vào bài viết, trang. Và có thể chỉnh sửa chúng một cách độc lập với các block khác.

Bạn có thể di chuyển block lên xuống, chuyển đổi qua lại dạng của block từ tiêu đề sang đoạn, hoặc từ đoạn sang trích dẫn

Với Gutenberg, bạn sẽ không cần phải biết về HTML hoặc CSS để tạo 2 blocks nội dung bên cạnh nhau, làm cho người dùng bình thường có thể tiếp cận với các layouts phức tạp hơn. Bạn chỉ cần đơn giản bấm Align Left trên 1 block và Align Right trên block còn lại hoặc bạn cũng có thể một block được tạo sẵn với tối đa 4 cột cạnh nhau. Bạn cũng có thể dễ dàng di chuyển block lên hoặc xuống dưới khối văn bản.

Các nhà phát triển cũng muốn thay thế việc sử dụng shortcodes khi thêm các nội dung phong phú vào bài viết và trang. Điều này có nghĩa là việc nhúng nội dung bên ngoài trở nên dễ dàng hơn, với các tùy chọn cụ thể để thêm video trên YouTube, bài viết Reddit, Tweets, Spotify và nhiều hơn thế nữa. Điều này đơn giản hóa các quá trình mà thông thường sẽ yêu cầu plugin hoặc tạo mã nhúng cụ thể trên trang web bạn đang nhúng.

Hướng dẫn sử dụng trình soạn thảo WordPress Gutenberg

Đầu tiên, chúng ta hãy xem xem giao diện trình soạn thảo WordPress Gutenberg có những gì

Giải thích các vị trí trên hình ảnh:

Cách sử dụng thẻ tiêu đề (Heading) trong trình soạn thảo WordPress Gutenberg

Mặc định thẻ tiêu đề đầu tiên là tiêu đề của bài viết và cũng là thẻ H1. Bạn chỉ được phép gõ nội dung mà không được phép chỉnh sửa bất thứ gì.

Từ thẻ tiêu đề thứ 2 trở đi bạn có thể chỉnh sửa: Thay đổi từ H2 đến H6, canh lề, định dạng, chèn link…

Cách sử dụng đoạn (Paragraph) trong trình soạn thảo WordPress Gutenberg

Trình soạn thảo WordPress Gutenberg quy định mỗi block là một đoạn; bạn có thể dùng chức năng add block để thêm mới một đoạn hoặc đơn giản hơn là nhấn Enter.

Vậy muốn xuống dòng trong block thì làm thế nào? Đơn giản là bạn chỉ cần dùng tổ hợp phím Shift + Enter

Xoá block: Chọn vào dấu 3 chấm ở của sổ soạn thảo, rồi chọn Remove Block. Hoặc đơn giản hơn, là để con trỏ chuột vào vị trí đầu tiên của block và ấn phím Backspace trên bàn phím.

Nếu bạn lo trình soạn thảo Gutenberg chỉ có thể định dạng cho đoạn văn một cách rất sơ sài,hông có chức năng canh đều 2 bên (bài viết của bạn sẻ thật thiếu chuyên nghiệp khi những câu chữ chồi sụt không đều), Bạn có thể chỉnh màu chữ và màu nền cho cả block; nhưng không thể chỉnh màu cho một vài chữ trong đoạn đó và đặc biệt bạn không thể thay đổi Font chữ và nhiều thứ khác nữa thì bạn cũng đừng lo vì  trong Gutenberg có sẵn luôn block Classic rồi mà? – cần thì bật phát lên, soạn thảo như xưa luôn! 

Cách chèn hình ảnh trong trình soạn thảo WordPress Gutenberg

Bấm vào add block – Image sau đó chọn nguồn bức ảnh

Bạn có thể thêm trực tiếp ghi chú hoặc Alt Text cho ảnh.

Hoặc đơn giản nhất là kéo hình ảnh vô vùng soạn thảo văn bản. Cách này làm tương tự như Microsoft Word

Thêm khối nhúng trong trình soạn thảo WordPress Gutenberg

Bấm vào add block – Nhúng, chọn trang cần nhúng, copy đường link của trang cần nhúng rồi nhấn Nhúng.

Thế là bạn có thể nhúng dể dàng với trình soạn thảo Gutenberg

Thêm và tạo kiểu khối nút trong trình soạn thảo WordPress Gutenberg

Đây là một điểm cộng và được nhiều người đánh giá rất cao ở Gutenberg. Vì bạn có thể dể dàng thiết kế nút kêu gọi hành động rất đơn giản và đẹp mắt.

Bấm vào add block – nút

Nhập tên nút, chọn màu nền và màu chữ

Nhập URL cho nút

Ngoài ra còn rất nhiều thao tác khác với block…các bạn tự mày mò thêm nha. Mình nghĩ đến đây là các bạn đã thành thạo kha khá rồi 😀

Cách tạo FAQ Schema hiển thị trên Google – Cách chèn câu hỏi thường gặp FAQ

Vi sao bạn nên tạo FAQ Schema hiển thị trên Google

Câu hỏi thường gặp xuất hiện ngay trên khung tìm kiếm; giúp người dùng nhanh chóng có được thêm các thông tin hữu ích với những câu hỏi thường gặp.

FAQ Schema hiển thị chiếm diện tích lớn giúp tăng độ phủ trên kết quả tìm kiếm của Google. Giúp tăng độ nổi bật của website hơn so với đối thủ. Nhờ vậy nên dễ thu hút sự chú ý của người dùng, tăng tỷ lệ nhấp chuột CTR vào câu hỏi, câu trả lời.

Tăng tỷ lệ CTR (tỷ lệ nhấp chuột vào trang)

Giúp người dùng và Google hiểu rõ hơn về bài viết, nội dung trên website. Nhờ thế thứ hạng trong kết quả tìm kiếm tốt hơn, dễ được Google xếp hạng cao hơn.

Người dùng cảm thấy website thật chuyên nghiệp

Giúp khách hàng hiểu rõ hơn về sản phẩm, dịch vụ của website; nên đưa ra quyết định mua hàng hoặc lựa chọn sản phẩm, dịch vụ nhanh hơn…

Cách tạo FAQ Schema hiển thị trên Google

Thông thường bạn phải cài 1 plugin để tạo FAQ Schema. Nhưng với trình soạn thảo WordPress Gutenberg bạn có thể thao tác trực tiếp. Nhờ vào tính năng này mà nhiều người sử dụng trình soạn thảo WordPress Gutenberg

Bấm vào dấu + trong khung soạn thảo rồi gõ FAQ, bấm vào block Câu hỏi thường gặp FAQ

Nhập câu hỏi: Bạn nhập câu hỏi mà nhiều người quan tâm

Nhập câu trả lời cho câu hỏi: Bạn trả lời ngắn gọn khoản 2-3 dòng là đủ

Cứ thế bấm thêm câu hỏi và làm các bước tương tự

Cách trở về trình soạn thảo wordpress cổ điển

Nếu bạn không thích trình soạn thảo Gutenberg vì đã quá quen thuộc với trình soạn thảo WordPress cổ điển. Hoặc trình soạn thảo WordPress Gutenberg khiến bạn tốn nhiều thời gian để thao tác. Thật sự thì hiện tại Bảo chỉ thao tác trên block cổ điển. Vì thao tác từng block mất rất nhiều thời gian.

– Bạn chỉ cần cài plugin Classic Editor để quay lại trình soạn thảo củ.

– Hoặc có một cách đơn giản hơn là sử dụng plugin TinyMCE Advanced mà bạn đang dùng:

Settings – TinyMCE Advanced – Advanced Options, đánh dấu tick vào Replace the Block Editor with the Classic Editor sau đó save lại.

Thế là lại trở về trình soạn thảo WordPress quen thuộc rồi : )