Kako narediti WordPress temo WooCommerce pripravljena

Naj bo vaša tema WordPress WooCommerce združljiva s temi, ki so uporabni

Torej želite svoji temi dodati trgovino – super! WooCommerce je odlična izbira. Tehnično gledano VSE teme so »Združljive z WooCommerce«, ker je vtičnik. Teoretično bi moral vsak vtičnik delovati s katero koli temo WordPressa (ki je pravilno kodirana).


Kot razvijalec tem, boste morda želeli prilagoditi izid storitve WooCommerce, da se bolje prilega vaši temi ali zagotoviti končnim uporabnikom možnosti, ki niso na voljo v nastavitvah WooCommerce (na primer spreminjanje števila stolpcev v trgovini). Spodaj boste našli nekaj uporabnih odrezkov, ki jih lahko uporabite za zagotavljanje boljše podpore za WooCommerce v svoji temi in / ali za spreminjanje stvari za vaš poseben dizajn.

Pomembno: Številni spodnji delčki uporabljajo funkcije, ki so na voljo samo v WooCommerce. Tako se prepričajte, da teh odrezkov ne boste ravnokar odvrgli na dnu vaše datotek.php v temi, ustvarjeni za distribucijo. Če boste svojo temo dali v skupno rabo z drugimi ali jo prodali, ne pozabite vstaviti odrezkov v lastno datoteko, naloženo le, če je vtičnik WooCommerce aktiven.

Preverite, ali je WooCommerce omogočena

V svojih temah želim določiti konstanto po meri, s katero lahko preverim, ali je WooCommerce omogočen na ta način, lahko vključim datoteke ali zaženem funkcije le, ko je aktivna WooCommerce (glejte pomembno sporočilo zgoraj, če ga še niste).

// Dodajte novo konstanto, ki vrne true, če je aktivna WooCommerce
define ('WPEX_WOOCOMMERCE_ACTIVE', class_exists ('WooCommerce'));

// Preverjanje, ali je WooCommerce aktivna
če (WPEX_WOOCOMMERCE_ACTIVE) {
// Naredi kaj...
// Na primer vključitev nove datoteke z vsemi vašimi Woojami.
}

Izjavite podporo za WooCommerce

To je prvi in ​​najpomembnejši del kode, ki ga dodate svoji temi, ki “omogoča” podporo WooCommerce in preprečuje opozorila vtičnika, ki končnemu uporabniku sporočajo, da tema ni združljiva.

dodajanje ('after_setup_theme', funkcija () {
add_theme_support ('woocommerce');
});

Odstranite WooCommerce CSS

Osebno raje preglasim sloge WooCommerce, da preprečim morebitne težave z vtičniki WooCommerce tretjih oseb. Če pa želite odstraniti vse sloge WooCommerce, je zelo enostavno.

Naslednji delček je za odstranjevanje VSEH stilov WooCommerce:

// Odstranite vse modele Woo
add_filter ('woocommerce_enqueue_styles', '__return_empty_array');

Ta delček je primer pogojne odstranitve določenih slogov CSS:

funkcija wpex_remove_woo_styles ($ stilov) {
unset ($ styles ['woocommerce-general']);
unset ($ styles ['woocommerce-layout']);
unset ($ styles ['woocommerce-smallscreen']);
vrne $ sloge;
}
add_filter ('woocommerce_enqueue_styles', 'wpex_remove_woo_styles');

Omogoči WooCommerce Galerijo izdelkov, Zoom & Lightbox (v3.0 +)

V WooCommerce 3.0 so predstavili novo galerijo izdelkov, zoom in lightbox. Vse to mora biti omogočeno prek “add_theme_support”, če jih želite uporabiti v svoji temi.

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

Odstranite naslov trgovine

Veliko tem že ima funkcije za prikaz naslovov arhivov, tako da ta koda odstrani dodatni naslov iz WooCommerce, kar je bolje, potem pa ga skrivati ​​prek CSS.

add_filter ('woocommerce_show_page_title', '__return_false');

