Kuidas teha WordPressi teema WooCommerce valmis

Muutke oma WordPressi teema WooCommerce ühilduvaks lõputööde lõputöödega

Nii et soovite oma teema juurde poodi lisada – vinge! WooCommerce on suurepärane valik. Tehniliselt võttes KÕIK teemad on „WooCommerce ühilduvad”, kuna see on pistikprogramm. Teoreetiliselt peaks iga pistikprogramm töötama mis tahes WordPressi teemaga (see on õigesti kodeeritud).


Teemarendajana võiksite siiski kohandada WooCommerce’i väljundit, et see sobiks paremini teie teemaga või pakkuda lõppkasutajatele valikuid, mis pole WooCommercei seadetes hõlpsasti saadaval (näiteks muuta veergude arvu poes). Altpoolt leiate kasulikke katkendeid, mida saate kasutada oma teema WooCommerce jaoks parema toe pakkumiseks ja / või konkreetse kujunduse asjade muutmiseks.

Tähtis: Paljud allpool olevad lõigud kasutavad funktsioone, mis on saadaval ainult WooCommerce’is. Nii et veenduge, et need katkendid poleks jaotamise jaoks loodud teemasse toodud lihtsalt teie function.php-faili allosas. Kui kavatsete oma teemat teistega jagada või seda müüa, siis pange kindlasti oma sisselõigete lõigud alles siis, kui WooCommerce’i pistikprogramm on aktiivne.

Kontrollige, kas WooCommerce on lubatud

Oma teemades meeldib mulle määratleda kohandatud konstant, mille abil saab kontrollida, kas WooCommerce on sel viisil lubatud. Saan faile lisada või funktsioone käivitada ainult siis, kui WooCommerce on aktiivne (kui te pole seda veel teinud, vaadake ülaltoodud olulist sõnumit).

// Lisage uus konstant, mis vastab tõele, kui WooCommerce on aktiivne
define ('WPEX_WOOCOMMERCE_ACTIVE', klass_eksisteerib ('WooCommerce'));

// WooCommerce'i aktiivsuse kontrollimine
if (WPEX_WOOCOMMERCE_ACTIVE) {
// Tee midagi...
// Näiteks lisage uus fail kõigi teie Woo muudatustega.
}

Kuulutage WooCommendi tugi

See on esimene ja kõige olulisem kood, mis lisatakse teema juurde ja mis võimaldab WooCommerce’i tuge ning takistab pistikprogrammi hoiatusi lõppkasutajale, et see teema ei ühildu.

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

Eemaldage WooCommerce CSS

Isiklikult alistan pigem WooCommerce’i stiilid, et vältida võimalikke probleeme kolmanda osapoole WooCommerce’i pistikprogrammidega. Kui soovite eemaldada kõik WooCommerce’i stiilid, on see väga lihtne.

Järgmine fragment on kõigi WooCommerce’i stiilide eemaldamiseks:

// Eemaldage kõik Woo-stiilid
add_filter ('woocommerce_enqueue_styles', '__return_empty_array');

See fragment on näide konkreetsete CSS-stiilide tingimuslikust eemaldamisest:

funktsioon wpex_remove_woo_styles ($ stiilid) {
unset ($ stiilid ['woocommerce-general']);
unset ($ stiilid ['woocommerce-layout']);
unset ($ stiilid ['woocommerce-smallscreen']);
tagastama $ stiile;
}
add_filter ('woocommerce_enqueue_styles', 'wpex_remove_woo_styles');

Luba WooCommendi tootegalerii, suum ja valguskast (v3.0 +)

WooCommerce 3.0-s tutvustasid nad uut tootegaleriid, suumi ja valguskasti. Kui soovite neid oma teemas kasutada, peavad need kõik olema lubatud funktsiooni „add_theme_support” kaudu.

add_theme_support ('wc-toode-galerii-liugur');
add_theme_support ('wc-toode-galerii-suum');
add_theme_support ('wc-product-gallery-lightbox');

