사용자 정의 언어 전환기

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

WPML을 사용하면 메뉴, 위젯, 푸터는 물론 사이트 에디터(이전의 전체 사이트 편집)를 사용하는 사이트에도 언어 전환기를 추가할 수 있고, 사용자 정의 옵션과 기본 제공 국기도 함께 제공됩니다. 하지만 사이트에 더 특별한 것이 필요할 수 있습니다.

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

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

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

PHP 부분

첫 번째 단계는 페이지에서 언어 전환기를 렌더링하는 PHP 코드를 추가하는 것입니다. 이를 위해 언어 전환기가 포함된 div 컨테이너를 추가하는 함수를 생성합니다. wpml_add_language_selector 작업을 사용하여 언어 전환기를 렌더링할 수 있습니다.

이 예에서는 새 언어 전환기가 푸터에 표시되기를 원하므로 WordPress 자체의 wp_footer 훅과 함께 새 함수를 사용합니다.

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

언어 전환기 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 파일에 추가할 수 있습니다.

스타일 지정 부분

위 코드를 적용하면 웹사이트의 푸터에 이미 새 언어 전환기가 추가되어 있습니다. 이제 웹사이트의 오른쪽 하단에 떠 있도록 사용자 정의할 차례입니다. position: fixed CSS 속성을 사용하여 이 작업을 수행할 수 있습니다.

다음 단계에 따라 CSS 코드를 추가하세요.

WPML → 설정 → 언어 전환기로 이동하세요.
언어 전환기 옵션 카드에서 추가 CSS를 확장하세요.

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

다음 예에서는 둥근 테두리, 상자 그림자 등 몇 가지 사용자 정의를 추가로 적용합니다. 물론 원하는 대로 사용자 정의할 수 있습니다.

언어 전환기 스타일 지정

/*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);
}

설정 부분

마지막으로 언어 전환기에 국기만 표시되도록 일부 설정을 조정해야 합니다.

다음 단계를 따르세요.

WPML → 설정 → 언어 전환기 → 사용자 정의 언어 전환기로 이동하세요.
사용자 정의 언어 전환기로 스크롤하여 활성화를 클릭하세요.
사용자 정의 버튼을 클릭하세요.
언어 전환기에 포함할 항목 아래에서 국기는 선택한 상태로 두고 모국어 이름, 현재 언어로 된 언어 이름 및 현재 언어의 선택을 취소하세요.
저장을 클릭하세요.

이것으로 끝입니다! 이제 웹사이트에 멋진 사용자 정의 언어 전환기가 표시됩니다.

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

아래 스크린샷과 같이 세로 언어 전환기를 대신 생성할 수도 있습니다.

이를 위해 이전 CSS를 다음 코드로 바꾸기만 하면 됩니다.

세로 언어 전환기 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;
}