Khi nội dung giới thiệu danh mục sản phẩm của bạn quá dài, thì việc hiển thị nó đôi khi không thực sự cần thiết. Đặc biệt là trên các thiết bị di động thì nó chiếm hết phần không gian đầu trang, khiến cho khách hàng kéo mãi vẫn chưa nhìn thấy sản phẩm đâu cả. Trong khi phần lớn những nội dung này chỉ để nhằm mục đích seo chứ chẳng khách hàng nào quan tâm.

Chẳng hạn trong một số lĩnh vực đặc thù như đồ gỗ nội thất, khách hàng chỉ muốn xem sản phẩm của bạn chứ không cần đọc mô tả danh mục. Thì ý tưởng ở đây là chúng ta sẽ chỉ cho hiển thị một phần nội dung và bên dưới có nút xem thêm. Nếu khách hàng thực sự muốn xem, họ sẽ click vào nút xem thêm, khi đó toàn bộ nội dung sẽ hiện ra.

Việc trình bày như vậy giúp website trông gọn gàng hơn và kích thích khách hàng tạo ra một hành động tương tác với trang web – đó là click xem thêm.

Code rút gọn nội dung mô tả danh mục sản phẩm Woocommerce

Trước khi sửa code, các bạn cần đọc kỹ lưu ý này:

1. Code này mình đang tạo với theme Flatsome nên nếu bạn dùng theme khác thì phải xem lại thuộc tính CSS cho chính xác thì nó mới hoạt động nhé.
2. Copy chính xác code bên dưới và paste vào file functions.php trong thư mục theme của bạn.
3. Nên dùng child theme để cập nhật main theme thoải mái mà không sợ bị lỗi.

Code đây:

/*
* Code thu gọn nội dung mô tả danh mục Woocommerce
*/

function dvp_readmore_button_woo($content){
	if(is_woocommerce() && (is_product_category() || is_product_tag())) {
	$content .= '<div class="dvp_readmore_woo"><span title="Xem thêm">Xem thêm <i style="padding-left:5px;margin-top:2px" class="icon-angle-down"></i></span></div>';
	}
	return $content;
}
add_filter( 'woocommerce_taxonomy_archive_description_raw', 'dvp_readmore_button_woo', 100 );
add_action('wp_footer','dvp_readmore_woocommerce_danh_muc');
function dvp_readmore_woocommerce_danh_muc() {
if(is_woocommerce() && (is_product_category() || is_product_tag())){
	?>
	<style>
		.shop-container > div.term-description {
			overflow: hidden;
			position: relative;
			max-height: 180px;
		}

		.dvp_readmore_woo {
			text-align: center;
			cursor: pointer;
			position: absolute;
			z-index: 2;
			bottom: 0;
			width: 100%;
			background: #fff;
			margin-left: -15px;
		}

		.dvp_readmore_woo:before {
			height: 55px;
			margin-top: -45px;
			content: "";
			background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
			background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
			background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
			filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff00', endColorstr='#ffffff', GradientType=0);
			display: block;
		}

		.dvp_readmore_woo span {
			color: #6c6d70;
			display: block;
			border: 1px solid;
			margin-left: auto;
			display: flex;
			width: 130px;
			margin-right: auto;
			text-transform: uppercase;
			text-align: center;
			justify-content: center;
			margin-bottom: 20px;
		}
	</style>
	<script>
		let xemThemButtonMore = document.querySelector(".dvp_readmore_woo");
		let xemThemNoiDung = document.querySelector(".term-description");
		const divInnerContentHeight = document.querySelector('.term-description').scrollHeight;
		let your_height = 150;
		if (divInnerContentHeight > your_height) {
			xemThemButtonMore.addEventListener("click", () => {
				xemThemNoiDung.style.maxHeight = "none";
				xemThemButtonMore.style.display = "none";
			})
		} else {
			xemThemNoiDung.style.maxHeight = "none";
			xemThemButtonMore.style.display = "none";
		};
	</script>
	<?php
	}
}

Có một số đoạn các bạn có thể tùy chỉnh theo ý mình nhé:

Đoạn .shop-container > div.term-description bạn có thể sửa thành .term-description để chắc chắn đoạn code trên sẽ hoạt động với bất kỳ theme nào, miễn là sử dụng Woocommerce thì phần nội dung mô tả danh mục sản phẩm sẽ nằm trong thẻ này.

Đoạn max-height: 180px là chiều cao của phần nội dung được hiển thị tính từ trên xuống. Bạn có thể sửa 180px thành một con số khác tùy thích. Nếu độ dài của nội dung lớn hơn 180px thì nó sẽ tự ẩn phần nội dung phía dưới.

Đoạn let your_height = 150 quy định là kích thước chiều cao đoạn nội dung dùng để so sánh. Nếu nội dung mô tả danh mục sản phẩm Woocommerce của bạn lớn hơn con số này thì phần nội dung thừa ra sẽ bị ẩn đi và thay bằng nút Xem thêm.

Bạn nào làm chưa được có thể để lại website bên dưới phần bình luận, mình sẽ hỗ trợ nhé.

Tương tự, nếu muốn thu gọn nội dung mô tả của trang sản phẩm chi tiết thì bạn có thể sử dụng code trong bài viết này.

• Sắp xếp mặc định (thứ tự tùy chỉnh + tên)
• Mức độ phổ biến (dựa trên doanh số – số lượng đơn hàng bán được)
• Đánh giá trung bình (dựa trên điểm đánh giá dưới phần đánh giá sản phẩm)
• Sắp xếp theo gần đây nhất (hiển thị sản phẩm từ mới đến cũ)
• Sắp xếp theo giá tăng dần (hiển thị sản phẩm giá thấp đến cao)
• Sắp xếp theo giá giảm dần (hiển thị sản phẩm giá cao đến thấp)

Tùy chỉnh tại: Woocommerce > Settings > Products > Display

Nếu bạn muốn thêm sắp xếp theo thứ tự ngẫu nhiên (random) thì bạn phải chèn thêm code sau vào file functions.php trong theme đang sử dụng:

// Shop random order. View settings drop down order by Woocommerce > Settings > Products > Display
add_filter( 'woocommerce_get_catalog_ordering_args', 'custom_woocommerce_get_catalog_ordering_args' );
function custom_woocommerce_get_catalog_ordering_args( $args ) {
    $orderby_value = isset( $_GET['orderby'] ) ? woocommerce_clean( $_GET['orderby'] ) : apply_filters( 'woocommerce_default_catalog_orderby', get_option( 'woocommerce_default_catalog_orderby' ) );
    if ( 'random_list' == $orderby_value ) {
        $args['orderby'] = 'rand';
        $args['order'] = '';
        $args['meta_key'] = '';
    }
    return $args;
}
add_filter( 'woocommerce_default_catalog_orderby_options', 'custom_woocommerce_catalog_orderby' );
add_filter( 'woocommerce_catalog_orderby', 'custom_woocommerce_catalog_orderby' );
function custom_woocommerce_catalog_orderby( $sortby ) {
    $sortby['random_list'] = 'Random';
    return $sortby;
}

