WPML은 사용하기 쉬운 언어 전환기를 제공하지만 모든 페이지에 표시하고 싶지 않을 때가 있습니다. 특정 페이지에서만 표시하거나 숨기는 방법을 알아보세요.
몇 줄의 CSS를 사용하여 이 작업을 쉽게 수행할 수 있습니다.
특정 페이지에만 언어 전환기 표시
1단계: 모든 페이지에서 언어 전환기 숨기기
먼저 언어 전환기가 어떤 클래스를 사용하는지 확인해야 합니다.
브라우저의 개발자 도구를 사용하여 이를 확인할 수 있습니다:
- 사이트의 프런트엔드에 접속한 다음 키보드에서 F12 키를 누르세요.
- “검사” 도구를 사용하여 언어 전환기를 선택하면 해당 HTML 마크업이 나타납니다.
언어 전환기에 사용되는 두 가지 일반적인 클래스는 다음과 같습니다:
- 전환기가 메뉴에 표시될 때: wpml-ls-menu-item 클래스
- 전환기가 푸터에 표시될 때: wpml-ls 클래스
올바른 클래스를 확인한 후 외모 → 사용자 정의 페이지로 이동하여 추가 CSS를 클릭하고 다음 CSS를 웹사이트에 추가하세요.
메뉴 언어 전환기 숨기기
/*Hide menu Language Switcher*/
.wpml-ls-menu-item {
visibility: hidden !important;
}
/*Hide footer Language Switcher*/
.wpml-ls {
visibility: hidden !important;
}이렇게 하면 모든 페이지에서 언어 전환기가 숨겨집니다.
또는 테마의 style.css 파일에 이러한 스타일 지정 규칙을 추가할 수 있지만 반드시 자식 테마를 사용해야 합니다. 그렇지 않으면 테마를 업데이트할 때 사용자 정의 스타일이 손실됩니다.
언어 전환기 CSS 클래스에 대한 자세한 내용은 언어 전환기의 CSS 스타일 지정 페이지를 참조하세요.
2단계: 특정 페이지에 언어 전환기 표시
다음 단계에서는 원하는 페이지에만 언어 전환기를 표시하도록 또 다른 CSS 스니펫을 추가해야 합니다.
WordPress는 각 페이지의 body 태그에 특정 클래스를 자동으로 추가합니다. 이를 통해 특정 페이지의 언어 전환기를 대상으로 지정할 수 있습니다.
클래스를 찾으려면 프런트엔드에서 언어 전환기를 표시할 페이지를 여세요. 다시 브라우저 검사 도구를 사용하여 body 태그를 검색하세요.
다음과 같은 내용이 표시됩니다:
id 클래스 찾기
<body class="page-template-default page page-id-2 logged-in admin-bar wp-embed-responsive is-light-theme singular has-main-navigation customize-support">
이 경우 page-id-2 클래스는 이 특정 페이지에만 추가됩니다. 이 숫자는 이 페이지의 ID를 나타내며 이를 사용하여 스니펫을 작성할 수 있습니다.
전체 스니펫은 다음과 같습니다:
메뉴 언어 전환기 숨기기 – 전체
/*Hide menu Language Switcher*/
.wpml-ls-menu-item {
visibility: hidden !important;
}
/*Hide footer Language Switcher*/
.wpml-ls {
visibility: hidden !important;
}
/*Display Language Switcher only in the page with ID 2*/
body.page-id-2 .wpml-ls-menu-item {
visibility: visible !important;
}
body.page-id-2 .wpml-ls {
visibility: visible !important;
}page-id-2 클래스를 내 페이지의 클래스로 교체하는 것을 잊지 마세요.
사용할 수 있는 특정 클래스 중 일부는 다음과 같습니다:
- page-id-X: 페이지에 사용됨(X를 페이지의 ID로 교체)
- postid-X: 글에 사용됨(X를 글의 ID로 교체)
- home: 홈페이지에 사용됨
- single-post: 모든 글에 사용됨(특정 글 아님)
- page: 모든 페이지에 사용됨(특정 페이지 아님)
특정 페이지에서만 언어 전환기 숨기기
특정 페이지에서 언어 전환기를 숨기는 것은 이전 단계와 매우 비슷합니다. 하지만 모든 페이지에서 숨기는 대신 특정 페이지에서만 숨깁니다.
이때는 해당 페이지의 특정 클래스를 확인한 다음, 그 클래스로 해당 페이지의 언어 전환기를 숨기기만 하면 됩니다.
CSS 스니펫은 다음과 같아야 합니다:
ID가 2인 페이지에서만 언어 전환기 숨기기
/*Hide Language Switcher only on the page with ID 2*/
/*Menu Language Switcher*/
body.page-id-2 .wpml-ls-menu-item {
visibility: hidden !important;
}
/*Footer Language Switcher*/
body.page-id-2 .wpml-ls {
visibility: hidden !important;
}page-id-2 클래스를 특정 클래스로 교체하는 것을 잊지 마세요.