Spremenite naslov arhiva trgovine

Če vaša tema uporablja funkcijo archive_title () ali get_archive_title () za prikaz naslova v svojih arhivih, jo lahko preprosto nastavite s pomočjo filtra, da zajamete ime strani izdelka namesto za naslov arhiva trgovine.

funkcija wpex_woo_archive_title ($ title) {
if (is_shop () && $ shop_id = wc_get_page_id ('trgovina')) {
$ title = get_the_title ($ shop_id);
}
vrniti $ naslov;
}
add_filter ('get_the_archive_title', 'wpex_woo_archive_title');

Spremenite število izdelkov, prikazanih na strani v trgovini

Uporablja se za spreminjanje, koliko izdelkov se prikaže na strani v trgovini in arhivih izdelkov (kategorije in oznake).

// Spremeni objave v trgovini WooCommerce na stran
funkcija wpex_woo_posts_per_page ($ cols) {
vrnitev 12;
}
add_filter ('loop_shop_per_page', 'wpex_woo_posts_per_page');

Spremenite število stolpcev, prikazanih v trgovini po vrsti

Ne razumem, zakaj WooCommerce deluje na ta način, vendar ne morete samo spremeniti filtra ‘loop_shop_column’, morate dodati tudi edinstvene razrede oznaki body, da bodo stolpci delovali. Medtem ko imajo Woo kratke kode ovitek div s pravilnimi razredi, ki jih strani trgovin ne, zato potrebujemo dve funkciji.

// Spremeni stolpce v trgovini
funkcija wpex_woo_shop_column ($ stolpcev) {
vrnitev 4;
}
add_filter ('loop_shop_column', 'wpex_woo_shop_column');

// Dodaj pravilni razred telesa za stolpce trgovine
funkcija wpex_woo_shop_column_body_class ($ class) {
if (is_shop () || is_product_category () || is_product_tag ()) {
$ class [] = 'stolpci-4';
}
vrnite razrede $;
}
add_filter ('body_class', 'wpex_woo_shop_column_body_class');

Spremenite puščice za naslednjo in prejšnjo stran

Ta delček vam bo omogočil, da nastavite puščice na strani za prodajo v trgovini, da se ujemajo s tistimi iz vaše teme.

funkcija wpex_woo_pagination_args ($ args) {
$ args ['prev_text'] = '';
$ args ['next_text'] = '';
vrne $ args;
}
add_filter ('woocommerce_pagination_args', 'wpex_woo_pagination_args');

Spremenite besedilo značke OnSale

Še posebej koristno na spletnih mestih, ki uporabljajo drug jezik, ali za odstranjevanje klicaja, za katerega nisem velik oboževalec.

funkcija wpex_woo_sale_flash () {
vrnitev ''. esc_html __ („Prodaja“, „woocommerce“). '';
}
add_filter ('woocommerce_sale_flash', 'wpex_woo_sale_flash');

Spremenite stolpce sličic galerije izdelkov

Morda boste želeli spremeniti število stolpcev za sličice galerije posameznih izdelkov, odvisno od vaše postavitve in ta funkcija bo naredila prav to.

funkcija wpex_woo_product_thumbnails_column () {
vrnitev 4;
}
dodajanje ('woocommerce_product_thumbnails_column', 'wpex_woo_product_thumbnails_column');

Spremenite število prikazanih povezanih izdelkov

Uporablja se za spreminjanje števila izdelkov, ki so prikazani za sorodne izdelke na posamezni strani izdelkov.

// Nastavite sorodne izdelke za prikaz 4 izdelkov
funkcija wpex_woo_related_posts_per_page ($ args) {
$ args ['posts_per_page'] = 4;
vrne $ args;
}
add_filter ('woocommerce_output_related_products_args', 'wpex_woo_related_posts_per_page');

Spremenite število stolpcev na vrstico za sorodne in prodajne odseke izdelkov

