การทำให้ธีม WooCommerce รองรับหลายภาษาและหลายสกุลเงิน

ผลิตภัณฑ์ของ WooCommerce คือ "โพสต์" แบบกำหนดเองของ WordPress ที่มีฟิลด์กำหนดเอง ซึ่งจัดระเบียบโดยใช้อนุกรมวิธานที่กำหนดเองอย่าง "หมวดหมู่ผลิตภัณฑ์" และ "แท็กผลิตภัณฑ์" ในที่นี้ เราจะแสดงให้คุณเห็นว่าเว็บไซต์ WooCommerce หลายภาษาทำงานอย่างไร และธีม WooCommerce ของคุณต้องมีอะไรบ้างเพื่อให้เป็น Multilingual Ready (รองรับหลายภาษา)

วิธีการทำงานของเว็บไซต์ WooCommerce หลายภาษา

เมื่อเว็บไซต์ใช้ WPML เนื้อหาทุกองค์ประกอบจะได้รับการกำหนดภาษา ซึ่งหมายความว่าผลิตภัณฑ์ หมวดหมู่ และแท็กแต่ละรายการจะมีแอตทริบิวต์ภาษา การแปลจะถูกบันึกในฐานข้อมูลเป็นผลิตภัณฑ์แยกต่างหาก โดยเชื่อมโยงเข้าด้วยกันโดยใช้ตารางภาษาของ WPML ผลิตภัณฑ์ที่แปลแล้วจะใช้ภาพเดียวกันและมีฟิลด์แยกต่างหากพร้อมข้อความในภาษาที่ถูกต้อง

ตัวอย่างของการแปลที่กำหนดให้กับองค์ประกอบเนื้อหาต่าง ๆ

ผู้ดูแลเว็บไซต์สามารถแปลได้อย่างสะดวกสบายโดยใช้ตารางการแปลผลิตภัณฑ์ของ WPML ด้วยวิธีนี้ พวกเขาจึงสามารถมุ่งเน้นไปที่การแปลข้อความที่จำเป็น โดยไม่ต้องกังวลว่าการแปลจะถูกจัดเก็บในฐานข้อมูลอย่างไร

เนื่องจากการแปลถูกแยกไว้ในฐานข้อมูล การแสดงผลเว็บไซต์ WooCommerce หลายภาษาจึงทำได้ง่ายเช่นกัน อันที่จริง หากคุณใช้ API ของ WordPress และ WooCommerce ธีมของคุณอาจเป็น Multilingual Ready อยู่แล้ว ด้วยการทดสอบเพียงเล็กน้อยและอาจมีการแก้ไขเพียงเล็กน้อย คุณก็สามารถบรรลุความเข้ากันได้กับหลายภาษาอย่างสมบูรณ์และเพลิดเพลินไปกับตลาดใหม่ ๆ

ปลั๊กอินที่จำเป็นสำหรับเว็บไซต์ WooCommerce หลายภาษา

ในการใช้งานเว็บไซต์ WooCommerce หลายภาษา จำเป็นต้องใช้ปลั๊กอินต่อไปนี้:

WooCommerce
ปลั๊กอินตัวหลักของ WPML ส่วนเสริม WPML การแปลสตริง และ WPML การแปลสื่อ
WPML Multilingual & Multicurrency for WooCommerce

WPML และปลั๊กอินที่เกี่ยวข้องทั้งหมด รวมถึง WPML Multilingual & Multicurrency for WooCommerce มาพร้อมกับประเภทบัญชี Multilingual CMS

ข้อความที่ฮาร์ดโค้ดในเทมเพลต

ไฟล์เทมเพลตของคุณจะแสดงข้อมูลผลิตภัณฑ์และข้อความที่ฮาร์ดโค้ดผสมกัน ตัวอย่างเช่น เทมเพลตส่วนใหญ่จะรวมชื่อผลิตภัณฑ์และลิงก์ "ซื้อ" ชื่อผลิตภัณฑ์มาจากฐานข้อมูล ดังนั้นคุณจึงไม่ต้องกังวลเกี่ยวกับการแปล

คุณควรตรวจสอบให้แน่ใจว่าข้อความที่ฮาร์ดโค้ดทั้งหมดสามารถแปลได้โดยใช้ GetText

ดี

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