Eemaldage poe pealkiri

Paljudel teemadel on juba arhiivide pealkirjade kuvamise funktsioonid, nii et see kood eemaldab WooCommerceist täiendava pealkirja, mis on parem kui see CSS-i kaudu peita.

add_filter ('woocommerce_show_page_title', '__return_false');

Muutke poe arhiivi pealkirja

Kui teie teema kasutab oma arhiivide pealkirja kuvamiseks funktsioone archive_title () või get_archive_title (), saate seda hõlpsalt filtri abil näppida, et haarata kaupluse arhiivi pealkirja asemel tootelehe nimi.

funktsioon wpex_woo_archive_title ($ title) {
if (is_shop () && $ shop_id = wc_get_page_id ('pood')) {
$ title = get_the_title ($ shop_id);
}
tagasta tiitel;
}
add_filter ('get_the_archive_title', 'wpex_woo_archive_title');

Muutke poes lehel kuvatavate toodete arvu

Kasutatakse muutma, kui palju tooteid poes ja tootearhiivides ühel lehel kuvatakse (kategooriad ja sildid).

// Muutke WooCommerce kaupluste postitusi ühel lehel
funktsioon wpex_woo_posts_per_page ($ cols) {
tagasi 12;
}
add_filter ('loop_shop_per_page', 'wpex_woo_posts_per_page');

Muutke poes kuvatavate veergude arvu rea kohta

Ma ei saa aru, miks WooCommerce sel viisil töötab, kuid te ei saa lihtsalt filtrit „loop_shop_columns” muuta, vaid peate veergude toimimiseks lisama ka kehasildi kordumatud klassid. Kuigi Woo lühikoodidel on õigete klassidega jagamisümbris, mida poodide lehed ei oma, vajame sellepärast kahte funktsiooni.

// Muutke kaupluste veerge
funktsioon wpex_woo_shop_columns ($ veerud) {
tagasi 4;
}
add_filter ('loop_shop_columns', 'wpex_woo_shop_columns');

// Lisage kaupluste veergude jaoks õige korpuse klass
funktsioon wpex_woo_shop_columns_body_class ($ klassid) {
if (is_shop () || is_product_category () || is_product_tag ()) {
$ class [] = 'veerud-4';
}
tagastama $ klassid;
}
add_filter ('body_class', 'wpex_woo_shop_columns_body_class');

Järgmise ja eelmise lehekülje noolte muutmine

See fragment võimaldab teil kohandada poes leiduvaid nooli, et need vastaksid teie teema teemadele.

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

Muutke OnSale’i märgi teksti

Eriti kasulik teistsugust keelt kasutavatel saitidel või hüüumärgi eemaldamiseks, mille kohta ma pole suur fänn.

funktsioon wpex_woo_sale_flash () {
tagasi ''. esc_html __ ('müük', 'veebikaubandus'). '';
}
add_filter ('woocommerce_sale_flash', 'wpex_woo_sale_flash');

Tootegalerii pisipiltide veergude muutmine

Võib-olla soovite muuta üksiku tootegalerii pisipiltide veergude arvu sõltuvalt paigutusest ja see funktsioon teeb just seda.

funktsioon wpex_woo_product_thumbnails_columns () {
tagasi 4;
}
add_action ('woocommerce_product_thumbnails_columns', 'wpex_woo_product_thumbnails_columns');

Muutke kuvatavate seotud toodete arvu

Kasutatakse ühe toote lehel seotud toodete kohta kuvatavate toodete arvu muutmiseks.

// Seadke seotud tooted kuvama 4 toodet
funktsioon wpex_woo_related_posts_per_page ($ args) {
$ args ['posts_per_page'] = 4;
tagasi $ args;
}
add_filter ('woocommerce_output_related_products_args', 'wpex_woo_related_posts_per_page');

Muutke toodete veergude arvu rea kohta seotud ja müüdavate jaotiste osas