Chúc các bạn thành công

Hướng dẫn:

• Bước 1: Sửa file functions.php của giao diện (theme) bạn đang sử dụng.
• Bước 2: Dán mã code dưới đây vào cuối tệp và lưu lại.
• Bước 3: Truy cập trang Admin vào Bài viết (Post) để thưởng thức.

Code:

// Thêm cột ảnh đại diện trong trang quản trị danh sách bài viết
add_filter('manage_post_posts_columns', 'dvp_post_avatar_column');
function dvp_post_avatar_column($column_array) {
	$thumb_size = get_option('thumbnail_size_w');
	$post_avatar_width = intval($thumb_size) + 50;
	$cb_key = array_search('cb', array_keys($column_array));
	$column_array = array_slice($column_array, 0, $cb_key+1, true) +
	array('post_avatar' => 'Avatar') +
	array_slice($column_array, $cb_key+1, null, true);
	echo '<style>.column-post_avatar {width:' . $post_avatar_width . 'px;}</style>';
	return $column_array;
}
add_action('manage_posts_custom_column', 'dvp_render_the_column', 10, 2);

function dvp_render_the_column($column_name, $post_id) {
	if ($column_name == 'post_avatar') {
	$thumb_id = get_post_thumbnail_id($post_id);
	if ($thumb_id) {
	echo '<img data-id="' . esc_attr($thumb_id) . '" src="' . esc_url(wp_get_attachment_url($thumb_id)) . '" style="width:40px!important;height:40px!important;border-radius:6px;" />';
	} else {
	echo '<span class="dashicons dashicons-admin-media" style="font-size: 2.5rem;"></span>';
	}
	}
}

Đối với custom post type các bạn thay chữ post thành tên post type là được nhé.

Khi nội dung của bạn quá dài thì việc hiển thị toàn bộ nội dung mô tả đôi khi không thực sự cần thiết. Chẳng hạn trong một số lĩnh vực đặc thù như đồ gỗ nội thất, khách hàng chỉ cần xem ảnh, giá sản phẩm và một số thông tin cơ bản là đủ để họ đưa ra quyết định liên hệ hoặc đặt hàng.

Ý tưởng ở đây là chúng ta sẽ chỉ cho hiển thị một phần nội dung và bên dưới có nút xem thêm. Nếu khách hàng thực sự muốn xem, họ sẽ phải click vào nút xem thêm, khi đó toàn bộ nội dung sẽ hiện ra.

Việc trình bày như vậy giúp website trông gọn gàng hơn và kích thích khách hàng tạo ra một hành động tương tác với trang web – đó là click xem thêm.

Code rút gọn nội dung mô tả chi tiết sản phẩm Woocommerce

Trước khi sửa code, các bạn cần đọc kỹ lưu ý này:

1. Code chỉ làm việc với kiểu hiển thị nội dung mô tả sản phẩm chi tiết dưới dạng Tabs (là kiểu hiển thị mặc định của Woocommerce). Trên một số theme (ví dụ Flatsome) có tùy chọn hiển thị Product Tabs theo nhiều kiểu khác (chẳng hạn Sections hoặc Accordion) thì code này sẽ không hoạt động.
2. Copy chính xác code bên dưới và paste vào file functions.php trong thư mục theme của bạn.
3. Nên dùng child theme để cập nhật main theme thoải mái mà không sợ bị lỗi.

Code:

/*
* Code rút gọn nội dung mô tả chi tiết sản phẩm Woocommerce
*/

function dvp_readmore_button_woo($content){
	if (is_product()){
	$content .= '<div class="dvp_readmore_woo"><span title="Xem thêm">Xem thêm</span></div>';
	}
	return $content;
}
add_filter( 'the_content', 'dvp_readmore_button_woo', 100 );

add_action('wp_footer','dvp_readmore_woocommerce');
function dvp_readmore_woocommerce(){
	if (is_product()){
	?>
	<style>
		.single-product div#tab-description {
			overflow: hidden;
			position: relative;
			max-height: 600px;
		}

		.dvp_readmore_woo {
			text-align: center;
			cursor: pointer;
			position: absolute;
			z-index: 9999;
			bottom: 0;
			width: 100%;
			background: #fff;
		}

		.dvp_readmore_woo:before {
			height: 55px;
			margin-top: -45px;
			content: "";
			background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
			background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
			background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
			filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff00', endColorstr='#ffffff', GradientType=0);
			display: block;
		}

		.dvp_readmore_woo span {
			color: #6c6d70;
			display: block;
			border: 1px solid;
			margin-left: auto;
			display: flex;
			width: 130px;
			margin-right: auto;
			text-transform: uppercase;
			text-align: center;
			justify-content: center;
		}
	</style>
	<script>
		let xemThemButtonMore = document.querySelector(".dvp_readmore_woo");
		let xemThemNoiDung = document.getElementById("tab-description");
		const divInnerContentHeight = document.querySelector('.woocommerce-Tabs-panel--description').scrollHeight;
		let your_height = 599;
		if (divInnerContentHeight > your_height) {
			xemThemButtonMore.addEventListener("click", () => {
				xemThemNoiDung.style.maxHeight = "none";
				xemThemButtonMore.style.display = "none";
			})
		} else {
			xemThemNoiDung.style.maxHeight = "none";
			xemThemButtonMore.style.display = "none";
		};
	</script>
	<?php
	}
}

Có một số đoạn các bạn có thể tùy chỉnh theo ý mình nhé:

Dòng 21, đoạn max-height: 600px là kích thước phần nội dung được hiển thị tính từ trên xuống. Bạn có thể sửa 600px thành một con số khác.

Dòng 62, đoạn let your_height = 599 là kích thước chiều dài nội dung dùng để so sánh. Nếu nội dung mô tả sản phẩm Woocommerce của bạn dài hơn con số này thì phần nội dung thừa ra sẽ bị ẩn đi và thay bằng nút Xem thêm. Bạn chỉnh con số này nhỏ hơn 1px so với dòng 21 ở trên.

Bạn nào làm chưa được có thể để lại website bên dưới phần bình luận, mình sẽ hỗ trợ nhé.

Tương tự, nếu muốn thu gọn nội dung mô tả của danh mục sản phẩm Woocommerce thì bạn có thể sử dụng code trong bài viết này.

