Jak připravit WordPress Téma WooCommerce

Udělejte svůj WordPress Theme WooCommerce kompatibilním s tituly Užitečné úryvky

Chcete tedy do svého motivu přidat obchod – úžasné! WooCommerce je skvělá volba. Technicky vzato VŠECHNO témata jsou „kompatibilní s WooCommerce“, protože se jedná o plugin. Teoreticky by jakýkoli plugin měl fungovat s jakýmkoli tématem WordPress (které je správně kódováno).


Jako vývojář motivu však možná budete chtít vylepšit výstup WooCommerce, aby lépe odpovídal vašemu tématu nebo poskytoval možnosti koncovým uživatelům, které nejsou snadno dostupné v nastavení WooCommerce (jako je změna počtu sloupců v obchodě). Níže najdete několik užitečných úryvků, které můžete použít k poskytování „lepší“ podpory pro WooCommerce ve vašem tématu a / nebo ke změně věcí pro váš konkrétní design.

Důležité: Mnoho níže uvedených úryvků používá funkce dostupné pouze ve WooCommerce. Ujistěte se tedy, že tyto úryvky nejsou pouze vypuštěny do spodní části souboru function.php do motivu vytvořeného pro distribuci. Pokud se chystáte sdílet své téma s ostatními nebo prodávat, nezapomeňte umístit úryvky do jejich vlastního souboru načteného, ​​pouze pokud je aktivní zásuvný modul WooCommerce..

Zkontrolujte, zda je WooCommerce povoleno

Ve svých tématech ráda definuji vlastní konstantu, kterou lze použít ke kontrole, zda je WooCommerce povoleno tímto způsobem, mohu zahrnout soubory nebo spouštět funkce pouze v případě, že je WooCommerce aktivní (viz důležitou zprávu výše, pokud ještě nemáte).

// Přidejte novou konstantu, která vrací true, pokud je WooCommerce aktivní
define ('WPEX_WOOCOMMERCE_ACTIVE', class_exists ('WooCommerce'));

// Kontrola, zda je aktivní WooCommerce
if (WPEX_WOOCOMMERCE_ACTIVE) {
// Dělej něco...
// Například zahrnutí nového souboru do všech vašich úprav Woo.
}

Vyhlásit podporu WooCommerce

Toto je první a nejdůležitější část kódu, která se přidá k vašemu tématu a která „podporuje“ podporu WooCommerce a zabraňuje varování z pluginu, která koncovému uživateli sdělují, že téma není kompatibilní.

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

Odebrat CSS WooCommerce

Osobně raději přepíšu styly WooCommerce, abych předešel možným problémům s pluginy WooCommerce třetích stran. Pokud však chcete odstranit všechny styly WooCommerce, je to velmi snadné.

Následující úryvek slouží k odstranění VŠECHNY stylů WooCommerce:

// Odstraňte všechny styly Woo
add_filter ('woocommerce_enqueue_styles', '__return_empty_array');

Tento úryvek je příkladem podmíněného odebrání konkrétních stylů CSS:

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

Povolit galerii produktů WooCommerce, Zoom & Lightbox (v3.0 +)

Ve WooCommerce 3.0 představili novou galerii produktů, zoom a lightbox. Pokud je chcete ve svém motivu využít, musí být všechny povoleny pomocí „add_theme_support“.

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

Odebrat název obchodu

Mnoho témat již má funkce pro zobrazení názvů archivů, takže tento kód odstraní nadbytečný název z WooCommerce, který je lepší než jej skrýt pomocí CSS.

add_filter ('woocommerce_show_page_title', '__return_false');

Změnit název archivu pro obchod

Pokud vaše téma používá funkce archive_title () nebo get_archive_title () k zobrazení názvu pro vaše archivy, můžete jej snadno vyladit pomocí filtru a namísto názvu archivu obchodu můžete získat název své stránky produktu..

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');

Změňte počet produktů zobrazených na stránce v obchodě

Slouží ke změně počtu produktů zobrazených na stránce v obchodě a v archivech produktů (kategorie a značky).

// Alter WooCommerce příspěvky do obchodu na stránku
funkce wpex_woo_posts_per_page ($ cols) {
návrat 12;
}
add_filter ('loop_shop_per_page', 'wpex_woo_posts_per_page');

Změňte počet sloupců zobrazených v obchodě na řádek

Nechápu, proč WooCommerce funguje tímto způsobem, ale nemůžete pouze změnit filtr „loop_shop_columns“, musíte také přidat jedinečné třídy do značky body, aby sloupce fungovaly. Zatímco Woo Shortcodes mají div div wrapper se správnými třídami, které stránky obchodu nemají, proto potřebujeme dvě funkce.

// Změnit sloupce obchodu
function wpex_woo_shop_columns ($ column) {
návrat 4;
}
add_filter ('loop_shop_columns', 'wpex_woo_shop_columns');

// Přidejte správnou třídu těla pro sloupce obchodu
funkce wpex_woo_shop_columns_body_class ($ třídy) {
if (is_shop () || is_product_category () || is_product_tag ()) {
$ třídy [] = 'sloupce-4';
}
návrat $ třídy;
}
add_filter ('body_class', 'wpex_woo_shop_columns_body_class');

