Ako pripraviť WordPress Téma WooCommerce pripravené

Prispôsobte svoj WordPress Theme WooCommerce tak, aby bol kompatibilný s tými užitočnými úryvkami

Takže chcete do svojej témy pridať obchod – úžasné! WooCommerce je skvelá voľba. technicky vzaté ALL Témy sú „kompatibilné s WooCommerce“, pretože ide o doplnok. Teoreticky by mal každý doplnok pracovať s akoukoľvek témou WordPress (ktorá je správne kódovaná).


Ako vývojár témy však možno budete chcieť vylepšiť výstup WooCommerce tak, aby lepšie zodpovedal vašej téme, alebo poskytnúť možnosti svojim koncovým používateľom, ktorí nie sú okamžite k dispozícii v nastaveniach WooCommerce (napríklad zmena počtu stĺpcov v obchode). Nižšie nájdete niekoľko užitočných úryvkov, ktoré môžete použiť na poskytnutie „lepšej“ podpory pre WooCommerce vo svojom motíve a / alebo na zmenu vecí pre váš konkrétny dizajn..

dôležitý: Mnoho z úryvkov nižšie používa funkcie dostupné iba vo WooCommerce. Uistite sa teda, že tieto úryvky nie sú uložené iba v spodnej časti súboru function.php v téme vytvorenej na distribúciu. Ak sa chystáte zdieľať svoju tému s ostatnými alebo predávať, určite umiestnite útržky do svojho vlastného súboru, ktorý sa načíta iba vtedy, keď je aktívny doplnok WooCommerce..

Skontrolujte, či je povolený obchod WooCommerce

Vo svojich témach by som rád definoval vlastnú konštantu, ktorú je možné použiť na kontrolu, či je WooCommerce povolený týmto spôsobom. Môžem zahrnúť súbory alebo spúšťať funkcie iba vtedy, keď je WooCommerce aktívny (ak ste tak ešte neurobili, pozrite si dôležitú správu vyššie).

// Pridajte novú konštantu, ktorá sa vráti true, ak je WooCommerce aktívny
define ('WPEX_WOOCOMMERCE_ACTIVE', class_exists ('WooCommerce'));

// Kontrola, či je aktívny obchod WooCommerce
if (WPEX_WOOCOMMERCE_ACTIVE) {
// Urob niečo...
// Napríklad zahrnutie nového súboru do všetkých úprav Woo.
}

Vyhlásiť podporu WooCommerce

Toto je prvý a najdôležitejší kód, ktorý sa pridá k téme, ktorý „povoľuje“ podporu WooCommerce a zabraňuje varovaniam doplnku, ktoré koncovému používateľovi oznamujú, že téma nie je kompatibilná..

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

Odstráňte CSS WooCommerce

Osobne radšej prepíšem štýly WooCommerce, aby som predišiel akýmkoľvek problémom s doplnkami WooCommerce tretích strán. Ak však chcete odstrániť všetky štýly WooCommerce, je to veľmi jednoduché.

Nasledujúci úryvok slúži na odstránenie VŠETKÝCH štýlov WooCommerce:

// Odstráňte všetky štýly Woo
add_filter ('woocommerce_enqueue_styles', '__return_empty_array');

Tento úryvok je príkladom podmienečného odstránenia konkrétnych štýlov CSS:

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

Povoliť galériu produktov WooCommerce, Zoom a Lightbox (v3.0 +)

Vo WooCommerce 3.0 predstavili novú galériu produktov, zoom a lightbox. Ak ich chcete použiť vo svojej téme, musíte ich povoliť prostredníctvom „add_theme_support“.

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

Odstráňte názov obchodu

Mnoho tém už má funkcie na zobrazenie archívnych titulov, takže tento kód odstráni ďalší názov z WooCommerce, ktorý je lepší ako skryť ho pomocou CSS.

add_filter ('woocommerce_show_page_title', '__return_false');

Zmeniť názov archívu pre obchod

Ak vaša téma používa funkcie archive_title () alebo get_archive_title () na zobrazenie názvu vašich archívov, môžete ich ľahko vyladiť pomocou filtra a namiesto názvu archívu obchodu môžete tak urobiť názov 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');

Zmeňte počet produktov zobrazených na stránke v obchode

Používa sa na zmenu počtu produktov zobrazených na stránke v obchode a archívoch produktov (kategórie a značky).

// Zmena príspevkov v obchode WooCommerce na stránku
function wpex_woo_posts_per_page ($ cols) {
návrat 12;
}
add_filter ('loop_shop_per_page', 'wpex_woo_posts_per_page');

Zmeňte počet stĺpcov zobrazených v obchode na riadok

Nerozumiem, prečo WooCommerce funguje týmto spôsobom, ale nemôžete zmeniť iba filter ‘loop_shop_columns, musíte do značky body pridať aj jedinečné triedy, aby stĺpce mohli fungovať. Zatiaľ čo kódy Woo Shortcodes majú balík div so správnymi triedami, ktoré stránky obchodu nemajú, z tohto dôvodu potrebujeme dve funkcie.

// Zmeniť stĺpce obchodu
function wpex_woo_shop_columns ($ column) {
návrat 4;
}
add_filter ('loop_shop_columns', 'wpex_woo_shop_columns');

