Kuinka tehdä WordPress-teema WooCommerce-valmiiksi

Tee WordPress-teemastasi WooCommerce yhteensopiva hyödyllisten katkelmien kanssa

Joten haluat lisätä kaupan teemaasi – mahtava! WooCommerce on loistava valinta. teknisesti KAIKKI teemat ovat ”WooCommerce -yhteensopivia”, koska se on laajennus. Teoriassa kaikkien laajennusten tulisi toimia minkä tahansa WordPress-teeman kanssa (joka on oikein koodattu).


Teemakehittäjänä kannattaa ehkä muokata WooCommerce-sovelluksen tuotetta sopivaksi teemaasi tai tarjota loppukäyttäjille vaihtoehtoja, joita ei ole helposti saatavilla WooCommerce-asetuksissa (kuten muuttaa kaupan sarakkeiden lukumäärää). Alta löydät hyödyllisiä katkelmia, joiden avulla voit tarjota “parempaa” tukea WooCommerce-teemallesi ja / tai muuttaa asioita omalle mallillesi.

Tärkeä: Monet alla olevista katkelmista käyttävät vain WooCommerce-palvelussa käytettävissä olevia toimintoja. Joten varmista, että näitä katkelmia ei ole vain poistettu funktion.php-tiedostosi alaosaan jakelua varten luodussa teemassa. Jos aiot jakaa teeman muiden kanssa tai myydä sen, muista ladata katkelmat omaan tiedostoonsa vain, kun WooCommerce-laajennus on aktiivinen.

Tarkista, onko WooCommerce käytössä

Teemoihini haluan määritellä mukautetun vakion, jota voidaan käyttää tarkistamaan, onko WooCommerce käytössä tällä tavalla. Voin sisällyttää tiedostoja tai suorittaa toimintoja vain, kun WooCommerce on aktiivinen (katso tärkeä viesti yllä, jos et vielä ole).

// Lisää uusi vakio, joka palaa totta, jos WooCommerce on aktiivinen
define ('WPEX_WOOCOMMERCE_ACTIVE', luokan_ekseli ('WooCommerce'));

// Tarkistetaan onko WooCommerce aktiivinen
if (WPEX_WOOCOMMERCE_ACTIVE) {
// Tee jotain...
// Esimerkiksi uuden tiedoston sisällyttäminen kaikkiin Woo-muokkauksiin.
}

Ilmoita WooCommerce-tuki

Tämä on ensimmäinen ja tärkein teema, joka lisätään teemaasi ja joka “mahdollistaa” WooCommerce-tuen ja estää laajennuksen varoituksia, jotka kertovat loppukäyttäjälle, että teema ei ole yhteensopiva.

add_action ('after_setup_theme', toiminto () {
add_theme_support ('verkkokauppa');
});

Poista WooCommerce CSS

Henkilökohtaisesti ohitan mieluummin WooCommerce-tyylit estääksesi mahdolliset ongelmat kolmansien osapuolien WooCommerce-laajennuksista. Jos kuitenkin haluat poistaa kaikki WooCommerce-tyylit, se on erittäin helppoa.

Seuraava katkelma on tarkoitettu KAIKKI WooCommerce-tyylien poistamiseen:

// Poista kaikki Woo-tyylit
add_filter ('woocommerce_enqueue_styles', '__return_empty_array');

Tämä katkelma on esimerkki tiettyjen CSS-tyylien ehdollisesta poistamisesta:

toiminto wpex_remove_woo_styles ($ tyylit) {
unset ($ tyylit ['verkkokauppa-yleinen']);
unset ($ tyylit ['woocommerce-layout']);
unset ($ tyylit ['woocommerce-smallscreen']);
palauta $ tyylit;
}
add_filter ('woocommerce_enqueue_styles', 'wpex_remove_woo_styles');

Ota WooCommerce-tuotegalleria, zoom ja valopöytä käyttöön (v3.0 +)

WooCommerce 3.0: ssa he esittelivät uuden tuote gallerian, zoomin ja lightboxin. Ne kaikki on otettava käyttöön lisäysosoitteen ”add_theme_support” kautta, jos haluat käyttää niitä teemaasi.