Bình thường, mỗi tài khoản có thể tùy chỉnh bật/tắt (cho phép hiển thị hoặc ẩn đi) những Widgets này bằng tính năng Tùy chọn hiển thị ở góc trên bên phải. Nhưng đây chỉ là tùy chỉnh cá nhân, dành cho từng user và không phải ai cũng biết điều này.

Trong bài viết này, mình chi sẻ đoạn code rất đơn giản giúp các bạn ẩn đi toàn bộ các Widgets này.

Xóa widget mặc định trong trang quản trị

Các bạn sửa file functions.php trong thư mục theme đang sử dụng và thêm vào đoạn code sau:

/**
 *  Remove WordPress Dashboard Widgets
 */
function dvp_remove_dashboard_widgets() {
	remove_action( 'welcome_panel','wp_welcome_panel' ); // Welcome Panel
	remove_meta_box( 'dashboard_primary','dashboard','side' ); // WordPress.com Blog
	remove_meta_box('dashboard_secondary','dashboard','side'); // Other WordPress News
	remove_meta_box( 'dashboard_plugins','dashboard','normal' ); // Plugins
	remove_meta_box( 'dashboard_right_now','dashboard', 'normal' ); // Right Now
	remove_meta_box('dashboard_quick_press','dashboard','side'); // Quick Press widget
	remove_meta_box('dashboard_recent_drafts','dashboard','side'); // Recent Drafts
	remove_meta_box('dashboard_recent_comments','dashboard','normal'); // Recent Comments
	remove_meta_box('dashboard_activity','dashboard', 'normal'); // Activity
	remove_meta_box('dashboard_site_health','dashboard','normal'); // WordPress Site Health
	remove_meta_box('dashboard_incoming_links','dashboard','normal'); //Incoming Links
	remove_action( 'try_gutenberg_panel', 'wp_try_gutenberg_panel'); // Try Gutenberg
}
add_action( 'wp_dashboard_setup', 'dvp_remove_dashboard_widgets' ); 

Đối với các bạn dùng Woocommerce thì thêm dòng này để ẩn cái Widget đánh giá của Woocommerce:

remove_meta_box('woocommerce_dashboard_recent_reviews','dashboard','side'); // Woocommerce Recent Reviews Widget

Đối với các bạn dùng plugin Rank Math thì thêm dòng này để ẩn cái Widget của Rank Math:

remove_meta_box('rank_math_dashboard_widget','dashboard','normal'); // Rank Math

Tương tự, bạn có thể xem danh sách tên các dashboard mặc định tại đây và muốn xóa cái nào thì copy chính xác tên của nó vào hàm remove_action tương ứng là được.

Đối với các bạn muốn dùng plugin, thì cài Widget Disable hoặc Ultimate Dashboard vào để tùy chỉnh nhé. Plugin này hỗ trợ kéo và thả rất tiện lợi, có thể giúp bạn sắp xếp lại trang quản trị WordPress trông chuyên nghiệp luôn.

Mình sử dụng thuật ngữ “xóa” nhưng thực tế nó chỉ đang “ẩn đi” thôi. Bất cứ lúc nào các bạn muốn hiển thị lại thì chỉ cần xóa code đi là được nhé.

Cách tạo Widget trong WP Dashboard

Sau khi ẩn hết những Widgets mặc định, trang Bảng tin của bạn sẽ trống trơn. Nếu bạn thiết kế website cho khách hàng thì có thể thêm một vài thông tin liên hệ hoặc ghi chú. Đây là ví dụ:

add_action( 'wp_dashboard_setup', 'dvp_dashboard_add_widgets' );
function dvp_dashboard_add_widgets() {
	wp_add_dashboard_widget( 'dvp_dashboard_widget_news', __( 'Giới thiệu chung', 'dvp' ), 'dvp_dashboard_widget_news_handler' );
}

function dvp_dashboard_widget_news_handler() {
	_e( 'Giao diện được thiết kế bởi Đỗ Văn Phương. Quý khách cần hỗ trợ vui lòng liên hệ theo thông tin dưới đây:', 'dvp' );
	_e( '<ul>', 'dvp' );
	_e( '<li>Điện thoại: (+84) 123-456-789</li>', 'dvp' );
	_e( '<li>Email: admin@dovanphuong.com</li>', 'dvp' );
	_e( '<li>Website: dovanphuong.com</li>', 'dvp' );
	_e( '</ul>', 'dvp' );
}

Trong WP-Admin nó sẽ trông như thế này:

Lưu ý rằng:

Trước khi chỉnh sửa file functions.php trong thư mục theme, hãy backup code trước để đảm bảo rằng nếu có bất kỳ sự cố nào xảy ra, bạn có thể khôi phục từ đầu.

Ví dụ nếu viết gạch prime 60×60 thì các bạn sẽ thấy chữ x kia sẽ tự động biến thành dấu nhân (×) khi hiển thị ở bên ngoài trang web. Về mặt hiển thị với người dùng thì không có vấn đề gì nhưng bởi vì chữ x và dấu nhân (×) là 2 ký tự khác nhau, hơn nữa người dùng tìm kiếm cũng thường nhập chữ x thay cho dấu nhân nên ý nghĩa trong seo là hoàn toàn khác nhau.

Khi tìm giải pháp cho vấn đề này, tôi phát hiện ra WordPress có tính năng tự động định dạng nội dung bài viết. Nó sẽ tự chuyển đổi các dấu ngoặc kép thẳng thành dấu ngoặc kép cong, dấu nháy đơn, dấu gạch ngang, dấu chấm lửng, biểu tượng nhãn hiệu và biểu tượng phép nhân… (wptexturize).

Đây là một tính năng khá hữu ích nhưng không phải quá cần thiết và trong trường hợp này của tôi các bạn cũng thấy nó trở thành một vấn đề không tốt cho seo. Giải quyết rất đơn giản bằng cách vô hiệu hóa nó đi. Thêm đoạn mã sau vào functions.php trong thư mục theme của bạn:

add_filter( 'run_wptexturize', '__return_false' );

Theo số liệu thống kê tính đến 17/03/2024, theme này đã bán được 234.978 key bản quyền – luôn dẫn đầu trong danh sách theme bán hàng bán chạy nhất trên Themeforest. Ngoài ra, số lượng website sử dụng trái phép (phiên bản nulled) không có thống kê nhưng tôi nghĩ chắc phải gấp hàng chục lần con số trên.

Trong khi hầu hết các nhà phát triển WordPress khác thiết kế nhiều theme dành cho đa mục đích sử dụng, đa lĩnh vực ngành nghề khác nhau, thì nhóm phát triển Flatsome chỉ tập trung vào xây dựng 1 theme duy nhất là Flatsome và tối ưu theme này cho mọi nhu cầu sử dụng.

