워드프레스 언어 전환기 추가 방법

웹사이트에 워드프레스 언어 전환기를 추가할 계획이신가요? 그렇다면 계속 읽어보세요!

워드프레스 사이트에 언어 전환 기능을 추가하고 콘텐츠를 번역하여 방문자가 자신의 언어로 콘텐츠를 읽을 수 있게 하면, 새로운 시장에 진출하고 SEO 및 온라인 노출 기회를 확대하며, 새로운 이용자층과의 신뢰를 쌓는 데 도움이 됩니다. 어떤 플러그인을 사용해야 할지 고민되시나요? 에서 선정한 최고의 워드프레스 다국어 플러그인 비교 기사인‘ ’를 확인해 보세요.

Weglot 사용하면 코딩 없이도 5분 이내에 워드프레스 사이트나 WooCommerce 여러 언어를 추가할 수 있습니다.

이 글에서는 워드프레스 언어 전환기를 사이트에 추가하는 방법과 사이트 디자인에 맞게 커스터마이징하는 방법에 대한 상세한 단계별 가이드를 제공합니다.

튜토리얼: Weglot 사용한 WordPress 언어 전환기 추가하기

워드프레스 언어 선택기는 방문자가 선호하는 언어를 선택하고 사이트의 번역된 버전 간을 전환할 수 있게 해주는 탐색 요소입니다. 번역 플러그인을 설치하고, 사용할 언어를 선택한 다음, 숏코드를 통해 메뉴, 위젯 영역 또는 페이지에 언어 선택기를 배치하면 어떤 워드프레스 사이트에도 이를 추가할 수 있습니다.

워드프레스용 AI 기반다국어 번역 플러그인인 Weglot 사용하면, 단 5분 만에 사이트에 여러 언어를 추가하고 코딩 없이 디자인을 맞춤 설정할 수 있습니다. 이 설정은 WooCommerce 동일하게 적용됩니다. 표준 워드프레스 사이트를 운영하든 WooCommerce 운영하든, 언어 선택기의 표시 방식과 작동 방식은 완전히 동일합니다.

사이트의 메뉴, 위젯 또는 HTML 페이지의 소스 코드 등 다양한 위치에 WordPress 언어 전환기를 추가할 수 있습니다. 

이 튜토리얼에서는 사이트 내비게이션에 언어 전환기를 추가하는 방법을 안내합니다. 기본적으로 Weglot 사이트 좌측 하단에 언어 전환기를 Weglot . 이후 설정 또는 Weglot언어 전환기 visual editor 통해 위치를 이동하는 방법을 보여드리겠습니다. 

1단계: Weglot 설치 및 활성화

워드프레스 사이트에 Weglot 플러그인을 설치하고 활성화합니다. 그런 다음 번역을 관리 및 편집하고 통합을 위한 고유 API 키를 얻을 수 있는 Weglot 계정을 만듭니다.

2단계: Weglot 연결 Weglot 언어 선택

워드프레스 대시보드에서 Weglot 탭을 클릭하고 API 키를 추가한 다음 사이트의 원래 언어와 추가하려는 언어를 선택한 다음 저장을 클릭합니다. 

3단계: 사이트 및 언어 선택기 확인하기

이제 귀하의 워드프레스 웹사이트가 다국어 지원이 가능해졌습니다! Weglot 사이트의 콘텐츠를 자동으로 Weglot , AI를 활용해 번역한 후 언어별 하위 디렉토리에 표시했습니다.

사이트의 프론트엔드를 확인해 보시면, 오른쪽 하단에 새로운 워드프레스 언어 선택기가 표시된 것을 확인하실 수 있습니다.

클릭하면 사용 가능한 언어가 확장되어 표시되고 원하는 번역을 선택하여 표시할 수 있습니다.

이것은 Weglot 기본으로 제공되는 디자인이며, 이제 여러 가지 방법으로 WordPress 언어 전환기의 모양과 위치를 맞춤 설정할 수 있습니다.

워드프레스 언어 전환기 맞춤 설정하기

기본 사용자 지정을 시작하려면 워드프레스 백엔드에서 Weglot > 언어 버튼 디자인(선택 사항) 으로 이동하세요. 이 화면에서 선택할 수 있습니다:

• 드롭다운 메뉴 사용 여부
• 스위처 내에서 플래그를 사용할지 여부 및 유형
• 언어 이름을 표시하는 경우
• 언어 코드만 표시하려면 다음과 같이 하세요.

CSS를 재정의하고 사용자 정의 선택자로 대체할 수 있는 섹션도 있습니다—이 부분은 잠시 후에 다루겠습니다. 지금은 언어 전환기를 맞춤 설정하여 깃발 없이 언어 이름만 표시되도록 하면서도 드롭다운 메뉴는 유지하도록 하겠습니다.