Nii nagu poes, kui soovite õigesti muuta seotud toodete ja ülesmüügitud toodete veergude arvu üksikutel tootelehtedel, peate veerud filtreerima ja vastavalt muutma ka kerekordasid..

// Veergude üles-müük filtreerimine
funktsioon wpex_woo_single_loops_columns ($ veerud) {
tagasi 4;
}
add_filter ('woocommerce_up_sells_columns', 'wpex_woo_single_loops_columns');

// Filtreerige seotud argsed
funktsioon wpex_woo_related_columns ($ args) {
$ args ['veerud'] = 4;
tagasi $ args;
}
add_filter ('woocommerce_output_related_products_args', 'wpex_woo_related_columns', 10);

// Veeruklassi lisamiseks filtreerige kehaklassid
funktsioon wpex_woo_single_loops_columns_body_class ($ klassid) {
if (is_singular ('toode')) {
$ class [] = 'veerud-4';
}
tagastama $ klassid;
}
add_filter ('body_class', 'wpex_woo_single_loops_columns_body_class');

Lisage oma menüüsse dünaamiline ostukorvi link ja ostukorvi maksumus

See koodilõik lisab teie menüüsse WooCommerce’i ostukorvi üksuse, mis kuvab teie ostukorvi üksuste maksumuse. Plus, kui teie saidil on lubatud funktsioon Font-Awesome, kuvatakse sellel väike ostukorvikoon. Tähtis: Neid funktsioone ei tohi pakkida is_admin () tingimuseks, kuna need sõltuvad AJAX-ist, et värskendada kulu. Peate veenduma, et funktsioonid on saadaval, kui is_admin () tagastab tõese ja vale.

// Lisage menüüle ostukorvi link
funktsioon wpex_add_menu_cart_item_to_menus ($ üksused, $ args) {

// Veenduge, et muudate 'wpex_main' menüü asukohta !!!!
if ($ args-> teema_koht === 'wpex_main') {

$ css_class = 'menüü-üksus menüü-üksus-tüüp-ostukorv menüü-üksus-tüüp-pood-ostukorv';

if (is_cart ()) {
$ css_class. = 'praegune menüü-üksus';
}

$ üksust. = '
  • '; $ üksused. = wpex_menu_cart_item (); $ üksust. = '
  • '; } tagastage $ esemeid; } add_filter ('wp_nav_menu_items', 'wpex_add_menu_cart_item_to_menus', 10, 2); // Funktsioon tagastab peamenüü ostukorvi lingi funktsioon 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 (); } veel { $ url = wc_get_page_permalink ('pood'); } $ html = $ cart_extra = WC () -> cart-> get_cart_total (); $ html = str_replace ('summa', '', $ html); $ output. = ''; $ output. = ''; $ väljund. = wp_kses_post ($ html); $ output. = ''; tagasi $ väljund; } // Uuenda ostukorvi linki AJAX-iga funktsioon wpex_main_menu_cart_link_fragments ($ fragmendid) { $ fragmendid ['. wpex-menu-cart-total'] = wpex_menu_cart_item (); tagasta $ fragmendid; } add_filter ('add_to_cart_fragments', 'wpex_main_menu_cart_link_fragments');

    Järeldus

    WooCommerce töötab vaikimisi iga teemaga, kuid pistikprogrammi lisatoe lisamine, et see sobiks paremini teie teemaga, on väga lihtne teha. Ma kirjutasin selle postituse tegelikult meie New Yorgi WordPress Blog & Shop teemat kodeerides, nii et enamik neist parandustest on meie teema sees. Või kui soovite, siis võite selle teema osta, et vaadata järele, kuidas kõike tehti (vaadake faile saidil wpex-new-york / inc / woocommerce) – see võib olla teile lihtsam viis õppida, kuidas õigesti lisada kohandatud tugi pistikprogrammile WooCommerce, vaadates juba kodeeritud teemat.

    Kas on mõnda muud katkendit, mis teie arvates sellesse loendisse kuulub, või oleks teile kasulik, kui arendate uusi WooCommerce’i jaoks valmis teemasid?

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