ในตัวอย่างด้านล่าง "Similar products" และ "Buy now!" ไม่ได้ถูกครอบด้วยการเรียกใช้ GetText

ไม่ดี

<p><?php echo 'Similar products:'; ?></p>

<input type="button" name="buy-button" value="Buy now!" />

ดี

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

ไม่ดี

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

"Similar products" และ "Buy now!" ไม่ได้ถูกครอบด้วยการเรียกใช้ GetText

ดี	ไม่ดี
`<p><?php _e('Similar products:', 'my-textdomain') ?></p><input type="button" name="buy-button" value="<?php esc_attr_e('Buy now!', 'my-textdomain') ?>" />`	`<p><?php echo 'Similar products:'; ?></p><input type="button" name="buy-button" value="Buy now!" />`"Similar products" และ "Buy now!" ไม่ได้ถูกครอบด้วยการเรียกใช้ GetText

ตรวจสอบให้แน่ใจว่าคุณใช้ textdomain ของธีมสำหรับการเรียกใช้ GetText ทั้งหมด

หน้า WooCommerce ที่ฮาร์ดโค้ด

ธีมอีคอมเมิร์ซหลายรายการมีหน้าพิเศษ เช่น หน้าตะกร้าสินค้าหรือหน้าบัญชี ธีมมักจะรวมลิงก์ไปยังหน้าเหล่านี้ ซึ่งปรากฏในทุกหน้าบนเว็บไซต์

หากคุณใช้เมนู WordPress สำหรับลิงก์เหล่านี้ คุณก็พร้อมใช้งานแล้ว WPML จะแสดงเมนู WordPress ที่แตกต่างกันสำหรับแต่ละภาษา ดังนั้นลิงก์ไปยัง 'หน้าพิเศษ' เหล่านี้จะแตกต่างกันไปตามภาษา อย่างไรก็ตาม หากคุณฮาร์ดโค้ดลิงก์เหล่านี้ในไฟล์เทมเพลต คุณต้องอนุญาตให้ WPML แทนที่ลิงก์ด้วยลิงก์ไปยังหน้าเหล่านี้ในภาษาที่ถูกต้อง

วิธีที่ถูกต้องในการลิงก์ไปยังหน้า WooCommerce พิเศษคือการใช้ฟังก์ชัน API ของ WordPress และ ID หน้าของ WooCommerce WPML Multilingual & Multicurrency for WooCommerce จะกรองการเรียกไปยัง get_option() ด้วย ID หน้าของ WooCommerce ซึ่งจะส่งคืน ID ของหน้าในภาษาปัจจุบัน

ดี

<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>

"shop" คือ slug ของหน้าในภาษาเริ่มต้น

ไม่ดี

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

ID ของ "shop page" ถูกฮาร์ดโค้ดไว้ ซึ่งจะแตกต่างกันไปสำหรับเว็บไซต์ต่าง ๆ และภาษาต่าง ๆ

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

URL ของ "shop page" ถูกฮาร์ดโค้ดไว้ ซึ่งจะแตกต่างกันไปสำหรับภาษาต่าง ๆ

ดี ไม่ดี

<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>"shop" คือ slug ของหน้าในภาษาเริ่มต้น <a href="<?php echo get_permalink(5) ?>"><?php _e('Shop page', 'my-textdomain') ?></a>
ID ของ "shop page" ถูกฮาร์ดโค้ดไว้ ซึ่งจะแตกต่างกันไปสำหรับเว็บไซต์ต่าง ๆ และภาษาต่าง ๆ<a href="/shop"><?php _e('Shop page', 'my-textdomain') ?></a>URL ของ "shop page" ถูกฮาร์ดโค้ดไว้ ซึ่งจะแตกต่างกันไปสำหรับภาษาต่าง ๆ

ดี	ไม่ดี
`<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>`"shop" คือ slug ของหน้าในภาษาเริ่มต้น	`<a href="<?php echo get_permalink(5) ?>"><?php _e('Shop page', 'my-textdomain') ?></a>` ID ของ "shop page" ถูกฮาร์ดโค้ดไว้ ซึ่งจะแตกต่างกันไปสำหรับเว็บไซต์ต่าง ๆ และภาษาต่าง ๆ`<a href="/shop"><?php _e('Shop page', 'my-textdomain') ?></a>`URL ของ "shop page" ถูกฮาร์ดโค้ดไว้ ซึ่งจะแตกต่างกันไปสำหรับภาษาต่าง ๆ

