Учебники

Как сделать тему WordPress готовой к WooCommerce

Как сделать тему WordPress готовой к WooCommerce

Итак, вы хотите добавить магазин в свою тему – круто! WooCommerce – отличный выбор. Технически говоря, ВСЕ темы совместимы с WooCommerce, потому что это плагин. Теоретически любой плагин должен работать с любой темой WordPress (которая написана правильно).

Однако, как разработчик темы, вы можете настроить вывод WooCommerce, чтобы он лучше соответствовал вашей теме, или чтобы предоставить конечным пользователям параметры, недоступные в настройках WooCommerce (например, изменение количества столбцов в магазине). Ниже вы найдете несколько полезных фрагментов, которые вы можете использовать для обеспечения «лучшей» поддержки WooCommerce в вашей теме и / или для изменения вещей для вашего конкретного дизайна.

Важно: многие из приведенных ниже фрагментов используют функции, доступные только в WooCommerce. Поэтому убедитесь, что эти фрагменты не просто сброшены в конец файла functions.php в теме, созданной для распространения. Если вы собираетесь поделиться своей темой с другими или продать ее, обязательно поместите фрагменты в их собственный файл, загружаемый только тогда, когда плагин WooCommerce активен.

Проверьте, включен ли WooCommerce

В своих темах мне нравится определять настраиваемую константу, которую можно использовать для проверки, включен ли WooCommerce. Таким образом, я могу включать файлы или запускать функции только тогда, когда WooCommerce активен (см. Важное сообщение выше, если вы еще этого не сделали).

// Add new constant that returns true if WooCommerce is active define( 'WPEX_WOOCOMMERCE_ACTIVE', class_exists( 'WooCommerce') ); // Checking if WooCommerce is active if (WPEX_WOOCOMMERCE_ACTIVE) { // Do something... // Such as including a new file with all your Woo edits. }

Заявить о поддержке WooCommerce

Это первый и самый важный фрагмент кода, который нужно добавить в вашу тему, который «включает» поддержку WooCommerce и предотвращает появление предупреждений от плагина, сообщающих конечному пользователю о несовместимости темы.

add_action( 'after_setup_theme', function() { add_theme_support( 'woocommerce' ); } );

Удалить WooCommerce CSS

Лично я предпочитаю переопределять стили WooCommerce, чтобы предотвратить любые возможные проблемы со сторонними плагинами WooCommerce. Однако, если вы хотите удалить все стили WooCommerce, это очень просто.

Следующий фрагмент предназначен для удаления ВСЕХ стилей WooCommerce:

// Remove all Woo Styles add_filter( 'woocommerce_enqueue_styles', '__return_empty_array' );

Этот фрагмент является примером условного удаления определенных стилей CSS:

function wpex_remove_woo_styles( $styles) { unset( $styles['woocommerce-general'] ); unset( $styles['woocommerce-layout'] ); unset( $styles['woocommerce-smallscreen'] ); return $styles; } add_filter( 'woocommerce_enqueue_styles', 'wpex_remove_woo_styles' );

Включить галерею продуктов WooCommerce, масштабирование и лайтбокс (v3.0 +)

В WooCommerce 3.0 они представили новую галерею продуктов, масштабирование и лайтбокс. Все они должны быть включены через «add_theme_support», если вы хотите использовать их в своей теме.

add_theme_support( 'wc-product-gallery-slider' ); add_theme_support( 'wc-product-gallery-zoom' ); add_theme_support( 'wc-product-gallery-lightbox' );

Удалить название магазина

Многие темы уже имеют функции для отображения заголовков архивов, поэтому этот код удаляет лишний заголовок из WooCommerce, что лучше, чем скрывать его с помощью CSS.

add_filter( 'woocommerce_show_page_title', '__return_false' );

Изменить заголовок архива для магазина

Если ваша тема использует функции archive_title() или get_archive_title () для отображения заголовка для ваших архивов, вы можете легко настроить его с помощью фильтра, чтобы получить имя страницы вашего продукта вместо заголовка архива магазина.

function wpex_woo_archive_title( $title) { if (is_shop() && $shop_id = wc_get_page_id( 'shop') ) { $title = get_the_title( $shop_id ); } return $title; } add_filter( 'get_the_archive_title', 'wpex_woo_archive_title' );

Изменить количество товаров, отображаемых на странице в магазине.

Используется для изменения количества продуктов, отображаемых на странице в магазине и в архивах продуктов (категории и теги).

// Alter WooCommerce shop posts per page function wpex_woo_posts_per_page( $cols) { return 12; } add_filter( 'loop_shop_per_page', 'wpex_woo_posts_per_page' );

Изменить количество столбцов, отображаемых в магазине в строке

Я не понимаю, почему WooCommerce работает таким образом, но вы не можете просто изменить фильтр loop_shop_columns, вы также должны добавить уникальные классы в тег body, чтобы столбцы работали. Хотя шорткоды Woo имеют оболочку div с правильными классами, которых нет на страницах магазина, поэтому нам нужны две функции.

// Alter shop columns function wpex_woo_shop_columns( $columns) { return 4; } add_filter( 'loop_shop_columns', 'wpex_woo_shop_columns' ); // Add correct body class for shop columns function wpex_woo_shop_columns_body_class( $classes) { if (is_shop() || is_product_category() || is_product_tag()) { $classes[] = 'columns-4'; } return $classes; } add_filter( 'body_class', 'wpex_woo_shop_columns_body_class' );

Изменение стрелок перехода на следующую и предыдущую страницы

Этот фрагмент позволит вам настроить стрелки нумерации страниц в магазине, чтобы они соответствовали стрелкам в вашей теме.

