Как да направите готова тема за WordPress WooCommerce

Направете вашата WordPress тема WooCommerce съвместима с тези полезни изрезки

Така че искате да добавите магазин към темата си – страхотно! WooCommerce е чудесен избор. От техническа гледна точка ВСИЧКО темите са „Съвместими с WooCommerce“, защото това е приставка. На теория всеки плъгин трябва да работи с всяка тема на WordPress (която е кодирана правилно).


Като разработчик на теми, въпреки че може да искате да настроите изхода на WooCommerce, за да пасне по-добре на вашата тема или да предоставите опции на крайните потребители, които не са лесно достъпни в настройките на WooCommerce (като например промяна на броя на колоните в магазина). По-долу ще намерите някои полезни фрагменти, които можете да използвате, за да осигурите „по-добра“ поддръжка за WooCommerce във вашата тема и / или да промените нещата за вашия конкретен дизайн.

важно: Много от фрагментите по-долу използват функции, достъпни само в WooCommerce. Така че уверете се, че тези фрагменти не са просто изхвърлени в долната част на файла function.php в тема, създадена за разпространение. Ако ще споделяте темата си с други хора или да я продавате, не забравяйте да поставите фрагментите в собствения си файл, зареден само когато приставката за WooCommerce е активна.

Проверете дали WooCommerce е активирана

В моите теми обичам да определям персонализирана константа, която може да се използва за проверка дали WooCommerce е активирана по този начин. Мога да включвам файлове или да изпълнявам функции само когато WooCommerce е активна (вижте важното съобщение по-горе, ако още не сте го направили).

// Добавете нова константа, която се връща вярна, ако WooCommerce е активна
define ('WPEX_WOOCOMMERCE_ACTIVE', class_exists ('WooCommerce'));

// Проверка дали WooCommerce е активна
ако (WPEX_WOOCOMMERCE_ACTIVE) {
// Направи нещо...
// Като например включване на нов файл с всички ваши редакции в Woo.
}

Декларирайте поддръжката на WooCommerce

Това е първото и най-важно парче код, което се добавя към вашата тема, което „активира“ поддръжката на WooCommerce и предотвратява предупрежденията от приставката, казващи на крайния потребител, че темата не е съвместима.

добавяне ('after_setup_theme', функция () {
add_theme_support ('woocommerce');
});

Премахнете WooCommerce CSS

Лично аз предпочитам да отменя стиловете на WooCommerce, за да предотвратя всякакви възможни проблеми с приставки на WooCommerce на трети страни. Ако обаче искате да премахнете всички стилове на WooCommerce, това е много лесно.

Следният фрагмент е за премахване на ВСИЧКИ стилове на WooCommerce:

// Премахнете всички стилове Woo
add_filter ('woocommerce_enqueue_styles', '__return_empty_array');

Този фрагмент е пример за условно премахване на конкретни CSS стилове:

функция wpex_remove_woo_styles ($ стилове) {
unset ($ styles ['woocommerce-general']);
unset ($ styles ['woocommerce-layout']);
unset ($ styles ['woocommerce-smallscreen']);
върнете $ стилове;
}
add_filter ('woocommerce_enqueue_styles', 'wpex_remove_woo_styles');