Có nghĩa là, ngoài mục đích chính là làm website bán hàng Woocommerce, bạn cũng có thể tùy chỉnh Flatsome để làm web giới thiệu công ty, blog cá nhân, trang tin tức,… Tất cả đều được tối ưu để mang lại trải nghiệm người dùng tốt nhất.

Ưu điểm của Flatsome Theme

Với những bạn pro về WordPress hoặc đã dùng quen Flatsome rồi thì chắc không quan tâm phần này đâu. Bởi vậy mình sẽ tóm tắt một số điểm nổi bật của theme này cho những bạn mới:

1. Nhà phát triển UX Themes xây dựng sẵn một thư viện giao diện mẫu (Flatsome Studio) bao gồm hàng trăm template trình bày Sản phẩm, Danh mục, Bài viết, Mega Menu, Banners, Sliders, Contact Form, Testimonials, Logo đối tác, Footer,… nói chung là gần như đầy đủ mọi thứ cho một website bình thường. Chỉ cần 1 click chuột import là bạn có ngay một bản sao (giống y hệt) của demo trên web của mình.
2. Việc tùy chỉnh bố cục, nội dung các thành phần trên website (bao gồm cả header và footer) trở nên cực kỳ dễ dàng với UX Builder – công cụ trình bày nội dung trực quan hỗ trợ kéo, thả với các layout được lập trình sẵn trong theme. Bạn không biết code vẫn có thể tạo ra một trang web hoàn toàn responsive.
3. Code được tối ưu tốt cho seo, có sẵn lazy load ảnh, preload trang, tốc độ tải cực nhanh.
4. Tích hợp sẵn để tương thích với 2 plugin seo tốt nhất hiện nay là Yoast SEO và Rank Math.
5. Trên trang chủ UX Themes có hướng dẫn sử dụng cực kỳ chi tiết. Ngoài ra, cộng đồng người dùng theme Flatsome ở Việt Nam rất đông đảo, có nhiều blog chia sẻ các đoạn code dùng riêng cho Flatsome vô cùng tiện ích.
6. Chỉ cần biết cơ bản về HTML và CSS thì bạn có thể tinh chỉnh gần như là mọi thứ về giao diện.

Nói chung để biết theme bán hàng này tuyệt vời như thế nào thì tốt nhất bạn tự tải về cài đặt rồi trải nghiệm. Hoặc bạn có thể tham khảo một số mẫu website làm từ Flatsome sau đây:

• dogothanhtung.vn
• dogophamgia.com
• xuonggoanlac.com
• dogongocanh.vn
• khacdauviettin.com
• viettinlaw.com
• bacsihien.com

Báo cáo của BuiltWith (ngày 27/03/2024) cho thấy họ đã thống kê được khoảng 1.252.175 trang web từng sử dụng Flatsome Theme và hiện tại vẫn còn 665.876 trang web đang hoạt động. Trong đó có khoảng 78.282 website đặt máy chủ tại Việt Nam. Đây là theme wordpress được sử dụng nhiều nhất tại Việt Nam hiện nay.

Download Theme Flatsome mới nhất

Kể từ thời điểm ra mắt lần đầu tiên năm 2013 cho đến nay, theme này đã trải qua hàng trăm lần cập nhật lớn nhỏ khác nhau nên để không bị mất các thay đổi sau mỗi lần cập nhật lên phiên bản mới thì các bạn nên tạo child-theme để sử dụng.

Nhà phát triển đã cho ra mắt phiên bản Flatsome v3.18.0 ngày 08/11/2023 có thể coi là Big Update với hàng loạt tính năng mới, đồng thời vẫn tập trung vào cải thiện hiệu suất. Nổi bật nhất là chính năng phân trang cho bài viết (Blog Posts) có thêm tùy chọn AJAX. Điều mà trước đây anh em phải tự code thêm js làm giảm tốc độ của website. Và tính năng lấy mã màu nhanh trong Block Editor.

Phiên bản Flatsome v3.18.7 là bản cập nhật, sửa lỗi giúp theme này ngày càng trở nên hoàn hảo hơn trong mắt người dùng.

Lưu ý rằng:

Bản cập nhật mới này yêu cầu bạn đang sử dụng WordPress phiên bản từ 5.9.0 trở lên và WooCommerce cũng phải từ phiên bản 4.7.0 trở lên. Tốt nhất là bạn nên duy trì thường xuyên cập nhật WordPress và WooCommerce lên các phiên bản mới nhất để tăng hiệu suất và bảo mật cho website.

Công cụ Eyedropper chỉ hoạt động với giao thức https hoặc trên localhost, có hỗ trợ cho trình duyệt Chrome và Edge.

Nếu bạn chỉnh sửa nội dung bằng UX Builder thì nó cũng cần nhiều RAM với CPU hơn, nói chung là chậm hơn so với trước đây. Nhưng điều này chỉ ảnh hưởng đến quản trị viên website còn bên ngoài frontend hiệu suất website vẫn tốt, khách hàng load web nhanh như một cơn gió.

Flatsome v3.18.7 Full Changelog

--- 3.18.7 (18.04.24) ---
NEW: WooCommerce 8.8 compatibility.
NEW: Added new .l10n.php translation file format.
ENHANCEMENT: Improved mini cart drawer rendering performance.
FIXED: Element pagination with offset value produced incorrect results.
FIXED: Free shipping bar did not consider "Apply minimum order rule before coupon discount" option and always applied minimum order rule before coupon logic.
UPDATED: Language files.

--- 3.18.6 (20.03.24) ---
NEW: WooCommerce 8.7 compatibility.
FIXED: Corrected lightbox menu item text in admin bar options to 'Drawer & Lightbox'.
UPDATED: Google Fonts list.
UPDATED: Language files.

--- 3.18.5 (16.03.24) ---
NEW: Added a button to clear typography cache and locally downloaded files.
FIXED: Addressed an issue where locally served font files were returning 403 errors in some cases due to irregular Google font API responses.
FIXED: Image lazy loading on WC Composite components.
FIXED: Hotspot tooltip on a mobile device.
CHANGED: Upgraded the format of font files to woff2 from woff.
UPDATED: Language files.

--- 3.18.4 --- (16.02.24)
NEW: WooCommerce 8.6 compatibility.

ENHANCEMENT: Added check for global $product object existence in flatsome_sticky_add_to_cart_template function.
ENHANCEMENT: Improved WPML configuration.

FIXED: Improved handling of non-existent attachment images.
FIXED: Shop category header title color with dark content.
FIXED: Undefined array key "limit" PHP warning in some cases.

UPDATED: Google Fonts list.
UPDATED: Language files.

--- 3.18.3 --- (09.01.24)
NEW: WooCommerce 8.5 compatibility.