add_theme_support ('wc-tuote-galleria-liukusäädin');
add_theme_support ('wc-tuote-galleria-zoom');
add_theme_support ('wc-tuote-galleria-lightbox');

Poista Kaupan otsikko

Monilla teemoilla on jo toiminnot arkistointien näyttämiseksi, joten tämä koodi poistaa ylimääräisen otsikon WooCommerce-palvelusta, mikä on parempi kuin piilottaa se CSS: n kautta.

add_filter ('woocommerce_show_page_title', '__return_false');

Vaihda kaupan arkiston otsikko

Jos teemasi käyttää archive_title () – tai get_archive_title () -toimintoa näyttääksesi arkistosi otsikon, voit säätää sen helposti suodattimen avulla napataksesi tuotesivusi nimen kauppa-arkiston otsikon sijasta.

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

Muuta myymälässä näytettävien tuotteiden lukumäärää sivua kohden

Käytetään muuttamaan kuinka monta tuotetta näytetään sivua kohden kaupassa ja tuote-arkistoissa (luokat ja tunnisteet).

// Vaihda WooCommerce-myymäläviestejä sivua kohden
toiminto wpex_woo_posts_per_page ($ cols) {
paluu 12;
}
add_filter ('loop_shop_per_page', 'wpex_woo_posts_per_page');

Muuta myymälässä näytettävien sarakkeiden lukumäärää riviä kohti

En ymmärrä, miksi WooCommerce toimii tällä tavalla, mutta et voi vain muuttaa loop_shop_columns -suodatinta, vaan sinun on myös lisättävä ainutlaatuiset luokat body tagiin, jotta sarakkeet toimivat. Vaikka Woo Shortcodeilla on div-kääre oikeilla luokilla, kauppasivuilla ei ole, siksi tarvitsemme kaksi toimintoa.

// Vaihda myymäläsarakkeet
toiminto wpex_woo_shop_columns ($ sarakkeet) {
paluu 4;
}
add_filter ('loop_shop_columns', 'wpex_woo_shop_columns');

// Lisää oikea laitosluokka myymäläsarakkeille
toiminto wpex_woo_shop_columns_body_class ($ luokat) {
if (is_shop () || is_product_category () || is_product_tag ()) {
$ luokat [] = 'sarakkeet-4';
}
palauta $ luokat;
}
add_filter ('body_class', 'wpex_woo_shop_columns_body_class');

Vaihda seuraava ja aiempi sivutusnuoli

Tämän katkelman avulla voit säätää kaupan sivutusnuolia vastaamaan teemaasi.

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

Muuta OnSale-merkinnän tekstiä

Erityisen hyödyllinen sivustoissa, jotka käyttävät toista kieltä, tai huutomerkin poistamiseen, josta en ole valtava fani.

toiminto wpex_woo_sale_flash () {
palata ''. esc_html __ ('Sale', 'woocommerce'). '';
}
add_filter ('woocommerce_sale_flash', 'wpex_woo_sale_flash');

Vaihda tuotegalleria pikkukuvien sarakkeet

Haluat ehkä muuttaa yksittäisen tuotegalleria -pikkukuvien sarakkeiden määrää asettelustasi riippuen, ja tämä toiminto tekee juuri sen.

toiminto wpex_woo_product_thumbnails_columns () {
paluu 4;
}
add_action ('woocommerce_product_thumbnails_columns', 'wpex_woo_product_thumbnails_ columns');

Muuta näytettyjen liittyvien tuotteiden lukumäärää

Käytetään muuttamaan saman tuotesivun liittyvien tuotteiden lukumäärää.

// Aseta liittyvät tuotteet näyttämään 4 tuotetta
toiminto wpex_woo_related_posts_per_page ($ args) {
$ args ['posts_per_page'] = 4;
palauta $ args;
}
add_filter ('woocommerce_output_related_products_args', 'wpex_woo_related_posts_per_page');

Muuta sarakkeiden lukumäärää riviä vastaavien ja eniten myytyjen tuotteiden osastojen suhteen

