드래그 앤 드롭 Layouts로 생성된 사이트 번역

버전 3.2부터 WPML은 다른 플러그인 및 테마에서 생성된 엔터티를 번역할 수 있습니다. 이 글에서는 레이아웃을 번역하는 방법을 보여줍니다. 핵심은 모든 언어에 대해 하나의 레이아웃만 사용하고 그 안의 텍스트만 번역하는 것입니다.

Layouts 소개

Layouts 플러그인은 페이지 레이아웃을 위한 드래그 앤 드롭 에디터입니다. Layouts는 부트스트랩 기반 테마와 함께 작동하며 반응형 디자인을 생성합니다. WordPress 개발 플러그인인 Toolset 패키지의 일부입니다.

Layouts는 처음부터 끝까지 전체 페이지를 디자인합니다. 화려한 콘텐츠 요소가 포함되어 있지 않기 때문에 Layouts 자체만으로는 꽤 단순합니다. Layouts는 나머지 Toolset 플러그인과 함께 작동하므로 거대하고(때로는 불필요하게 무거운) 페이지 요소 라이브러리를 가질 필요가 없습니다. 레이아웃 셀은 사이트와 폼의 동적 콘텐츠를 표시할 수 있습니다. 라이브러리에서 셀을 선택하고 사용자 정의하는 대신, Toolset 플러그인을 사용하면 프로그래밍 없이도 자신만의 셀을 쉽게 만들 수 있습니다.

Layouts 기반 사이트 번역

생성한 레이아웃에는 일반적으로 약간의 ‘정적’ 텍스트와 동적 콘텐츠가 포함됩니다. 예를 들어 ‘회사 사이트’ 예시를 살펴보세요.

동적 요소에는 서비스 목록과 추천 글이 포함됩니다. 이러한 요소는 Views를 사용하여 생성됩니다. View는 디스플레이 템플릿이 있는 WP_Query와 같습니다. WPML이 쿼리에 훅을 걸어 올바른 언어로 콘텐츠를 로드하도록 하므로 Views를 번역하기 위해 아무 작업도 수행할 필요가 없습니다. 정확히 동일한 View가 표시된 언어로 올바른 콘텐츠를 로드합니다.

이 페이지의 정적 요소는 제목입니다. ‘Our Services’ 및 ‘Features Articles’ 텍스트는 레이아웃의 일부입니다. 동적 콘텐츠에서 가져온 것이 아닙니다. 다른 언어의 홈페이지에 동일한 레이아웃을 사용할 때 이 텍스트가 번역되어 표시되기를 원할 것입니다. 바로 이 부분에서 WPML의 패키지 번역이 역할을 합니다. 이것은 WPML 3.2에 추가된 새로운 API이며 다른 모든 개발자가 사용할 수 있도록 공개되어 있습니다.

Layouts 플러그인은 WPML용 패키지를 생성합니다. 레이아웃 패키지에는 레이아웃에 포함되어 있으며 번역이 필요한 모든 정적 텍스트가 포함됩니다. 이 패키지는 WPML의 번역 에디터를 사용하여 번역하는 일반적인 WordPress 콘텐츠와 매우 유사해 보입니다. 번역이 필요한 모든 필드를 볼 수 있습니다.

이러한 방식으로 하나의 레이아웃을 생성하여 사이트의 모든 언어에 사용합니다. 정적 텍스트만 번역하면 모든 동적 콘텐츠가 올바른 언어로 표시됩니다.

직접 사용해 보고 싶으신가요?

Toolset 플러그인과 WPML을 테스트해 볼 수 있는 테스트 사이트를 만들었습니다. 사용하려면 비공개 무료 교육 사이트를 시작하세요.

Layouts 및 번역 과정을 테스트해 볼 수 있도록 테스트 콘텐츠를 이미 생성해 두었습니다.

사이트의 기본 언어는 영어이며 스페인어로 완전히 번역되어 있습니다. 프랑스어 콘텐츠를 추가했지만 레이아웃은 프랑스어로 번역하지 않았습니다.

다음 단계에 따라 동영상을 따라해 보세요.

1. discover-wp.com에서 교육 사이트 생성
2. 사이트의 홈페이지를 방문하여 프랑스어로 전환하세요. 모든 동적 요소는 프랑스어로 되어 있지만 정적 텍스트는 여전히 영어로 되어 있는 것을 확인할 수 있습니다.
3. 먼저 Layouts를 사용해 보면서 어떻게 작동하는지 확인하세요.
4. WPML->번역 관리로 이동하세요. “번역 대시보드” 탭의 필터 섹션에 있는 유형 드롭다운에서 “Layouts”를 선택하세요.
5. Home 레이아웃을 선택하고 프랑스어 번역으로 보냅니다(스페인어로는 이미 번역되어 있습니다).
6. WPML->번역으로 이동하여 Layout-Home 작업을 찾은 다음 ‘가져와서 편집하기’를 클릭하세요.
7. 텍스트를 번역하세요. 도움이 필요하신가요? 페이지의 주요 텍스트에 대해 다음 번역 요약표를 사용하세요.

   영어	프랑스어
   Our Services	Nos services
   Featured articles	Articles Vedettes
   Testimonials	Témoignages
   Company Overview	Présentation de l’entreprise
   Recent News	Nouvelles récentes

   
   각 필드 옆의 ‘번역이 완료되었습니다’와 페이지 맨 아래의 ‘저장’ 버튼 바로 위에 있는 ‘번역 완료’ 체크박스를 클릭하는 것을 잊지 마세요.
8. 프랑스어 홈페이지를 다시 방문하세요. 이제 정적 텍스트를 포함한 모든 항목이 번역된 것을 볼 수 있습니다.
9. 레이아웃을 편집하여 다시 테스트해 보세요. 변경 사항이 사이트의 모든 언어에 적용되는 것을 볼 수 있습니다. 텍스트를 편집하거나 추가하는 경우 번역 대시보드에서 시작하여 번역을 업데이트해야 합니다.

위의 단계는 기준 사이트를 사용하여 Layouts를 번역할 때 적용됩니다. 이 사이트에는 필요한 모든 플러그인이 사전 설치되어 있습니다.

자체 사이트에서 이 단계를 따르려면 wp-types.com의 ‘Layouts 번역 방법’ 문서를 참조하세요. 여기에서 필요한 모든 플러그인 목록과 더 많은 예시를 찾을 수 있습니다.

다음 단계

Layouts를 사용한 편집이 마음에 드셨다면 Toolset을 구매하여 실제 프로젝트에 사용해 보시기 바랍니다.

저희는 더 많은 플러그인과 테마가 복잡한 구조에 대해 쉬운 번역을 제공하기를 바랍니다. 페이지 빌더, 폼 및 기타 ‘비 WordPress’ 요소를 사용하는 경우 해당 플러그인 및 테마의 개발자에게 문의하시기 바랍니다. WPML의 이러한 가능성에 대해 알려주세요. 저희는 다른 개발자들과 협력하여 패키지 번역 API를 통합하는 데 큰 관심이 있습니다.

여기에 의견을 남겨주시면 답변해 드리겠습니다.