ENHANCEMENT: Free shipping bar was displayed when only virtual products were in the cart.
ENHANCEMENT: Header newsletter title setting stays now visible if a custom block is chosen.
ENHANCEMENT: Improved mini cart loading state styles.
ENHANCEMENT: Improved shortcode image detection for sitemap.
ENHANCEMENT: Mini cart qty input improvements.
ENHANCEMENT: Sticky add to cart only consider the first visible Add to Cart button as intersection.
ENHANCEMENT: Various CSS improvements.

FIXED: Free shipping threshold currency conversion issue in some cases.

UPDATED: Language files.

--- 3.18.2 --- (28.11.23)
ENHANCEMENT: Mini Cart Quantity: Automatically remove items from the cart when their quantity is reduced to zero.
ENHANCEMENT: Mini Cart Quantity: Validation for user manual input.
ENHANCEMENT: Refined the description of the 'maintenance bypass key' option for better understanding.
ENHANCEMENT: Various CSS improvements.

FIXED: Altered Widget link color and link color hover settings, they no longer target the mini cart widget.
FIXED: AJAX 'Add to Cart': Enhanced compatibility with different plugins to prevent conflicts.
FIXED: Rectified the width issue of Login lightbox with register panel layout.
FIXED: Corrected the improper display of Mobile product sidebar on certain product layouts.
FIXED: Show Page Layout widget in Classic Editor when Block Editor is disabled for pages.

DEV: Added flatsome_is_blog_archive filter.
DEV: Added flatsome_is_shop_archive filter.
DEV: Recommended PHP version 8.1 or higher (8.0 EOL) for better performance and security.

--- 3.18.1 (13.11.23) ---
ENHANCEMENT: Made theme colors available through theme CSS custom properties (see note).
ENHANCEMENT: Various CSS improvements.

FIXED: Ajax add to cart with 'Any...' variation setup.
FIXED: Images weren't imported correctly from Flatsome Studio in some cases.
FIXED: An error occurred in the Page Layout section in the Block Editor in some cases.
FIXED: Mini cart content after Pjax filtering.

UPDATED: Language files.

Note: In certain cases, such as when WP Global styles were disabled by a performance plugin, custom theme colors defaulted to their original values.

--- 3.18.0 (08.11.23) ---
NEW: WooCommerce 8.3 compatibility.
NEW: Debuting tailored Pjax functionality. Facilitates ajax-driven navigation & filtering (optional).
NEW: Shop: AJAX for product category widget, filter widgets & sorting (optional).
NEW: Builder: Color Eyedropper tool for effortless screen color picking.
NEW: Scroll to the top after Pjax navigation option.
NEW: Mini cart: Quantity input (ajax-driven) option.
NEW: Mini cart: Free shipping bar option.
NEW: Mini cart: Empty cart icon & return to shop button.
NEW: Mini cart drawer: Show cross-sells option.
NEW: Mini cart drawer: Sticky footer option.
NEW: Cart: Free shipping bar option.
NEW: Checkout: Free shipping bar option.
NEW: Added advanced menu section 'Content Delivery'.
NEW: Blog pagination type choice (Normal/AJAX).
NEW: WooCommerce pagination type choice (Normal/AJAX/Infinite scroll).
NEW: Blog posts element pagination (pagination links, load more, prev/next) on row, masonry & grid layout.
NEW: Blog posts element pagination alignment.
NEW: Blog posts element pagination ID and Class field.
NEW: Blog posts element pagination position.
NEW: Products element pagination (pagination links, load more, prev/next) on row, masonry & grid layout.
NEW: Products element pagination alignment.
NEW: Products element pagination ID and Class field.
NEW: Products element pagination position.
NEW: FAQ schema support to accordions, for improving SEO and search result visibility (optional).
NEW: Lottie scroll action type option (seek, play, playOnce).
NEW: Single product gallery type option (slide, fade).
NEW: Custom accordion anchor.
NEW: Custom tab anchors.
NEW: Maintenance mode: Body class.
NEW: Maintenance mode: Bypass by key.
NEW: Maintenance mode: Exclude by role (default).
NEW: Option to display WhatsApp among the Header Contact fields.
NEW: Option to set Off-canvas / Drawer width.
NEW: Option to set Off-canvas Cart Drawer width.
NEW: Select theme colors in the Block Editor.
NEW: Shop catalog ordering enable/disable option.
NEW: Shop catalog result count enable/disable option.
NEW: Smoother theme scroll-to animation.
NEW: Title link rel option.
NEW: Title link target option.
NEW: Tooltip color & background color options.
NEW: UX Blocks admin category filter and column.
NEW: Added 2 header block slots.
NEW: Bullet list cross icon.
NEW: X (social media) icon.
NEW: X follow link option.
NEW: X share link option.

PERFORMANCE: Optimized code execution for global Ajax requests.

ENHANCEMENT: Added 'Manage your licenses' link in the setup wizard register step.
ENHANCEMENT: Added all theme icons in the builder icon value dropdown.
ENHANCEMENT: Added comments template to all page templates.
ENHANCEMENT: AJAX add to cart scroll to notice on notice.
ENHANCEMENT: Changed mini cart heading tag from h4 to span.
ENHANCEMENT: If using lightbox login, notices will now show inside the lightbox login/register form.
ENHANCEMENT: Improved shop swatch reset limited reset logic.
ENHANCEMENT: Improved the theme logo in the backend.
ENHANCEMENT: Improved various customizer options visibility (hiding options that depend on other settings).
ENHANCEMENT: Improved WooCommerce notices on transparent header.
ENHANCEMENT: Improved WPML configuration.
ENHANCEMENT: Quantity button alignment in shop loop products.
ENHANCEMENT: Remove the default sliding animations on off-canvas buttons.
ENHANCEMENT: Removed title attribute from WooCommerce gallery images to prevent the display of image filenames in the native tooltip.
ENHANCEMENT: Sticky add to cart functionality for stacked layouts.
ENHANCEMENT: Support iframed Block Editor.
ENHANCEMENT: Swatches/shop: Improved cache clearance.
ENHANCEMENT: Use custom CSS properties for theme colors.
ENHANCEMENT: Various customizer options are reordered more logically.
ENHANCEMENT: Builder: Improved layout when php notices appear.
ENHANCEMENT: Various CSS improvements.

FIXED: B2B for WooCommerce Ajax add to cart product pricing.
FIXED: Vertical menu dropdown not same height as fly out on Safari.
FIXED: Blog posts excerpt trimming issue to ensure accurate length and avoid duplicate ellipses.
FIXED: Ensure Flickity is initialized before attempting to destroy.
FIXED: Header HTML slots did not render shortcode in preview in some cases.
FIXED: hide-for-small & hide-for-medium classes did not take effect in drawers.
FIXED: List item indentation in UX Block menu dropdown.
FIXED: PHP 8.2 deprecations.
FIXED: Position of slider arrows (circle/outside style) and its reveal animation.
FIXED: Review count on related and upsell products on a single product page.
FIXED: Swatches/shop: out-of-stock class added when only one variation was out of stock.
FIXED: Theme file editor: Prevented false positive syntax error in header cart element template.
FIXED: Updated and renamed old quick view hooks with flatsome prefix.
FIXED: WooCommerce translation domain name was used in portfolio templates on some strings.
FIXED: UX Blocks admin menu item text for adding a new block.
FIXED: Banner: Sticky option did not function.
FIXED: Live search results RTL styling.

