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