WPML
튜토리얼

RTL(Right-to-Left) WordPress 사이트 만들기

Amir3분

공유:

우에서 좌로 읽는(RTL) 언어는 특별한 과제를 안겨줍니다. 다행히 WordPress는 이러한 어려움을 줄이는 데 큰 역할을 합니다. 기본 TwentyTen 테마를 기반으로 완벽하게 작동하는 RTL 사이트를 만드는 방법을 알려드립니다.

다국어 RTL/LTR 사이트를 만들 때는 다음 두 가지 문제를 해결해야 합니다.

  • 편집/번역
  • 디스플레이

첫 번째 부분인 사이트 생성 또는 번역은 올바른 언어와 올바른 방향으로 WordPress 관리 화면에서 작업하는 것을 의미합니다. LTR 언어와 RTL 언어 간에 번역하는 경우 동일한 화면에서 방향이 혼합된 콘텐츠를 보게 된다는 점을 염두에 두어야 합니다.

사이트를 표시할 때 테마는 RTL 및 LTR 언어에 맞는 올바른 표시 방향을 처리해야 합니다.

이 튜토리얼에서는 영어, 스페인어, 히브리어(RTL)로 제공되는 Twenty Ten 다국어 데모 사이트를 예시로 사용합니다.

준비 – 코어 및 테마 .mo 파일 가져오기


WordPress 자체와 기본 테마는 여러 언어로 완벽하게 현지화되어 있습니다. 최신 버전의 현지화가 필요하므로 현지화된 WordPress 빌드에서 가져오기로 했습니다. 다음 링크에서 다운로드할 수 있습니다.
WordPress를 다운로드하고 압축을 푼 후 wordpress/wp-content/languages로 이동하세요. 전체 콘텐츠를 languages 디렉토리에 복사하세요. 테마에 대해서도 동일하게 수행하세요. 번역 파일은 wp-content/themes/twentyten(또는 나중에 이 글을 읽는 경우 현재 기본 테마)에 있습니다.

테마와 플러그인을 번역할 수 있도록 WPML도 구성해야 합니다.

번역


WPML의 번역 관리 모듈을 사용하면 번역 작업을 전송하고 다른 계정을 사용하여 번역할 수 있습니다. 또한 WPML 번역 에디터를 사용하여 번역할 수도 있습니다. 방향이 혼합된 콘텐츠가 포함된 경우 번역 에디터가 각 필드의 방향을 자동으로 조정하므로 이는 특히 중요합니다.

이 기능이 처음이라면 먼저 번역 관리 모듈에 대해 읽어보세요.

Hello World 글을 히브리어로 번역할 때의 모습은 다음과 같습니다.

우에서 좌로(RTL) 편집

영어 텍스트는 왼쪽에 정렬되고 히브리어는 오른쪽에 정렬되는 것을 볼 수 있습니다. HTML 모드를 사용하여 영어에서 항목을 복사하여 붙여넣을 수도 있습니다. HTML 모드는 태그를 올바르게 입력할 수 있도록 LTR로 표시됩니다.

문자열을 번역할 때 WPML은 문자열을 올바른 방향으로 표시하기도 합니다. Search 위젯 제목을 번역할 때 문자열 번역 화면의 모습은 다음과 같습니다.

RTL 문자열 번역

번역 에디터 및 문자열 번역 모듈을 사용하면 사이트를 완벽하게 번역할 수 있습니다. 다음으로 올바른 방향으로 제대로 표시하는 방법을 살펴봅니다.

RTL 및 LTR로 사이트 표시


이제 콘텐츠가 번역되었으므로 테마에 주의를 기울일 차례입니다.

다음의 짧은 코드가 핵심적인 역할을 합니다. 

<html dir="rtl" lang="he-IL">

히브리어 페이지의 소스를 보면 알 수 있습니다. 예를 들어 홈페이지를 확인해 보세요.

dir="rtl" 속성은 전체 사이트의 표시 방향이 우에서 좌로(RTL)임을 사이트에 알려줍니다. 브라우저는 이를 이해하고 모든 것을 올바른 방향으로 뒤집습니다.

header.php의 이 단일 PHP 코드가 이를 가능하게 합니다. 

<html <?php language_attributes(); ?>>

language_attributes 호출은 dir 및 lang 속성을 삽입합니다. 값은 코어 .mo 파일에서 가져옵니다. WordPress에 대한 올바른 .mo 파일이 있으면 이러한 속성에 대한 올바른 값을 얻을 수 있습니다.

테마의 HTML 및 CSS가 ‘안전한’ 방식을 따른다면 이것만으로 충분합니다. 안전하다는 것은 절대 위치나 너비를 사용하지 않는 것을 의미합니다. 절대값을 사용해야 하는 경우 언어별로 다른 CSS를 로드하는 것을 고려할 수 있습니다.

ICL_LANGUAGE_CODE 상수를 검사하는 조건문을 사용하여 이 작업을 쉽게 수행할 수 있습니다(WPML 코딩 API에 설명되어 있음).

결과


영어, 스페인어, 히브리어로 된 데모 사이트의 모습은 다음과 같습니다.

영어

스페인어

히브리어
생각보다 어렵지 않습니다. 직접 시도해 보시고 진행 상황을 알려주세요.

이 글이 유용했나요? 이 글을 공유하세요:

추천 글