CHANGED: Infinite scroll button string changed to 'Load more'.
CHANGED: Infinite scroll settings are moved to 'Content Delivery' section.
CHANGED: Removed noreferrer from rel attributes on blank targets.
CHANGED: Sticky add to cart now utilizes a separate template.

DEV: Added experimental_flatsome_pjax filter.
DEV: Added experimental_flatsome_pjax_enabled filter.
DEV: Added flatsome_after_mini_cart_contents action.
DEV: Added flatsome_after_mini_cart_cross_sells action.
DEV: Added flatsome_after_mini_cart_empty_message action.
DEV: Added flatsome_after_single_product_lightbox action.
DEV: Added flatsome_before_mini_cart_cross_sells action.
DEV: Added flatsome_before_mini_cart_empty_message action.
DEV: Added flatsome_before_mini_cart_total action.
DEV: Added flatsome_before_single_product_lightbox action.
DEV: Added flatsome_html_atts filter.
DEV: Added flatsome_maintenance_mode filter (filterable access mode).
DEV: Added flatsome_relay_classes filter.
DEV: Added flatsome_relay_control_classes filter.
DEV: Added flatsome_relay_pagination_args filter.
DEV: Added flatsome_shipping_free_shipping_threshold filter.
DEV: Added flatsome_show_mini_cart_item_quantity filter.
DEV: Added flatsome_single_product_lightbox_product_gallery action.
DEV: Added flatsome_single_product_lightbox_summary action.
DEV: Added flatsome_swatches_box_display_min_count filter.

Note: Minimum required WP version 5.9.0.
Note: Eyedropper tool operates only in secure 'https' contexts or on localhost, with support for Chrome and Edge browsers.
Note: WooCommerce result count and catalog ordering will display even if removed (by code) in the shop by their old actions. Use the new UI options in the product catalog section to re-disable them if desired.

Lưu ý khi cập nhật Flatsome theme lên 3.18.7

Đây là lời khuyên của mình dành cho các bạn không nắm quá nhiều kĩ thuật về code, ít nhất là đọc hiểu lỗi khi debug. Nếu website của bạn xây dựng từ các phiên bản Flatsome cũ hơn (từ 3.15.7 trở xuống) thì lưu ý nhé.

Bởi vì từ bản update 3.16.0 (ngày 15/09/2022) của Flatsome thay đổi rất nhiều core + template, chính vì vậy nếu như các bạn cảm thấy website mình cần phải update lên 3.16 để sử dụng các tiện ích mở rộng của Flatsome thì hãy update. Còn không thì mình khuyên đừng update, hoặc thuê 1 bạn kỹ thuật vào fix các lỗi từ template.

Vừa rồi mình thử update lên flatsome bản 3.16 thì 1 số shortcode mình viết mới (dựa trên core của flatsome) đã không chạy và báo lỗi. Mình đã vào file core đọc và update lại cho shortcode của mình.

Thấy cải tiến của nó có nhiều cái lợi nhưng vẫn có kha khá cái bất cập. Đáng ra thì nó nên làm theo dạng extension, nhưng không, nó thay core luôn.

Các bạn trước đây đã từng custom template của nó thì đừng hoang mang khi update nhé, hãy vào core đọc và tra cứu xem những thay đổi trong template (Hoặc đơn giản hơn là bật debug lên xem) rồi thay bằng core mới là được.

Thời gian gần đây hàng loạt website dùng theme Flatsome bị lỗi font chữ, và tất cả có đặc điểm chung là dùng Google Fonts. Nên phiên bản Flatsome 3.18.6 mới được cập nhật này chủ yếu sửa lỗi font từ Google các bạn nhé.

Sau khi update hãy: Clear all cache, vào lại Flatsome > Theme Options > Style > Typography tắt bỏ Google CDN đi nếu muốn dùng local. Rồi lưu lại là được nhé. Nếu vẫn không được thì hãy vào wp-content/fonts/ xoá folder font của bạn đi để flatsome tải font mới về

Hướng dẫn cài đặt Flatsome Theme

Ban đầu mình nghĩ nếu các bạn đã biết đến theme này thì gần như 100% sẽ biết cách cài đặt và sử dụng như thế nào rồi, nên mình không viết thêm phần hướng dẫn nữa. Nhưng thật bất ngờ là vẫn có một số bạn liên hệ hỏi mình tại sao không cài được, cài bị lỗi,…

File theme mình chia sẻ trong bài viết này là bản gốc tải về từ ThemeForest. Khi các bạn tải về thì phải giải nén ra vì bên trong nó có nhiều thư mục con nữa:

Bên trong thư mục Assets là các thư mục chứa Fonts, icons, mẫu thiết kế logo, banner,…

Documentation: Hướng dẫn cài đặt và tùy chỉnh theme Flatsome.

Dummy data: Dữ liệu mẫu.

Thư mục Theme Files là nơi chứa file cài đặt các bạn nhé. Bên trong nó sẽ có 2 file nén ở định dạng ZIP có tên như sau:

flatsome-3.18.7.zip

Các bạn dùng file này để cài đặt và cập nhật theme Flatsome của web. Hiện tại phiên bản mới nhất là 3.18.7 nên file nó sẽ có tên như vậy, tương lai nhà phát triển cập nhật các phiên bản mới hơn thì nó sẽ có tên flatsome-3.18.8.zip, flatsome-3.18.9.zip, flatsome-3.18.10.zip,… kiểu như vậy đó các bạn.

Với các bạn cài web mới thì cứ dùng file này để cài theme như bình thường.

Với các website đang chạy mà muốn cập nhật lên dùng phiên bản Flatsome mới nhất, thì các bạn chỉ cần giải nén file này ra sẽ được thư mục tên là flatsome (code trong này là phiên bản mới nhất). Sau đó upload tất cả code này lên ghi đè vào thư mục theme đang dùng là được.

flatsome-child.zip

Đây là file để cài đặt theme con. Nó sẽ kế thừa toàn bộ các đặc điểm, chức năng của theme cha (Parent Theme) và mình cũng khuyên các bạn nên dùng child-theme để khi cập nhật theme không bị mất đi các chỉnh sửa trước đó.

