Trong bài viết này, ShoppingWeb sẽ chia sẻ một số đoạn code hữu ích thường được sử dụng khi làm việc với theme Flatsome và plugin WooCommerce. Đây là các đoạn code mình thường dùng cho các dự án thiết kế Website của mình, các bạn có thể tham khảo và áp dụng nhé.
Đây là Full code dành cho bạn, các bạn copy và cho vào trong file Functions.php của theme Flatsome-Child nhé!
// Ẩn thông báo trong trang Admin WordPress
function cvblog_disable_admin_notices() {
global $wp_filter;
if ( is_user_admin() ) {
if ( isset( $wp_filter['user_admin_notices'] ) ) {
unset( $wp_filter['user_admin_notices'] );
}
} elseif ( isset( $wp_filter['admin_notices'] ) ) {
unset( $wp_filter['admin_notices'] );
}
if ( isset( $wp_filter['all_admin_notices'] ) ) {
unset( $wp_filter['all_admin_notices'] );
}
}
add_action( 'admin_print_scripts', 'cvblog_disable_admin_notices' );
// Ẩn thông báo update của theme Flatsome
add_action('init', 'yen_media_hide_flatsome_notice');
function yen_media_hide_flatsome_notice() {
if (is_admin()) {
remove_action('admin_notices', 'flatsome_maintenance_admin_notice');
}
}
// Ẩn các thông báo và thành phần giao diện trong trang wp-admin
add_action('admin_head', 'yen_media_hide_admin_notices');
function yen_media_hide_admin_notices() {
?>
<style>
/* Ẩn các tab thuộc tính sản phẩm WooCommerce */
.product_data_tabs .shipping_options,
.product_data_tabs .linked_product_options,
.product_data_tabs .advanced_options,
.product_data_tabs .ux_product_layout_tab,
.product_data_tabs .ux_extra_tab,
#fixedtoc-metabox {
display: none !important;
}
/* Ẩn các thông báo admin */
.settings-error.is-dismissible,
.wf-admin-notice.notice-error,
#wfls-woocommerce-integration-notice {
display: none;
}
.woocommerce-layout__header {
display: none;
}
.woocommerce-layout__activity-panel-tabs {
display: none;
}
.woocommerce-layout__header-breadcrumbs {
display: none;
}
.woocommerce-embed-page .woocommerce-layout__primary {
display: none;
}
.woocommerce-embed-page #screen-meta,
.woocommerce-embed-page #screen-meta-links {
top: 0;
}
.notice.notice-info,
.updated.woocommerce-message {
display: none;
}
</style>
<?php
}
// Tùy chỉnh kích thước giao diện quản trị
add_action('admin_head', 'yen_media_adjust_admin_layout');
function yen_media_adjust_admin_layout() {
?>
<style>
#edittag,
.section.section-textarea {
max-width: 1280px !important;
}
#of_container textarea {
min-height: 350px !important;
}
</style>
<?php
}0. Ẩn toàn bộ thông báo trong trang Admin WordPress
// Ẩn thông báo trong trang Admin WordPress
function cvblog_disable_admin_notices() {
global $wp_filter;
if ( is_user_admin() ) {
if ( isset( $wp_filter['user_admin_notices'] ) ) {
unset( $wp_filter['user_admin_notices'] );
}
} elseif ( isset( $wp_filter['admin_notices'] ) ) {
unset( $wp_filter['admin_notices'] );
}
if ( isset( $wp_filter['all_admin_notices'] ) ) {
unset( $wp_filter['all_admin_notices'] );
}
}
add_action( 'admin_print_scripts', 'cvblog_disable_admin_notices' );
// Nút X đóng lightbox
add_filter( 'flatsome_lightbox_close_btn_inside', '__return_true' );1. Ẩn thông báo update của theme Flatsome
Tắt thông báo bảo trì hoặc cập nhật từ theme Flatsome trong khu vực quản trị WordPress (wp-admin).
// Ẩn thông báo update của theme Flatsome
add_action('init', 'yen_media_hide_flatsome_notice');
function yen_media_hide_flatsome_notice() {
if (is_admin()) {
remove_action('admin_notices', 'flatsome_maintenance_admin_notice');
}
}}Chức năng:
Sử dụng hook init để chạy hàm hide_notice khi WordPress khởi tạo.
Hàm kiểm tra is_admin() để đảm bảo chỉ chạy trong khu vực quản trị.
remove_action loại bỏ hook flatsome_maintenance_admin_notice khỏi admin_notices, ngăn thông báo từ Flatsome hiển thị.
Lợi ích:
Giảm sự phiền nhiễu từ các thông báo không cần thiết trong khu vực quản trị.
Tạo giao diện quản trị gọn gàng hơn cho người dùng.
2. Ẩn các thông báo và thành phần giao diện trong trang wp-admin
Tùy chỉnh giao diện quản trị WordPress bằng cách ẩn các thành phần giao diện và thông báo không mong muốn thông qua CSS.
// Ẩn các thông báo và thành phần giao diện trong trang wp-admin
add_action('admin_head', 'yen_media_hide_admin_notices');
function yen_media_hide_admin_notices() {
?>
<style>
/* Ẩn các tab thuộc tính sản phẩm WooCommerce */
.product_data_tabs .shipping_options,
.product_data_tabs .linked_product_options,
.product_data_tabs .advanced_options,
.product_data_tabs .ux_product_layout_tab,
.product_data_tabs .ux_extra_tab,
#fixedtoc-metabox {
display: none !important;
}
/* Ẩn các thông báo admin */
.settings-error.is-dismissible,
.wf-admin-notice.notice-error,
#wfls-woocommerce-integration-notice {
display: none;
}
.woocommerce-layout__header {
display: none;
}
.woocommerce-layout__activity-panel-tabs {
display: none;
}
.woocommerce-layout__header-breadcrumbs {
display: none;
}
.woocommerce-embed-page .woocommerce-layout__primary {
display: none;
}
.woocommerce-embed-page #screen-meta,
.woocommerce-embed-page #screen-meta-links {
top: 0;
}
.notice.notice-info,
.updated.woocommerce-message {
display: none;
}
</style>
<?php
}Hook admin_head chèn CSS vào phần <head> của khu vực quản trị.
Các quy tắc CSS ẩn các thành phần giao diện:
Ẩn các tab trong trang chỉnh sửa sản phẩm WooCommerce: Ẩn các tab như shipping_options (vận chuyển), linked_product_options (sản phẩm liên kết), advanced_options (nâng cao), ux_product_layout_tab và ux_extra_tab (tùy chỉnh của Flatsome), và metabox fixedtoc-metabox (có thể liên quan đến plugin Fixed TOC).
Ẩn thông báo admin:
Các thông báo lỗi hoặc cảnh báo (.settings-error.is-dismissible, .wf-admin-notice.notice-error, #wfls-woocommerce-integration-notice).
Thông báo thông tin (.notice.notice-info) và thông báo WooCommerce (.updated.woocommerce-message).
Ẩn giao diện WooCommerce:
Ẩn header của WooCommerce (.woocommerce-layout__header).
Ẩn tab hoạt động (.woocommerce-layout__activity-panel-tabs).
Ẩn breadcrumbs (.woocommerce-layout__header-breadcrumbs).
Ẩn khu vực chính trong trang nhúng WooCommerce (.woocommerce-embed-page .woocommerce-layout__primary).
Điều chỉnh vị trí: Đặt lại vị trí của #screen-meta và #screen-meta-links về top: 0 để tránh lỗi bố cục khi ẩn các thành phần khác.
Lợi ích:
Tạo giao diện quản trị gọn gàng, chỉ hiển thị các thành phần cần thiết.
Giảm sự phân tâm cho người quản trị bằng cách ẩn các thông báo hoặc tab không quan trọng.
3. Thay đổi kích thước giao diện quản trị
// Tùy chỉnh kích thước giao diện quản trị
add_action('admin_head', 'yen_media_adjust_admin_layout');
function yen_media_adjust_admin_layout() {
?>
<style>
#edittag,
.section.section-textarea {
max-width: 1280px !important;
}
#of_container textarea {
min-height: 350px !important;
}
</style>
<?php
}Chức năng:
Hook admin_head chèn CSS vào phần <head> của khu vực quản trị.
Các quy tắc CSS:
Đặt max-width: 1280px cho các phần tử #edittag (thường là form chỉnh sửa taxonomy như danh mục hoặc thẻ) và .section.section-textarea (các khu vực textarea trong quản trị).
Đặt min-height: 350px cho các textarea trong #of_container (có thể liên quan đến một plugin tùy chỉnh giao diện như Options Framework).
Lợi ích:
Cải thiện trải nghiệm người dùng bằng cách giới hạn chiều rộng tối đa của form, tránh giao diện quá rộng trên màn hình lớn.
Đảm bảo textarea có chiều cao tối thiểu đủ lớn để nhập liệu dễ dàng.
4. Nút X đóng lightbox
Cho nút X đóng lightbox vào bên trong để người dùng dễ click hơn
// Nút X đóng lightbox
add_filter( 'flatsome_lightbox_close_btn_inside', '__return_true' );
./.
Nếu bạn thấy bài viết hữu ích, đừng quên chia sẻ để cùng lan tỏa kiến thức! Nếu cần hỗ trợ thiết kế hoặc tối ưu website, hãy liên hệ với ShoppingWeb qua Zalo tại số 0962 682 434 để được tư vấn chi tiết nhé!