Tako kot trgovina, če želite pravilno spremeniti število stolpcev za sorodne in prodajne izdelke na posameznih straneh izdelkov, morate filtre tudi filtrirati in ustrezno spremeniti razrede karoserije.

// Filtriranje prodaj stolpcev
funkcija wpex_woo_single_loops_column ($ stolpcev) {
vrnitev 4;
}
add_filter ('woocommerce_up_sells_column', 'wpex_woo_single_loops_column');

// Filtriranje orodij
funkcija wpex_woo_related_column ($ args) {
$ args ['stolpci'] = 4;
vrne $ args;
}
add_filter ('woocommerce_output_related_products_args', 'wpex_woo_related_column', 10);

// Filtriranje telesnih razredov, da dodate razred stolpcev
funkcija wpex_woo_single_loops_column_body_class ($ class) {
če (is_singular ('izdelek')) {
$ class [] = 'stolpci-4';
}
vrnite razrede $;
}
add_filter ('body_class', 'wpex_woo_single_loops_column_body_class');

V svoj meni dodajte dinamično povezavo do košarice in stroške košarice

Ta delček bo v vaš meni dodal element košarice WooCommerce, ki prikazuje ceno izdelkov v vozičku. Poleg tega, če je na vašem spletnem mestu omogočena funkcija Font-Awesome, bo prikazana majhna ikona nakupovalne vrečke. Pomembno: Teh funkcij ne smete zaviti v is_admin () pogojno, ker se pri posodabljanju stroškov zanašajo na AJAX. Prepričajte se, da so funkcije na voljo, ko is_admin () vrne true in false.

// Dodaj meni v košarico
funkcija wpex_add_menu_cart_item_to_menus ($ items, $ args) {

// Prepričajte se, da ste svojo lokacijo v meniju spremenili 'wpex_main' !!!!
if ($ args-> topic_location === 'wpex_main') {

$ css_class = 'menu-item menu menu-item-type-cart menu-item-type-woocommerce-cart';

če (is_cart ()) {
$ css_class. = 'trenutna postavka menija';
}

$ items. = '
  • '; $ items. = wpex_menu_cart_item (); $ items. = '
  • '; } vrne $ predmete; } add_filter ('wp_nav_menu_items', 'wpex_add_menu_cart_item_to_menus', 10, 2); // Funkcija vrne povezavo z vozičkom v glavnem meniju funkcija wpex_menu_cart_item () { $ output = ''; $ cart_count = WC () -> voziček-> voziček_posebno_broj; $ css_class = 'wpex-menu-cart-total wpex-cart-total-'. intval ($ cart_count); če ($ cart_count) { $ url = WC () -> voziček-> get_cart_url (); } else { $ url = wc_get_page_permalink ('trgovina'); } $ html = $ cart_extra = WC () -> voziček-> get_cart_total (); $ html = str_replace ('znesek', '', $ html); $ output. = ''; $ output. = ''; $ output. = wp_kses_post ($ html); $ output. = ''; vrniti $ output; } // Posodobi povezavo vozička z AJAX funkcija wpex_main_menu_cart_link_fragments ($ fragmenti) { $ fragmenti ['. wpex-menu-cart-total'] = wpex_menu_cart_item (); vrnite fragmente $; } add_filter ('add_to_cart_fragments', 'wpex_main_menu_cart_link_fragments');

    Zaključek

    WooCommerce bo privzeto delovala s katero koli temo, vendar bo dodala nekaj dodatne podpore za vtičnik, da se bolje prilega vaši temi. To objavo sem pravzaprav napisal ob kodiranju teme New York WordPress Blog & Shop, tako da je večina teh popravkov vključena v našo temo. Če pa raje kupite temo, da si ogledate, kako je vse potekalo (oglejte si datoteke na wpex-new-york / inc / woocommerce) – morda se boste lažje naučili, kako pravilno dodati prilagojena podpora za vtičnik WooCommerce z ogledom že kodirane teme.

    Ali na tem seznamu obstajajo še drugi delčki, za katere menite, da bi bili koristni pri razvijanju novih tem, pripravljenih za 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