Hogyan készítsünk el egy WordPress témát a WooCommerce-hez

Tegye WordPress-témáját, a WooCommerce-t kompatibilissé a hasznos kivonatokkal

Tehát hozzá szeretne adni egy boltot a témájához – fantasztikus! A WooCommerce nagyszerű választás. technikailag MINDEN A témák „WooCommerce kompatibilisek”, mert egy plugin. Elméletben minden beépülő modulnak működnie kell bármilyen WordPress témával (amely megfelelően kódolt).


Témafejlesztőként azonban érdemes módosítania a WooCommerce outputját, hogy jobban illeszkedjen a témájához, vagy olyan lehetőségeket biztosítson a végfelhasználók számára, amelyek a WooCommerce beállításaiban nem állnak rendelkezésre könnyen elérhetők (például az oszlopok számának megváltoztatása a boltban). Az alábbiakban talál néhány hasznos részletet, amelyek felhasználhatók a „jobb” támogatás nyújtásához a témában a WooCommerce számára és / vagy a dolgok megváltoztatásához.

Fontos: Az alábbi kivonatok többsége csak a WooCommerce szolgáltatásban elérhető funkciókat használja. Tehát győződjön meg arról, hogy ezeket a kivonatokat nemcsak a Function.php fájljának aljára dobták el egy terjesztésre létrehozott témában. Ha meg szeretné osztani a témát másokkal, vagy eladni, akkor ügyeljen arra, hogy csak a WooCommerce beépülő modul aktív részletében helyezze el a kivonatot a saját fájlba..

Ellenőrizze, hogy a WooCommerce engedélyezve van-e

Témáimban szeretnék meghatározni egy olyan egyéni állandó értéket, amely felhasználható annak ellenőrzésére, hogy a WooCommerce engedélyezve van-e. A fájlokat csak akkor tudom bevonni, vagy csak a WooCommerce aktív futtatásakor futtatni a funkciókat (lásd még a fenti fontos üzenetet, ha még nem tette meg).

// Adjon hozzá új állandót, amely igaznak bizonyul, ha a WooCommerce aktív
define ('WPEX_WOOCOMMERCE_ACTIVE', class_exists ('WooCommerce'));

// Annak ellenőrzése, hogy aktív-e a WooCommerce
if (WPEX_WOOCOMMERCE_ACTIVE) {
// Csinálj valamit...
// Mint például egy új fájl hozzáadása az összes Woo-szerkesztéshez.
}

Nyilatkozzon a WooCommerce támogatásáról

Ez az első és legfontosabb darab, amelyet a témához adunk, amely „engedélyezi” a WooCommerce támogatást és megakadályozza a plugin figyelmeztetéseit, amelyek azt mondják a végfelhasználónak, hogy a téma nem kompatibilis.

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

Távolítsa el a WooCommerce CSS-t

Személy szerint inkább felülbírálom a WooCommerce stílusokat, hogy elkerüljük a harmadik felek WooCommerce bővítményeivel kapcsolatos esetleges problémákat. Ha azonban el akarja távolítani az összes WooCommerce stílust, ez nagyon egyszerű.

A következő részlet az összes WooCommerce stílus eltávolítására szolgál:

// Távolítson el minden Woo stílust
add_filter ('woocommerce_enqueue_styles', '__return_empty_array');

Ez a kivonat egy példát adott CSS stílusok feltételes eltávolítására:

function wpex_remove_woo_styles ($ stílusok) {
unset ($ stílusok ['woocommerce-general']);
unset ($ stílusok ['woocommerce-layout']);
unset ($ stílusok ['woocommerce-smallscreen']);
visszatér $ stílusok;
}
add_filter ('woocommerce_enqueue_styles', 'wpex_remove_woo_styles');

A WooCommerce Termékgaléria, Zoom & Lightbox engedélyezése (v3.0 +)

A WooCommerce 3.0-ban bemutattak egy új termékgalériát, zoomot és lightboxot. Mindegyiket engedélyezni kell az „add_theme_support” használatával, ha használni szeretné őket a témájában.

add_theme_support ('wc-termék-galéria-csúszka');
add_theme_support ('wc-termék-galéria-zoom');
add_theme_support ('wc-termék-galéria-lightbox');

Távolítsa el az üzlet címét

