wpml-config.xml 파일을 사용하여 사용자 정의 페이지 빌더 콘텐츠를 번역 가능한 항목으로 등록하는 방법을 알아보세요. 문자열, 미디어, 페이지 빌더 위젯, 숏코드 ID 등을 등록할 수 있습니다.
이 가이드는 테마와 플러그인을 제작하거나 사이트에 사용자 정의 페이지 빌더 코드를 추가하는 개발자를 위한 문서입니다.
타사 페이지 빌더를 사용 중이며 웹사이트의 사용자 정의 위젯을 번역할 수 없는 경우 WPML 지원팀에 문의하세요.
wpml-config.xml 파일을 생성해야 하나요? 다국어 도구 플러그인을 사용하여 구성 파일을 자동으로 생성하는 방법에 대한 단계별 가이드를 확인하세요.
문자열 번역
Visual Composer를 사용하여 페이지에 텍스트 구분선을 추가한 예를 살펴보겠습니다. 해당 구분선에는 제목이 있으며 숏코드는 다음과 같습니다.
[vc_text_separator title="Separator Title"]
이 텍스트 구분선의 제목을 번역하려면 wpml-config.xml 파일에 몇 줄을 추가해야 합니다. 이렇게 하면 WPML이 해당 구분선의 제목을 번역해야 한다는 것을 “알게” 됩니다.
다음 코드는 이 경우 wpml-config.xml 파일에 추가해야 하는 내용의 예입니다.
wpml-config.xml 파일에 페이지 빌더 숏코드를 추가하는 예
<wpml-config>
<shortcodes>
<shortcode>
<tag>vc_text_separator</tag>
<attributes>
<attribute>title</attribute>
</attributes>
</shortcode>
</shortcodes>
</wpml-config>위 예의 구조를 살펴보겠습니다.
- shortcodes 태그로 시작합니다. 번역해야 하는 사이트의 모든 숏코드는 이 태그 아래에 배치해야 합니다.
- shortcode 태그를 사용하여 단일 숏코드에 속하는 모든 태그를 래핑합니다.
- tag라는 태그를 사용하여 숏코드의 이름을 정의합니다. 이 경우 vc_text_separator입니다. 원하는 경우 태그에 선택적 사용자 정의 레이블을 추가할 수 있습니다. 이 레이블은 고급 번역 에디터 및 클래식 번역 에디터 모두에서 텍스트 옆에 표시됩니다. 내보낸 XLIFF 파일에도 이 레이블이 포함됩니다. 태그와 속성에 레이블을 추가하는 방법은 아래 예를 참조하세요.
- 숏코드에는 하나 이상의 속성이 있을 수 있으므로 attributes (복수형) 태그로 래핑하고 attribute (단수형) 태그를 사용하여 각 속성의 제목을 정의해야 합니다.
페이지 빌더에는 링크 속성이 있는 디자인 요소가 포함되는 경우가 있습니다.
링크 옵션(type="link")을 사용하여 내부 링크가 해당 글의 번역된 버전을 자동으로 가리키도록 할 수 있습니다.
이 옵션과 함께 encoding 속성을 사용할 수 있습니다. 이 속성은 다양한 페이지 빌더에서 사용하는 특수 인코딩을 처리합니다. 인코딩 속성은 일반적으로 사용하는 페이지 빌더에 따라 다릅니다. 다음 값을 허용합니다.
- base64 – Visual Composer 원시 HTML 숏코드입니다. 숏코드는 HTML을 base64 문자열로 저장합니다.
- vc_link – Visual Composer를 위한 특수 링크 형식입니다.
- vc_values – 진행률 표시줄, 원형 차트 및 꺾은선형 차트 위젯의 값을 위한 특수 Visual Composer 인코딩입니다.
- av_link – Enfold를 위한 특수 링크 형식입니다.
- allow_html_tags – 일반적으로 HTML 태그는 숏코드 속성에서 제거됩니다. 숏코드 속성에서 HTML 태그를 허용해야 하는 경우 인코딩을 allow_html_tags로 설정하세요. 일부 상황에서 HTML 태그를 허용하면 형식이 엉망이 되고 보안 문제가 발생할 수 있으므로 주의해서 사용하세요.
숏코드 링크 속성 추가 예: type="link"
<wpml-config>
<shortcodes>
<shortcode>
<tag>av_button</tag>
<attributes>
<attribute>label</attribute>
<attribute type="link" encoding="av_link">link</attribute>
</attributes>
</shortcode>
</shortcodes>
</wpml-config>urlencoded 숏코드 사용을 고려하고 있다면 URL 인코딩된 숏코드 번역에 대한 페이지를 꼭 읽어보세요.
태그 및 속성 레이블 추가 예
<wpml-config>
<shortcodes>
<shortcode>
<tag label="My shortcode label">my_shortcode</tag>
<attributes>
<attribute label="Shortcode title">title</attribute>
</attributes>
</shortcode>
</shortcodes>
</wpml-config>태그와 속성에 레이블을 추가하면 고급 번역 에디터 또는 클래식 번역 에디터에 사용자 정의 레이블을 표시할 수 있습니다. 이는 번역가가 문자열의 문맥을 더 잘 이해하는 데 도움이 될 수 있습니다.
더 나은 구성을 위한 필드 그룹화
XML 구성의 명확성과 구성을 개선하기 위해 필드 레이블 앞에 그룹 이름을 접두사로 추가할 수 있습니다. 다음 CTA 버튼의 예를 살펴보세요.
<wpml-config>
<shortcodes>
<shortcode>
<tag label="Call To Action: Content">et_pb_cta</tag>
<attributes>
<attribute label="Call To Action: Title">title</attribute>
<attribute label="Call To Action: Button Text">button_text</attribute>
<attribute label="Call To Action: Button URL" type="link">button_url</attribute>
</attributes>
</shortcode>
</shortcodes>
</wpml-config>
여기서 et_pb_cta 숏코드 내의 각 속성에는 Call To Action: 레이블이 접두사로 추가되며, 이 레이블은 고급 번역 에디터에도 표시됩니다.
미디어 번역
WPML 미디어 번역을 사용하여 페이지 빌더 콘텐츠에서 언어별로 다른 이미지를 사용할 수 있습니다. 이는 이미지 ID와 이미지 URL을 변환하여 수행됩니다. 숏코드를 사용하는 페이지 빌더에 이 변환을 수행하는 방법을 “알려야” 합니다. 다음 코드는 이 경우 wpml-config.xml 파일에 추가해야 하는 내용의 예입니다.
이미지 번역을 위해 wpml-config.xml 파일에 페이지 빌더 숏코드를 추가하는 예
<wpml-config>
<shortcodes>
<shortcode>
<!-- Convert media IDs in `gallery_ids` attribute, and ignore the shortcode content -->
<tag ignore-content="1">et_pb_gallery</tag>
<attributes>
<attribute type="media-ids">gallery_ids</attribute>
<attributes>
</shortcode>
<shortcode>
<!-- Convert the media URL in the content, translate some string attributes for `title` and `alt`, convert media URL in `src` attribute -->
<tag type="media-url">et_pb_image</tag>
<attributes>
<attribute>title_text</attribute>
<attribute>alt</attribute>
<attribute type="media-url">src</attribute>
</attributes>
</shortcode>
</shortcodes>
</wpml-config>다음 값을 사용할 수 있습니다.
- ignore-content – tag 요소 내에서 사용할 수 있습니다. 이 값은 선택 사항이며 0 또는 1이 될 수 있습니다. 이 속성을 사용하여 새로운 미디어 숏코드에 대한 이전 버전과의 호환성을 달성할 수 있습니다. 값을 1로 설정하면 숏코드 콘텐츠가 처리되지 않습니다.
- type – tag 요소 내에서 사용할 수 있습니다. 미디어 URL이 포함된 숏코드 콘텐츠를 media-url 내의 선택적 값으로 사용할 수도 있습니다.
- type – attribute 요소 내에서도 사용할 수 있습니다. 이 경우 다음 선택적 값 중 하나를 가질 수 있습니다.
- media-ids – 쉼표로 구분된 미디어 ID 목록입니다.
- media-url – 미디어의 URL입니다.
- link – 사이트의 다른 페이지를 가리키며 WPML이 자동으로 번역된 페이지의 URL로 변환합니다.
블록 속성의 미디어 번역
Gutenberg 블록과 함께 media-url 및 media-ids 속성 유형을 사용하여 배경 이미지와 같은 미디어를 번역할 수도 있습니다. 이는 숏코드와 유사하게 작동하지만, 중첩된 <key> 요소가 있는 <gutenberg-block> 요소를 사용하여 type="media-url" 및 type="media-ids"를 정의합니다.
이 요소를 사용하면 WPML 미디어 번역 애드온이 배경 이미지를 번역할 수 있습니다.
이는 Gutenberg 블록과 Divi 5 모두에서 작동합니다. 이 Divi 버전은 블록을 사용하여 콘텐츠를 저장하므로 <gutenberg-block> 요소가 미디어 번역을 추가하는 데 작동합니다.
다음은 Gutenberg 블록 속성에 미디어 번역을 추가하는 예입니다.
<wpml-config>
<gutenberg-blocks>
<gutenberg-block type="divi/section" translate="1">
<key name="module">
<key name="decoration">
<key name="background">
<key name="desktop">
<key name="value">
<key name="image">
<key name="url" type="media-url" />
</key>
</key>
</key>
</key>
</key>
</key>
</gutenberg-block>
</gutenberg-blocks>
</wpml-config>
페이지 빌더 위젯 번역
WPML을 사용하면 언어 구성 파일 내에 페이지 빌더 위젯을 등록할 수 있습니다. 자세한 내용은 번역을 위해 페이지 빌더 위젯을 등록하는 방법에 대한 문서 페이지를 참조하세요.
자동으로 숏코드 ID 변환
WPML 4.5.9부터 숏코드 속성에 위치한 글 또는 택소노미 용어의 ID를 선언할 수 있습니다. 그런 다음 이 ID는 사이트의 프런트엔드에서 자동으로 변환될 수 있습니다.
WPML 4.8부터 이 동일한 논리가 관리자 텍스트에 저장된 객체 ID와 글 사용자 정의 필드 및 사용자 정의 택소노미 용어 필드의 ID로 확장됩니다.
예를 들어 다음 숏코드를 고려해 보세요.
[foo_product_list product_ids="12,34,56"]
다음 구성을 사용하여 product_ids 속성이 글 ID를 보유하고 있음을 선언할 수 있습니다.
product_ids 속성이 글 ID를 보유하고 있음을 선언
<shortcode>
<tag ignore-content="1">foo_product_list</tag>
<attributes>
<attribute type="post-ids" sub-type="product">product</attribute>
</attributes>
</shortcode>프런트엔드에서 숏코드는 자동으로 다음과 같이 변환됩니다.
[foo_product_list product_ids="13,35,57"]
다음 구성 속성을 사용할 수 있습니다.
- type – post-ids 또는 taxonomy-ids 중 하나입니다.
- sub-type (선택 사항) – 이미 알려진 경우 type의 특정 엔터티입니다. 예를 들어 WooCommerce에서 제공하는 Product 사용자 정의 글 유형의 경우 product입니다. 정의되지 않은 경우 특정 엔터티를 추측합니다.
ID 변환은 다재다능하며 가능한 대부분의 ID 형식(단일 ID, ID 목록, 직렬화된 배열, JSON 인코딩된 배열)에 적응하려고 시도합니다.
추가 리소스
wpml-config.xml 파일에 대해 자세히 알아보려면 언어 구성 파일 가이드를 참조하세요.
wpml-config.xml 파일을 사용하여 다른 요소를 사용자 정의하려면 다음 추가 가이드를 참조하세요.