Změňte šipky pro další a předchozí stránkování

Tento úryvek vám umožní vyladit stránkovací šipky v obchodě tak, aby odpovídaly vašim motivům.

function wpex_woo_pagination_args ($ args) {
$ args ['předchozí_text'] = '';
$ args ['next_text'] = '';
návrat $ args;
}
add_filter ('woocommerce_pagination_args', 'wpex_woo_pagination_args');

Změňte text odznaku OnSale

Obzvláště užitečné na webech používajících jiný jazyk nebo k odstranění vykřičníku, který nejsem velkým fanouškem.

function wpex_woo_sale_flash () {
vrátit se ''. esc_html __ ('Prodej', 'woocommerce'). '';
}
add_filter ('woocommerce_sale_flash', 'wpex_woo_sale_flash');

Změnit sloupce miniatur Galerie produktů

Možná budete chtít změnit počet sloupců pro miniatury jednotlivých galerií produktů v závislosti na vašem rozvržení a tato funkce provede pouze to.

function wpex_woo_product_thumbnails_columns () {
návrat 4;
}
add_action ('woocommerce_product_thumbnails_columns', 'wpex_woo_product_thumbnails_columns');

Změňte počet zobrazených souvisejících produktů

Používá se ke změně počtu produktů zobrazených pro související produkty na stránce s jedním produktem.

// Nastaví související produkty tak, aby zobrazovaly 4 produkty
function wpex_woo_related_posts_per_page ($ args) {
$ args ['posts_per_page'] = 4;
návrat $ args;
}
add_filter ('woocommerce_output_related_products_args', 'wpex_woo_related_posts_per_page');

Změňte počet sloupců v řádku pro související a výprodejní sekce produktů

Stejně jako v obchodě, pokud chcete na jednotlivých stránkách produktu správně změnit počet sloupců souvisejících a up-sell produktů, musíte sloupce filtrovat a podle toho také měnit třídy těla.

// Filtr up-sells sloupce
funkce wpex_woo_single_loops_columns ($ sloupce) {
návrat 4;
}
add_filter ('woocommerce_up_sells_columns', 'wpex_woo_single_loops_columns');

// Filtrování souvisejících args
function wpex_woo_related_columns ($ args) {
$ args ['column'] = 4;
návrat $ args;
}
add_filter ('woocommerce_output_related_products_args', 'wpex_woo_related_columns', 10);

// Filtrování tříd těla pro přidání třídy sloupců
funkce wpex_woo_single_loops_columns_body_class ($ třídy) {
if (is_singular ('product')) {
$ třídy [] = 'sloupce-4';
}
návrat $ třídy;
}
add_filter ('body_class', 'wpex_woo_single_loops_columns_body_class');

Přidejte do nabídky dynamický odkaz na košík a náklady na vozík

Tento úryvek přidá položku košíku WooCommerce do nabídky, která zobrazuje náklady na položky v košíku. Navíc, pokud váš web má zapnutou funkci Font-Awesome, zobrazí se malá ikona nákupní tašky. Důležité: Tyto funkce nesmí být zabaleny do podmíněné is_admin (), protože spoléhají na AJAX, aby aktualizovaly náklady, musíte se ujistit, že funkce jsou dostupné, když is_admin () vrátí true a false.

// Přidejte odkaz do košíku
funkce wpex_add_menu_cart_item_to_menus ($ items, $ args) {

// Ujistěte se, že jste „wpex_main“ změnili umístění v nabídce !!!!
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. = '
  • '; $ items. = wpex_menu_cart_item (); $ items. = '
  • '; } vrátit $ položky; } add_filter ('wp_nav_menu_items', 'wpex_add_menu_cart_item_to_menus', 10, 2); // Funkce vrací odkaz na hlavní menu 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 (); } jinde { $ url = wc_get_page_permalink ('shop'); } $ html = $ cart_extra = WC () -> cart-> get_cart_total (); $ html = str_replace ('množství', '', $ html); $ output. = ''; $ output. = ''; $ output. = wp_kses_post ($ html); $ output. = ''; návrat $ výstup; } // Aktualizujte odkaz na košík pomocí AJAX funkce wpex_main_menu_cart_link_fragmenty ($ fragmenty) { $ fragmenty ['. wpex-menu-cart-total'] = wpex_menu_cart_item (); vrátit $ fragmenty; } add_filter ('add_to_cart_fragmenty', 'wpex_main_menu_cart_link_fragmenty');

    Závěr

    WooCommerce bude ve výchozím nastavení fungovat s jakýmkoli motivem, ale přidání nějaké další podpory pro plugin, aby lépe vyhovovalo vašemu tématu, je velmi snadné. Vlastně jsem napsal tento příspěvek při kódování našeho New York WordPress Blog & Shop téma, takže většina z těchto vylepšení jsou součástí našeho tématu. Nebo pokud si raději můžete téma koupit, abyste se podívali na to, co se stalo (viz soubory na wpex-new-york / inc / woocommerce) – může být pro vás snazší naučit se, jak správně přidat vlastní podpora pro plugin WooCommerce při pohledu na již zakódované téma.

    Existují nějaké další úryvky, o kterých si myslíte, že patří do tohoto seznamu, nebo byste našli užitečné při vývoji nových témat připravených pro 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