Sok témának már van funkciója az archív címek megjelenítésére, tehát ez a kód eltávolítja az extra címet a WooCommerce-ből, ami jobb, ha elrejti a CSS-en keresztül..

add_filter ('woocommerce_show_page_title', '__return_false');

Változtassa meg a bolt archív címét

Ha a témája az archive_title () vagy a get_archive_title () függvényeket használja az archívumok címének megjelenítéséhez, akkor szűrőn keresztül könnyedén módosíthatja, hogy a termékoldal nevét megragadja az üzlet archívum címe helyett.

funkció wpex_woo_archive_title ($ title) {
if (is_shop () && $ shop_id = wc_get_page_id ('üzlet')) {
$ title = get_the_title ($ shop_id);
}
visszatér $ cím;
}
add_filter ('get_the_archive_title', 'wpex_woo_archive_title');

Változtassa meg a boltban az oldalanként megjelenített termékek számát

Annak módosítására szolgál, hogy hány termék jelenjen meg egy oldalon az üzletben és a termék-archívumban (kategóriák és címkék).

// Alter WooCommerce üzletbejegyzések oldalanként
funkció wpex_woo_posts_per_page ($ cols) {
visszatérés 12;
}
add_filter ('loop_shop_per_page', 'wpex_woo_posts_per_page');

Módosítsa az üzletben megjelenő oszlopok számát soronként

Nem értem, miért működik a WooCommerce így, de nem csak megváltoztathatja a „loop_shop_columns” szűrőt, hanem az egyedi osztályokat hozzá kell adnia a törzscímkéhez is, hogy az oszlopok működhessenek. Míg a Woo Shortcode-knek van egy div burkolója a helyes osztályokkal, az üzletoldalak nem, ezért van szükség két funkcióra.

// Változtassa meg az üzlet oszlopait
wpex_woo_shop_columns függvény ($ oszlopok) {
visszatérés 4;
}
add_filter ('loop_shop_columns', 'wpex_woo_shop_columns');

// Adjon hozzá helyes karosszéria osztályt az üzlet oszlopokhoz
függvény wpex_woo_shop_columns_body_class ($ osztályok) {
if (is_shop () || is_product_category () || is_product_tag ()) {
$ osztályok [] = '4-oszlopok';
}
visszatér $ osztályok;
}
add_filter ('body_class', 'wpex_woo_shop_columns_body_class');

Változtassa meg a Következő és az előző lapozás nyilait

Ez a kivonat lehetővé teszi, hogy hozzáigazítsa a bolt oldalának nyilait, hogy megfeleljen a témájának.

funkció wpex_woo_pagination_args ($ args) {
$ args ['prev_text'] = '„
$ args ['next_text'] = '„
visszaküldés $ args;
}
add_filter ('woocommerce_pagination_args', 'wpex_woo_pagination_args');

Módosítsa az OnSale jelvény szövegét

Különösen hasznos más nyelveket használó oldalakon, vagy a felkiáltójel eltávolításában, amelyben nem vagyok óriási rajongó.

funkció wpex_woo_sale_flash () {
Visszatérés '” esc_html __ ('Eladás', 'Woocommerce'). '„
}
add_filter ('woocommerce_sale_flash', 'wpex_woo_sale_flash');

A Termékgaléria miniatűrök oszlopának módosítása

Az elrendezéstől függően módosíthatja az egyes termékgaléria miniatűrjeinek oszlopok számát, és ez a funkció éppen ezt fogja tenni.

funkció wpex_woo_product_thumbnails_columns () {
visszatérés 4;
}
add_action ('woocommerce_product_thumbnails_columns', 'wpex_woo_product_thumbnails_columns');

Módosítsa a megjelenített kapcsolódó termékek számát

Az egy termékoldalon a kapcsolódó termékekhez megjelenített termékek számának megváltoztatására szolgál.

// Állítsa be a kapcsolódó termékeket 4 termék megjelenítéséhez
Funkció wpex_woo_related_posts_per_page ($ args) {
$ args ['posts_per_page'] = 4;
visszaküldés $ args;
}
add_filter ('woocommerce_output_related_products_args', 'wpex_woo_related_posts_per_page');

Változtassa meg az oszlopok számát a kapcsolódó és eladott termékekre vonatkozó szakaszok soránként

