WooCommerce 상품은 사용자 정의 필드가 있는 사용자 정의 WordPress “글”입니다. 이러한 상품은 “상품 카테고리” 및 “상품 태그” 사용자 정의 분류체계를 사용하여 정렬됩니다. 여기에서는 다국어 WooCommerce 사이트가 작동하는 방식과 WooCommerce 테마가 다국어를 지원하도록 만들기 위해 필요한 사항을 설명합니다.
다국어 WooCommerce 사이트의 작동 방식
사이트에서 WPML을 사용하면 콘텐츠의 모든 요소에 언어가 할당됩니다. 즉, 각 상품, 카테고리 및 태그에 언어 속성이 포함됩니다. 번역은 데이터베이스에 별도의 상품으로 저장되며, WPML의 언어 테이블을 사용하여 서로 연결됩니다. 번역된 상품은 동일한 이미지를 공유하고, 해당 언어로 된 텍스트가 있는 별도의 필드를 갖습니다.
사이트 관리자는 WPML의 상품 번역 테이블을 사용하여 편리하게 번역할 수 있습니다. 이렇게 하면 번역이 데이터베이스에 어떻게 저장되는지 걱정할 필요 없이 필요한 텍스트를 번역하는 데 집중할 수 있습니다.
번역이 데이터베이스에서 분리되어 있기 때문에 다국어 WooCommerce 사이트를 표시하는 것도 쉽습니다. 실제로 WordPress 및 WooCommerce API를 사용하는 경우, 테마가 이미 다국어를 지원할 수 있습니다. 약간의 테스트와 간단한 편집만으로 완벽한 다국어 호환성을 달성하고 새로운 시장을 개척할 수 있습니다.
다국어 WooCommerce 사이트에 필요한 플러그인
다국어 WooCommerce 사이트를 운영하려면 다음 플러그인이 필요합니다.
- WooCommerce
- WPML 코어 플러그인, WPML 문자열 번역 및 WPML 미디어 번역 애드온
- WPML Multilingual & Multicurrency for WooCommerce
WPML Multilingual & Multicurrency for WooCommerce를 포함한 WPML 및 모든 관련 플러그인은 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 호출로 래핑되어 있지 않습니다. |
모든 GetText 호출에 테마의 텍스트 도메인을 사용해야 합니다.
하드코딩된 WooCommerce 페이지
많은 전자상거래 테마에는 장바구니 또는 계정 페이지와 같은 특수 페이지가 포함되어 있습니다. 테마에는 종종 사이트의 모든 페이지에 표시되는 이러한 페이지에 대한 링크가 포함되어 있습니다.
이러한 링크에 WordPress 메뉴를 사용한다면 추가 작업이 필요하지 않습니다. WPML은 각 언어에 대해 서로 다른 WordPress 메뉴를 표시하므로 이러한 '특수 페이지'에 대한 링크는 언어별로 다르게 표시됩니다. 그러나 템플릿 파일에 이러한 링크를 하드코딩하는 경우, WPML이 해당 링크를 올바른 언어로 된 페이지 링크로 바꿀 수 있도록 허용해야 합니다.
특수 WooCommerce 페이지에 연결하는 올바른 방법은 WordPress API 함수와 WooCommerce 페이지 ID를 사용하는 것입니다. WPML Multilingual & Multicurrency for WooCommerce는 WooCommerce 페이지 ID가 포함된 get_option() 호출을 필터링합니다. 그러면 현재 언어로 된 페이지의 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”은 기본 언어로 된 페이지의 슬러그입니다.
잘못된 예
<a href="<?php echo get_permalink(5) ?>"><?php _e('Shop page', 'my-textdomain') ?></a>“shop page” ID가 하드코딩되어 있습니다. 이는 사이트와 언어에 따라 다릅니다.
<a href="/shop"><?php _e('Shop page', 'my-textdomain') ?></a>“shop page” URL이 하드코딩되어 있습니다. 이는 언어에 따라 다릅니다.
| 올바른 예 | 잘못된 예 |
|---|---|
<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”은 기본 언어로 된 페이지의 슬러그입니다. | <a href="<?php echo get_permalink(5) ?>"><?php _e('Shop page', 'my-textdomain') ?></a>“shop page” ID가 하드코딩되어 있습니다. 이는 사이트와 언어에 따라 다릅니다. <a href="/shop"><?php _e('Shop page', 'my-textdomain') ?></a>“shop page” URL이 하드코딩되어 있습니다. 이는 언어에 따라 다릅니다. |
다국어를 지원하는 상품 목록
WooCommerce 숏코드를 사용하여 상품 목록을 표시하는 경우 추가 작업이 필요하지 않습니다. WooCommerce가 올바른 언어로 상품을 로드하여 표시합니다.
자체 코드를 사용하여 상품을 수동으로 로드하려는 경우, WordPress API를 사용하거나 WooCommerce API 호출을 사용해야 합니다. 데이터베이스에 직접 액세스하는 경우 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 | <?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 쿼리를 필터링하지 않습니다. 모든 언어의 모든 상품이 반환됩니다. |
올바른 상품을 로드한 후에는 상품을 표시할 때 언어에 대해 걱정할 필요가 없습니다. 각 상품에는 올바른 언어로 된 정보가 포함된 고유한 사용자 정의 필드가 제공됩니다.
다국어를 지원하는 상품 템플릿
번역은 별도의 상품으로 저장되므로, 다국어 WooCommerce 사이트에서 단일 상품을 표시하는 데 특별한 노력이 필요하지 않습니다.
다중 통화 결제 옵
다국어 WooCommerce 사이트에는 다중 통화가 포함될 수도 있습니다. 많은 미국 외 지역 사이트의 경우 다중 통화 지원은 매우 중요한 기능입니다. 예를 들어, 많은 유럽 사이트에서는 유로, 영국 파운드 및 미국 달러로 결제해야 합니다. 동유럽 사이트에서는 종종 러시아 루블이 필요하며, 아시아 사이트에서는 다양하고 다른 통화가 필요합니다.
다중 통화 지원은 WPML Multilingual & Multicurrency for WooCommerce에 포함되어 있습니다. 방문자가 통화를 전환할 수 있도록 하려면 테마에 선택적 통화 전환기가 포함되어야 합니다.
PHP 호출을 사용하거나 숏코드를 삽입하여 통화 전환기를 표시할 수 있습니다.
<?php do_action('currency_switcher', array('format' => '%name (%symbol)')); ?>[currency_switcher]자세한 내용은 WooCommerce용 다중 통화에 대한 튜토리얼을 참조하세요. 사이트에서 다중 통화를 사용하는 경우에만 프런트엔드에 통화 전환기가 표시됩니다.
WooCommerce 사이트를 RTL 호환으로 만들기
WooCommerce 테마는 다른 WordPress 테마와 동일한 RTL 테마 지원 가이드라인을 따라야 합니다. RTL 표시를 위한 CSS 규칙이 포함된 rtl.css 파일을 생성해야 합니다.
유동적 디자인을 사용하여 언어별로 다른 텍스트 길이 처리하기
다국어를 지원하는 WooCommerce 테마를 제작할 때, 일부 텍스트는 특정 언어에서 더 길어지고 다른 언어에서는 더 짧아질 수 있다는 점을 기억하세요. 최종 사용자가 직접 번역하기 때문에 테스트조차 불가능한 경우도 있습니다.
예를 들어, 다음 두 개의 상품 블록을 살펴보세요.
짧은 영어 텍스트에 최적화된 CSS
더 긴 스페인어 텍스트는 공간에 맞지 않음
경험상, 2배 더 길거나 1/2 더 짧은 텍스트로 테마를 테스트하세요. 이렇게 하면 대부분의 경우를 처리할 수 있습니다. 크기가 다른 텍스트를 처리하는 가장 좋은 방법은 유동적 레이아웃을 허용하는 것입니다. 유동적 레이아웃을 사용하면 요소의 크기가 조정되어 필요한 영역을 확보할 수 있습니다. 유동적 크기를 가진 우아한 템플릿을 만드는 것은 쉽지 않지만, 그렇게 하면 시각적인 결함을 피하는 데 도움이 됩니다.
시작할 준비가 되셨나요?
WooCommerce 테마나 확장 프로그램을 제작하는 개발자라면 Go Global 프로그램에 꼭 참여하세요. 무료 WPML 개발자 계정을 제공받고 당사 호환성 팀의 우선 지원을 받을 수 있습니다. WooCommerce 상점은 테마의 한 (큰) 부분일 뿐입니다. 테마의 WPML 호환성을 달성하는 방법에 대한 가이드도 꼭 읽어보시기 바랍니다.
고객사를 위한 사이트를 제작하시나요? WPML을 구매하고 WooCommerce 및 그 이상의 다국어 사이트를 시작하세요.