// Pridajte správnu triedu tela pre stĺpce obchodu
function wpex_woo_shop_columns_body_class ($ classes) {
if (is_shop () || is_product_category () || is_product_tag ()) {
$ triedy [] = 'stĺpce-4';
}
návrat $ triedy;
}
add_filter ('body_class', 'wpex_woo_shop_columns_body_class');

Zmeňte šípky nasledujúcej a predchádzajúcej stránky

Tento úryvok vám umožní vyladiť stránkové šípy v obchode tak, aby sa zhodovali so šípkami vo vašej téme.

function wpex_woo_pagination_args ($ args) {
$ args ['prev_text'] = ',;
$ args ['next_text'] = ',;
návrat $ args;
}
add_filter ('woocommerce_pagination_args', 'wpex_woo_pagination_args');

Zmeňte text odznaku OnSale

Obzvlášť užitočné na stránkach, ktoré používajú iný jazyk alebo na odstránenie výkričníka, ktorý nie som veľkým fanúšikom.

function wpex_woo_sale_flash () {
návrat ''. esc_html __ ('Predaj', 'woocommerce'). ',;
}
add_filter ('woocommerce_sale_flash', 'wpex_woo_sale_flash');

Zmeniť stĺpce miniatúr v Galérii produktov

Možno budete chcieť zmeniť počet stĺpcov pre miniatúry jednotlivých galérií produktov v závislosti od rozloženia a táto funkcia to urobí.

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

Zmeňte počet zobrazených súvisiacich produktov

Používa sa na zmenu počtu produktov zobrazených pre súvisiace produkty na jednej stránke produktu.

// Nastavte súvisiace produkty tak, aby zobrazovali 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');

Zmeňte počet stĺpcov v riadku pre súvisiace a predávané sekcie produktov

Rovnako ako v obchode, ak chcete na jednotlivých stránkach produktov správne zmeniť počet stĺpcov pre súvisiace a predávané produkty, musíte stĺpce filtrovať a podľa toho tiež zmeniť triedy tela..

// Filtrovanie predáva stĺpce
function wpex_woo_single_loops_columns ($ column) {
návrat 4;
}
add_filter ('woocommerce_up_sells_columns', 'wpex_woo_single_loops_columns');

// Filtrovanie súvisiacich hákov
function wpex_woo_related_columns ($ args) {
$ args ['column'] = 4;
návrat $ args;
}
add_filter ('woocommerce_output_related_products_args', 'wpex_woo_related_columns', 10);

// Filtrovanie tried tela na pridanie triedy stĺpcov
function wpex_woo_single_loops_columns_body_class ($ classes) {
if (is_singular ('product')) {
$ triedy [] = 'stĺpce-4';
}
návrat $ triedy;
}
add_filter ('body_class', 'wpex_woo_single_loops_columns_body_class');

Pridajte do ponuky dynamický odkaz na košík a náklady na košík

Tento úryvok pridá položku ponuky WooCommerce do ponuky, v ktorej sa zobrazia náklady na položky v košíku. Ak je na vašom webe povolená funkcia Font-Awesome, zobrazí sa aj malá ikona nákupnej tašky. dôležitý: Tieto funkcie nesmú byť zabalené v podmienke is_admin (), pretože sa spoliehajú na AJAX, aby aktualizovali náklady, musíte sa ubezpečiť, že sú funkcie dostupné, keď is_admin () vráti true a false.

// Pridajte odkaz do košíka do ponuky
function wpex_add_menu_cart_item_to_menus ($ items, $ args) {

// Uistite sa, že ste „wpex_main“ prešli na svoje miesto v ponuke !!!!
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. = '
  • ,; } návrat $ položky; } add_filter ('wp_nav_menu_items', 'wpex_add_menu_cart_item_to_menus', 10, 2); // Funkcia vráti 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 (); } else { $ url = wc_get_page_permalink ('shop'); } $ html = $ cart_extra = WC () -> cart-> get_cart_total (); $ html = str_replace ('suma', '', $ html); $ output. = ',; $ output. = ',; $ output. = wp_kses_post ($ html); $ output. = ',; návrat $ výstup; } // Aktualizujte odkaz na košík pomocou AJAX function wpex_main_menu_cart_link_fragmenty ($ fragmenty) { $ fragmenty ['. wpex-menu-cart-total'] = wpex_menu_cart_item (); vrátiť $ fragmenty; } add_filter ('add_to_cart_fragment', 'wpex_main_menu_cart_link_fragment');

    záver

    WooCommerce bude v predvolenom nastavení pracovať s ľubovoľnou témou, ale pridanie ďalšej podpory pre doplnok tak, aby lepšie vyhovovalo vašej téme, je veľmi ľahké. Tento príspevok som vlastne napísal pri kódovaní témy New Blog WordPress Blog & Shop v New Yorku, takže väčšina týchto vylepšení je zahrnutá v našej téme. Alebo ak si chcete radšej kúpiť tému a pozrieť sa, ako sa všetko urobilo (pozrite si súbory na wpex-new-york / inc / woocommerce) – môže byť pre vás jednoduchším spôsobom naučiť sa, ako správne pridať prispôsobená podpora pre doplnok WooCommerce pri pohľade na už zakódovanú tému.

    Existujú nejaké ďalšie úryvky, o ktorých si myslíte, že patria do tohto zoznamu, alebo by ste vám mohli pomôcť pri vývoji nových tém pripravených na 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