이렇게 하려면 '플래그 사용'을 선택 취소하고 '전체 이름'을 선택한 다음 사이트를 살펴보세요:

‍

고급 사용자 지정도 수행할 수 있습니다. 예를 들어, 탐색 메뉴나 사이드바에 언어 전환기를 표시해 보겠습니다.

언어 전환기 배치 옵션

이를 구현하는 방법에는 메뉴, 위젯, 숏코드, HTML, 또는 사용자가 스크롤할 때 화면 모서리에 고정되는 플로팅 버튼 등 여러 가지가 있습니다. 또한 [weglot] 숏코드를 사용하여 게시물이나 페이지 콘텐츠 내에 스위처를 직접 배치할 수도 있습니다. 표시하고자 하는 위치에 페이지 편집기에 이 코드를 붙여넣기만 하면 됩니다. Weglot 스위처는 FSE 및 블록 테마를 포함한 모든 WordPress 테마에서 작동합니다.

워드프레스 대시보드의 Weglot 돌아가서, 언어 전환기 표시 옵션을 찾을 때까지 페이지를 아래로 스크롤하세요:

언어 전환기를 원하는 위치에 따라 안내를 따르기만 하면 됩니다. 이 경우 "외관 -> 메뉴"로 이동한 후 메뉴 항목의 순서를 변경하기 위해 전환기를 드래그 앤 드롭합니다. 

준비가 완료되고 변경 사항을 저장했으면 프런트엔드를 다시 한 번 살펴보세요:

헤더 내에 언어 전환기가 위치해 있지만 제대로 표시되지 않습니다. 또한 드롭다운 메뉴 대신 인라인 언어 코드를 사용할 수도 있습니다.

고급 언어 전환기 스타일링

여기서 CSS를 사용합니다. 먼저 워드프레스의 Weglot 메뉴에서 드롭다운 설정을 끕니다. 그런 다음 언어 코드를 표시하려면 확인란을 선택합니다.

여기에서 CSS 텍스트 덮어쓰기 영역을 사용하여 사이트 디자인에 맞게 글꼴, 색상 및 텍스트 가중치에 대한 선택기를 설정할 수 있습니다:

마지막으로 프런트엔드에서 디자인을 살펴보세요:

적절한 위치 설정과 몇 줄의 CSS만으로, 복잡한 템플릿 편집이나 HTML, PHP 코딩 기술 없이도 Weglot언어 전환기를 사이트에 맞게 빠르고 쉽게 스타일링할 수 있습니다. 

사용자 정의 CSS 수정은 전적으로 선택 사항입니다. 워드프레스 관리자의 Weglot 탭 섹션에서 제공되는 옵션을 통해 디자인을 이동하고 변경할 수 있습니다. 

더 시각적으로 작업하는 것을 visual editor Weglot언어 전환기 visual editor 사용할 수도 있습니다: 

언어 전환기 visual editor 워드프레스 대시보드 내에서와 동일한 설정을 제어할 수 visual editor . 전환기를 원하는 위치로 간단히 드래그한 후 "저장"을 클릭하면 변경 사항이 워드프레스 사이트에 즉시 적용됩니다. 

워드프레스 언어 전환기 표시 모범 사례

언어 전환자는 종종 관련 속성을 가진 두 진영으로 나뉩니다:

• 존재하지 않습니다. 즉, 웹사이트는 번역을 전혀 제공하지 않습니다.
• 찾기 어렵습니다. 언어 전환기가 탐색 메뉴나 다른 곳에 숨겨져 있을 수 있어 사용자가 숨바꼭질을 해야 하는 상황이 발생하며, 이는 끔찍한 사용자 경험을 제공합니다.
• 찾기 쉽습니다. 반면, 워드프레스 언어 전환기는 헤더나 푸터처럼 명확하고 관련성 있는 위치에서 찾을 수 있습니다.
• 찾기 매우 쉽습니다. 워드프레스 언어 전환기가 헤더처럼 눈에 잘 띄는 화면 영역에 위치해 있다면 운이 좋은 셈입니다 . 이렇게 하면 올바른 언어를 빠르게 선택할 수 있습니다.

따라서 사이트 방문자가 선호하는 언어를 쉽게 선택할 수 있도록 하고 해외 사이트 방문자에게 사용자 친화적인 환경을 제공하는 것이 중요합니다. 이상적인 세계에서는 추가 기능 없이도 이 작업을 수행할 수 있어야 합니다. 이를 염두에 두고 다음 사항을 고려하세요:

