이 게스트 게시물은 wplift.com의 Daan이 작성했습니다. 그는 최근 Elementor 템플릿의 놀라운 프리미엄 라이브러리인 EasyThemePacks를 출시했습니다. 그가 WPML을 사용하여 이를 정확히 어떻게 번역하는지 보여드릴 것입니다.
Elementor를 자주 사용하는 사용자라면 코딩 없이도 아름다운 디자인을 만들 수 있는 Elementor의 기능에 이미 꽤 익숙하실 것입니다. 하지만 Elementor로 아름다운 다국어 디자인도 만들 수 있을까요?
좋은 소식: WPML을 사용하면 가능합니다!
이 튜토리얼이 끝날 때쯤이면 완전히 비어 있는 Elementor Canvas 옵션을 사용하는 경우에도 Elementor로 구축된 다국어 웹사이트 제작을 시작하는 방법을 정확히 알게 될 것입니다.
Elementor로 다국어 웹사이트를 제작하는 데 필요한 사항
이 튜토리얼을 따라 하는 데 필요한 모든 사항은 다음과 같습니다.
- Elementor로 디자인한 페이지 – 비어 있는 Elementor Canvas 템플릿을 기반으로 한 완벽한 랜딩 페이지 디자인인 EasyThemePacks의 Barista Bluegrass 템플릿을 사용합니다.
- WPML Multilingual CMS – Elementor 콘텐츠를 포함하여 다국어 WordPress 웹사이트를 제작하는 데 도움이 됩니다.
또한 WPML Multilingual CMS 패키지의 다른 구성 요소, 특히 WPML 문자열 번역 및 WPML 번역 관리를 설치해야 합니다.
이러한 필수 요소를 모두 갖추었다면 WPML을 사용하여 다국어 Elementor 웹사이트를 제작하는 방법을 살펴보겠습니다!
1단계: WPML CMS 및 구성 요소 설치 및 활성화
WPML Multilingual CMS 및 해당 구성 요소를 설치한 후 WPML 설정 마법사를 통해 기본 언어 설정을 구성할 수 있습니다(예: Elementor 디자인을 번역할 언어 선택).
이 예시에서는 템플릿을 독일어로 번역하겠습니다(Google 번역 사용 – 독일어 문법에 엄격하신 분들께는 실수가 있더라도 양해 부탁드립니다!).
번역 관리자도 활성화해야 합니다(WPML이 대시보드에서 이 작업을 수행하라는 메시지를 표시하므로 놓치기 어려우며 버튼만 클릭하면 됩니다).
2단계: 번역할 Elementor 페이지로 이동
WPML의 기본 설정을 완료한 후 번역할 Elementor 페이지의 WordPress 대시보드 에디터로 이동합니다(Elementor 에디터를 열지 말고 일반 WordPress 에디터에 머무르세요).
EasyThemePacks Barista Bluegrass 템플릿의 원본 영어 버전은 다음과 같습니다.
단 몇 분 만에 독일어로 번역할 수 있습니다!
3단계: Elementor 디자인의 새 번역 생성
WordPress 에디터에서 + 아이콘을 클릭하여 Elementor 디자인의 새 번역을 생성합니다.
편리한 나란히 보기 에디터가 열립니다. 왼쪽에는 원본 영어 번역의 모든 정보가 표시됩니다. WPML은 Elementor 디자인의 모든 개별 문자열과 기타 유용한 속성(예: 사용자를 올바른 번역으로 보낼 수 있도록 버튼이 연결되는 URL)을 가져옵니다.
Elementor 템플릿 번역을 시작하려면 오른쪽의 해당 상자에 번역을 입력하기만 하면 됩니다.
진행하면서 완료된 작업과 아직 번역해야 할 작업을 빠르게 구분할 수 있도록 각 번역을 번역이 완료되었습니다로 표시하세요. 또한 부분적인 작업은 언제든지 저장할 수 있지만, 모든 항목을 완료로 표시할 때까지는 프런트엔드에 번역을 표시할 수 없습니다.
번역을 마치고 저장하면 완료됩니다! 이제 필요할 때마다 기존 번역을 편집할 수 있습니다.
그리고 사이트의 프런트엔드로 이동하면 기본 설정에 따라 URL을 변경하여 번역된 버전의 페이지에 접근할 수 있습니다(언어 전환기를 만드는 방법에 대한 자세한 내용은 잠시 후에 설명합니다!).
모든 항목이 어떻게 현지화되었는지 확인할 수 있도록 URL 구조를 포함하여 번역된 EasyThemePacks 템플릿의 모습은 다음과 같습니다.
원본 Elementor 디자인을 변경하면 어떻게 되나요?
어느 시점에서는 원본 버전의 Elementor 디자인을 변경하고 싶은 상황이 발생할 수 있습니다.
그러면 어떻게 될까요? 변경한 후 번역된 콘텐츠가 손실될까요?
아닙니다!
Elementor 인터페이스를 사용하여 페이지의 기존 번역을 편집하는 경우, WPML은 에디터에 해당 번역을 표시하고 차이점을 보여주는 옵션을 제공합니다.
WPML은 변경되지 않은 이미 번역된 문자열에는 아무런 작업도 수행하지 않습니다. 따라서 편집된 텍스트만 업데이트하면 모든 준비가 완료됩니다!
Elementor Canvas 템플릿의 언어 전환기는 어떻게 되나요?
모든 EasyThemePacks 디자인은 비어 있는 Elementor Canvas 템플릿 사용을 기반으로 합니다. Elementor로 직접 페이지를 만드는 경우 비어 있는 Elementor Canvas 템플릿을 사용할 가능성도 높습니다.
해당 템플릿을 사용하면 테마의 네비게이션 메뉴나 사이드바가 없는데, 이 두 곳은 일반적으로 WPML로 언어 전환기를 추가하는 위치입니다.
그렇다면... Elementor Canvas를 사용할 때 방문자가 Elementor 템플릿의 번역된 버전에 어떻게 접근하도록 할 수 있을까요?
코드를 사용하여 고유한 WPML 언어 전환기를 만들 수도 있지만, 가장 쉬운 방법은 Elementor 템플릿에 언어 전환기 숏코드를 포함하는 것입니다.
이렇게 하려면 표시할 위치에 Elementor Shortcode 위젯을 배치하고 다음 숏코드를 포함하세요.
{{wpml_language_selector_footer}}
이 숏코드는 WPML 푸터 언어 전환기의 설정을 가져옵니다. 이 설정을 구성하려면 WordPress 대시보드에서 WPML → 언어 로 이동하고 푸터 언어 전환기 섹션으로 아래로 스크롤하세요.
연필 아이콘을 클릭하면 언어 전환기가 작동하는 방식을 구성할 수 있습니다. 다음 작업을 수행할 수 있습니다.
- 레이아웃 변경
- 언어 이름 및 국기 표시 여부 선택
- 새로운 색상 구성표 선택
- 개별 요소의 스타일 구성
팁을 드리자면, 언어 이름을 사용하면 사람들이 CTRL + F를 사용하여 자신의 지역 언어를 검색할 수 있으므로 훌륭한 옵션입니다.
Elementor 번역 방법에 대한 마무리 생각
WPML Multilingual CMS 패키지를 사용하면 EasyThemePacks에서 제공하는 프리미엄 템플릿과 같이 Elementor Canvas를 기반으로 하는 템플릿을 포함하여 모든 Elementor 페이지 템플릿을 쉽게 번역할 수 있습니다. 시각적 Elementor 페이지 빌더로 구축한 모든 콘텐츠를 문자열 단위로 살펴보며 번역할 수 있습니다. 또한 향후 원본 Elementor 디자인을 변경하는 경우, WPML은 해당 변경 사항을 찾아 번역된 버전도 업데이트할 수 있도록 도와줍니다.
마지막으로, 비어 있는 Elementor Canvas 템플릿을 사용하는 경우에도 링크로 제공된 WPML의 숏코드나 사용자 정의 코드 방법을 통해 사용자 친화적인 언어 전환기를 포함할 수 있습니다.
Elementor 디자인 번역 방법에 대해 다른 질문이 있으신가요? 댓글을 남겨주세요!
