워드프레스에 구글 번역기를 달자

  • 네이버 블로그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 카카오스토리 공유하기

WordPress에 GTranslate 플러그인을 이용하면 워드프레스 사이트를 다국어 사이트로 변모시킬 수 있습니다. GTranslate는 구글 번역기를 사용하여 웹 콘텐츠를 103개 언어(version 2.8.35 기준)로 번역해준다고 하니 대단하지 않나요? 물론 번역의 질에 대해서는 장담할 수 없지만, 그래도 없는 것보다는 나을 것 같습니다.

2018년 11월 5일 업데이트: GTranslate가 이 글을 작성할 때마다 기능이 많이 개선되었습니다. 최신 버전에 대한 내용을 "기능이 개선된 GTranslate 구글번역기 플러그인"에서 확인해볼 수 있습니다.

참고로 GTranslate와 같은 자동 번역 플러그인은 번역된 문서에 대하여 고유주소를 생성하지 않으므로 SEO에 아무런 역할을 하지 못합니다. 즉, 번역된 문서는 검색엔진에 검색이 되지 않습니다. SEO를 생각한다면 유명한 WPML 같은 플러그인을 사용하여 다국어 사이트를 만들고 직접 혹은 전문 번역가를 통해 번역하면 더 좋은 결과를 얻을 수 있을 것 같습니다.

워드프레스 다국어 번역 플러그인 WPML

먼저 플러그인 메뉴에서 GTranslate를 설치합니다. 그런 다음 설정 > GTranslate에서 Translation Method[번역 방식]를 Google Default로 바꾸고 그 외에 필요한 설정(가령 Default Language[기본 언어] 등)을 변경한 후에 "변경 사항 저장"을 눌러 저장합니다.

GTranslate settings이제 외모 > 위젯으로 이동하여 GTranslate 위젯을 원하는 위젯 영역에 배치하시면 됩니다. 하지만 여기서 문제가 고민하는 분들이 있으리라 생각됩니다. 적절한 위젯 영역이 없다면? 아래 그림과 같이 메뉴바에 배치하고 싶거나 헤더 영역에 배치하고 싶은 경우에는 어떻게 하면 될까요?

여러 가지 방법을 생각할 수 있는데요. 가령 원하는 곳에 위젯 영역을 만들어서 위치시키는 법이 있습니다(위젯 영역을 만드는 방법은 여기를 참조하시기 바랍니다). 여기서는 header.php 파일을 수정하여 배치하는 방법을 생각해볼까  합니다.

GTranslate positioned at Menu bar

방법은 의외로 간단합니다. header.php 파일을 수정하는 방법은 외모 > 편집기 (혹은 테마 편집기)에서 수정하거나 ftp 사이트에 접속하여 수정하는 방법이 있습니다. 어느 방법이든 편한 방법을 이용하시면 되겠습니다. GTranslate를 직접 php 파일에 삽입하려면 GTrnaslate 쇼트코드를 이용하여 php에서 인식할 수 있는 형태로 바꾸어 삽입하면 됩니다. 아래 그림에 보이는 코드를 header.php에서 적절한 위치에 삽입합니다.

GTranslate shortcode in php저는 navigation bar가 끝나는 위치에 위의 코드를 삽입하고 css를 통해 위치를 조정했습니다.

다음과 비슷한 형식으로 GTranslate 아이콘의 위치를 조정하시면 될 것입니다.

 .mycustom_gtranslate_icon {
 float: right;
 margin-top: -5px;
 margin-right: 5px;
 }

숫자 등을 적절히 조정하면서 원하는 위치를 찾으면 위의 그림에 나와 있듯이 메뉴 바 옆에 GTranslate 아이콘이 자리잡게 됩니다. 이제 GTranslate 플러그인으로 전세계 사람들이 볼 수 있는 사이트를 만들어보시기 바랍니다.

업데이트: 메뉴 옆에 추가하는 방법으로는 간단하게 wp_nav_menu_items 필터를 사용하면 좋을 듯합니다(참고). 예를 들어, 다음과 비슷한 코드가 가능할 것 같습니다.

add_filter( 'wp_nav_menu_items', 'wti_gtranslate_menu_link', 10, 2 );

function wti_gtranslate_menu_link( $items, $args ) {
if ($args->theme_location == 'primary') {
$items .= '<li class="right"><?php echo do_shortcode( '[[GTranslate]]' ); ?></li>'; // GTranslate 숏코드
}
return $items;
}

위의 코드는 테스트를 하지 않았기 때문에 제대로 작동할지는 장담할 수 없습니다. classtheme_location은 적절히 수정하셔야 합니다.

그리고 다음 예제는 검색 폼 대신 Granslate 숏코드를 대체한 경우입니다.

<ul class="clearfix">
<?php wp_nav_menu(array('container'=>false,'theme_location'=>'topnav','fallback_cb'=>'nav_fallback','items_wrap'=>'%3$s')); ?>
<li class="searchform"><?php echo do_shortcode( '[[GTranslate]]' ); ?></li>
</ul>

상황에 따라 다양한 방식으로 추가할 수 있습니다.

자동 번역 플러그인과 관련된 주의 사항

추가: 자동 번역 플러그인을 달면 번역된 페이지에 고유 URL이 부여되지 않으므로 검색에 노출되지 않아 SEO 측면에서 바람직하지 않습니다(Hackya 사이트의 "SEO 와 다국어, UI 스터디 (XE 쓰면 망하는 겁니다.)" 글 참고).

가급적이면 WPML과 같은 플러그인을 사용하여 다국어를 구축하면 검색 엔진에 노출될 가능성이 높아져 SEO에 유리합니다. 자세한 내용은 이 글을 참고해보세요.

참고

한국어나 다른 언어를 여러 언어(예: 중국어, 일본어, 타갈로그어, 스리랑카어, 파키스탄어, 아랍어, 독일어, 러시아어, 힌디어, 인도네시아어, 베트남어, 캄보디아어, 몽골어, 터키어, 네덜란드어, 뱅갈어, 우르두어, 그리스어, 프랑스어, 이탈리아어, 크로아티아어, 슬로베니아어, 세르비아어, 덴마크, 스페인어, 포르투갈어, 기타 등등)로 번역하려는 경우나 특수 언어로 번역하려는 경우 "괜찮은 다국어 번역 서비스 추천" 글을 참고해보시기 바랍니다.



2 개 댓글

  1. <a class="assistive-text" href="#content" title="">

    'primary', 'menu_id' => 'menu-top', 'menu_class' => 'nav-menu' ) ); ?>

    이 곳에 추가?

    위와 같이 추가하니까 안되는데, 혹시 가르쳐 주실 수 있을까요?
    우연히 운영자님과 같은 테마라서 이렇게 여쭙니다.
    시간되시면 답변 좀 부탁드릴께요..

    응답
    • 안녕하세요?

      제 블로그를 방문해주셔서 감사합니다.

      저는 다음 문구 다음에 추가했습니다.

      <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_id' => 'menu-top', 'menu_class' => 'nav-menu' ) ); ?>
      </nav>

      응답