워드프레스 블록 편집기에서는 사이트 사용자 정의 기능의 새로운 가능성이 계속 열리고 있습니다. 이 튜토리얼에서는 두 가지 언어로 사이트 메뉴를 생성하는 데 사용하는 블록과 방문자가 사이트에서 보이는 언어를 변경할 수 있는 언어 전환기를 살펴보겠습니다.
작동 방식 데모는 여기에서 참조할 수 있습니다.
이 가이드에서
- 이 언어 전환기를 통해 언어가 번역되지는 않지만, 방문자에게 두 가지 이상의 언어로 사이트를 표시할 수 있습니다. 페이지 번역은 직접 해야 합니다!
- 이 언어 전환기를 통해 사용자가 각 언어의 시작 페이지로 리디렉팅될 뿐입니다.
- 추가 페이지를 사이트에 추가한 경우에는 메뉴를 업데이트해야 합니다.
- 초기 설정에는 시간이 조금 걸리지만, 완료 시 조정과 업데이트는 빠르게 완료됩니다.
이 튜토리얼에서는 다음과 같은 함수를 사용합니다.
- 페이지 슬러그
- 상위 페이지와 하위 페이지
- 정적인 전면 페이지
- 열 블록
- 문단 블록
- (선택 사항) 인라인 이미지(문단 블록 도구 모음 중에서 사용 가능)
- 탐색 블록
- 재사용 가능한 블록
1. 페이지 및 페이지 슬러그 설정
2. 메뉴 및 언어 전환기 레이아웃 선택
3. 언어 전환기 생성
4. 탐색 메뉴 추가
5. 새 메뉴 및 언어 전환기 저장
6. 두 번째 언어 메뉴
7. 기타 페이지에 새 메뉴 추가
8. 추가 페이지 추가하기
이 튜토리얼을 가장 효과적으로 활용하려면 여기에 나열된 블록 편집기 호환 테마 중 하나를 사용하는 것이 좋습니다.
내 사이트 > 사이트 > 페이지로 이동합니다. 사이트에서 표시할 각 언어의 시작 페이지부터 생성합니다. 아직은 콘텐츠를 많이 추가하지 않아도 됩니다. 지금은 페이지 제목이면 충분합니다.
각 페이지를 발행하여 업데이트한 다음 해당 언어를 참조하도록 각 페이지의 페이지 슬러그를 변경합니다. 이 예의 프랑스어 시작 페이지는 제목이 Accueil이며, /fr/이라는 페이지 슬러그가 있습니다.
선호하는 언어 시작 페이지를 사이트의 정적인 전면 페이지로 지정합니다. 그러면 사이트를 찾아오는 방문자가 먼저 하나의 언어로 사이트를 보고 다른 언어로 변경할 수 있습니다.
필요한 시작 페이지의 작업을 완료하면 다른 언어를 위한 약간 다른 콘텐츠 페이지를 생성합니다. 지금도 콘텐츠는 추가하지 않아도 됩니다. 지금은 제목만 있는 페이지를 발행해도 괜찮습니다.
이러한 페이지를 생성할 때 페이지 속성 섹션을 사용하여 해당 페이지를 해당 언어 시작 페이지의 하위 페이지로 지정합니다.
예 – 페이지 구조 개요
내 사이트 > 사이트 > 페이지에서 기본 언어 시작 페이지를 클릭하여 워드프레스 편집기에서 엽니다.
편집기의 페이지 제목 아래에서 열 블록을 추가하고 열 2개 레이아웃을 선택합니다. 선택하는 레이아웃에 대한 마음이 바뀌는 경우 블록 설정에서 변경할 수 있으니 걱정하지 마세요. 해당 방법에 대한 자세한 내용은 열 블록 가이드를 참조하세요.
열이 하나는 크고 하나는 작은 레이아웃을 사용하는 것이 좋습니다. 작은 열에는 언어 전환기가 들어가고 큰 열에는 메뉴가 들어갑니다.
열 블록을 와이드 또는 전체 폭으로 설정합니다.
언어 전환기를 표시하려는 방식에 따라 두 가지 방법을 사용할 수 있습니다. 언어 이름을 입력하거나 인라인 이미지를 사용하여 플래그를 표시할 수 있습니다.
참고: 다음과 같은 두 가지 이유로 플래그를 사용하여 언어를 표현하는 것은 좋지 않습니다.
1. 플래그 이미지가 표시되지 않을 수 있는 방문자의 접근성이 떨어집니다
2. 방문자에게 특정 언어가 연상되는 플래그에 따라 혼동이 발생할 수 있습니다. 모든 사람이 같은 방식으로 생각하지 않습니다!
명확하도록 텍스트 링크를 사용하는 것이 좋습니다(방법 1 또는 2).
방법 1 – 탐색 블록의 텍스트 링크
그런 다음에 각 항목의 이름이 해당 언어(또는 약식 버전)로 표시되도록 텍스트를 변경할 수 있습니다.
방법 2 – 문단 블록의 텍스트 링크
선호하는 형식으로 언어 이름을 입력합니다(예: “EN”과 “FR” 또는 “영어”와 “프랑스어”).
각 언어 이름을 강조 표시하고 하이퍼링크 삽입 버튼을 클릭하여 해당 언어 이름을 시작 페이지와 연결합니다. 예:
방법 3 – 인라인 이미지
이미지가 추가되면 이미지를 클릭하여 크기를 조정할 수 있습니다.
새 언어 전환기의 반대쪽 열에 탐색 블록을 추가할 차례입니다. 빈 열을 클릭하고 블록 메뉴를 열고 탐색을 검색하거나 레이아웃 요소 섹션에서 찾습니다.
블록에 두 가지 옵션이 표시됩니다. 빈 항목 생성을 선택합니다. 페이지에 추가할 준비가 되는 블록이 표시됩니다.
첫 번째 언어의 각 페이지 링크를 추가합니다. 탐색 블록 오른쪽의 블록 추가 버튼(검은색 “+” 버튼)을 추가하여 추가 링크를 추가합니다.
편집기 맨 위의 블록 탐색 버튼을 사용하여 열을 선택합니다.
열 블록 도구 모음 을 사용하여 추가 옵션을 보고 재사용 가능한 블록에 추가를 선택합니다.
새로운 재사용 가능한 블록을 식별하기 쉽도록 이름을 지정합니다(예: 메뉴 – 영어). 재사용 가능한 블록 작동 방식에 대한 자세한 내용은 이 가이드에서 알아볼 수 있습니다.
페이지를 업데이트하고 변경 사항도 페이지에 저장해야 합니다. 축하합니다! 첫 번째 메뉴와 언어 전환기가 완료되었습니다.
두 번째 언어의 메뉴를 생성하려면 다시 1~5 단계 따르거나 다음과 같이 단축키를 선택할 수 있습니다.
워드프레스 편집기에서 두 번째 언어 페이지 중 하나를 엽니다. 블록 추가 버튼(검은색 “+” 버튼)을 클릭하여 새 블록을 페이지에 추가합니다. 블록 목록에서 맨 아래까지 스크롤하여 메뉴가 저장된 재사용 가능한 블록 카테고리를 찾습니다. 또는, 검색 상자를 사용하여 해당 카테고리를 찾습니다.
메뉴 블록이 해당 페이지에 추가되면 추가 옵션 메뉴를 사용하여 일반 블록으로 변환합니다.
블록이 재사용 가능한 블록이 아니라 일반 블록으로 나타나면 두 번째 페이지의 페이지가 대신 연결되도록 탐색 블록을 업데이트할 수 있습니다.
방법 1 – 새 탐색 블록 제거 및 재추가
방법 2 – 탐색 항목 변경
변경 사항을 적용할 때 새 열 블록을 위의 5단계와 같이 새로운 재사용 가능한 블록으로 저장하고 두 번째 언어의 메뉴라는 것을 나타내는 명확한 이름을 지정합니다.
페이지를 업데이트하고 변경 사항도 페이지에 저장해야 합니다. 축하합니다! 두 번째 메뉴와 언어 전환기가 완료되었습니다.
메뉴와 언어 전환기가 준비되었습니다. 위의 6단계에서 설명한 대로 이제 각 해당 언어의 다른 페이지에 두 가지 언어 메뉴를 추가할 수 있습니다. 재사용 가능한 블록은 저장되면 바로 다른 페이지에 추가할 수 있는데 일반 블록으로 변환하지 않아도 됩니다.
각 언어의 추가 페이지를 생성했는데 메뉴에 추가해야 하나요? 걱정하지 마세요. 재사용 가능한 블록은 편집할 수 있으며, 추가된 모든 페이지에서 업데이트됩니다. 자세한 내용은 여기에서 알아볼 수 있습니다.
지원 