탐색 건너뛰기
Home » 사용자 지정 언어 전환기

사용자 지정 언어 전환기

WPML 다국어 사이트를 개발할 때는 사용자 정의 언어 전환기가 필요할 수 있습니다. 간단한 PHP와 CSS로 이 작업을 수행하는 방법을 알아보세요.

WPML 사용하면 사용자 정의 옵션과 기본 제공 플래그가 포함된 사이트 편집기(이전의 전체 사이트 편집)를 사용하여 메뉴, 위젯, 바닥글 및 사이트에 언어 전환기를 추가할 수 있습니다. 하지만 사이트에 더 특별한 것이 필요할 수도 있습니다.

이 튜토리얼에서는 플로팅 언어 스위처를 추가하는 방법을 보여 드리겠습니다. 플로팅 언어 전환기는 보기에도 좋고 고객이 자신의 언어로 사이트를 더 쉽게 볼 수 있게 해줍니다.

플로팅 언어 스위처를 사용하는 사이트

다음 세 가지 주요 단계를 따르세요:

  1. 언어 전환기를 렌더링하는 PHP 코드를 추가합니다.
  2. CSS로 언어 전환기 스타일 지정
  3. 언어 전환기 설정 업데이트

PHP 부분

첫 번째 단계는 페이지에 언어 전환기 렌더링을 담당하는 PHP 코드를 추가하는 것입니다. 이를 위해 언어 전환기가 있는 div 컨테이너를 추가하는 함수를 만들면 됩니다. 우리는 언어 전환기를 렌더링하는 wpml_add_language_selector 액션을 추가합니다.

이 예제에서는 새 언어 전환기를 바닥글에 표시하고 싶으므로 새 함수를 WordPress 자체 wp_footer 후크와 함께 사용합니다.

전체 PHP 코드는 다음과 같습니다.

Language switcher PHP 
//WPML - Add a floating language switcher to the footer
 add_action('wp_footer', 'wpml_floating_language_switcher'); 
 
 function wpml_floating_language_switcher() { 
    echo '<div class="wpml-floating-language-switcher">';
        //PHP action to display the language switcher (see https://wpml.org/documentation/getting-started-guide/language-setup/language-switcher-options/#using-php-actions)
        do_action('wpml_add_language_selector');
    echo '</div>'; 
}

복사하여 (하위) 테마의 functions.php 파일에 추가할 수 있습니다.

스타일링 부분

이전 코드를 적용하여 이미 웹사이트 바닥글에 새로운 언어 전환기를 추가했습니다. 이제 웹사이트의 오른쪽 하단에 표시되도록 사용자 정의할 차례입니다. 위치: 고정 CSS 속성을 사용하여 이 작업을 수행할 수 있습니다.

다음 단계에 따라 CSS 코드를 추가합니다:

  1. WPML → 언어로 이동합니다.
  2. 언어 전환기 옵션까지 아래로 스크롤하여 추가 CSS 섹션을 펼칩니다.

또는 모양 → 사용자 정의 로 이동하여 추가 CSS를 클릭하여 이 CSS 코드를 추가할 수 있습니다.

다음 예제에서는 둥근 테두리 및 상자 그림자와 같은 몇 가지 추가 사용자 지정 기능을 추가합니다. 물론 원하는 대로 사용자 지정할 수 있습니다.

Language Switcher Styling 
/*Removing some default CSS from our language switcher*/
.wpml-floating-language-switcher .wpml-ls-statics-shortcode_actions {
  margin-bottom: 0;
}
 
.wpml-floating-language-switcher  .wpml-ls-statics-shortcode_actions a {
  background-color: transparent !important;
}
 
.wpml-floating-language-switcher .wpml-ls-legacy-list-horizontal a {
  padding: 5px;
}
 
 
/*Customize this if you want*/
.wpml-floating-language-switcher {
  position: fixed;
  bottom: 10px;
  right: 10px;
  background: #f8f8f8; /*background color*/
  border: 1px solid; /*border settings*/
  border-color: #eee; /*color of the border*/
  padding: 0px; /*padding of container*/
  border-radius: 6px; /*rounded border*/
  /*Box Shadow*/
  -webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
  -moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
  box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
}

설정 부분

마지막으로 언어 전환기에 플래그만 표시되도록 몇 가지 설정을 조정해야 합니다.

다음 단계를 따르세요:

  1. WPML → 언어로 이동합니다.
  2. 사용자 지정 언어 전환기까지 아래로 스크롤하여 사용을 클릭합니다.
  3. 사용자 지정 버튼을 클릭합니다.
  4. 언어 전환기에 포함할 항목에서 플래그를 선택하고 다른 옵션의 선택을 취소합니다.
  5. 저장을 클릭합니다.
Language switcher options
플로팅 언어 스위처에 플래그만 표시하기

그거예요! 이제 웹사이트에 멋진 사용자 정의 언어 전환기가 생겼을 것입니다:

Horizontal language switcher
프런트엔드의 언어 전환기

보너스: 수직 플로팅 언어 전환기

아래 스크린샷처럼 세로형 언어 전환기를 만들 수도 있습니다:

Vertical language switcher
수직 언어 전환기

이렇게 하려면 이전 CSS를 다음 코드로 바꾸면 됩니다:

Vertical Language Switcher CSS 
/*Removing some default CSS our language switcher*/
.wpml-floating-language-switcher .wpml-ls-statics-shortcode_actions {
  margin-bottom: 0;
}
 
.wpml-floating-language-switcher  .wpml-ls-statics-shortcode_actions a {
  background-color: transparent !important;
}
 
.wpml-floating-language-switcher .wpml-ls-legacy-list-horizontal a {
  padding: 5px;
}
 
.wpml-floating-language-switcher .wpml-ls-item {
  display: block;
}
 
/*Customize this if you want*/
.wpml-floating-language-switcher {
  position: fixed;
  bottom: 20px;
  right: 0px;
  background: #f8f8f8; /*background color*/
  border: 1px solid; /*border settings*/
  border-color: #eee; /*color of the border*/
  padding: 0px; /*padding of container*/
  border-radius: 6px 0 0 6px; /*rounded border*/
  /*Box Shadow*/
  -webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
  -moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
  box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
  z-index: 999;
}