Nếu là lần đầu tiên cài đặt web thì dùng file này để cài đặt theme con thủ công. Tuy nhiên các bạn cũng có thể bỏ qua vì trong trình hướng dẫn cài đặt Flatsome (Setup Wizard) thì bạn cũng có thể tự động tạo ra child-theme.

Nếu web bạn đang hoạt động và chỉ muốn cập nhật Flatsome theme lên phiên bản mới nhất thì không cần quan tâm đến file này. Chỉ khi Flatsome có những lần nâng cấp lớn, sửa đổi core, mà trong child-theme các bạn có dùng các code cũ thì mới phải sửa lại code cũ cho phù hợp.

Các file chia sẻ theme Flatsome trên mạng đều dính Shell?

Thực tế nếu các bạn tải theme Flatsome từ các nguồn không đủ uy tín đều có khả năng dính shell vì bộ mã nguồn của theme có tới gần 2000 files nên rất khó để biết kẻ xấu có chèn mã độc hay không. Giải pháp duy nhất chúng ta có thể làm là hạn chế nguy cơ bị dính mã độc bằng cách kiểm tra cẩn thận trước khi sử dụng bằng cách quét mã độc bằng virustotal và plugin Wordfence.

File theme Flatsome mình chia sẻ ở đây là mua chung của 1 nhóm bạn. Mình đã sử dụng và chia sẻ nhiều năm nay chưa bao giờ có sự cố gì nên các bạn có thể hoàn toàn yên tâm sử dụng.

Ngoài ra, có thể trong file functions.php của theme đã được chèn thêm 1 đoạn code lách bản quyền như sau:

update_option( get_template() . '_wup_purchase_code', 'ZqihUGpp-MjNr-oKco-hRit-PbJXLeLwwAqW' );
update_option( get_template() . '_wup_supported_until', '31.08.2077' );
update_option( get_template() . '_wup_buyer', 'Licensed' );
update_option( get_template() . '_wup_sold_at', time() );
delete_option( get_template() . '_wup_errors', '' );
delete_option( 'flatsome_wupdates', '');

Nếu bạn thấy chưa có thì có thể tự chèn thêm code này vào để kích hoạt bản quyền theme Flatsome nhé.

Sau khi cài đặt và tùy chỉnh mọi thứ trên website thì các bạn có thể xóa đoạn code này khỏi file functions.php để tối ưu hơn tốc độ cho trang web. Bởi vì Flatsome sử dụng API để kiểm tra License key định kỳ theo cronjob. Khi đặt mã này trong functions.php thì khi bất kỳ một tương tác nào đến website là nó sẽ liên tục cập nhật vào database.

Tất nhiên nếu xoá code này đi thì theme sẽ trở thành chưa được kích hoạt. Bạn sẽ nhìn thấy thông báo yêu cầu license key hiển thị trong trang quản trị. Và tính năng Flatsome Studio sẽ không dùng được nên bạn không thể import demo mới. Lúc nào cần thì lại sửa file functions.php và thêm lại đoạn code trên để kích hoạt theme thì sẽ dùng được Flatsome Studio như bình thường.

Tải về: Theme Flatsome v3.18.7

Pass giải nén: dovanphuong.com (nếu có)

Phiên bản cũ hơn: flatsome-v3.15.7.zip (bản này khá ổn định, nếu đang dùng tốt các bạn không cần thiết phải nâng cấp lên phiên bản mới nhất đâu)

Đây là bản đã kích hoạt sẵn bản quyền rồi nên bạn chỉ việc tải về và dùng thôi.

Quá bất tiện đúng không! Vấn đề sẽ được giải quyết rất đơn giản chỉ với vài dòng code.

Giải pháp 1: Sử dụng Plugin

Đây là cách đơn giản nhất, các bạn không cần biết code, chỉ cần cài plugin là được.

https://wordpress.org/plugins/wc-product-author/

Và giờ bạn sẽ thấy cột tác giả trong trang quản lý sản phẩm:

Giải pháp 2: Chèn code vào theme

Bạn mở file functions.php trong thư mục theme đang sử dụng và thêm vào đoạn code sau:

function dvp_add_author_woocommerce() {
	add_post_type_support( 'product', 'author' );
	}
add_action( 'after_setup_theme', 'dvp_add_author_woocommerce' );

Lưu ý là nên dùng child theme để tránh bị mất code mỗi khi update theme nhé.

Tôi đã từng dùng Genesis, Astra, OceanWP, Avada, X theme, Divi, MyThemeShop, và nhiều theme khác. Nhưng không nhà phát triển nào mang lại trải nghiệm tốt như GeneratePress đã làm.

Tôi cho rằng GeneratePress hiện là theme tốt nhất để làm blog, trang giới thiệu công ty hoặc site bán hàng đơn giản mà không cần biết nhiều về code. Tất nhiên nếu bạn đủ trình và không tiếc thời gian thì hoàn toàn có thể tạo ra những website “màu mè” và “chuyên nghiệp” theo ý muốn. Nhưng đó là phạm trù khác rồi. Còn trong phạm vi bài viết này, tôi sẽ cho bạn những lý do thuyết phục để bạn thấy những lời khẳng định của tôi về GeneratePress hoàn toàn không phải là nói phét.

Đánh giá GeneratePress Theme

Đây là một theme hoàn toàn miễn phí, bạn có thể tại về tại đây:

https://vi.wordpress.org/themes/generatepress/

Tính đến tháng 10/2021, chủ đề này đã có gần 3.700.000 lượt tải với hơn 400.000 website đang sử dụng. Đến 27/12/2022, theme này đạt 4.582.635 lượt tải, đủ để thấy sức hấp dẫn của nó lớn như thế nào. Điểm đánh giá gần như tuyệt đối 5/5 sao đứng đầu trên bảng xếp hạng của WordPress.

Theme này được thiết kế tập trung vào tốc độ và hiệu năng nên code rất nhẹ. Có thể coi nó là một trong những chủ đề WordPress nhẹ nhất hiện nay. Nó hoàn toàn tương thích với Gutenberg và các plugin Page Builder phổ biến như Beaver Builder hay Elementor nên bạn hoàn toàn có thể tạo ra những website chuyên nghiệp theo ý muốn.

Các tính năng nổi bật