function wpex_woo_pagination_args( $args) { $args['prev_text'] = '<i class="fa fa-angle-left"></i>'; $args['next_text'] = '<i class="fa fa-angle-right"></i>'; return $args; } add_filter( 'woocommerce_pagination_args', 'wpex_woo_pagination_args' );

Изменить текст значка OnSale

Особенно полезно на сайтах, использующих другой язык или для удаления восклицательного знака, что я не большой поклонник.

function wpex_woo_sale_flash() { return '<span class="onsale">'. esc_html__( 'Sale', 'woocommerce' ). '</span>'; } add_filter( 'woocommerce_sale_flash', 'wpex_woo_sale_flash' );

Изменение столбцов эскизов галереи товаров

Вы можете изменить количество столбцов для миниатюр одной галереи продуктов в зависимости от вашего макета, и эта функция сделает именно это.

function wpex_woo_product_thumbnails_columns() { return 4; } add_action( 'woocommerce_product_thumbnails_columns', 'wpex_woo_product_thumbnails_columns' );

Изменить количество отображаемых сопутствующих товаров

Используется для изменения количества продуктов, отображаемых для связанных продуктов на одной странице продукта.

// Set related products to display 4 products function wpex_woo_related_posts_per_page( $args) { $args['posts_per_page'] = 4; return $args; } add_filter( 'woocommerce_output_related_products_args', 'wpex_woo_related_posts_per_page' );

Измените количество столбцов в строке для связанных и дополнительных разделов продуктов

Как и в магазине, если вы хотите правильно изменить количество столбцов для связанных и проданных продуктов на страницах с одним продуктом, вы должны отфильтровать столбцы, а также соответствующим образом изменить классы тела.

// Filter up-sells columns function wpex_woo_single_loops_columns( $columns) { return 4; } add_filter( 'woocommerce_up_sells_columns', 'wpex_woo_single_loops_columns' ); // Filter related args function wpex_woo_related_columns( $args) { $args['columns'] = 4; return $args; } add_filter( 'woocommerce_output_related_products_args', 'wpex_woo_related_columns', 10 ); // Filter body classes to add column class function wpex_woo_single_loops_columns_body_class( $classes) { if (is_singular( 'product') ) { $classes[] = 'columns-4'; } return $classes; } add_filter( 'body_class', 'wpex_woo_single_loops_columns_body_class' );

Добавьте в меню динамическую ссылку корзины и стоимость корзины

Этот фрагмент кода добавит в ваше меню элемент корзины WooCommerce, в котором будет отображаться стоимость товаров в вашей корзине. Кроме того, если на вашем сайте включен Font-Awesome, на нем будет отображаться маленький значок корзины для покупок. Важно: эти функции не должны заключаться в условное выражение is_admin (), поскольку они полагаются на AJAX для обновления стоимости. Вы должны убедиться, что функции доступны, когда is_admin () возвращает true и false.

// Add the cart link to menu function wpex_add_menu_cart_item_to_menus( $items, $args) { // Make sure your change 'wpex_main' to your Menu location !!!! if ($args->theme_location === 'wpex_main') { $css_class = 'menu-item menu-item-type-cart menu-item-type-woocommerce-cart'; if (is_cart()) { $css_class .= ' current-menu-item'; } $items .= '<li class="'. esc_attr( $css_class ). '">'; $items .= wpex_menu_cart_item(); $items .= '</li>'; } return $items; } add_filter( 'wp_nav_menu_items', 'wpex_add_menu_cart_item_to_menus', 10, 2 ); // Function returns the main menu cart link function wpex_menu_cart_item() { $output = ''; $cart_count = WC()->cart->cart_contents_count; $css_class = 'wpex-menu-cart-total wpex-cart-total-'. intval( $cart_count ); if ($cart_count) { $url = WC()->cart->get_cart_url(); } else { $url = wc_get_page_permalink( 'shop' ); } $html = $cart_extra = WC()->cart->get_cart_total(); $html = str_replace( 'amount', '', $html ); $output .= '<a href="'. esc_url( $url) .'" class="'. esc_attr( $css_class ). '">'; $output .= '<span class="fa fa-shopping-bag"></span>'; $output .= wp_kses_post( $html ); $output .= '</a>'; return $output; } // Update cart link with AJAX function wpex_main_menu_cart_link_fragments( $fragments) { $fragments['.wpex-menu-cart-total'] = wpex_menu_cart_item(); return $fragments; } add_filter( 'add_to_cart_fragments', 'wpex_main_menu_cart_link_fragments' );

Заключение

WooCommerce будет работать с любой темой по умолчанию, но добавить дополнительную поддержку для плагина, чтобы он лучше соответствовал вашей теме, очень легко сделать. На самом деле я написал этот пост во время написания кода для нашей темы New York WordPress Blog & Shop, поэтому большинство этих настроек включены в нашу тему. Или, если вы предпочитаете, вы можете приобрести тему, чтобы посмотреть, как все было сделано (см. Файлы на wpex-new-york / inc / woocommerce) – это может быть более простой способ узнать, как правильно добавлять настраиваемая поддержка плагина WooCommerce, просматривая уже закодированную тему.

Есть ли еще какие-нибудь фрагменты, которые, по вашему мнению, принадлежат этому списку, или могут оказаться полезными при разработке новых тем для WooCommerce?

Источник записи: https://www.wpexplorer.com

Похожие сообщения
Учебники

Добавление отвлекающего чтения в WordPress

Учебники

Как исключить таксономию из типа сообщения WordPress

Учебники

Добавление пользовательских QuickTags WordPress

Учебники

Как добавить встроенную контентную рекламу в WordPress

Добавить комментарий