Aivan kuten kaupassa, jos haluat muuttaa asianmukaisesti liittyvien ja myytävien tuotteiden sarakkeiden lukumäärää oikein yksittäisillä tuotesivuilla, sarakkeet on suodatettava ja myös rungoluokkia muutettava vastaavasti.

// Suodata up-sell -sarakkeet
toiminto wpex_woo_single_loops_columns ($ sarakkeet) {
paluu 4;
}
add_filter ('woocommerce_up_sells_columns', 'wpex_woo_single_loops_columns');

// Suodata liittyvät argit
toiminto wpex_woo_related_columns ($ args) {
$ args ['sarakkeet'] = 4;
palauta $ args;
}
add_filter ('woocommerce_output_related_products_args', 'wpex_woo_related_ columns', 10);

// Suodata vartaloluokat lisätäksesi sarakeluokan
toiminto wpex_woo_single_loops_columns_body_class ($ luokat) {
if (is_singular ('tuote')) {
$ luokat [] = 'sarakkeet-4';
}
palauta $ luokat;
}
add_filter ('body_class', 'wpex_woo_single_loops_columns_body_class');

Lisää dynaaminen ostoslinkki ja ostoskori valikkoosi

Tämä katkelma lisää valikkoosi WooCommerce-ostoskorin, joka näyttää ostoskorissasi olevien tuotteiden kustannukset. Lisäksi, jos sivustossasi on Font-Awesome käytössä, siinä näkyy pieni ostoskassi-kuvake. Tärkeä: Näitä toimintoja ei saa kääriä is_admin () -ehdoksi, koska ne luottavat AJAX: ään päivittääksesi kustannukset. Varmista, että toiminnot ovat käytettävissä, kun is_admin () palauttaa true ja false.

// Lisää ostoskorilinkki valikkoon
toiminto wpex_add_menu_cart_item_to_menus ($ esineet, $ args) {

// Varmista, että muutos 'wpex_main' valikkosi sijaintiin !!!!
if ($ args-> teema_paikka === 'wpex_main') {

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

if (is_cart ()) {
$ css_class. = 'current-menu-item';
}

$ kohteita. = '
  • '; $ kohteita. = wpex_menu_cart_item (); $ kohteita. = '
  • '; } palauta $ esineitä; } add_filter ('wp_nav_menu_items', 'wpex_add_menu_cart_item_to_menus', 10, 2); // Toiminto palauttaa päävalikkokärilinkin toiminto 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 (); } muuta { $ url = wc_get_page_permalink ('kauppa'); } $ html = $ cart_extra = WC () -> cart-> get_cart_total (); $ html = str_replace ('määrä', '', $ html); $ output. = ''; $ output. = ''; $ output. = wp_kses_post ($ html); $ output. = ''; palauttaa $ tuotos; } // Päivitä ostoslinkki AJAX: llä toiminto wpex_main_menu_cart_link_fragments ($ fragmentit) { $ fragmentit ['. wpex-menu-cart-total'] = wpex_menu_cart_item (); palauta $ fragmentit; } add_filter ('add_to_cart_fragments', 'wpex_main_menu_cart_link_fragments');

    johtopäätös

    WooCommerce toimii oletuksena minkä tahansa teeman kanssa, mutta lisäämällä lisätukea laajennukselle, jotta se sopisi paremmin teemaasi, on erittäin helppo tehdä. Kirjoitin todella tämän viestin koodaamalla New York WordPress Blog & Shop -teemaamme, joten suurin osa näistä parannuksista sisältyy teemaamme. Tai jos haluat mieluummin, voit ostaa teeman katsoaksesi kuinka kaikki tehtiin (katso tiedostot osoitteessa wpex-new-york / inc / woocommerce) – se voi olla sinulle helpompi tapa oppia lisäämään oikein mukautettu tuki WooCommerce-laajennukselle tarkastelemalla jo koodattua teemaa.

    Onko muita katkelmia, joiden luulet kuuluvan tähän luetteloon, tai mistä löydät apua kehittäessäsi uusia WooCommerce-valmiita teemoja?

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