1. SITE LIBRARY: Đây là thư viện demo có sẵn để bạn tham khảo. Nếu thích giao diện nào thì bạn chỉ cần import với 1 click chuột, blog của bạn sẽ giống hệt demo. Từ đó bạn sẽ tiết kiệm được rất nhiều thời gian tùy chỉnh và tối ưu.
2. COLORS: Đây là phần tùy chỉnh màu sắc cho trang web của bạn. Bao gồm hơn 60 đối tượng khác nhau như màu sắc của menu, tiêu đề, nội dung, link, button,…
3. TYPOGRAPHY: Đây là phần quản lý font chữ cho web, được tích hợp sẵn hơn 70 fonts phổ biến. Nhưng chỉ một số ít font có hỗ trợ tiếng Việt thôi.
4. ELEMENTS: Một hệ thống hook thông minh giúp bạn tùy chỉnh các đối tượng và bố cục website mà không cần can thiệp vào code theme.
5. DISABLE ELEMENTS: Bạn có thể tắt (không cho hiển thị) một đối tượng bất kỳ như header, menu, tiêu đề hoặc footer. Đây là tính năng rất hay của GeneratePress Theme giúp bạn tùy chỉnh cho từng bài viết hoặc trang.
6. WOOCOMMERCE: Cài đặt màu sắc, font chữ và bố cục cho WooCommerce. Nếu bạn định làm web bán hàng bằng GeneratePress thì giao diện có sẵn khá là cơ bản. Nó phù hợp với những ai thích phong cách tối giản, không “màu mè”.
7. MENU PLUS: Các tính năng nâng cao cho Menu của bạn. Ví dụ sticky menu, tùy chỉnh menu logo, mobile header, off-canvas navigation,…
8. SPACING: Quản lý khoảng cách giữa các đối tượng, giúp bạn căn chỉnh header, nội dung, widgets, và sidebar.
9. BLOG: Các tùy chỉnh cho phần bài viết (Posts) trên website.
10. SECONDARY NAV: Menu thứ hai với các tùy chọn giống như menu chính.
11. BACKGROUNDS: Quản lý ảnh nền cho các đối tượng trên trang web.
12. SECTIONS: Tạo các phân vùng nội dung độc lập.
13. COPYRIGHT: Quản lý nội dung thông báo bản quyền dưới footer của website.
14. IMPORT/EXPORT: Nhập và xuất các tùy chọn cài đặt của theme.

Cộng đồng người dùng GeneratePress đã dịch theme này sang hơn 25 ngôn ngữ, trong đó có cả tiếng Việt nên rất dễ sử dụng.

Download GeneratePress Premium

Để sử dụng được tất cả các tính năng nâng cao của theme này, bạn cần đến plugin GeneratePress Premium. Phiên bản mới nhất của nó là 2.3.1 được phát hành ngày 30 tháng 03 năm 2023. Bạn chỉ cần tải về và kích hoạt là xong.

Xem thêm cách cài đặt Plugin cho WordPress nếu bạn chưa biết nhé.

== Changelog ==
v2.3.1
* Fix: SelectSearch component infinite loop
* Fix: Block widths inside Block Elements

v2.3.0
* Feature: Add Search Modal Element type
* Fix: Inline post meta feature in GenerateBlocks 1.7
* Fix: Close "Choose Element Type" modal with ESC key
* Fix: Replace WooCommerce secondary image attachment size
* Fix: WP Filesystem error missing credentials
* Fix: Undefined array keys in dynamic Container URL
* Fix: Author avatar in Header/Block Element titles
* Fix: Infinite loop error when autosaving with dynamic content block
* Fix: Add aria-label to off-canvas panel button
* Fix: WooCommerce button dynamic typography
* Fix: Empty WooCommerce quantity fields
* Fix: PHP 8.1 notice using disable elements in Customizer
* Tweak: Improve license key area
* Tweak: Improve off-canvas transitions
* Tweak: Check for WooCommerce functions
* Tweak: Open off-canvas using space bar
* Tweak: Use image ID in mobile header/sticky nav logos
* Tweak: Improve Elements hook selection dropdown UI
* Tweak: Add site library check for min GenerateBlocks version
* Tweak: Add Loop Template to Custom Post Type dropdown filters

v2.2.2
* Fix: Off Canvas anchor links not working

v2.2.1
* Fix: Add value to off-canvas aria-hidden attribute
* Tweak: Remove/add aria-hidden to off-canvas on toggle

GeneratePress Premium v2.2.0 - Alpha 1

* Feature: Allow block element autosave
* Feature: Add revisions to block elements
* Feature: Add Loop Template block element
* Feature: Dont display the raw license key in the Dashboard
* Feature: Add “Paginated Results” to Element Display Rules
* Fix: Element post navigation template PHP warning when not using GB Pro
* Fix: Remove unnecessary zoom CSS from featured images
* Fix: Font icon CSS order
* Fix: Load more button showing in product tax archives
* Fix: Prevent tabbing in hidden off-canvas panel
* Fix: Hide hidden off-canvas panel from screen readers
* Fix: menu-toggle aria-controls when using off-canvas panel
* Fix: Focus first focusable element when opening off-canvas panel
* Fix: Focus slideout toggle when closing off-canvas panel
* Fix: Off-Canvas Panel sub-menu a11y
* Fix: Prevent secondary nav legacy typography CSS
* Fix: Fix dynamic term meta link
* Fix: Block margins in the block element editor
* Fix: Embeds in Block Elements
* Fix: Apply display rules to editor with no ID
* Fix: Navigation background image applying to secondary nav
* Fix: WooCommerce order received page float issue
* Tweak: Remove jquery-migrate from sticky script
* Tweak: Add message in Blog section about Loop Template

Tải về: gp-premium-2.3.1.zip

Tải về: gp-premium-2.3.0.zip

Tải về: gp-premium-2.2.2.zip

Plugin siêu nhẹ đó là: Lightbox for the Default Gallery & Image Block

Tính năng của plugin:

• Được viết bằng JavaScript thuần túy, không phụ thuộc vào jQuery
• Hỗ trợ hiển thị chú thích hình ảnh
• Responsive
• Hỗ trợ thao tác vuốt trên mobile

Plugin này làm việc với:

• Gallery Block (Default Block)
• Image Block (Default Block)
• Media and Image Block (Default Block)
• Gallery (Default Classic Editor Gallery)
• CoBlocks Gallery Collage / Masonry / Offset / Stacked

Bạn chỉ việc cài đặt và kích hoạt plugin là xong, ngoài ra không cần phải làm gì cả. Tuy nhiên muốn sử dụng được lightbox cho ảnh thì khi chèn ảnh hoặc album (gallery) vào bài viết bạn nhớ phải chọn Liên kết đến Tập tin đa phương tiện nhé.

Nếu bạn muốn cài đặt mặc định Liên kết đến Tập tin đa phương tiện cho tất cả các ảnh thì mở trang cài đặt WordPress tại đường link:

/wp-admin/options.php

Sau đó bạn tìm đến image_default_link_type và nhập chữ file vào ô tương ứng.

Kéo xuống cuối trang để Save lại là xong. Từ giờ mỗi khi bạn chèn ảnh vào bài viết thì nó sẽ tự động gắn link đến file ảnh và lightbox sẽ hoạt động.