รายการผลิตภัณฑ์ที่เป็น Multilingual Ready

หากคุณใช้ชอร์ตโค้ดของ WooCommerce เพื่อแสดงรายการผลิตภัณฑ์ คุณก็พร้อมใช้งานแล้ว WooCommerce จะโหลดผลิตภัณฑ์ในภาษาที่ถูกต้องและแสดงผลออกมา

หากคุณต้องการโหลดผลิตภัณฑ์ด้วยตนเองโดยใช้โค้ดของคุณเอง ตรวจสอบให้แน่ใจว่าคุณกำลังใช้ API ของ WordPress หรือการเรียกใช้ API ของ WooCommerce หากคุณเข้าถึงฐานข้อมูลโดยตรง WPML จะไม่กรองการเรียกของคุณ และคุณจะได้รับผลิตภัณฑ์ทั้งหมดในทุกภาษาปะปนกัน

ดี

<?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 );
?>

ไม่ดี

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

suppress_filters จะถูกตั้งค่าเป็น true โดยค่าเริ่มต้น ซึ่งจะป้องกันการกรองภาษา

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

WPML ไม่กรองคิวรี SQL ระดับต่ำ ผลิตภัณฑ์ทั้งหมดในทุกภาษาจะถูกส่งคืน

ดี ไม่ดี

