Sablonok és témák felkészítése

Ez a fejezet témafejlesztőknek szól: mire kell figyelni, hogy a téma több nyelvű és több pénznemes WooCommerce-boltban is hibátlanul jelenjen meg.

Hogyan működik a több nyelvű bolt

• Minden tartalomnak (termék, kategória, címke) saját nyelve van.
• A fordítások külön termékként, külön bejegyzésként tárolódnak az adatbázisban, és a WPML nyelvi táblája köti őket össze.
• A lefordított termékek ugyanazokat a képeket használják, de a szöveges mezőik saját nyelvűek.
• A szerkesztő a termékfordítási táblában dolgozik, és nem kell azzal törődnie, hogyan tárolódnak a fordítások.

Mivel a fordítások külön vannak tárolva, a megjelenítés egyszerű. Ha a téma a WordPress és a WooCommerce függvényeit használja, valószínűleg már most is felkészült a több nyelvre. Egy kis teszttel és néhány módosítással teljes lesz a kompatibilitás.

Szükséges bővítmények

• WooCommerce.
• A WPML főbővítmény, a String Translation és a Media Translation kiegészítővel.
• A WPML Multilingual & Multicurrency for WooCommerce.

Fordítható, fix szövegek a sablonokban

A sablonfájlok a termékadatok mellett fix szövegeket is kiírnak (például a „Vásárlás” gomb). A termék neve az adatbázisból jön, azzal nincs teendő. A fix szövegeket viszont mindig gettext-hívásba kell tenni, a téma saját szövegtartományával (textdomain).

Jó:

<p><?php _e('Similar products:', 'my-textdomain') ?></p>
<input type="button" name="buy-button" value="<?php esc_attr_e('Buy now!', 'my-textdomain') ?>" />

Rossz, a szövegek nincsenek gettext-hívásban:

<p><?php echo 'Similar products:'; ?></p>
<input type="button" name="buy-button" value="Buy now!" />

Fix hivatkozások a WooCommerce-oldalakra

Sok téma minden oldalon hivatkozik a Kosár vagy a Fiókom oldalra. Ha ezeket WordPress-menüből adod meg, nincs teendő: a WPML nyelvenként külön menüt jelenít meg, így a hivatkozások is nyelvenként mások.

Ha a hivatkozás a sablonfájlban van, a WordPress-függvényeket és a WooCommerce oldalazonosítóit használd. A bővítmény szűri a get_option() hívásokat a WooCommerce-oldalak azonosítóira, és az aktuális nyelvű oldal azonosítóját adja vissza.

Jó:

<a href="<?php echo get_permalink(get_option('woocommerce_shop_page_id')) ?>"><?php _e('Shop page', 'my-textdomain') ?></a>

<a href="<?php echo get_permalink(wc_get_page_id('shop')) ?>"><?php _e('Shop page', 'my-textdomain') ?></a>

Rossz:

<a href="<?php echo get_permalink(5) ?>"><?php _e('Shop page', 'my-textdomain') ?></a>

Itt az azonosító be van égetve, pedig oldalanként és nyelvenként más.

<a href="/shop"><?php _e('Shop page', 'my-textdomain') ?></a>

Itt az URL van beégetve, pedig nyelvenként más.

Terméklisták

Ha a WooCommerce shortcode-jaival jelenítesz meg terméklistát, nincs további teendő: a WooCommerce a megfelelő nyelvű termékeket tölti be.

Ha saját kóddal töltöd be a termékeket, a WordPress vagy a WooCommerce függvényeit használd. Ha közvetlenül az adatbázist kérdezed le, a WPML nem szűr, és minden nyelv termékei összekeveredve jönnek.

Jó:

<?php $products = get_posts(array('post_type' => 'product', 'suppress_filters' => 0)); ?>

<?php
$args = array(
    'post_type'      => 'product',
    'posts_per_page' => 10,
);
$products = new WP_Query( $args );
?>

Rossz:

<?php $products = get_posts(array('post_type' => 'product')); ?>

A get_posts() alapból suppress_filters = igaz értékkel fut, ezért kimarad a nyelvi szűrés.

$products = $wpdb->get_results($wpdb->prepare("SELECT * FROM {$wpdb->posts} WHERE post_type='product' ORDER BY ID DESC LIMIT %d", 10));

A WPML az alacsony szintű SQL-lekérdezéseket nem szűri, ezért minden nyelv termékei visszajönnek.

Ha a megfelelő termékeket töltötted be, a megjelenítéskor már nem kell a nyelvvel foglalkoznod: minden termék a saját, helyes nyelvű mezőit hozza.

Termékoldali sablonok

Egy termék megjelenítése külön teendő nélkül működik, mert a fordítások önálló termékek.

Pénznemváltó a témában

Több pénznemes boltban a témának érdemes opcionális pénznemváltót adnia, hogy a vásárlók válthassanak pénznemet. A pénznemváltót PHP-hívással vagy shortcode-dal jelenítheted meg:

<?php do_action('currency_switcher', array('format' => '%name (%symbol)')); ?>

[currency_switcher]

A pénznemváltót a frontenden csak akkor látod, ha a boltban több pénznem van beállítva. A beállításokról a Pénznemváltó fejezetben olvashatsz.

Jobbról balra író nyelvek (RTL)

A WooCommerce-témáknak ugyanazokat az RTL-irányelveket kell követniük, mint bármelyik WordPress-témának: készíts rtl.css fájlt a jobbról balra megjelenítés CSS-szabályaival.

Különböző szöveghosszak kezelése

Egy szöveg az egyik nyelven hosszabb, a másikon rövidebb. Előfordul, hogy nem is tudod letesztelni, mert a felhasználók maguk fordítanak. Ha a termékblokk CSS-e a rövid angol szövegre van méretezve, a hosszabb (például spanyol) szöveg kilóg a helyéből.

Ökölszabály: teszteld a témát a szöveg kétszeres hosszával és a felére rövidítve. A legjobb megoldás a fluid (rugalmas) elrendezés, amelyben az elemek átméreteződnek és elfoglalják a szükséges helyet, így a szöveg sorról sorra tördelődik, és nincs megjelenítési hiba. Az elegáns, rugalmas sablon elkészítése nem triviális, de megspórol sok vizuális hibát.