WC_BODY_CLASS() │ WC 1.0
Функция WC_BODY_CLASS() добавляет CSS-классы к страницам WooCommerce. Эти классы позволяют удобно стилизовать страницы вашего магазина на WordPress.
Параметры функции
- $classes (массив) — Это обязательный параметр, который принимает массив классов, добавляемых к тегу
<body>.
Возвращаемое значение
Функция возвращает массив CSS-классов.
Применение
Используйте функцию wc_body_class() следующим образом:
wc_body_class( $classes );где $classes — это массив классов, которые вы хотите добавить.
Примеры использования
Добавление класса для страницы продукта
Если вы хотите добавить класс, который соответствует типу продукта на странице продукта, вы можете использовать следующий код:
add_filter( 'body_class', 'add_class_to_product_page' );
function add_class_to_product_page( $classes ) {
if ( is_product() ) {
$product = wc_get_product();
$classes[] = 'product-type-' . $product->get_type();
}
return $classes;
}В этом примере мы добавляем класс product-type- с типом продукта (например, product-type-simple) к страницам продуктов.
Код функции WC_BODY_CLASS
Вот как выглядит сама функция wc_body_class, используемая в WooCommerce:
function wc_body_class( $classes ) {
global $wp;
$classes = (array) $classes;
if ( is_shop() ) {
$classes[] = 'woocommerce-shop';
}
if ( is_woocommerce() ) {
$classes[] = 'woocommerce';
$classes[] = 'woocommerce-page';
} elseif ( is_checkout() ) {
$classes[] = 'woocommerce-checkout';
$classes[] = 'woocommerce-page';
} elseif ( is_cart() ) {
$classes[] = 'woocommerce-cart';
$classes[] = 'woocommerce-page';
} elseif ( is_account_page() ) {
$classes[] = 'woocommerce-account';
$classes[] = 'woocommerce-page';
$account_page_id = get_option( 'woocommerce_myaccount_page_id' );
if ( ! empty( $account_page_id ) && ( get_post_field( 'post_name', $account_page_id ) === basename( $wp->request ) && is_user_logged_in() ) ) {
$classes[] = 'woocommerce-dashboard';
}
}
if ( is_store_notice_showing() ) {
$classes[] = 'woocommerce-demo-store';
}
foreach ( WC()->query->get_query_vars() as $key => $value ) {
if ( is_wc_endpoint_url( $key ) ) {
$classes[] = 'woocommerce-' . sanitize_html_class( $key );
}
}
if ( wc_current_theme_is_fse_theme() ) {
$classes[] = 'woocommerce-uses-block-theme';
}
if ( wc_block_theme_has_styles_for_element( 'button' ) ) {
$classes[] = 'woocommerce-block-theme-has-button-styles';
}
$classes[] = 'woocommerce-no-js';
add_action( 'wp_footer', 'wc_no_js' );
return array_unique( $classes );
}Пояснения к коду
-
Глобальные переменные: Используется глобальная переменная
$wp, которая помогает получить информацию о текущем запросе. -
Проверка страниц: Каждый раздел
ifпроверяет, является ли текущая страница определенной страницей WooCommerce, добавляя соответствующие классы. -
Функции: Внутри функции используются различные методы WooCommerce, чтобы собрать нужные класс для разных страниц, таких как страницы корзины, оформления заказа и т.д.
Заключение
Функция WC_BODY_CLASS() позволяет вам легко добавлять кастомизированные классы к <body> вашего сайта. Это может помочь в создании уникальных стилей для страниц WooCommerce.
Теперь, когда вы знаете, как это делать, вы можете использовать эту функцию для улучшения дизайна вашего интернет-магазина на WooCommerce!