Csakúgy, mint a boltban, ha szeretné megfelelően megváltoztatni a kapcsolódó termékek és az eladott termékek oszlopainak számát az egyes termékoldalakon, akkor ki kell szűrnie az oszlopokat, és ennek megfelelően meg kell változtatnia a karosszériaosztályokat is..

// Oszlopok szűrése
funkció wpex_woo_single_loops_columns ($ oszlopok) {
visszatérés 4;
}
add_filter ('woocommerce_up_sells_columns', 'wpex_woo_single_loops_columns');

// A kapcsolódó argák szűrése
wpex_woo_related_columns függvény ($ args) {
$ args ['oszlopok'] = 4;
visszaküldés $ args;
}
add_filter ('woocommerce_output_related_products_args', 'wpex_woo_related_columns', 10);

// Szűrje a testosztályokat az oszloposztály hozzáadásához
funkció wpex_woo_single_loops_columns_body_class ($ osztályok) {
if (is_singular ('termék')) {
$ osztályok [] = '4-oszlopok';
}
visszatér $ osztályok;
}
add_filter ('body_class', 'wpex_woo_single_loops_columns_body_class');

Adjon hozzá dinamikus kosárlinket és kosárköltségeket a menüjéhez

Ez a kivonat hozzáad egy WooCommerce kosár elemet a menüjéhez, amely megmutatja a kosárban lévő termékek költségét. Plusz, ha webhelyén engedélyezve van a Font-Awesome, akkor megjelenik egy kis bevásárló táska ikon. Fontos: Ezeket a funkciókat nem szabad feltétlenül becsomagolni egy is_admin () feltételbe, mivel az AJAX-re támaszkodnak a költségek frissítésére. Győződjön meg arról, hogy a funkciók rendelkezésre állnak, amikor az is_admin () true és false értéket ad vissza.

// Adja hozzá a kosár linket a menühez
funkció wpex_add_menu_cart_item_to_menus ($ tételek, $ args) {

// Győződjön meg arról, hogy a 'wpex_main' menüpontjára változott !!!!
if ($ args-> téma_hely === 'wpex_main') {

$ css_class = 'menü-elem menü-tétel-típus-kosár menü-elem-típus-webáruház-kosár';

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

$ tételek. = '
  • „ $ tételek. = wpex_menu_cart_item (); $ tételek. = '
  • „ } visszaküld $ elemeket; } add_filter ('wp_nav_menu_items', 'wpex_add_menu_cart_item_to_menus', 10, 2); // Funkció visszatér a főmenü kosár hivatkozásához funkció 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 (); } más { $ url = wc_get_page_permalink ('üzlet'); } $ html = $ cart_extra = WC () -> cart-> get_cart_total (); $ html = str_replace ('összeg', '', $ html); $ output. = '„ $ output. = '„ $ output. = wp_kses_post ($ html); $ output. = '„ visszatér $ output; } // Frissítse a kosár hivatkozását az AJAX segítségével funkció wpex_main_menu_cart_link_fragments ($ fragmensek) { $ fragmensek ['. wpex-menu-cart-total'] = wpex_menu_cart_item (); visszaküld $ töredékeket; } add_filter ('add_to_cart_fragments', 'wpex_main_menu_cart_link_fragments');

    Következtetés

    A WooCommerce alapértelmezés szerint bármilyen témával működni fog, de a pluginhez további kiegészítő támogatást ad, így ez jobban illeszkedik a témához. Valójában ezt a bejegyzést írtam, miközben kódolta a New York WordPress Blog & Shop témát, így ezeknek a csípéseknek a nagy része szerepel a témánkban. Vagy ha inkább megvásárolja a témát, megnézheti, hogyan történt minden (lásd a wpex-new-york / inc / woocommerce fájlokat) – ez egy könnyebb módszer a megfelelő hozzáadás megtanulására. a WooCommerce plugin egyedi támogatása egy már kódolt téma megnézésével.

    Van-e olyan további részletek, amelyek véleménye szerint ebbe a listába tartoznak, vagy hasznosnak találná új WooCommerce-kész témák kidolgozásakor?

    Jeffrey Wilson Administrator
    Sorry! The Author has not filled his profile.
    follow me
      Adblock
      detector