<?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 ); ?> <?php $products = get_posts(array('post_type' => 'product')); ?>
suppress_filters จะถูกตั้งค่าเป็น true โดยค่าเริ่มต้น ซึ่งจะป้องกันการกรองภาษา$products = $wpdb->get_results($wpdb->prepare(“SELECT * FROM {$wpdb->posts} WHERE post_type='product' ORDER BY ID DESC LIMIT %d", 10));
WPML ไม่กรองคิวรี SQL ระดับต่ำ ผลิตภัณฑ์ทั้งหมดในทุกภาษาจะถูกส่งคืน

ดี	ไม่ดี
`<?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 ); ?>`	`<?php $products = get_posts(array('post_type' => 'product')); ?>` suppress_filters จะถูกตั้งค่าเป็น true โดยค่าเริ่มต้น ซึ่งจะป้องกันการกรองภาษา`$products = $wpdb->get_results($wpdb->prepare(“SELECT * FROM {$wpdb->posts} WHERE post_type='product' ORDER BY ID DESC LIMIT %d", 10));` WPML ไม่กรองคิวรี SQL ระดับต่ำ ผลิตภัณฑ์ทั้งหมดในทุกภาษาจะถูกส่งคืน

เมื่อคุณโหลดผลิตภัณฑ์ที่ถูกต้องแล้ว คุณไม่จำเป็นต้องกังวลเกี่ยวกับภาษาเมื่อแสดงผล ผลิตภัณฑ์แต่ละรายการจะมาพร้อมกับฟิลด์กำหนดเองของตัวเอง พร้อมข้อมูลในภาษาที่ถูกต้อง

เทมเพลตผลิตภัณฑ์ที่เป็น Multilingual Ready

เนื่องจากการแปลถูกจัดเก็บไว้ในผลิตภัณฑ์แยกต่างหาก การแสดงผลิตภัณฑ์เดี่ยวบนเว็บไซต์ WooCommerce หลายภาษาจึงไม่จำเป็นต้องใช้ความพยายามเป็นพิเศษ

ตัวเลือกการชำระเงินหลายสกุลเงิน

เว็บไซต์ WooCommerce หลายภาษาของคุณอาจมีหลายสกุลเงินด้วย สำหรับเว็บไซต์ที่ไม่ใช่ของอเมริกาหลายแห่ง การรองรับหลายสกุลเงินถือเป็นคุณสมบัติที่สำคัญมาก ตัวอย่างเช่น เว็บไซต์ในยุโรปหลายแห่งจะต้องเรียกเก็บเงินเป็นสกุลเงินยูโร ปอนด์สเตอร์ลิง และดอลลาร์สหรัฐ เว็บไซต์ในยุโรปตะวันออกมักต้องการสกุลเงินรูเบิลรัสเซีย ในขณะที่เว็บไซต์ในเอเชียต้องการสกุลเงินอื่น ๆ ที่หลากหลาย

การรองรับหลายสกุลเงินรวมอยู่ใน WPML Multilingual & Multicurrency for WooCommerce หากต้องการให้ผู้เยี่ยมชมสามารถสลับสกุลเงินได้ ธีมของคุณควรรวมตัวสลับสกุลเงินที่เป็นตัวเลือกไว้ด้วย

คุณสามารถแสดงตัวสลับสกุลเงินได้โดยใช้การเรียก PHP หรือโดยการแทรก shortcode

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

[currency_switcher]

สำหรับข้อมูลเพิ่มเติม โปรดดูบทช่วยสอนเกี่ยวกับหลายสกุลเงินสำหรับ WooCommerce โปรดทราบว่าคุณจะเห็นตัวสลับสกุลเงินที่ส่วนหน้าเว็บไซต์ก็ต่อเมื่อเว็บไซต์ใช้หลายสกุลเงินเท่านั้น

การทำให้เว็บไซต์ WooCommerce ของคุณเข้ากันได้กับ RTL

ธีม WooCommerce จำเป็นต้องปฏิบัติตามหลักเกณฑ์การรองรับธีม RTL เช่นเดียวกับธีม WordPress อื่น ๆ คุณควรสร้างไฟล์ rtl.css พร้อมกฎ CSS สำหรับการแสดงผลแบบ RTL

การจัดการความยาวข้อความที่แตกต่างกันในภาษาต่าง ๆ โดยใช้ Fluid Design

เมื่อคุณสร้างธีม WooCommerce ที่เป็น Multilingual Ready โปรดจำไว้ว่าข้อความบางส่วนจะยาวขึ้นในบางภาษาและสั้นลงในภาษาอื่น ๆ บางครั้งคุณอาจไม่สามารถทดสอบได้ด้วยซ้ำ เนื่องจากผู้ใช้ปลายทางของคุณจะเป็นผู้แปล

ตัวอย่างเช่น ลองดูบล็อกผลิตภัณฑ์สองบล็อกนี้

CSS ที่ปรับให้เหมาะสมสำหรับข้อความสั้นในภาษาอังกฤษ

ข้อความภาษาสเปนที่ยาวกว่าไม่พอดีกับพื้นที่

หลักการทั่วไปคือ ให้ทดสอบธีมของคุณด้วยข้อความที่ยาวขึ้น 2 เท่าและสั้นลงครึ่งหนึ่ง ซึ่งจะครอบคลุมกรณีส่วนใหญ่สำหรับคุณ วิธีที่ดีที่สุดในการจัดการข้อความที่มีขนาดแตกต่างกันคือการอนุญาตให้ใช้เลย์เอาต์แบบไหล (Fluid Layout) เลย์เอาต์แบบไหลจะช่วยให้องค์ประกอบต่าง ๆ ปรับขนาดและจับพื้นที่ที่ต้องการได้ การสร้างเทมเพลตที่สวยงามด้วยขนาดที่ไหลลื่นไม่ใช่เรื่องง่าย แต่การทำเช่นนั้นจะช่วยหลีกเลี่ยงข้อบกพร่องทางภาพได้

ข้อความล้นจากบรรทัดหนึ่งไปยังอีกบรรทัดหนึ่งได้อย่างสวยงามโดยไม่มีข้อบกพร่องในการแสดงผล

พร้อมที่จะเริ่มต้นหรือยัง

หากคุณเป็นนักพัฒนาที่สร้างธีมหรือส่วนขยาย WooCommerce คุณควรเข้าร่วมโปรแกรม Go Global ของเราอย่างแน่นอน คุณจะได้รับบัญชีนักพัฒนา WPML ฟรีและได้รับการสนับสนุนลำดับความสำคัญจากทีมความเข้ากันได้ของเรา ร้านค้า WooCommerce เป็นเพียงส่วน (ใหญ่) ส่วนหนึ่งของธีมของคุณ คุณควรอ่านคำแนะนำของเราเกี่ยวกับการบรรลุความเข้ากันได้ของ WPML สำหรับธีมของคุณอย่างแน่นอน

กำลังสร้างเว็บไซต์ให้กับลูกค้าของเอเจนซี่ใช่ไหม ซื้อ WPML แล้วเริ่มต้นใช้งานเว็บไซต์หลายภาษาสำหรับ WooCommerce และอื่น ๆ