Активиране на WooCommerce Галерия за продукти, Zoom & Lightbox (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 () за показване на заглавието на вашите архиви, можете лесно да го ощипвате чрез филтър, за да вземете името на страницата на вашия продукт вместо заглавието на архива на магазина..

функция wpex_woo_archive_title ($ заглавие) {
if (is_shop () && $ shop_id = wc_get_page_id ('магазин')) {
$ title = get_the_title ($ shop_id);
}
върнете $ заглавие;
}
add_filter ('get_the_archive_title', 'wpex_woo_archive_title');

Променете броя продукти, показвани на страница в магазина

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

// Промяна на публикациите в магазина на WooCommerce на страница
функция wpex_woo_posts_per_page ($ cols) {
връщане 12;
}
add_filter ('loop_shop_per_page', 'wpex_woo_posts_per_page');

Променете броя колони, показани в магазина на ред

Не разбирам защо WooCommerce работи по този начин, но не можете просто да промените филтъра „loop_shop_columns“, трябва също да добавите уникалните класове към етикета на тялото, за да работят колоните. Докато шорт-кодовете на Woo имат обвивка за div с правилните класове, които страниците в магазина не правят, затова имаме нужда от две функции.

// Промяна на колоните в магазина
функция wpex_woo_shop_column ($ колони) {
връщане 4;
}
add_filter ('loop_shop_column', 'wpex_woo_shop_columns');

// Добавяне на правилен клас на тялото за магазините
функция wpex_woo_shop_column_body_class ($ класове) {
ако (is_shop () || is_product_category () || is_product_tag ()) {
$ class [] = 'колони-4';
}
върнете $ класове;
}
add_filter ('body_class', 'wpex_woo_shop_column_body_class');

Променете стрелките за следващо и предишно страници

Този фрагмент ще ви позволи да опънете стрелките за страници на магазина, за да съответствате на тези от вашата тема.

функция wpex_woo_pagination_args ($ args) {
$ args ['prev_text'] = '";
$ args ['next_text'] = '";
върнете $ args;
}
add_filter ('woocommerce_pagination_args', 'wpex_woo_pagination_args');

Променете текста на значката OnSale

Особено полезно в сайтове, използващи различен език или за премахване на удивителен знак, на който не съм голям фен.

функция wpex_woo_sale_flash () {
връщане ''. esc_html __ („Продажба“, „woocommerce“). "";
}
add_filter ('woocommerce_sale_flash', 'wpex_woo_sale_flash');

Промяна на колоните с миниатюри на галерия с продукти

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

функция wpex_woo_product_thumbnails_column () {
връщане 4;
}
добавяне на управление ('woocommerce_product_thumbnails_column', 'wpex_woo_product_thumbnails_column');

Променете броя показвани свързани продукти

Използва се за промяна на броя на продуктите, показвани за свързани продукти на една страница с продукти.

// Задаване на свързани продукти за показване на 4 продукта
функция wpex_woo_related_posts_per_page ($ args) {
$ args ['posts_per_page'] = 4;
върнете $ args;
}
add_filter ('woocommerce_output_related_products_args', 'wpex_woo_related_posts_per_page');

Променете броя колони на ред за свързани и продавани секции на продукти

Точно като магазина, ако искате правилно да промените броя на колоните за свързани и продавани продукти на отделните страници с продукти, трябва да филтрирате колоните, както и да промените съответно класовете на тялото.

// Филтриране до продажба на колони
функция wpex_woo_single_loops_column ($ колони) {
връщане 4;
}
add_filter ('woocommerce_up_sells_column', 'wpex_woo_single_loops_column');

// Филтриране на свързани аргументи
функция wpex_woo_related_columns ($ args) {
$ args ['колони'] = 4;
върнете $ args;
}
add_filter ('woocommerce_output_related_products_args', 'wpex_woo_related_columns', 10);

// Филтрирайте класовете на тялото, за да добавите клас колони
функция wpex_woo_single_loops_column_body_class ($ класове) {
ако (is_singular ('продукт')) {
$ class [] = 'колони-4';
}
върнете $ класове;
}
add_filter ('body_class', 'wpex_woo_single_loops_column_body_class');

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

Този фрагмент ще добави към менюто ви елемент от количката WooCommerce, който показва цената на артикулите във вашата количка. Освен това, ако на сайта ви е активиран Font-Awesome, той ще покаже малка икона за пазаруване. важно: Тези функции не трябва да бъдат обвивани в условие is_admin (), защото разчитат на AJAX за актуализиране на разходите, трябва да сте сигурни, че функциите са налични, когато is_admin () се върне вярно и невярно.

// Добавете връзката в кошницата към менюто
функция wpex_add_menu_cart_item_to_menus ($ позиции, $ args) {

// Уверете се, че промяната ви е "wpex_main" в местоположението на менюто ви !!!!
if ($ args-> topic_location === 'wpex_main') {

$ css_class = 'меню-елемент от менюто-елемент-тип-количка меню-елемент-тип-woocommerce-cart';

ако (is_cart ()) {
$ css_class. = 'елемент от текущото меню';
}

$ позиции. = '
  • "; $ items. = wpex_menu_cart_item (); $ позиции. = '
  • "; } върнете $ елементи; } add_filter ('wp_nav_menu_items', 'wpex_add_menu_cart_item_to_menus', 10, 2); // Функцията връща връзката към главното меню на количката функция wpex_menu_cart_item () { $ output = ''; $ cart_count = WC () -> количка-> cart_contents_count; $ css_class = 'wpex-menu-cart-total wpex-cart-total-'. intval ($ cart_count); ако ($ cart_count) { $ url = WC () -> коли-> get_cart_url (); } else { $ url = wc_get_page_permalink ('магазин'); } $ html = $ cart_extra = WC () -> количка-> get_cart_total (); $ html = str_replace ('сума', '', $ html); $ изход. = '"; $ изход. = '"; $ output. = wp_kses_post ($ html); $ изход. = '"; върнете $ изход; } // Актуализиране на връзката на количката с AJAX функция wpex_main_menu_cart_link_fragments ($ фрагменти) { $ fragments ['. wpex-menu-cart-total'] = wpex_menu_cart_item (); върнете $ фрагменти; } add_filter ('add_to_cart_fragments', 'wpex_main_menu_cart_link_fragments');

    заключение

    WooCommerce ще работи с всяка тема по подразбиране, но добавя допълнителна поддръжка на приставката, така че тя да отговаря по-добре на вашата тема е много лесно да се направи. Всъщност написах тази публикация, докато кодирахме нашата тема за блог и магазин в New York WordPress, така че повечето от тези ощипвания са включени в нашата тема. Или ако предпочитате да закупите темата, за да разгледате как е направено всичко (вижте файловете на wpex-new-york / inc / woocommerce) – може да е по-лесен начин да се научите как правилно да добавяте персонализирана поддръжка за приставката за WooCommerce, като разгледате вече кодирана тема.

    Има ли други фрагменти, които смятате, че принадлежат в този списък или бихте били полезни при разработването на нови теми, готови за WooCommerce?

    Jeffrey Wilson Administrator
    Sorry! The Author has not filled his profile.
    follow me
      Like this post? Please share to your friends:
      Adblock
      detector
      map