1. 언어 옵션을 신중하게 선택하세요. 모든 언어를 활성화할 수 있다고 해서 반드시 활성화해야 하는 것은 아니며, 필요한 언어만 활성화해야 합니다. 
2. 언어 전환기를 쉽게 찾을 수 있도록 배치하세요. 페이지 상단 또는 하단에 언어 전환기를 두는 것이 좋습니다. 두 위치 모두 훌륭한 선택입니다. 모바일 기기의 경우, 언어 전환기가 메인 네비게이션의 메뉴 항목으로 포함되는 경우가 많습니다.
3. 워드프레스 언어 전환기를 디자인에 맞게 스타일링하세요. 기본 제공되는 일반적인 언어 전환기를 그대로 사용하는 것도 유혹적일 수 있지만 , 사이트의 디자인과 분위기에 맞춰 커스터마이징하는 것이 좋습니다.
4. 선택한 언어의 깃발 또는 이름을 선택합니다. 깃발은 다채롭고 상징적이며 공간 효율적이라는 여러 가지 이유로 디자이너들이 사용하기를 원하지만, 깃발은 언어를 묘사하기 위해 고안된 것이 아닙니다. 이로 인해 여러 가지 문제가 발생합니다.

성공적인 언어 전환자의 3가지 예

웹을 탐색하다 보면 언어 전환기를 자주 보게 됩니다. 하지만 다른 언어를 사용하지 않거나 옵션을 찾지 않는다면 페이지의 디자인과 위치가 얼마나 다양한지 모를 수 있습니다.

1. Microsoft 번역기

Microsoft 번역기 사이트에서는 페이지 바닥글 근처에 있는 드롭다운(또는 이 경우 '드롭업')을 사용하여 방문자가 약 40개 언어 중에서 선택할 수 있습니다. 또한 각 언어 이름을 모국어를 사용하여 전체로 표시하도록 선택했습니다. 이렇게 하면 방문자가 자신의 언어를 한눈에 알아볼 수 있고 언어 전환 옵션이 명확해집니다.

2. Etsy

수공예가들이 직접 만든 상품을 판매할 수 있는 국제 마켓플레이스인 만큼, Etsy가 잘 설계된 언어 전환기를 제공하는 것은 당연합니다. 사이트의 모든 페이지 하단에서 이를 찾을 수 있습니다.

지역, 언어 및 통화를 선택할 수 있습니다. 이 버튼을 클릭하면 모달 창이 나타나며, 여기서 각 옵션을 변경할 수 있습니다. 이는 사용자가 해당 지역의 사이트로 이동해야 하는 번거로움을 덜어주는 깔끔한 방식입니다.

3. Evernote

인기 노트 앱 에버노트는 언어 전환기를 간단하게 유지하며, 하단부의 드롭다운 메뉴를 통해 언어를 변경할 수 있습니다.

찾기 쉽고 라벨링도 명확해, 심플한 스위처라도 여전히 명확하고 매끄러운 사용자 경험을 제공할 수 있음을 보여줍니다.

잘 설계된 워드프레스 언어 전환기 구현하기

적절한 도구를 활용하면 사이트에 워드프레스 언어 전환기를 추가하는 것은 간단합니다. Weglot 사용하면 개발자 없이도 언어 전환기가 자동으로 추가되고, 첫날부터 완벽한 AI 번역 기능을 이용할 수 있으며, 편집 권한도 완전히 제어할 수 있습니다. 이 번역 도구는 백그라운드에서 작동하여 번역 내용을 최신 상태로 유지하고 브랜드 정체성을 반영하며, 별도의 관리 없이도 원활하게 운영됩니다. 또한 Weglot 자동 리디렉션을 활성화할 수 있습니다( ). 이 기능은 방문자의 브라우저 언어를 감지하여 사이트의 해당 언어 버전을 자동으로 제공합니다.

Weglot 다국어 SEO를 고려하여 Weglot . 사이트의 각 번역 버전에 대해 언어별 하위 디렉터리를 자동으로 생성합니다. 또한 hreflang 태그를 추가하고 메타데이터를 번역합니다. 검색 엔진은 출시 첫날부터 모든 언어 버전을 찾아 색인화할 수 있습니다.

다국어 SEO를 염두에 두고 제작된 워드프레스 번역 플러그인을 선택하세요. 자동으로 생성되는 언어 하위 디렉터리, 번역된 메타데이터, hreflang 태그 구현 덕분에 Weglot 다국어 사이트의 기술, SEO 및 번역을 처리합니다.

사이트에 워드프레스 언어 전환기를 추가할 준비가 되셨나요? Weglot무료 요금제를 이용해 보세요. 신용카드 등록이 필요 없습니다.